jQuery CSS Attributes not Applying

Question

I am centering a element inside a div horizontally and vertically, however the jQuery CSS code seems to be only resulting in style="margin: 0px" any ideas?

Example (script src)

jQuery:

    image.css({
            'margin-top': '-'+(style['img-width']/2)+'px',
            'margin-left': '-'+(style['img-height']/2)+'px',
    });

Alternatively I tried:

    image.css({
            'marginTop': '-'+(style['img-width']/2)+'px',
            'marginLeft': '-'+(style['img-height']/2)+'px',
    });

CSS:

                #theater-img {
                    position: absolute;
                    text-align: center;
                    margin: 0;
                    padding: 0;
                }
                #theater-img img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-box-shadow: 0 0 20px 20px rgba(0,0,0,0.5);
                    box-shadow: 0 0 20px 20px rgba(0,0,0,0.5);
                }

You should be changing the values of top and left since your image is already on absolute position. — Sebastian Osuna
– Sebastian Osuna, Commented Nov 17, 2014 at 8:22
What is image? Is it constructed in jQuery? Do you get any console errors? — aug
– aug, Commented Nov 17, 2014 at 8:22
image is the image tag. It's used multiple times. I added a link to the src. — WASasquatch
– WASasquatch, Commented Nov 17, 2014 at 8:24

Morpheus · Accepted Answer · 2014-11-17 08:31:50Z

1

Comment the following line in your bfx.viewer.js:

image.css('margin', style['img-padding']+'px');

This is there the margin: 0px; comes from.

answered Nov 17, 2014 at 8:31

Morpheus

9,12613 gold badges54 silver badges80 bronze badges

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

2 Comments

WASasquatch Over a year ago

Ah jesus I forgot about that. Do you know why when I fix it, the image is pushed off screen on the top? It's acting like #theater-img is way off screen for the centering. See example link again.

Morpheus Over a year ago

I see you have changed your code radically :) At your current situation remove position: relative from the theater-img and it will be centered.

Language Lassi · Accepted Answer · 2014-11-17 10:30:06Z

1

I just commented below positioning CSS:

/*
#theater-img img {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.5);
    left: 50%;
    position: absolute;
    top: 50%;
}
*/

and then changed the postion to relative instead of absolute here:

#theater-img {
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}

Is it you wanted ??

Page Image with updated css

answered Nov 17, 2014 at 10:30

Language Lassi

2,63023 silver badges25 bronze badges

Comments

Bora Dan · Accepted Answer · 2014-11-17 09:36:14Z

0

I saw your example link. I think use that codes after all images loaded.

jQuery:

$(window).load(function() {    
    $('#theater-img img').css({
        'margin-top': '-' + $('#theater-img img').height()/2 + 'px',
        'margin-left': '-' + $('#theater-img img').width()/2 + 'px'
    });
});

and here's some css changes for your page. You should change #theater-img

HMTL:

#theater-img {
  position: relative;
  text-align: center;
  margin: 0 0 46px 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: -46px;
  z-index: -1;
}

answered Nov 17, 2014 at 9:36

Bora Dan

133 bronze badges

2 Comments

Bora Dan Over a year ago

maybe you can use '$('img').load(function() {' instead of '$(window).load(function() {'

WASasquatch Over a year ago

Why exactly am I hiding a portion of the image under the top bar? This is a image viewer. Also, image has already been defined, as the theater image..

Collectives™ on Stack Overflow

jQuery CSS Attributes not Applying

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related