SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Issues setting style.float = 'none'

    I'm trying to change a div (#box) from being floated left to not being floated (i.e. being a normal block-level element) when a link (#move) is clicked. I'm doing this:
    Code:
        window.onload = function() {
          var z = document.getElementById('move');
          z.onclick = function() {
            document.getElementById('box').style.float = 'none';
            document.getElementById('box').style.width = '304px';
          }
        }
    However, the div remains floated (confirmed by the handy FF web developer extension). The width does change, so it seems my problem is with the style.float bit. What am I doing wrong?

    Thanks in advance,

    Raffles

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using...
    Code:
    bla.setAttribute("style", "blablabla"); // set new style without float
    cheers

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe simpler to assign a class that has the float property defined in a stylesheet-
    all browsers understand float when it is in a css declaration.

    in javascript 'float' is a reserved keyword (floating point number),
    it is aliased for element style assignments:

    for IE use element.style.styleFloat;
    for everybody else use element.style.cssFloat;

    reminder's method works, but it will remove any styles you have set unless you include them in the assignment.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the Javascript version of "float" is "styleFloat" to avoid conflict with certain types of numbers I guess.

    css:
    div {
    float: left;
    }

    javascript:
    mydiv.style.styleFloat = "left";

  5. #5
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might be wrong here, but I'm pretty sure that after an Element has been 'floated' using CSS then it can't be 'unfloated' using javascript.

    I know that 'float: none;' as a CSS rule doesn't work.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Where stylesheet and HTML attribute names clash with Javascript reserved words Javascript uses an alternative name to reference that field as with the original name being reserved it has a specific meaning that can't be overridden.

    for -> htmlFor
    class -> className
    float -> styleFloat
    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="^$">

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah of course, a clash with floating point numbers. Thanks guys, that was very helpful. And an extra bonus - IE and everyone else do it differently, great!

  8. #8
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In CSS a float is a type of positioning, so apply position:relative; or position:static; or even position:absolute; and it should eliminate the float. float:none; however, is a legitimate style in CSS 2.
    Last edited by JVLB; Oct 8, 2006 at 20:11.

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's not quite true. My box has no positioning set (and so is static) and if I just set it to position:relative, it doesn't magically cancel the float. That's why float:none has to be used. Position:absolute will of course appear to cancel the float, but the box is still technically floating. That's my take on it anyway.

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Northern Star
    I might be wrong here, but I'm pretty sure that after an Element has been 'floated' using CSS then it can't be 'unfloated' using javascript.

    I know that 'float: none;' as a CSS rule doesn't work.
    This is wrong, you can unfloat it with JavaScript. And float:none as a CSS rule does work.

    Quote Originally Posted by Raffles
    That's not quite true. My box has no positioning set (and so is static) and if I just set it to position:relative, it doesn't magically cancel the float.
    Why would it cancel the float when you change to position relative?

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Why would it cancel the float when you change to position relative?
    Exactly, I said that in response to JVLB's comment.

  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)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    div {
      float:left;
      width:50px;
      height:50px;
      border:1px solid black;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('d2').onclick = d2OnClick;
    }
    function d2OnClick()
    {
      if (this.style.clear == 'both')
        this.style.clear = 'none';
      else
        this.style.clear = 'both';
    }
    </script>
    </head>
    <body>
    <div id='d1'>d1</div>
    <div id='d2'>d2</div>
    </body>
    </html>

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The simplest way to do it is to define two classes. One with the object floated and the other with it not floated and then use javascript to change the class.
    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="^$">

  14. #14
    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)
    Yes, felgall, I think you are right. Changing className is better.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    .withFloat {
      float:right;
      width:50px;
      height:50px;
      border:1px solid black;
    }
    .noFloat {
      float:none;
      width:50px;
      height:50px;
      border:1px solid black;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('d1').onclick = myOnClick;
      document.getElementById('d2').onclick = myOnClick;
    }
    function myOnClick()
    {
      if (this.className == 'withFloat')
        this.className = 'noFloat';
      else
        this.className = 'withFloat';
    }
    </script>
    </head>
    <body>
    <div>
    <div id='d1' class='withFloat'>d1</div>
    <div id='d2' class='withFloat'>d2</div>
    </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
  •