Clever Geek Handbook

How can I change the CSS properties (width by height) of a div element via JQuery?

Why doesn't this create a vertical width of 5 pixels wide on the travel side of the window?

<html>
<head runat="server">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $("#scrollBar").css({
                height: $(window).height,
                width: 5,
                position: "absolute",                
                top: 0,
                left: $(window).width - 5,
                margin: 0
            });
        });

    </script>
</head>
<body>
    <div id="scrollBar" style="background-color: Red">test
    </div>
</body>
</html>
+2


source to share


5 answers


Use this instead:

I found several problems:



  • instead $(window).height

    , use$(window).height()

  • instead left: $(window).width - 5

    , useright: 0 

    $(document).ready(function() {
    $("#scrollBar").css({
        height: $(window).height(),
        width: 5,
        position: "absolute",                
        top: 0,
        right: 0,
        margin: 0
    });
});
+6


source


Also note that jQuery.width and .height must be .width () and .height ().



Examples of using...

+1


source


you can put width and $ (window) .height () + "px" for height and ($ (window) .width () - 5) + "px" for left instead of 5px.

+1


source


From reading the jQuery documentation, you can see that you need to put css properties and their values ​​as string values.

 $ ("# scrollBar"). css ({
                'height': $ (window) .height (),
                'width': '5px',
                'position': 'absolute',                
                'top': '0',
                'left': $ (window) .width () - 5,
                'margin': '0'
            });

http://docs.jquery.com/CSS/css#properties

I'm not sure how much you will show these calculated values.

PS: Jonatas was the correct height, and the widths are functions, not properties.

+1


source


left: $(window).width - 5

You can try instead right: 0

.

EDIT: Yes, that was pretty silly. But, if I'm not mistaken, they should also be specified as in "width": "5px".

  $("#scrollBar").css({
    'height': $(window).height(),
    'width': '5px',
    'position': 'absolute',
    'top': 0,
    'right': 0,
    'margin': 0
  });
0


source






More articles:


All Articles