CODEWITHSUNDEEP
jquery
Param Veer
Param Veer

Reputation: 786

resize and positioning image not working

i am re sizing some overlay images on load according to the screensize of the user. But the problem is it does not work everytime it loads. if i refresh too many times it works once . dont know where the problem is as no errors coming too. i have checked in chrome and firefox developer tools also. here is my code can any one suggest what is wrong here.

(function($){ 
$(window).load(function() {
var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
  $('.content').css('height',Height + 'px');

});

$(window).resize(function() {
  // This will execute whenever the window is resized

var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
var overlayw=$('.content-container').width();
var overlayh=$('.content-container').height();
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
$('.overlay').css('background-size', overlayw + 'px' + ' ' + Height + 'px');
$('.content').css('height',Height + 'px');

});

        })(jQuery);

Upvotes: 0

Views: 105

Answers (1)

John Dvorak
John Dvorak

Reputation: 27287

I can see that you're trying to use the scrollbar position to achieve the parallax effect (the conversation confirms that) but you don't react to its changes (namely, scrollTop is pretty much always 0 on page load). You should listen to the scroll events as well. Try:

$(window).on("load resize scroll", function(){
  var height=$(window).height(); // New height
  var width=$(window).width(); // New width
  ...

});

Alternately:

function recalculatePositions(){
  var Height=$(window).height(); // New height
  var Width=$(window).width(); // New width
  ...

}

$(window).on("load resize scroll", recalculatePositions);
  // $(window).load(function) has been deprecated

Upvotes: 2

Related Questions