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 ...
});
Related
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>
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
});
})
my image has data-web-src, data-tablet-src and data-mobil-src if my img tag has .lazy_res class instead of .lazyload then set value of data-web-src to src on web, but if screen (or device) is tablet than set data-tablet-src value's to src I want to do this for all images on my web page but I can’t find a solution here you are my code
$(document).ready(function() {
function noLazyImages(e) {
var getWebSrc = $(e).attr("data-web-src");
var getTabletSrc = $(e).attr("data-tablet-src");
var getMobilSrc = $(e).attr("data-mobil-src");
if ($(".box img").hasClass("lazy_res")) {
if ($(window).width() > 960) {
$(e).attr("src", getWebSrc);
} else if ($(window).width() < 768) {
$(e).attr("src", getTabletSrc);
}else if ($(window).width() < 480) {
$(e).attr("src", getMobilSrc);
}
} else {
// do nothing..
}
}
noLazyImages(".box img");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<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"/>
</div>
you need to loop over all of them and get and set instance specific values
Can do it using attr(function)
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth > 960) {
return elData['webSrc']
} else if (winWidth < 768 && winWidth >=480) {
return elData['tabletSrc']
} else if (winWidth < 480) {
return elData['mobilSrc']
}
})
}
DEMO
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'm trying to get a simple conditional statement to work, and running into problems. The failing code:
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth > 321) && (wwidth < 481) {
alert("I am between 320 and 480 pixels wide")
}
});
If I remove the else if part of the code, I get the alert. If I try to use && or || operators it will fail. I've Googled, I can't find a reason why it's not working. I've also tried:
((wwidth > 321 && wwidth < 481))
along with other ways, just in case it's some odd syntax thing.
Any help would be greatly appreciated. Thanks :)
((wwidth > 321) && (wwidth < 481))
This is the condition you need (http://jsfiddle.net/malet/wLrpt/).
I would also consider making your conditions clearer like so:
if (wwidth <= 320) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if ((wwidth > 320) && (wwidth <= 480)) {
alert("I am between 320 and 480 pixels wide")
}
if (wwidth > 321 && wwidth < 481) {
//do something
}
There are two issues. The first has already been answered, the second is "wwidth > 320" which should be "wwidth>=320". What if the window is larger than 480?
you can also implement "between" as follows:
Number.prototype.between = function(a, b) {
return this >= a && this <= b
}
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth.between(321,481))
alert("I am between 320 and 480 pixels wide")
else alert("I am greater than 480 pixels wide.");
});