I have the following code which resizes the height of a targeted element
but it only works with resize event, not when the page is loaded.
What could be the flaw here that doesn't set the height dynamically with the page load?
I'd also like to know how I can make the iterated codes into a modular structure in
this scenario.
$(window).resize(function() {
var viewportHeight = $(window).height();
var search = $(#something).outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
$(function () {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
How about something like this:
var resizeGrid = function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
resizeGrid();
});
$(document).ready(function () {
$(window).trigger("resize");
});
Use document.ready:
$( document ).ready(function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
Related
I have a vh based website with elements I want to show when a certain vh has been scrolled. I tried using an if statement with a variable for distance scrolled, but it doesn't update constantly so it doesn't work:
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
if (distance >= 170) {
//ACTIONS
};
What can I use to make a constantly updating version of above?
Using pure JS, you could use the onscroll event and bind it to the body. Here's an example:
HTML
<body onscroll="myFunction()">
...
</body>
JS
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
function myFunction() {
if (distance >= 170) {
//ACTIONS
}
}
You can also use jQuery's scroll() method if you prefer a non-markup solution. With this method, you just place your if statement inside a scroll() function. Here's an example:
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
$("body").scroll(function(){
if (distance >= 170) {
//ACTIONS
}
});
Hope this helps!
Jquery Code
$(window).scroll(function(){
if ($(this).scrollTop() >= 170) {
//actions...
} else {
//actions...
}
});
I am a little confused on how to keep some variables Ive created uptodate when the window is resized so my scroll function carries on getting the correct values. Basically I have multiple elements that contain a message that gets displayed when the user scrolls the element into 50% height of the viewport height. This works fine but my issue is when I resize I'm not sure how to update my variables boxHeight, elementOffset, verticalMatch which keep control of the values I need to use in my scroll event. I was wondering can someone help explain how I can resolve this?
My code looks like this
var windowHeight = $(window).height(),
headerHeight = $('.header').height();
$('.box').each(function (i,e) {
var el = $(e);
var boxHeight = el.height(),
elementOffset = el.offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
el.addClass('is-active');
}
});
});
$(window).on('resize', function() {
windowHeight = $(window).height()
elementOffset = $('.box').offset().top;
$('.box').each(function (i,e) {
var el = $(e);
//update boxHeight, elementOffset, verticalMatch
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
});
});
And heres the JS Fiddle: http://jsfiddle.net/fm4z7/2/
If someone could explain how I do this it would be great!
If all you want to do is update your sizing variables during a resize event, then do just that:
$(window).on('resize', function() {
windowHeight = $(window).height();
elementOffset = $('.box').offset().top;
});
Your variables are global so they can be accessed anywhere.
Hi I'm hoping someone will be able to explain what i am doing wrong here:
var winHeight = $(window).height(),
minHeight = 900,
Height = 900;
$(document).ready(function () {
if (winHeight < MinHeight) {
Height = minHeight;
} else {
Height = winHeight;
}
$('div.page').css('height', winHeight + 'px');
});
$(window).resize(function () {
if (winHeight < MinHeight) {
Height = minHeight;
} else {
Height = winHeight;
}
$('div.page').css('height', winHeight + 'px');
});
On my page I have multiple divs with the class "page".
I'm trying make the height of these the size of the browser window, unless the browser window is less than 900, then I want them to be 900px tall.
I'm guessing its a syntax issue. Especially since I'm brand new to jquery and javascript ( I only started using it today).
You have to call $(window).height() on the resize event, so you can respond to the current window size. You can go with this:
$(document).ready(function () {
//Call the method one time
updateWindowSize();
//Subscribe the method to future resize events
$(window).resize(updateWindowSize);
//updateWindowSize inside a closure to hide 'minHeight'
var updateWindowSize = (function(){
var minHeight = 900;
//Actual updateWindowSize function
return function(){
var winHeight = $(window).height();
var newHeight = winHeight < minHeight ? minHeight : winHeight;
$('div.page').height(newHeight);
}
})();
});
The problem is the value of winHeight is never changed when window resizes. And I wonder where the variable "Height" is used ?
The code should be:
$(document).ready(function () {
$(window).resize(function () {
var winHeight = $(window).height(),
minHeight = 900,
Height = 900;
if (winHeight < minHeight) {
Height = minHeight;
} else {
Height = winHeight;
}
$('div.page').height(Height);
});
});
Make sense?
I have the following:
if ($firstBG.hasClass("inview")) {
$(window).resize(function () {
var height = $(window).height();
var getfactor1 = 680 / 697;
var posval1 = height * getfactor1;
console.log(posval1);
});
$firstBG.css({
'backgroundPosition': posval1)
});
}
But it does not get the value of posval1 in the background function. What am I doing wrong? I want to get the value of posval1 in the if inview and on resize function!
Thanks.
You will need to set the css property from the resize handler. If you want to initialize it, you just could trigger it:
if($firstBG.hasClass("inview")){
$(window).resize(function() {
var height = $(window).height();
var getfactor1 = 680/697;
var posval1 = height*getfactor1;
console.log(posval1);
$firstBG.css({'backgroundPosition': posval1)});
}).resize();
I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/