Changing variable based on window size - jQuery/JS - javascript

Having issues with this. So in short I want var hprH = 555px when screens are >= 910px, then hprH = 300px when screens are between 910px - 400px and 150px when < 400px. I tried this with CSS media queries, but couldn't get it to work. So now I am trying to do this solely in js.
This is the global variable
var hprH = $('#hpr').height();
I would like to change this as stated above.
Here is the code that uses the variable, which works until I need the hprH height to be less than 555px.
$(function() {
hpr_init();
$('#hpr .thumb').click(function(){
clearInterval(timer);
showHPR($(this));
});
timer = setInterval(function(){showHPR(nextThumb);}, interval);
$(window).resize(function(){
hprH = $('#hpr').height();
$('.selected').height(hprH);
});
});
function showHPR(obj){
$(obj).fadeOut(300,function(){
$(obj).parent().animate({
height:hprH,
zIndex:0,
bottom:0
},duration);
$(obj).parent().find('img').animate({
top:0
},500,function(){
$(this).css({bottom:'auto'});
});
$(obj).parent().find('.content').fadeIn();
lastThumb(obj);
});
}

Related

Jquery function only loads after page refresh

I have roughly around 50 video thumbnails on a set page.
I would like to resize them depending on the resolution.
What I have tried was using #media query in css that did not work as expected then I moved over to this.
$(document).ready(function(event) {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
After inserting that script the video thumbnail size changes but as I adjust the browser the jQuery does not load and resize the thumbnail unless the page is refreshed ?
Im not sure as to why the jQuery is not loading the script in real time as the size (browser) changes.
Languages that I am using in this project : PHP, jQuery
you need to catch window resize event with jQuery and also write your code there.
$(window).resize(function() {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
To reduce code repetition you can make a function and call it in both $(window).resize() and $(document).ready()
function onResize() {
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(onResize);
$(window).resize(onResize);
This should work, but it would be much better if it were done with css. Would love you help you with that if you want to post what you tried. If you do it with css, you will not have the jumping on the page that'll occur when the js loads and changes those classes in and out.
You can do smth like this.
Note: this is untested code
function updateSizes(){
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(function(event) {
updateSizes();
// do other stuff here
});
$( window ).resize(function() {
updateSizes();
// do other stuff here
});

Javascript scroll addClass

I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?
It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}
You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp

More efficient way of using javascript to stick columns to bottom of page?

I've been designing a web site for a while, its a two column layout, and I want each column to go to the bottom of the page regardless of resolution. Currently to accomplish this, I have two JavaScript files - One that adjusts the column length to fit the browser window, and the other JavaScript file is to match the resized one. One major problem I have, is that if you change the browser window size, the columns do no auto adjust, so they may not go to the bottom of the page. I am wondering if there is some way I could do this all in one file, and most importantly make the columns always stick to the bottom of the page no matter what the window size is. Here is the code for each JavaScript file:
Adjust column height to browser window:
$(function(){
var grid = $(window).height();
var gridFinal = grid - 140;
$('.grid').css({'min-height': ((gridFinal))+'px'});
});
Adjust the other column to match the resized one:
window.onload = getIDHeight;
function getIDHeight() {
var myHomeHeight = document.getElementById("home").offsetHeight;
document.getElementById("home-services").style.height = myHomeHeight - 15 +"px";
}
window.addEventListener('load', function (){
var myNewsHeight = document.getElementById("blog").offsetHeight;
document.getElementById("social-media").style.height = myNewsHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myAboutHeight = document.getElementById("references").offsetHeight;
document.getElementById("about").style.height = myAboutHeight - 25 +"px";
});
window.addEventListener('load', function (){
var myServicesHeight = document.getElementById("services").offsetHeight;
document.getElementById("guidelines").style.height = myServicesHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myTipsHeight = document.getElementById("tips").offsetHeight;
document.getElementById("recommendations").style.height = myTipsHeight - 20 +"px";
});
window.addEventListener('load', function (){
var myContactHeight = document.getElementById("contact-info").offsetHeight;
document.getElementById("email").style.height = myContactHeight - 15 +"px";
});
Any help here would be greatly appreciated. If there is a simpler way of doing this that increases functionality, please let me know.
You could do it with CSS. Set the height of html & body to 100%, then set the columns to height 100%
Fiddle here : DEMO
html,body{
height:100%;
}
#column1{
height:100%;
}
#column2{
height:100%;
}

setting a dynamic height to a div based on screen space available

what i need to achieve is the following:
a webpage for smartphone that contains a series of divs with heights, paddings, margins, etc.. and one particular div at the bottom that should be as high as the (window.innerHeight minus all the other divs' heights before him) so that the javascript can stick a fixed height to it (which has to be dynamic because i don't know the device screen height) and i can set via CSS overflow:auto and make it scrollable.
the js i started using is the following:
(function() {
function resize(delta) {
var heights = window.innerHeight;
jQuery('.dynamic-height').css('height', (heights - delta) + "px");
}
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
resize(20);
} else {
resize(0);
}
})();
you can ignore the if/else statement.
here is a very simple fiddle: http://jsfiddle.net/omegaiori/k56wj/
the div that has to have the dynamic height is div.dynamic-height (violet background).
thank you so much for your help, this would be a life saver! :)
Try this,
Demo
(function() {
function resize() {
total = 0;
jQuery('.cont div').each(function(){
total += parseInt($(this).css('margin-top').split('px')[0])+parseInt($(this).css('margin-bottom').split('px')[0])+$(this).height()
});
var heights = window.innerHeight;
var dy_height = heights-total
jQuery('.dynamic-height').css('height', dy_height + "px");
}
resize()
})();

Making a set of images move cross the screen then when leaving the window, it comes up from the other side

I'm trying to implement the marquee tag in jQuery by animation a set of images using animate() function, making them move to the right or left direction.
But, I couldn't figure out when a single image goes to the end of the screen returns individually to the other side.
Because I heard that the window size is not constant for every browser, So is there anyway to implement that?
this is what I came up so far(it's simple and basic):
$(document).ready(function(){
moveThumbs(500);
function moveThumbs(speed){
$('.thumbnails').animate({
right:"+=150"
}, speed);
setTimeout(moveThumbs, speed);
}
});
note: I searched in SO for related questions, but had no luck to find exact information for my specific issue.
Here's a basic script that moves an image across the screen and then resumes on the other side and adapts to the window width.
You can see it working here: http://jsfiddle.net/jfriend00/rnWa2/
function startMoving(img) {
var img$ = $(img);
var imgWidth = img$.width();
var screenWidth = $(window).width();
var amount = screenWidth - (parseInt(img$.css("left"), 10) || 0);
// if already past right edge, reset to
// just left of left edge
if (amount <=0 ) {
img$.css("left", -imgWidth);
amount = screenWidth + imgWidth;
}
var moveRate = 300; // pixels per second to move
var time = amount * 1000 / moveRate;
img$.stop(true)
.animate({left: "+=" + amount}, time, "linear", function() {
// when animation finishes, start over
startMoving(this);
})
}
$(document).ready(function() {
// readjust if window changes size
$(window).resize(function() {
$(".mover").each(function() {
startMoving(this);
});
});
});
​ ​

Categories