CODEWITHSUNDEEP
jquerycss
user2478466
user2478466

Reputation: 33

simple jquery css margin not working

Just a very simple issue but I'm very new to JavaScript.I'm trying to add a margin-top property to a div using JS on both document.ready and window.resize, but no luck.

function cent() {
    var blockheight = $("#block").height();
    var margintop = (blockheight / -2);
    $block.css("margin-top", margintop);                   
};

$(document).noConflict();
$(document).ready(cent);
$(window).resize(cent);

Upvotes: 3

Views: 4010

Answers (6)

zur4ik
zur4ik

Reputation: 6254

Change the:

$block.css("margin-top", margintop);

To:

$('#block').css("margin-top", margintop);

and also change function call method:

    $(document).noConflict();

    //on DOM ready
    $(document).ready(function ()  {
       cent();
    });

    //on window resize
    $(window).resize(function ()  {
       cent();
    });

Upvotes: 0

user2478466
user2478466

Reputation: 33

I used Dylan N's code and all was working in jsfiddle but back in my full page, there is some kind of conflict. Ive narrowed it down to the code below. anyone know what the conflict could be?

var $j = jQuery.noConflict();
jQuery(function ($j) {

var image_slides = [];

image_slides.push({
    image: 'img/background.jpg'
})


$j.supersized({



    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

    min_width: 0,
    min_height: 0,
    vertical_center: 1,
    horizontal_center: 1,
    fit_always: 0,
    fit_portrait: 1,
    fit_landscape: 0,
    slides: image_slides,
});
});

Upvotes: 0

Lee Cooper
Lee Cooper

Reputation: 146

Few things,

where are you defining the variable $block? you need to put the element you want to modify into that variable so...

   var $block = $('#block');

in your cent function before you define block height.

secondly

you need to call your cent function after the document is ready.

 $(document).ready(function(){
    cent();
 });

same with resize ... so overall the code should look like.

$(document).ready(function(){
   cent();
   $(window).resize(function(){
      cent();
   });
});

if you are unclear on how document ready works, I suggest reading the jquery api, its really usefull and user friendly.

Upvotes: 1

Dylan N
Dylan N

Reputation: 517

EDIT:

Hey there, I took your most recent jsFiddle and did some changes which is working now, it converts it to half its original height. Take a look and see if that's what you needed.

Sorry, my code didn't save. Here is my jsFiddle update:

I added in parseInt() to guarantee that the height result you receive from .height() is an Integer able to be parsed in your division, as well as wrapping the inner portion of $(document) and $(window) with an anonymous function calling cent();.

function cent() {
    var $block = $("#block"),
        margintop = parseInt($block.height() / -2);
    console.log('called');
    $('#block').css("margin-top", margintop);
};

// $(document).noConflict();
$(document).ready(function(){
    cent();
});
$(window).resize(function(){
    cent();
});

Change the 

$block.css("margin-top", margintop);

To

$('#block').css("margin-top", margintop);

Upvotes: 1

Alex
Alex

Reputation: 10226

you need to set which unit to go. .height() will return a number, while the css property margin-top needs to know which unit. 

var margintop = (blockheight / -2) + 'px';

Upvotes: 0

David Ziemann
David Ziemann

Reputation: 970

It looks like your syntax is a bit off. Change $block to $('#block').

this jsFiddle should help you sort things out.

Upvotes: 0

Related Questions