Editing css-properties using jQuery

Question

I'm trying to use adjust CSS-properties using jQuery:

the menu_div should be the same width as the screen:
```
$("#menu").css({width: (theWidth - 10)});
```
the gallery_img should be at the left side of this div, the contact_img should be on the right side:
```
$("#gallery_img").css({left: 0 + 'px'});
$("#contact_img").css({right: 0 + 'px');
```

The menu-div and the images both have position: absolute. What am I doing wrong? All images are displayed on top of each other.

How are you defining "theWidth" and you said you want the menu width the same as the screen width so why the - 10? Plus as Pekka says we need to see some other code. Your HTML and CSS of the #menu and side bits would help. — Scott
– Scott, Commented Nov 8, 2010 at 15:38

Andy E · Accepted Answer · 2010-11-08 15:40:44Z

3

You have a syntax error in your code:

$("#contact_img").css({right: 0 + 'px');
//                                    ^ missing closing brace }

Also, your CSS width assignment for the #menu element isn't followed by "px", which invalidates the rule and may cause it to fail in some browsers:

// Incorrect
$("#menu").css({width: (theWidth - 10)}); 

// Corrent
$("#menu").css({width: (theWidth - 10) + "px" });

Note that, if you're planning on using a numeric literal you may as well just use a string on its own and avoid the concatenation. You can also pass the css property and value as separate arguments:

$("#contact_img").css({right: '0px'});
$("#contact_img").css('right', '0px');

edited Nov 8, 2010 at 15:40

answered Nov 8, 2010 at 15:35

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc B Over a year ago

Good catch, missed the brace. but there's also a missing unit in the #menu bit. Should have a + 'px' as well most likely.

Andy E Over a year ago

@MarcB: Good catch yourself :-) Added it to the answer.

Martin Beeby · Accepted Answer · 2010-11-08 15:46:34Z

1

You have some missing braces, perhaps a simpler way to do it would be:

$(document).ready(function () {
        var theWidth = $(window).width();
        $("#menu").css('width', theWidth - 10);
        $("#gallery_img").css('left', 0);
        $("#contact_img").css('right', 0);
    })

answered Nov 8, 2010 at 15:46

Martin Beeby

4,6091 gold badge29 silver badges21 bronze badges

Comments

Patrick · Accepted Answer · 2010-11-08 15:38:50Z

0

Position absolute will do that. your left for the gallery_img should be 0px... then your contact img's left attribute should be the left for the #menu + #menu's width in px.

if you do not specify the left attribute with a position absolute you will ultimately just stack everything.

answered Nov 8, 2010 at 15:38

Patrick

7,7227 gold badges42 silver badges50 bronze badges

Collectives™ on Stack Overflow

Editing css-properties using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related