SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: changing Text

  1. #1
    SitePoint Enthusiast Zero G's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing Text

    Hello, I'm working on a photo gallery , a lot like the one at http://thesims.ea.com/us/index.html?...tar/index.html , I was hoping some of you could help me with a problem that I'm having...

    I want to change the caption when the user moves to the next photo. I have no clue how to o this without reloading the page and using a document.write to do it.

    BTW I only need to have this supported by IE5 and IE6 and it wont be on the web.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is now my favorite method of changing text, it uses the focus() command.
    People with JS disabled can also view it as it scrolls as well.....
    Code:
    <div id="scrollinglayer" style="width:200px; height:100px; overflow:scroll; overflow-x:hidden">
    <div id="firstdiv" style="position:relative; top:0px; left:0px; width:200px; height:100px">First division</div>
    <div id="seconddiv" style="position:relative; top:0px; left:0px; width:200px; height:100px">Second division</div>
    </div>
    <a href="javascript:firstdiv.focus()">firstdiv</a>
    <a href="javascript:seconddiv.focus()">seconddiv</a>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively, you can place the text in 'id'ed <span> tags and use the innerHTML DOM.

    Code:
    ...
    <script type="text/javascript">
    
    	var txtOne = 'cats chase mice'; // caption one
    	var txtTwo = 'dogs chase cats'; // caption two
    
    	function altTxt(txtVal) {
    	document.getElementById('txtcaption').innerHTML = txtVal;
    	}
    
    </script>
    </head>
    
    <body>
    <span id="txtcaption">Animals like to chase other animals</span>
    ...
    <a href="#" onclick="altTxt(txtOne)">Change the caption to option one</a><br />
    <a href="#" onclick="altTxt(txtTwo)">Change the caption to option two</a>
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you copy&pasted mine, remove the spaces between java and script on the last 2 hrefs.

    Does anyone know how cross-browser this method is?

    Or if its better with
    document.getElementById("object").focus()
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Markdidj, can post a link to a a working version?
    I don't quite understand how your focus() method actually changes text (or changes the text being displayed), so I would like to see it in action.

    TIA

    --

    fwiw, document.getElementById('objectid').focus() will always be preferable as it will be supported by all standards compliant browsers.

    I only ever dealt with W3C DOM since starting to get to grips with hand-coding, so I can't say for sure.

    That being said, the form as you've used it can be validly used within a function as in this example:
    Code:
    function focusMe() {
    var obj = document.getElementById('texter');
    obj.focus();
    }
    
    ...
    
    <a href="#" onclick="focusMe();">Focus texter</a><br /><br />
    <input type="text" id="texter" value="texter" size="30" />
    Afaik, using it directly in the event (as in your example) is almost certain to have support limitations associated with all proprietory methods.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Enthusiast Zero G's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot to both of you! I ended up going with Bills only because it was a little easier to follow what the code was doing and because this wouldn't be on anything but IE5 or IE6 so I didn't need to worry about cross browser compatibility. Thanks so much!

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj
    Does anyone know how cross-browser this method is?

    Or if its better with
    document.getElementById("object").focus()

    I tried it with document.getElementById() too and it failed to do anything in either Camino (Gecko) or IE5Mac.

    Markdidj, can you place a working version online that I can test against?
    TIA

    ---

    Zero G, fwiw, the method I gave is actually the most cross-browser compatible of the two offered here.
    Whilst using document.getElementById() with Markdidj's method should give it cross-browser DOM, it still failed to work.

    Until I see a fully working version, I'm actually quite sceptical about the focus() method working at all.
    (No offense meant, Markdidj. It's just that I am not aware that focus() can be used in that way to produce the results we are after.
    If it can be, then I can only assume that it is a 'bonus effect' in MSIE6/Win and not an intended use of the focus() method.)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •