SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide - Show Default.

    Hi,

    I am trying to use Javascript to show/hide sections. Now I have two issues.

    1. All the sections I am hiding are displaying first and then vanishing. I don't want that to happen.

    2. I need the first section to be displayed by default.

    Here is my javascript code:

    Code:
    function addLoadEvent(func) {
    	var oldonload = window.onload;
    	if (typeof window.onload != 'function') {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			oldonload();
    			func();
    		}
    	}
    }
    
    function showTable(id) {
    	var divs = document.getElementsByTagName("div");
    	for (var i=0; i<divs.length; i++ ) {
    		if (divs[i].className.indexOf("swatches") == -1) continue;
    		if (divs[i].getAttribute("id") != id) {
    			divs[i].style.display = "none";
    		} else {
    			divs[i].style.display = "block";
    		}
    	}
    }
    
    function prepareColourSelector() {
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	if (!document.getElementById("colourSelector")) return false;
    	var nav = document.getElementById("colourSelector");
    	var links = colourSelector.getElementsByTagName("a");
    	for (var i=0; i<links.length; i++ ) {
    		var sectionId = links[i].getAttribute("href").split("#")[1];
    		if (!document.getElementById(sectionId)) continue;
    		document.getElementById(sectionId).style.display = "none";
    		links[i].destination = sectionId;
    		links[i].onclick = function() {
    			showTable(this.destination);
    			return false;
    		}
    	}
    }
    
    addLoadEvent(prepareColourSelector);
    This is my markup:

    Code:
    <ul id="colourSelector">
    <li>Colour Selector</li>
    <li class="redBtn"><a href="#red">Red</a></li>
    <li class="yellowBtn"><a href="#yellow">Yellow</a></li>
    <li class="brownBtn"><a href="#brown">Brown</a></li>
    <li class="greenBtn"><a href="#green">Green</a></li>
    <li class="blueBtn"><a href="#blue">Blue</a></li>
    <li class="blackBtn"><a href="#black">Black</a></li>
    </ul>
    
    <div id="red" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj125.png" /></td>
    <td>PJ125</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj126.png" /></td>
    <td>PJ126</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td class="dot"></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj130.png" /></td>
    <td>PJ130</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td class="dot"></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj140.png" /></td>
    <td>PJ140</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj180.png" /></td>
    <td>PJ180</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    
    <div id="yellow" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj248.png" /></td>
    <td>PJ248</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj917.png" /></td>
    <td>PJ917</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj920.png" /></td>
    <td>PJ920</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td class="dot"></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj4960.png" /></td>
    <td>PJ4960</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj913.png" /></td>
    <td>PJ913</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    
    <div id="brown" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj610.png" /></td>
    <td>PJ610</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj660.png" /></td>
    <td>PJ660</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj686.png" /></td>
    <td>PJ686</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj740.png" /></td>
    <td>PJ740</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj753.png" /></td>
    <td>PJ753</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    
    <div id="green" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/grn01.png" /></td>
    <td>GRN01</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/grn03.png" /></td>
    <td>GRN03</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/grn10.png" /></td>
    <td>GRN10</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/grn59.png" /></td>
    <td>GRN59</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    
    <div id="blue" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj501.png" /></td>
    <td>PJ501</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj513.png" /></td>
    <td>PJ513</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj529.png" /></td>
    <td>PJ529</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj539.png" /></td>
    <td>PJ539</td>
    <td class="dot"></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    
    <div id="black" class="swatches">
    <table class="colourSelector">
    <thead>
    <tr>
    <th class="colourCol">Colour</th>
    <th>Code</th>
    <th class="dots">Powder</th>
    <th class="dots">Liquid</th>
    <th class="dots">Granule</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj318.png" /></td>
    <td>PJ318</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj378.png" /></td>
    <td>PJ378</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj375.png" /></td>
    <td>PJ375</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td class="dot"></td>
    </tr>
    <tr>
    <td><img src="http://test.nicktoye.co.uk/bzmarketing/pjcolours/workspace/swatches/pj394.png" /></td>
    <td>PJ394</td>
    <td class="dot"></td>
    <td class="dot"></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <p>4% in White Cement</p>
    </div>
    Can anyone help? I would appreciate it.

  2. #2
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want the first one to be displayed by default, don't hide the first one when you set it all up. Simply iterate from links[1] and not from links[0]:
    Code:
    for (var i=1; i<links.length; i++ ) {
      ...

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks, what about the flicker when all sections flash up initially.

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also when I then try and click on the first link, nothing happens it won't show that section.

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason for the flicker is because you're showing them first, and not hiding them until after the window's 'load' event fires. (hence addLoadEvent). There are a few things you need to consider for solving this. There is an easy way, to simply add 'display:none' to those elements you want to hide - either by an inline style, or setting a classname that has display:none as a declaration within the rule. Eg:

    Code:
    <style>
    .item {
      display: none;
    }
    .active {
      display: block;
    }
    </style>
    .
    .
    .
    <div class="item active"> foo </div>
    <div class="item"> bar </div>
    <div class="item"> baz </div>
    The problem with this approach is that if someone turns off JavaScript, they have no access to the hidden content. However that can be solved for as well with a noscript tag as a fallback. The revised css would look like this:

    Code:
    .item {
      display: none;
    }
    .active {
      display: block;
    }
    </style>
    <noscript>
      <style>
        .item {
          display: block;
        }
      </style>
    </noscript>
    Now you don't need to bother hiding the content after the page loads. You've simply done it with just CSS. Be sure to still add the toggling behavior though. That's the whole point

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well isn't the toggling behaviour already baked into the javascript?

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I had some issues with specificity so I had to add !important to the block rule in the css, and I also had to add !important to the none and block rule in the js. Works now though.

  9. #9
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is no toggle function in JavaScript by default. Here is a simple one however.

    Code:
    function toggle() {
      for (var i=0, el; el = document.getElementById(arguments[i]); i++) {
        el.style.display = (el.style.display != 'none' ? 'none' : '' );
      }
    }
    To toggle anything, just pass in as many id's as you want. Literally, go nuts.

    Code:
    toggle('example-1', 'example-2', 'header', 'footer');

  10. #10
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, because at the moment, my css method isn't working in Firefox.

  11. #11
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have this in the css:

    div.swatches {
    display: none;
    float: left;
    margin-bottom: 40px;
    }

    div#red.swatches {
    display: block !important;
    }

    That in Safari allows me to show the red table as default, but the javascript isn't overriding the css for Firefox.

    Any ideas? I'm stressed here because this has to be out today. So if anyone can help me, I'll be eternally grateful.

  12. #12
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div#red.swatches
    If you have the swatches class name always present, your element will 'always' be display: block because of the important declaration. You should change your css around like this:

    Code:
    #my-element {
      float: left;
      margin-bottom: 40px;
    }
    .active {
      display: block;
    }
    .inactive {
      display: none;
    }
    Then just toggle your class names on 'my-element'

  13. #13
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, not with you.

    .inactive? I don't have that in the JS, and my-element?

    I'm very much a beginner with JS. Not asking for you to do it for me, I need to learn, but could you explain what you mean by toggle my-element?

  14. #14
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.dustindiaz.com/basement/s...-defaults.html
    -view source-
    You can see that you have normal items, and set the one you want shown by default as 'active'

  15. #15
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I see that. What I have now is actually working fine, apart from that I need to show the first section by default.

    http://test.nicktoye.co.uk/bzmarketi...ours/products/

  16. #16
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, this is now breaking in IE6. Is there any reason why that may be happening? Apart from IE6 being crap. The error I have been getting is to do with the display property.

  17. #17
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's probably because IE doesn't support doing this sort of thing:
    Code:
    div#red.swatches
    i.e. referencing multiple class names or a class and ID of the same element. It would also not support this for instance:
    Code:
    .red.swatches
    Perhaps you'll have to do this:
    Code:
    div .swatches
    though that might cause specificity issues.

  18. #18
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that could well be it.

  19. #19
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need it to be div#red, because that's the anchor.

  20. #20
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to use
    Code:
    .swatches {display:none;}
    div#red {display:block;}
    as the id is more specific than the class

  21. #21
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andy wrote an article a while back on specificity wars - that will come in handy deciphering what selector will trump another.

  22. #22
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really should print that and laminate it on my wall.


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
  •