SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing "float" onclick?

    I'm trying to make a script which in realtime changes a DIV to float either left or right but somehow I'm doing something wrong?

    Here is what I got...
    Code JavaScript:
    function logoplace(that){
    	document.getElementById('logoholder').style.float=that
    }

    Code HTML4Strict:
    <style type="text/css">
    div#logoholder {
    	float:left;
    	border:1px solid #666666;
    }
    </style>
     
    <input type="radio" name="logoplacement" value="left" onclick="logoplace(this)" />
    Left
    <input type="radio" name="logoplacement" value="right" onclick="logoplace(this)" />
    Right
    <br><br>
    <div id="logoholder">This is a test</div>

    Any ideas? Thanks in advance ;-)

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.getElementById('logoholder').style.float=that.value
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I feel that it's redundant referencing the this object when you can easily just as well use a ternary operator to check the current float value.

    Code JavaScript:
    function logoplace() {
        var ele = document.getElementById('logoholder');
        ele.style.float = (ele.style.float === 'left' ? 'right' : 'left');
    }

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure the element you are floating is smaller than the available width-
    and 'float' cannot be a property identifier in javascript (style.float)- use styleFloat and cssFloat,
    or set the css string 'float:left' or 'float:right'.


    Code:
    <!doctype html>
    <head>
    <title>refloat</title>
    <style>
    #logoholder{
    	float: left;
    	width:45%;
    	border: 1px solid #666666;
    }
    </style>
    <script>
    function logoplace(e){
    	e= e || window.event;
    	var which= e.target || e.srcElement;
    	if(which && which.value){
    		document.getElementById('logoholder').style.cssText= 'float:'+which.value;
    	}
    }
    window.onload= function(){
    	document.getElementById('choosefloat').onclick= logoplace;
    }
    </script>
    </head>
    <body>
    <fieldset id="choosefloat">
    <legend>Float the test div</legend>
    <label><input type= "radio" name= "logoplacement" value= "left" checked>Left</label>
    <label><input type= "radio" name= "logoplacement" value= "right" >Right</label>
    </fieldset>
    <div id= "logoholder"> This is a test</div>
    </body>
    </html>


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
  •