I have three CSS #media queries and I need to run some JavaScript to measure the height of a div and move a second div on some screen sizes. The issue is that all of my queries are applying, obviously because they all return true. How can I adjust this so that only one of the conditionals fire in jQuery, similarly to CSS?
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function () {
console.log($(window).width());
if ($(window).width() <= 1024) {
console.log ('tab land');
}
if ($(window).width() <= 980) {
console.log ('tab port');
}
if ($(window).width() <= 479) {
console.log ('phone port');
}
});
});
Use else if and check from mobile upwards:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 479) {
console.log('phone port');
} else if ($(window).width() <= 980) {
console.log('tab port');
} else if ($(window).width() <= 1024) {
console.log('tab land');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You could adjust your conditions:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 1024 && $(window).width() > 980) {
console.log('tab land');
}
if ($(window).width() <= 980 && $(window).width() > 479) {
console.log('tab port');
}
if ($(window).width() <= 479) {
console.log('phone port');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
my img has 3 attribute but if has one attribute (data-web-src,data-tablet-src,data-mobil-src) than set my src than one of them attribute is that possible ?
please click to see on codepen
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth >= 768 && winWidth < 960) {
return elData['webSrc']
} else if (winWidth < 768 && winWidth >= 480) {
return elData['tabletSrc']
} else if (winWidth < 480) {
return elData['mobilSrc']
} else if (winWidth > 960) {
return elData['webSrc']
}
})
}
$(document).ready(function() {
noLazyImages("body img");
})
img {
width: 300px;
}
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I think the following code will do what you want.
I removed the data-tablet-src from the img tag which is there in the question snippet so that you can run both and compare the results.
Logic
if(elData['tabletSrc']) will be false if elData['tabletSrc'] is not present. So it will return return elData['webSrc'] instead.
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth < 768 && winWidth >= 480) {
if(elData['tabletSrc']){
return elData['tabletSrc'];
}
} else if (winWidth < 480) {
if(elData['mobilSrc']){
return elData['mobilSrc'];
}
}
return elData['webSrc'];
});
}
$(document).ready(function() {
noLazyImages("body img");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg"
/>
Your script work fine you just need to add listener to window resize event:
$(document).ready(function() {
noLazyImages("body img"); // on Document ready
$( window ).resize(function() {
noLazyImages("body img"); // on window Resize
});
})
How can I resize image with jQuery scrolling only when the screen size is greater than or equal to 992px?
I've tried the following code, but it didn't work.
jQuery(function () {
/*Logo Resize*/
jQuery(window).resize(function () {
if (jQuery(this).width() < 992) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).width() >= 992) {
/*Logo Scroll*/
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() >= 250) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).scrollTop() < 250) {
jQuery('#logo-img img').attr('src', 'imgs/logo.png');
}
});
}
});
});
I have a tooltip that might be appear in 2 position : top & bottom
i want do this with jquery resize. when user resize his browser in with less than 768px , my tooltip appear on the top position and when greater than 768px appear on bottom position but resize() wont work!!
$(window).ready(function () {
if ($(window).width() >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if ($(window).width() <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if (wi <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
});
});
Something like this might work out for u mate.. :)
$(window).ready(function () {
if ($(window).width() >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if ($(window).width() <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if (wi <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
Fiddle
I have the following piece of jQuery that checks the width of the browser on load, and runs accordingly. But to make sure the div keeps the right size when the browser-width is changed, I have placed the same piece of code in $(window).resize(function() {..});.
This seems very weird and unnecessary, so I'm wondering how I can place the code only once and have it run on both .resize and on load.
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
});
You can trigger the event after binding the event:
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}).resize();//resize to trigger on load
Working Demo
Just store the function in a variable and execute it everytime you want to:
$(window).load(function() {
wFunc();
});
$(window).resize(function() {
wFunc();
});
var wFunc = function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
}
Have this code:
$(window).resize(function () {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
})
My question is:
The slice 3,6 the default. How can make this display without window resize as default on page load.
And how can do that if width greater than 480px then only do slice 3,6 all other slice is default option?
Put it in a named function.
Fiddle.
function slice_it() {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
}
$(window).resize(slice_it);
slice_it(); // <--- on load
And if I read your second bullet point correctly:
function slice_it() {
if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
Edit:
As per last fiddle in comment. If that is correct you should consider using each as in:
function slice_it() {
if ($(window).width() > 480) {
$(".projects").slice(0, 8).each(function(i) { // Pass index "i"
if (i < 3 || i > 5) { // Here you check for index
$(this).css("margin", "");
} else {
$(this).css("margin", "10px");
}
});
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
In general, using .css("margin", ""); in effect resets style to default.
You could also drop the slice all together and loop by each on $(".projects").each(....
To break a jQuery .each loop return false. Example:
$(".projects").each(function(i) {
if (i > 7)
return false; // This aborts the each loop.
... do other stuff ...
});