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
});
Related
basically, what I want to do is trigger an event if the user increases the size of the browser from X to Y. Provided X = Anything less than 750 pixels, and Y is anything more than 750 pixels.
Right now, I am doing something like this:
$(window).resize(function(){
if ($(window).width() >= 750) {
console.log('750 or more');
}
});
This works, however, its clearly not efficient. For example, if I resize my window from 780px to max width (1024px), even then the event gets triggered. Or even if I decrease the size from 800px to 780px, I still obviously get the console output.
How do I get this to work right?
You will need to setTimeout to allow check to take place .
Example :
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var body_size = $(window).width();
// ...
// do your screen check here
// ...
}, 1);
})
Hope this helps
There's no true solution for this issue since removing the on resize event after max width has been reached results in the on resize function no longer being called even when the width is below 1024px.
Maybe in the future it's possible to have an on resize event under certain conditions only.
You can also use the on resize end event to only trigger the function after resizing the window, keep in mind this might result in visual changes happening after a user has resized a window instead of during the resizing of a window.
There are multiple methods to make the on resize event perform better: http://bencentra.com/code/2015/02/27/optimizing-window-resize.html
Here is a throttled version using script that might be a good start
Fiddle demo
(function(timeout,bigger) { // local static var - timeout,bigger
window.addEventListener("resize", function(e) {
if ( !timeout ) {
timeout = setTimeout(function() {
timeout = null;
actualResizeHandler(e);
// Set the actual fire rate
}, 66);
}
}, false);
function actualResizeHandler(e) {
// handle the resize event
if (window.innerWidth >= 750 && !bigger) {
//passed above (or equal) 750
document.querySelector('span').style.color = 'blue';
document.body.innerHTML += '<br>above 750';
} else if (window.innerWidth < 750 && bigger) {
//passed below 750
document.querySelector('span').style.color = 'red';
document.body.innerHTML += '<br>below 750';
}
bigger = (window.innerWidth >= 750);
}
// run once at load
bigger = (window.innerWidth < 750);
actualResizeHandler();
}(null,false));
<span>This text is blue on big and red on small</span>
and here is one use CSS media query
span {
color: red;
}
#media screen and (min-width: 750px) {
span {
color: blue
}
}
<span>This text is blue on big and red on small</span>
Usually I'm able to figure things out given enough time (hence my first post here), but I've been beating my head against the wall for a while now on this one.
I'm trying to:
Center image using jQuery (it's an <img> tag, not background image on a <div>),
Load the correct image size on (window).load, and
Load a new img file at certain breakpoints as the window is re-sized.
Here is my current attempt. The centering script works perfectly. Also, the correct image file is loaded. However, I cannot get the re-size portion to work when the window is made wider or narrower (the image file does not dynamically reload).
CODE:
<!-- Center Floating Div Elements -->
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
$(window).load(function(){
$('.laptop').center();
window.onresize = function(event) {
$('.laptop').center();
}
});
</script>
<!-- Load correct image size on window load -->
<script>
$(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
})
</script>
<!-- Re-load new image size on window resize -->
<script>
$(window).onresize = function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
</script>
The relevant HTML is just a tag with a class of "laptop", wrapping around an image tag (which is where I want the image source to dynamically change).
lharby: here was my attempt at your suggestion, couldn't get it to work either:
<script>
var picresize = $(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
$(window).load(function(){
$picresize();
window.onresize = function(event) {
$picresize();
}
});
</script>
So to elaborate on the comments. I made this fiddle:
https://jsfiddle.net/lharby/5p2xdnaf/
There is now a single function called chImage which checks window width and can then be triggered on various events.
I've also stored window width in a variable to make the code a bit cleaner and easier to read (you could also set your sizes in variables, and then change them later if needed, so only write them once).
var chImage = function(){
var winWidth = $(window).width();
if(winWidth >= 0 && winWidth <= 900){
$("img").attr("src","http://placehold.it/350x150");
}
else if(winWidth > 900 && winWidth <= 1400){
$("img").attr("src","http://placehold.it/500x300");
}
else{
$("img").attr("src","http://placehold.it/800x400");
}
};
Then call this function and bind it to whatever events we want.
$(window).on("load resize", function(){
chImage();
});
EDIT
I did move the centering function below to make sure it wasn't intefering with this function, but the centering can be achieved with css. I will try and update.
Chris Coyier has made an utterly interesting article about figuring out responsive images.
The image centering can be done in CSS, no need for scripts. See centering things and solved by flexbox.
I have an animation where three images rotate up and down. JSfiddle: http://jsfiddle.net/rLgkyzgc/1/
$(window).load(function() {
// Load images in BG that have been hidden by CSS
$('.banners').show();
// Create an empty array
var banners = [];
// Fill array with banner ids
$('.banners').each(function () {
var banner = $(this).attr('id');
banners.push(banner);
});
function switchBanners(){
var $firstBanner = $('#' + banners[0]);
var $secondBanner = $('#' + banners[1]);
var firstBannerHeight = $firstBanner.height();
var secondBannerHeight = $secondBanner.height();
$firstBanner.animate({ bottom: -firstBannerHeight }, 1200);
$secondBanner.animate({ bottom: 0 }, 1200, function(){
b = banners.shift(); banners.push(b);
setTimeout(function(){
switchBanners();
}, 4000);
});
};
// Delay initial banner switch
setTimeout(function(){
switchBanners();
}, 4000);
});
This is great for the desktop view, but on mobile, I want to stop the animation and just show one static image.
So my questions. How can I :
Only start the animation on page load if the window width is > 940px
Stop (reset) the animation if the page is resized to be < 940px wide
THEN restart the animation if the page resized to be > 940px wide
You should use window.matchMedia (see the documentation) to detect the viewport size on document.ready and when the window is resized, so something like this:
function resetAnimation() {
$firstBanner.stop(true, true);
$secondBanner.stop(true, true);
if(window.matchMedia("(min-width: 940px)").matches) {
//Start the animations here
}
}
$(document).ready(function() {
resetAnimation();
}
$(window).resize(function() {
resetAnimation();
}
Note that you don't really need to stopthe animations on document.ready, but this way you have a single function to reset the animations and then restart them only if necessary, which is something you typically want to do every time you resize the browser window, regardless of the viewport size.
I'll reference these in order:
1. Only start the animation on page load if the window width is > 940px
In your window load function, grab your browser width with $(window).width(). Then check that against your 940 (leave off the "px"), and perform necessary actions.
So:
if ($(window).width() > 940){ *actions* }
2. Stop (reset) the animation if the page is resized to be < 940px wide
To do this, you'll need to use the window resize function ($(window).resize()) and check your 940 against the browser width.
So:
$(window).resize(function(){
if ($(window).width() <= 940){
*stop (reset) animation*
}
});
3. THEN restart the animation if the page resized to be > 940px wide
This logic is essentially the same as #2, just reversed:
$(window).resize(function(){
if ($(window).width() > 940){
*restart animation*
}
});
I'm trying to execute functions based on the user screen size. I managed to do so with the following code:
var width = $(window).width();
if (width > 1000) {
slideshow();
tablet();
if (width > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
When the user is changing his screen size while he is already inside the website (like resizing or changing orientation mode) the previous functions that were executed are still taking effect, which creates conflict with he latest functions that are trying to get executed.
I tried add the following code to the one listed above:
$(window).resize(function() {
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
if (width > 1000) {
slideshow();
tablet();
if (width > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
});
This code .unbind() every element that is being effected by the previous functions when the user resizing the browser, but it still loads the previous functions (phone/tablet).
I'm looking for a way to remove the unnecessary functions when the screen size is being resized.
live example can be viewed at this website
Try this:
function res(){
var width = $(window).width();
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
}
$(window).ready(res).resize(res);
My DIV #sequence is to be full height of the browser window for window sizes greater than 920px in height. When its greater than 920px in height I want to fire a plugin, for window sizes lower than 920px I want the #sequence div to be the height set in my CSS file as a fallback. This works when the page is loaded, however I cannot get the resize event to fire, its unresponsive and I see no errors in console.
This is my code mostly taken from this post Do something if screen width is less than 960 px:
var eventFired = 0;
if ($(window).height() < 920) {
} else {
fitSequence();
eventFired = 1;
}
$(window).on('resize', function() {
if (!eventFired == 1) {
if ($(window).height() < 920) {
} else {
$(window).resize(function(){ fitSequence(); });
}
}
});
Just as an FYI here's the fitSequence plugin I'm referencing:
function fitSequence(){
var height=$(window).height();
$('#sequence').css('height',height-100+"px");
};
If condition is not correct:
if (!eventFired == 1) {
It should be:
if (eventFired != 1) {
And in the function part this is ambiguous part of code:
$('#sequence').css('height',height-100+"px");
It should be:
$('#sequence').css('height',(height-100)+"px");
^^ add brackets