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
Related
$(function(){
var x = $('.my__list').children();
for (var i = 0; i < x.length ; i += 2) {
var windowSize = $(window).width();
if(windowSize < 500) {
x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>');
}
if(windowSize > 500) {
x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>');
console.log("test");
}
}
});
I want to unwrap all my list when the browser's width change. At the moment it only change when the user refresh the browser. Thank you.
I get the source from https://codepen.io/Kibs/pen/aNzvBG
I fixed the problem by using a row function from slick and some modification inside slick.js. There is some bug from rows: 2 to rows: 1 when i used it in responsive settings.
I got the answer from here and it works for me:
Slick.prototype.buildRows = function() { ... }
Slick.prototype.cleanUpRows = function() { ... }
and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)
You can hook this up to the window resize event, or in JQuery $(window).resize():
$(function(){
resizeAndWrap(); // Runs once on page load
$(window).resize(function() {
resizeAndWrap(); // Runs everytime window is resized
});
});
function resizeAndWrap() {
var x = $('.my__list').children();
for (var i = 0; i < x.length ; i += 2) {
var windowSize = $(window).width();
if(windowSize < 500) {
x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>');
}
if(windowSize > 500) {
x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>');
console.log("test");
}
}
}
Here is the codepen example with my changes
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
});
})
I am trying to change the file path for an image depending on the width of the screen. I have gotten it to work so far as the file path does change but it ONLY affects the first element in the sense that it changes ALL file paths to the same one.
When I view my code in the browser both image 1 and image 2 are replaced with src="Images/image.jpg". Could someone help me in identifying what I need to do/change in order for it to affect EVERY element with the class name "swap-image" uniquely?
As in, change
src="Images/image.jpg"
src="Images/image1.jpg"
to
src="Images/tablet/image.jpg"
src="Images/tablet/image1.jpg"
Thank you in advance.
<body>
<img class="swap-image" src="Images/image.jpg" />
<img class="swap-image" src="Images/image1.jpg" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
var swapImageClass = document.getElementsByClassName("swap-image");
var i;
for (i = 0; i < swapImageClass.length; i++) {
var src = $(swapImageClass).attr('src'); // "Images/image.jpg"
var tarr = src.split('/'); // ["static","Images","banner","image.jpg"]
var file = tarr[tarr.length - 1]; // "image.jpg"
var data = file.split('.')[0]; // "image"
$(window).on('load resize', function () {
$(swapImageClass).each(function () {
if ($(window).width() > 1025) {
$(swapImageClass).attr('src', 'Images/' + file);
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(swapImageClass).attr('src', 'Images/tablet/' + file);
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(swapImageClass).attr('src', 'Images/mobile/' + file);
}
});
});
};
});
</script>
</body>
We base the filename on the current element in the loop and bind an eventlistener to it.
$(document).ready(function() {
var swapImageClass = $('.swap-image');
swapImageClass.each(function(index) {
var filename = $(this).attr('src').split('/').pop(),
img = $(this);
$(window).on('load resize', function() {
var w = $(window).width();
if (w > 1025) {
img.attr('src', 'Images/' + filename);
} else if (w > 481 && w < 1024) {
img.attr('src', 'Images/tablet/' + filename);
} else if (w > 0 && w < 480) {
img.attr('src', 'Images/mobile/' + filename);
}
});
});
});
When you are using jquery I think you can simply use class name and each() loop.
$(window).on('load resize', function () {
$(".swap-image").each(function () {
var src = $(this).attr('src'); // "Images/image.jpg"
var tarr = src.split('/'); // ["static","Images","banner","image.jpg"]
var file = tarr[tarr.length - 1]; // "image.jpg"
if ($(window).width() > 1025) {
$(this).attr('src', 'Images/' + file);
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(this).attr('src', 'Images/tablet/' + file);
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(this).attr('src', 'Images/mobile/' + file);
}
});
});
check this function here https://jsfiddle.net/7619099p/
Just modifying your code here, was this the expected?
$(document).ready(function(e) {
//Here we are saving the file name as a data attribute to each images
$(".swap-image").each(function(index, element) {
var tarr = $(element).attr("src").split('/');
var file = tarr[tarr.length - 1];
$(element).data("filename",file);
});
$(window).on('load resize', function () {
$(".swap-image").each(function () {
// and here we are using the saved data attribute(filename) for new path [$(this).data("filename")] on resize.This will give you individual new paths based on screen resolution.
if ($(window).width() > 1025) {
$(swapImageClass).attr('src', 'Images/' + $(this).data("filename"));
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(swapImageClass).attr('src', 'Images/tablet/' + $(this).data("filename"));
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(swapImageClass).attr('src', 'Images/mobile/' + $(this).data("filename"));
}
});
});
});
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();
}
}
I am working on a responsive design template where the horizontal menu-bar will convert into an icon to save space. Basically I have created 3 media queries, i.e. > 800px, betweeen 500 to 800px and less than 500px.
.
It is working fine, but when the windowWidth of the screen reaches the range of 484px to 500px, the menu-bar just disappears! You can go to the link to view the test page : http://www.acetraining.com.sg/responsive1/
// JavaScript Document
var windowSize = "";
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function (e) {
checkBrowserSize();
setInterval("checkBrowserSize()", 100);
$("a.mobile_menu").on("click", function () {
var navHeight = $("nav").height();//finding current height of navigation
var newNavHeight = $("nav div").height();
//mobile screen
if (navHeight == 0) {
$("nav").animate({"height": newNavHeight + "px"}, 500);
$(this).addClass("selected");
}
//retract back to 0
else {
$("nav").animate({"height": "0px"}, 500);
$(this).removeClass("selected");
}
});
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $("body").width();
var sizeDiff = windowWidth - contentWidth;//size of scrollbar
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) {
newWindowSize = "large";
}
if (actualSize <= 800 && actualSize > 500) {
newWindowSize = "medium";
}
if (actualSize <= 500) {
newWindowSize = "small";
}
//display out
$("h1").html(windowWidth + "(" + contentWidth + "(contentWidth) + " + sizeDiff + "(sizeDiff)) is " + newWindowSize);
if (windowSize != newWindowSize) {
windowSize = newWindowSize;
//invoke changeNav
changeNav();
}
else {
//append the word no change
$("h1").append("--no change--");
}
}//end of checkBrowserSize()
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}//end of changeNav()
I suspect the problem lies in my javascript file. I have attached the codes for your perusal:
I am hoping there is a way to show the menus between these ranges.
The media query in screen_layout_large.css css file is hiding the mobile menu. Either edit the media query to give a min-width or show the mobile menu as follows in changeNav function.
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}