Register Blogs FAQ Awards Members List Calendar Search Today's Posts Mark Forums Read

Go Back   DeveloperBarn Forums > Programming & Scripting > JavaScript Programming
Reload this Page Change styles onclick

Sponsored Links

Discuss "Change styles onclick" in the JavaScript Programming forum.

JavaScript Programming - Javascript is a cross-browser client-side scripting language. Discuss Javascript and AJAX related scripts here.


Reply « Previous Thread | Next Thread »  
 
LinkBack Thread Tools Display Modes
  #1  
Old July 18th, 2008, 09:01 AM
BLaaaaaaaaaarche's Avatar
Administrator


  
Join Date: Mar 2008
Posts: 55
Thanks: 10
Thanked 7 Times in 5 Posts
Rep Power: 1
BLaaaaaaaaaarche is on a distinguished road

Awards Showcase
HTML & CSS Classic ASP 
Total Awards: 2

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
Sponsored Links
  #2  
Old July 18th, 2008, 09:21 AM
jmurrayhead's Avatar
The Barnfather

  
Join Date: Mar 2008
Location: Reston, VA, USA
Posts: 820
Thanks: 20
Thanked 74 Times in 71 Posts
Blog Entries: 5
Rep Power: 3
jmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura about

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

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.

Join our Folding team: DeveloperBarn Folding
Reply With Quote
  #3  
Old July 18th, 2008, 09:28 AM
BLaaaaaaaaaarche's Avatar
Administrator


  
Join Date: Mar 2008
Posts: 55
Thanks: 10
Thanked 7 Times in 5 Posts
Rep Power: 1
BLaaaaaaaaaarche is on a distinguished road

Awards Showcase
HTML & CSS Classic ASP 
Total Awards: 2

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
Location: Reston, VA, USA
Posts: 820
Thanks: 20
Thanked 74 Times in 71 Posts
Blog Entries: 5
Rep Power: 3
jmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura about

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

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
Administrator


  
Join Date: Mar 2008
Posts: 55
Thanks: 10
Thanked 7 Times in 5 Posts
Rep Power: 1
BLaaaaaaaaaarche is on a distinguished road

Awards Showcase
HTML & CSS Classic ASP 
Total Awards: 2

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
Location: Reston, VA, USA
Posts: 820
Thanks: 20
Thanked 74 Times in 71 Posts
Blog Entries: 5
Rep Power: 3
jmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura aboutjmurrayhead has a spectacular aura about

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

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
Administrator


  
Join Date: Mar 2008
Posts: 55
Thanks: 10
Thanked 7 Times in 5 Posts
Rep Power: 1
BLaaaaaaaaaarche is on a distinguished road

Awards Showcase
HTML & CSS Classic ASP 
Total Awards: 2

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
Forum Jump

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 05:16 PM.

Contact Us - DeveloperBarn.com - Top


Content Relevant URLs by vBSEO 3.2.0