DeveloperBarn Forums

DeveloperBarn

Programming & IT forum

Change styles onclick

This is a discussion on Change styles onclick within the JavaScript Programming forums, part of the Programming & Scripting category; Okay, I need some help here. I need to change the css style from "off" to "on" when clicked. I ...

Go Back   DeveloperBarn Forums > Programming & Scripting > JavaScript Programming

Change styles onclick Change styles onclick

Register FAQ Social Groups Calendar Search Today's Posts Mark Forums Read

Reply

 

LinkBack Thread Tools Display Modes
  #1  
Old July 18th, 2008, 09:01 AM
BLaaaaaaaaaarche's Avatar
Barn Frequenter
  
Join Date: Mar 2008
Posts: 157
Rep Power: 3
BLaaaaaaaaaarche will become famous soon enoughBLaaaaaaaaaarche will become famous soon enough
Default 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";
	}
}
__________________
"You'll never be as perfect as BLaaaaaaaaarche."
Last edited by BLaaaaaaaaaarche; July 18th, 2008 at 09:03 AM.
Reply With Quote
  #2  
Old July 18th, 2008, 09:21 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,964
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
How are you calling the JS functions?

Can you plug everything in a sample HTML page for testing?
__________________
jmurrayhead
If you agree with me... click the icon!
If my post solved your problem, click the button in the lower right-hand corner of the post.

If you like it here...throw us a few bones to help support us.

Join our Folding team: DeveloperBarn Folding
Reply With Quote
  #3  
Old July 18th, 2008, 09:28 AM
BLaaaaaaaaaarche's Avatar
Barn Frequenter
  
Join Date: Mar 2008
Posts: 157
Rep Power: 3
BLaaaaaaaaaarche will become famous soon enoughBLaaaaaaaaaarche will become famous soon enough
Default
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/
Reply With Quote
  #4  
Old July 18th, 2008, 10:13 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,964
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
After I click a few links, I notice that a couple JavaScript errors occur:

Quote:
Line: 97
Char: 1
Error: Object Expected
Code: 0
and...
Quote:
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.
Reply With Quote
  #5  
Old July 18th, 2008, 10:24 AM
BLaaaaaaaaaarche's Avatar
Barn Frequenter
  
Join Date: Mar 2008
Posts: 157
Rep Power: 3
BLaaaaaaaaaarche will become famous soon enoughBLaaaaaaaaaarche will become famous soon enough
Default
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.
Reply With Quote
  #6  
Old July 18th, 2008, 10:34 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,964
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
Perhaps you can use the example here to do this: How to dynamically change an Elements Style by it's Class Attribute
Reply With Quote
  #7  
Old July 22nd, 2008, 11:02 AM
BLaaaaaaaaaarche's Avatar
Barn Frequenter
  
Join Date: Mar 2008
Posts: 157
Rep Power: 3
BLaaaaaaaaaarche will become famous soon enoughBLaaaaaaaaaarche will become famous soon enough
Default
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>
Reply With Quote
The Following 2 Users Say Thank You to BLaaaaaaaaaarche For This Useful Post:
jmurrayhead (July 22nd, 2008), richyrich (July 22nd, 2008)
Reply

  DeveloperBarn Forums > Programming & Scripting > JavaScript Programming

Bookmarks

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads

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


All times are GMT -4. The time now is 02:38 AM.

Contact Us - DeveloperBarn.com - Top

Copyright ©2008-2010, DeveloperBarn

Content Relevant URLs by vBSEO 3.3.2