SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change text class on click.

    Hey,

    I'm not much of JavaScript coder and have little proper experiance coding it.

    ANYWAYS, on the left hand side of a site im working on I have 3 absolute positioned div's which I control with JavaScript (code used from other source).

    The links are 'band', 'item', 'release' and when I click on one of these links it will change the the divs to show the appropriate one.

    For example,
    Code:
    <a href="javascript: ;" onClick="swapLayers('band')" class="side_a">band</a>
    is used to change the div's. Now, what I want to do is when a link is clicked, change the background colour of the text for the currrent div showing. Am I making sense?

    I thought it would be easier to just change the current class of the text. Is there an easy way to do this with JavaScript??

    Thanks a lot

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi b2b

    It would be easier if you showed us swapLayers. Does it swap classNames? If so you can add your background styles to those classes. It's more likely that swapLayers gives all divs display:none and then gives display:block to the id passed as an argument. If so, do the divs already have classes applied to them via the 'class' attribute?

    I'm a little confused tho. The divs won't be seen when they are hidden - why not just set their bkgnd colors in css?

  3. #3
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike,

    the divs don't have classes applied to them no. It's not the divs I'm concerned about, it is the text links used to switch the divs. I wish to swap the class of the text, for example to 'on' or 'off', so the text will appear 'highlighted' in a way, for the related div that is showing.

    Does this make any more sense? Do you still wish to see the code for swapping the divs?

    Thanks again

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In swapLayers, "this" points to the <A> element that was clicked. But you'll still need references to the other two anchors. One way is to give them all IDs. Another way (if the anchors are within a container) is to use container.getElementsByTagName('a').

    For each anchor set anchor.className = 'defaultClass'. Then for the 'current' anchor: this.className = 'highlightClass' - or whatever you name your classes.

  5. #5
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Mike, I got a bit lost trying out your suggestion!

    Here is the code below:

    Code:
    var origWidth, origHeight;
    var origWidth2, origHeight2;
    var cur_lyr;
    var cur_lyr2;
    
    if (document.layers)
    {
    	origWidth = window.innerWidth; origHeight = window.innerHeight;
    	window.onresize = function()
    	{
    		if (window.innerWidth != origWidth || window.innerHeight != origHeight) 
    		{
    			history.go(0);
    		}
    	}
    }
    
    function swapLayers(id)
    {
    	if (cur_lyr) hideLayer(cur_lyr);
    	{
    		showLayer(id);
    		cur_lyr = id;
    	}
    }
    
    function showLayer(id)
    {
    	var lyr = getElemRefs(id);
    	if (lyr && lyr.css)
    	{
    		lyr.css.visibility = "visible";
    	}
    }
    
    function hideLayer(id)
    {
    	var lyr = getElemRefs(id);
    	if (lyr && lyr.css)
    	{
    		lyr.css.visibility = "hidden";
    	}
    }
    
    function getElemRefs(id)
    {
    	var el = (document.getElementById)? document.getElementById(id) : (document.all) ? document.all[id] : (document.layers) ? getLyrRef(id,document): null;
    	if (el) el.css = (el.style) ? el.style : el;
    	return el;
    }
    
    // get reference to nested layer for ns4
    // from old dhtmllib.js by Mike Hall of www.brainjar.com
    function getLyrRef(lyr,doc)
    {
    	if (document.layers)
    	{
    		var theLyr;
    		for (var i=0; i<doc.layers.length; i++)
    		{
    	  		theLyr = doc.layers[i];
    			if (theLyr.name == lyr)
    			{
    				return theLyr;
    			}
    			
    			else if (theLyr.document.layers.length > 0) 
    	    	{
    				if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
    				{
    					return theLyr;
    				}
    			}
    	  	}
    		
    		return null;
      	}
    }
    Do I need to add to the 'hideLayer' and 'showLayer' functions?

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why not just set CSS styles for the links? No need for JS at all. If the page itself doesn't reload then whatever style is set for the .class active definition will apply to the clicked link. Unclicked links will adopt the .class link style and clicked links will adopt the .class visited style - you can make link and visited have the same styles.
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not what I'm wanting to do.

  8. #8
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your choice. I prefer to keep things simple and minimise the work the browser has to do.
    Ian Anderson
    www.siteguru.co.uk

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    siteguru, you have an interesting idea, I may have to experiment with that

    b2b, sorry I haven't had a chance to comment on your code but I will as soon as I can. Meanwhile, have a look at this demo: Basic Tabbed Panels

  10. #10
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks interesting, I'll have a look. Thanks!!

  11. #11
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    siteguru, you have an interesting idea, I may have to experiment with that
    I find it important to insure the definitions are in a specific order for it to work in all compatible browsers (anything since IE5).

    Code:
    A.class:link {
        style definitions
    }
    A.class:visited {
        style definitions
    }
    A.class:hover {
        style definitions
    }
    A.class:active {
        style definitions
    }
    It is the :active block which will achieve what b2b wants, as the page is not being changed - only the show/hide of divs is happening. The previously-selected link will adopt the :visited style.

    Who needs JavaScript?
    Ian Anderson
    www.siteguru.co.uk

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    siteguru, you'll have to show us how to do it because I can't get it to work. In IE7 the link stays active - but only as long as that link has focus. In Opera and FF the link is no longer active after mouseup.

    b2b, how is it going?

  13. #13
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm. Maybe needs a little more thought. This works fine in IE6, but loses the style focus in FF.
    Ian Anderson
    www.siteguru.co.uk

  14. #14
    SitePoint Zealot backtobasics's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys.

    Not had a chance to work on it the past couple of days, been busy with other work. I'll let you know soon when I give it a bash.

    Thanks again


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
  •