SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Location
    san francisco
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy javascript + css to show/hide <div>

    i just wrote my first script (yay!). it's a little click-thru sequence that hides content in a <div>, then reveals the next step when user clicks 'next'

    seems to be working but... i just want to be sure it's kosher before implementing it.

    also -- do i need to preload images? if yes -- how? thanks SOO much!!

    this is the script:

    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>


    and for each div i have something like this (except the 1st one has style=" display:block")


    <div id="image2" style="display:none;" >
    <img src="http://grannysez.info/images/Granny-knits-purple.jpg" >

    <br><br>

    <a href="javascript:HideContent('image2');ShowContent('image1')">
    previous
    </a>
    /
    <a href="javascript:HideContent('image2');ShowContent('image3')">
    next
    </a>
    </div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    There are a couple of issues, to do with the html.
    Here is what you should have.

    Code html4strict:
    <div id="image2">
    <img src="http://grannysez.info/images/Granny-knits-purple.jpg" >
    <br><br>
    <a href="#image1">previous</a>
    /
    <a href="#image3">next</a>
    </div>

    It is from that base, which is guaranteed to work without css or javascript, that you then build on top of, to achieve your end result.

    For example, and the end of the body you can hide the image2 section with

    Code javascript:
    var image2 = document.getElementById('image2');
    image2.style.display = 'none';

    And you can assign the scripted functions to the links as follows

    Code javascript:
    var links = image2.getElementsByTagName('a');
    links[0].onclick = function () {
        HideContent('image2');
        ShowContent('image1');
    }
    links[1].onclick = function () {
        HideContent('image2');
        ShowContent('image3');
    }

    Then the HideContent() and ShowContent() functions just need to return false, to prevent the default action from taking place. That default action being important when there is no javascript.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If you want to get clever about it you could use this.href to get the '#image2' value then use some simple string manipulation to create the appropriate 'image1' and 'image3' values, but that's extra for later on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Apr 2008
    Location
    san francisco
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    confused

    thanks for taking the time to reply -- but i think my head just exploded.

    i'm so new at this & none of it makes much sense; wholly unsure what to do with the code you supplied...

    this threw me:

    'For example, and the end of the body you can hide the image2 section with: ...'


    are the bits of code you showed 2 separate functions?

    thanks :L)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    They aren't separate functions. They were only separated to allow comments about them. How I would do it is something like what follows:

    Code javascript:
    (function () {
        var index = 1;
        image = document.getElementById('image'+index);
        while (image) {
            document.getElementById(image).style.display = 'none';
            var links = image.getElementsByTagName('a');
            // attach events to elements here
            ...
            // get ready for next loop
            index++;
            image = document.getElementById('image'+index);
        }
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Apr 2008
    Location
    san francisco
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for saving 'getting clever' for a later date....not feeling so genius @present.

    i used the first 2 snippets you posted & was able to get a sequence to work -- sort of.

    trouble: the "next / previous" disappears after the first click, leaving the user no way to further advance/retreat thru rest of the sequence.

    if you're still willing to hand-hold me thru this, here's an example of what i'm *trying* to accomplish:

    near bottom of page "A Tale of Two Pets"

    -> http://www.castorpolluxpet.com/our_story <-

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If you can please provide a link to a page with the updated code, I'll help you further from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Apr 2008
    Location
    san francisco
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i'm trying to accomplish, but using a more legitimate method:

    http://www.k9-adventure.com/js/more123.html


    this is what sorry thing i came up with trying to use your suggestions (not the fault of your code - surely!):

    http://www.k9-adventure.com/js/123.html

    thanks again...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here we go, this function should do the job just nicely.

    Please don't forget to place the functions after the elements on the page. This is best achieved by putting the script at the end of the body.

    Code javascript:
    (function () {
        var idPart = 'image';
        var index = 1;
        image = document.getElementById(idPart + index);
        while (image) {
    		if (index !== 1) {
    			image.style.display = 'none';
    		}
    		// attach onclick event
    		image.onclick = function (e) {
    			e = e || window.event;
    			link = e.target || window.srcElement;
    			// get fragment identifier
    			var fragId = link.getAttribute('href');
    			var target = '';
    			if (fragId) {
    				this.style.display = 'none';
    				target = fragId.substring(1);
    				document.getElementById(target).style.display = '';
    				return false;
    			}
    		};
            // get ready for next loop
            index++;
            image = document.getElementById(idPart + index);
        }
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here is the full test code.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    </head>
    <body>
     
    <div id="image1">
    <img src="http://www.k9-adventure.com/js/1.gif" >
    <br><br>
    <a href="#image2">next</a>
    </div>
     
    <div id="image2">
    <img src="http://www.k9-adventure.com/js/2.gif" >
     
    <br><br>
    <a href="#image1">previous</a>
    /
    <a href="#image3">next</a>
    </div>
     
    <div id="image3">
    <img src="http://www.k9-adventure.com/js/3.gif" >
    <br><br>
    <a href="#image2">previous</a>
    </div>
    <script>
    (function () {
        var idPart = 'image';
        var index = 1;
        image = document.getElementById(idPart + index);
        while (image) {
    		if (index !== 1) {
    			image.style.display = 'none';
    		}
    		// attach onclick event
    		image.onclick = function (e) {
    			e = e || window.event;
    			link = e.target || window.srcElement;
    			// get fragment identifier
    			var fragId = link.getAttribute('href');
    			var target = '';
    			if (fragId) {
    				this.style.display = 'none';
    				target = fragId.substring(1);
    				document.getElementById(target).style.display = '';
    				return false;
    			}
    		};
            // get ready for next loop
            index++;
            image = document.getElementById(idPart + index);
        }
    })();
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •