SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  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 thought I could get away with hiding all the elements and then let them be shown by clicking the colour buttons, however the client doesn't like the fact that they flash on first and then disappear. Is there anyway I can just show the first table (the red table) as default.

    This is the page link:

    http://www.pjcolours.com/products/

    Here is the 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 = nav.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);
    Thanks in advance.

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Afternoon Nick

    In your markup add:
    <div id="red" class="swatches" style="display: none;">
    as it will then be overridden by the DOM script

    (Yes I know it's inline!!)
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate.

    Don't forget that function.

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    working on it now!!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks.

    BTW, check BC for me.


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
  •