Reputation: 33079

How to modify the CSS Properties (height width) of a div element via JQuery?

How come this doesn't create a vertical 5px-wide bar on the ride 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>

Upvotes: 2

Answers (5)

Randell

Reputation: 6170

Use this instead:

I found several problems:

instead of $(window).height, use $(window).height()

instead of left: $(window).width - 5, use right: 0

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

Upvotes: 6

theIV

Reputation: 25774

Instead of left: $(window).width - 5, you could try right: 0.

EDIT: Yeah, that was pretty stupid. But, if I'm not mistaken, those should also be quoted, as in 'width': '5px',.

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

Upvotes: 0

Guilherme

Reputation: 561

From reading jQuery documentation you can see that you need to put the 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 really sure tough how you would display those calculated values.

PS: Jonathas was right height and width are functions, not properties.

Upvotes: 1