CODEWITHSUNDEEP
jquerycss
saltandpepper
saltandpepper

Reputation: 1047

Editing css-properties using jQuery

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

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

Upvotes: 0

Views: 140

Answers (3)

Martin Beeby
Martin Beeby

Reputation: 4599

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);
    })

Upvotes: 1

Andy E
Andy E

Reputation: 344557

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');

Upvotes: 3

Patrick
Patrick

Reputation: 7712

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.

Upvotes: 0

Related Questions