Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder tylerjca's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    162
    Thanks
    1
    Thanked 0 Times in 0 Posts

    using javascript to float an element!

    Hi,
    Can someone help me with this?
    Is it possible to change an element that is floating to the left:
    Code:
    div.links{
    float: left;
    }
    to an element floating to the right?

    I've tried:
    Code:
    funtion changeFloat(){
    document.getElementById('links').style.float = 'right';
    }
    but that doesn't work!

    I want to do this so the viewer can dynamically change the orientation of the page just by clicking a button without having to reload the page.

    Thanks in advance!
    -Tyler

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    could try changing class name

    Code:
    funtion changeFloat(){
    document.getElementById('links').className = 'rightclassrule';
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    You're trying to use getElementById to target an element by its class.

    If there's only one instance of the .links class, then the simpler option would be to change it to an id attribute.

    Code:
    <div id="links">…</div>
    This would now mean that the target element has an id which you can then address using getElementById('links').


    Alternatively, if there is more than one instance of class="links", you could actually use something like a custom getElementsByClass function.

    e.g.
    Code:
    function hasClass(obj,cName) {
    
    	var cNameRegEx = new RegExp('(^|\\s)' + cName + '(\\s|$)');
    
    	return (obj.className && obj.className.match(cNameRegEx));
    
    }
    
    function getElementsByClassName(cName,trgtTagName,trgtNode) {
    
    	/*	Requires:
    		hasClass	*/
    
    	if (!document.getElementsByTagName) return true;
    
    	var tName = (trgtTagName) ? trgtTagName : '*';
    	var tNode = (trgtNode) ? trgtNode : document.getElementsByTagName('body')[0];
    
    	var trgtEls = new Array();
    
    	var els = tNode.getElementsByTagName(tName);
    	for (var i = 0, tEl; tEl = els[i]; i++) {
    		if (libJS.hasClass(tEl,cName)) {
    			if (trgtEls.push) { trgtEls.push(tEl); }
    		}
    	}
    
    	return trgtEls;
    
    }
    use:
    Code:
    var trgtEls = getElementsByClassName('links');

  • #4
    Regular Coder tylerjca's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    162
    Thanks
    1
    Thanked 0 Times in 0 Posts
    okay, for one, Bill Posters, you gave me a lot of info that I either already knew, or I didn't need to know. But thank anyways!

    vwphillips, thanks! I used className to change the float.. just had to make 2 separate classes for it with one slight difference.. (float:right) and it worked perfectly! I can't beleive I didn't think of that!

    Thank you very much!!

    -Tyler


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •