+ Reply to Thread
Results 1 to 7 of 7

Thread: Change styles onclick

  1. #1
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    Change styles onclick

    Okay, I need some help here. I need to change the css style from "off" to "on" when clicked. I also need to change all other styles to "off" if they are currently "on" (only 1 will be on at a time).

    Here is my div layout:

    Code:
    	<div class="nav-buttons">
    	  <ul>
    	    <li class="first"><a href="#" class="nav-product-details-on"></a></li>
    	    <li><a href="#" class="nav-guides-literature-off"></a></li>
    	    <li><a href="#" class="nav-markets-off"></a></li>
    	    <li><a href="#" class="nav-photo-gallery-off"></a></li>
    	  </ul>
    	</div>
    
    It doesn't matter what the classes are called, they just need to be uniquely identified because of different widths. Basically, I am adding a "-on" and "-off" to the end of each class name to identify that it is active or not. Only one of the elements can be "on" at a time.

    Also, here is some JavaScript that I tried to implement with no luck:

    Code:
    // -- Hide All Div Layers --
    function hideDivsHome() {
    	var divs = document.getElementsByTagName('a');
    	for (var i=0; i < divs.length; i++) {
    		var myCell = "nav-" + divs[i].class;
    
    		if (document.getElementById) {
    			divs[i].style.display = "none";
    			var oCell = document.getElementById("nav-" + divs[i].class);
    			if (oCell)
    				oCell.className = "homeNavNonActive";
    		}
    		else if (document.all) {
    			document.all[divs[i]].style.display = "none";
    			var oCell = document.all("nav-" + divs[i].id);
    			if (oCell)
    				oCell.className = "homeNavNonActive";
    		}
    		else if (document.layers) {
    			document.layers[divs[i]].display = "none";
    			var oCell = document.layers("nav-" + divs[i].class);
    			if (oCell)
    				oCell.className = "homeNavNonActive";
    		}
    	}
    }
    
    
    
    
    // ***** SHOW SELECTED DIV LAYER *****
    function showDivHome(whichLayer) {
    	var myCell = whichLayer + "_cell";
    
    	if (document.getElementById) {
    		// this is the way the standards work
    		document.getElementById(whichLayer).style.display = "block";
    		document.getElementById(myCell).className = "homeNavActive";
    	}
    	else if (document.all) {
    		// this is the way old msie versions work
    		document.all[whichlayer].style.display = "block";
    		document.all[myCell].className = "homeNavActive";
    	}
    	else if (document.layers) {
    		// this is the way nn4 works
    		document.layers[whichLayer].display = "block";
    		document.layers[myCell].className = "homeNavActive";
    	}
    }
    
    Last edited by BLaaaaaaaaaarche; July 18th, 2008 at 09:03 AM.
    "You'll never be as perfect as BLaaaaaaaaarche."

  2. #2
    The Barnfather jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead's Avatar
    Join Date
    Mar 2008
    Location
    Washington, D.C.
    Posts
    2,347
    Blog Entries
    9
    Rep Power
    19

    How are you calling the JS functions?

    Can you plug everything in a sample HTML page for testing?
    jmurrayhead
    If you agree, give me rep. If my post helped you, click "Thanks".
    If you like it here...throw us a few bones to help support us.


  3. #3
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    I was calling the JS functions using onClick in the <a> tag.

    I have the page online, it is located here:

    FI-11 Electric Fan Page

    By the way, the JS functions you see were a modification to the functions located on our home page:

    http://www.emp-corp.com/
    "You'll never be as perfect as BLaaaaaaaaarche."

  4. #4
    The Barnfather jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead's Avatar
    Join Date
    Mar 2008
    Location
    Washington, D.C.
    Posts
    2,347
    Blog Entries
    9
    Rep Power
    19

    After I click a few links, I notice that a couple JavaScript errors occur:

    Line: 97
    Char: 1
    Error: Object Expected
    Code: 0
    and...
    Line: 98
    Char: 1
    Error: Object Expected
    Code: 0
    It only happens when I click Markets, Product Details and PhotoGallery. If you can figure out why there is an object expected it might help.
    jmurrayhead
    If you agree, give me rep. If my post helped you, click "Thanks".
    If you like it here...throw us a few bones to help support us.


  5. #5
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    The JavaScript I am using really does not pertain to this issue. It was for a previous application. It was more of an example of what I was using prior to this design.
    "You'll never be as perfect as BLaaaaaaaaarche."

  6. #6
    The Barnfather jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead has much to be proud of jmurrayhead's Avatar
    Join Date
    Mar 2008
    Location
    Washington, D.C.
    Posts
    2,347
    Blog Entries
    9
    Rep Power
    19

    Perhaps you can use the example here to do this: How to dynamically change an Elements Style by it's Class Attribute
    jmurrayhead
    If you agree, give me rep. If my post helped you, click "Thanks".
    If you like it here...throw us a few bones to help support us.


  7. #7
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    Okay, so I have come up with a solution to my problem. Here is the JavaScript that I came up with:

    Code:
    // -- Product Tab Hide/Show --
    function changeClass(currClass) {
    	var obj = document.getElementById('product-nav-buttons').getElementsByTagName('a');
    
    	for (var x=0; x < obj.length; x++) {
    		if (obj[x].className.search(/-on/) > -1) {
    			obj[x].className = obj[x].className.replace(/-on/, "-off");
    		} else if (obj[x].className == currClass) {
    			obj[x].className = obj[x].className.replace(/-off/, "-on");
    		}
    	}
    }
    
    // -- Hide Product Divs --
    function hideDivs() {
    	var divs = document.getElementById('content-wrapper').getElementsByTagName('div');
    
    	for (var i=0; i < divs.length; i++) {
    		if (divs[i].id.search(/nav-/) > -1) {
    			if (document.getElementById) {
    				divs[i].style.display = "none";
    			}
    			else if (document.all) {
    				document.all[divs[i]].style.display = "none";
    			}
    			else if (document.layers) {
    				document.layers[divs[i]].display = "none";
    			}
    		}
    	}
    }
    
    // -- Show Product Div --
    function showDiv(whichLayer) {
    	if (document.getElementById) {
    		// this is the way the standards work
    		document.getElementById(whichLayer).style.display = "block";
    	}
    	else if (document.all) {
    		// this is the way old msie versions work
    		document.all[whichlayer].style.display = "block";
    	}
    	else if (document.layers) {
    		// this is the way nn4 works
    		document.layers[whichLayer].display = "block";
    	}
    }
    
    The reason it is so custom is because I needed to have specific images that were stored in a class be turned "on" and "off". The way I designated this was with CSS classes:

    Code:
    #product-nav-buttons {
    	margin: 0;
    	padding: 0;
    	height: 56px;
    	background: transparent url('/site-layout/gfx/products/bg-product-information.gif') repeat 0 0;
    }
    #product-nav-buttons ul {
    	margin: 0;
    	margin-left: 10px;
    	padding: 0;
    }
    #product-nav-buttons ul li {
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    }
    #product-nav-buttons ul li a {
    	margin: 0;
    	margin-right: 5px;
    	padding: 0;
    	height: 47px;
    	display: block;
    	float: left;
    }
    #product-nav-buttons ul li a.nav-product-details-on {width: 106px; background: transparent url('/site-layout/gfx/products/btn-product-details-on.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-product-details-off {width: 106px; background: transparent url('/site-layout/gfx/products/btn-product-details-off.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-markets-on {width: 73px; background: transparent url('/site-layout/gfx/products/btn-markets-on.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-markets-off {width: 73px; background: transparent url('/site-layout/gfx/products/btn-markets-off.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-photo-gallery-on {width: 97px; background: transparent url('/site-layout/gfx/products/btn-photo-gallery-on.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-photo-gallery-off {width: 97px; background: transparent url('/site-layout/gfx/products/btn-photo-gallery-off.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-guides-literature-on {width: 125px; background: transparent url('/site-layout/gfx/products/btn-guides-literature-on.gif') repeat 0 0;}
    #product-nav-buttons ul li a.nav-guides-literature-off {width: 125px; background: transparent url('/site-layout/gfx/products/btn-guides-literature-off.gif') repeat 0 0;}
    
    Finally, the HTML code utilizing these to create the look:

    Code:
    <div id="product-nav-buttons">
      <ul>
        <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-product-details'); return false;" class="nav-product-details-on"></a></li>
        <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-markets'); return false;" class="nav-markets-off"></a></li>
        <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-guides-literature'); return false;" class="nav-guides-literature-off"></a></li>
        <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-photo-gallery'); return false;" class="nav-photo-gallery-off"></a></li>
      </ul>
    </div>
    
    "You'll never be as perfect as BLaaaaaaaaarche."

+ Reply to Thread

Similar Threads

  1. Change TextBox input language
    By dragon rider in forum JavaScript Programming
    Replies: 14
    Last Post: October 13th, 2008, 12:31 AM
  2. find words and change
    By todd2006 in forum JavaScript Programming
    Replies: 4
    Last Post: July 2nd, 2008, 09:58 AM
  3. Change to Reputation System
    By jmurrayhead in forum Announcements
    Replies: 0
    Last Post: June 2nd, 2008, 09:57 PM
  4. Display Radio Button Value onclick
    By theChris in forum JavaScript Programming
    Replies: 5
    Last Post: March 22nd, 2008, 02:28 PM

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

SEO by vBSEO