Develop Reference

Source control for images with jquery?

I have 3 attribute for my images as below
data-web-src
data-tablet-src
data-mobil-src
So if data-tablet-src or data-mobil-src is undefined or empty then hide current image. I couldn't achieve so far.
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'];
});
}
$(window).resize(function() {
noLazyImages("body img");
});
noLazyImages("body img");
img{
width:300px;
}
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
CodePen Demo

Instead of using .attr I would use .each as you can then hide the image if the condition is not met:
function noLazyImages(e) {
$(e + '.lazy_res').each(function() {
var image = $(this),
elData = image.data(),
winWidth = $(window).width();
if (winWidth < 768 && winWidth >= 480) {
// tablet screen width
if (elData['tabletSrc']) {
image.attr('src', elData['tabletSrc']).show(); // show image if exists or hide
} else {
image.hide();
}
} else if (winWidth < 480) {
// mobile screen width
if (elData['mobilSrc']) {
image.attr('src', elData['mobilSrc']).show(); // show image if exists or hide
} else {
image.hide();
}
} else {
// all other screen widths
if (elData['webSrc']) {
image.attr('src', elData['webSrc']).show(); // need to add .show() here in case image was hidden by a different screen size
} else {
image.hide();
}
}
})
}
$(window).resize(function() {
noLazyImages("body img");
});
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="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>
Fiddle so you can adjust the frame size and see it working
One other thing I would add is that lazy loaded images are meant to have a default placeholder image url for before the js loads and the image scrolls into view

Well if you want to hide the image if data-tablet-src or data-mobil-src are undefined or empty you just need to use a test:
if(!elData['tabletSrc'] || elData['tabletSrc'] == '' || !elData['mobilSrc'] || elData['mobilSrc'] == ''){
$(this).hide();
return "";
}
Demo:
Here's a working Demo snippet with two images example.
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if(!elData['tabletSrc'] || elData['tabletSrc'] == '' || !elData['mobilSrc'] || elData['mobilSrc'] == ''){
$(this).hide();
return "";
}
if (winWidth < 768 && winWidth >= 480) {
if (elData['tabletSrc']) {
return elData['tabletSrc'];
}
} else if (winWidth < 480) {
if (elData['mobilSrc']) {
return elData['mobilSrc'];
}
}
return elData['webSrc'];
});
}
$(window).resize(function() {
noLazyImages("body img");
});
noLazyImages("body img");
img{
width:300px;
}
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
You can see the second image without data-tablet-src and data-mobil-src is empty is hidden.

USE THIS JS CODE
function noLazyImages(e) {
$(e + '.lazy_res').each(function(id, elm) {
if (!$(elm).data()['mobilSrc'] || !$(elm).data()['tabletSrc']) {
$(this).hide();
}
$(elm).attr('src', function(_, oldSrc) {
var elData = $(elm).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'];
});
});
}
function noLazyImages(e) {
$(e + '.lazy_res').each(function(id, elm) {
if (!$(elm).data()['mobilSrc'] || !$(elm).data()['tabletSrc']) {
$(this).hide();
}
$(elm).attr('src', function(_, oldSrc) {
var elData = $(elm).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'];
});
});
}
$(window).resize(function() {
noLazyImages("body img");
});
noLazyImages("body img");
img {
width: 300px;
}
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Try with filter() function of jquery and find the attribute of data-mobil-src && data-tablet-src is empty ,null.undefined using if(!).its return the false attribute element.then apply the hide()
See my below snippet I was added two image first one is true second one is false (is not visible)
$('.lazy_res').filter(function(){
return !$(this).attr('data-mobil-src').trim() && !$(this).attr('data-tablet-src').trim()
}).hide()
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'];
});
}
$(window).resize(function() {
noLazyImages("body img");
});
noLazyImages("body img");
img {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="" data-tablet-src=""
/>

Need help about this jQuery code

This code works perfectly but I need it to work when I open my browser. Also when I resize my browser to have mobile menu both functions work hover and toggle.
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
});

My best approach will be replacing the code with:
var reszFn = function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
};
$(document).on('ready', reszFn);
$(window).on('resize', reszFn);

Just trigger the resize function
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
}).resize();

Background image change on scroll

I would like to change background image of one div on scrolling the browser.
Here is my code
$element = $('.girlBg'),
classNameOne = 'girlBg1';
classNameTwo = 'girlBg2';
classNameThree = 'girlBg3';
classNameFour = 'girlBg4';
classNameFive = 'girlBg5';
classNameSix = 'girlBg6';
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800) {
$element.addClass(classNameSix);
} else {
}
});
Now, when i scroll 300px, the first class adding without any problem, but when I scroll more no other classes adding to it.
Please help. Thanks..

you can reverse the conditions
if ($document.scrollTop() >= 1800) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 300) {
$element.addClass(classNameSix);
} else {
}

Its because it is always going into your first if.
if ($document.scrollTop() >= 300 && $document.scrollTop() < 600) {
You need a less than check in your if.

You need range as mentioned in above answer of #Thomas Harris. But you need range for all condition. Try this:
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600 && $document.scrollTop() < 600) ) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900 && $document.scrollTop() < 900)) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200 && $document.scrollTop() < 1200)) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500 && $document.scrollTop() < 1500)) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800 && $document.scrollTop() < 1800)) {
$element.addClass(classNameSix);
} else {
}
});

Browser Resize Comparative Statement

A current jQuery project of mine requires browser resize (width AND height) functionality, some of the supported resolutions are funky when compared to each other. Any suggestions to improve this comparative statement are welcome. I tried to close any holes, but I've a feeling there are a few left. Please note I'm also checking for a variable of 'isIos'.
Here's the script:
function getBrowserWidth() {
$(window).load(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
$(window).resize(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
}
function getBrowserHeight() {
$(window).load(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
$(window).resize(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
}
var browserWidth = getBrowserWidth(),
browserHeight = getBrowserHeight(),
isIphone = navigator.userAgent.match(/iPhone/i) != null,
isIpod = navigator.userAgent.match(/iPod/i) != null,
isIpad = navigator.userAgent.match(/iPad/i) != null,
isIos = isIphone || isIpod || isIpad;
if (browserWidth <= 1024 && isIos) {
} else if (browserWidth > 800 && browserWidth <= 1024 && !isIos) {
} else if (browserWidth <= 1024 && browserHeight <= 768 && !isIos) {
} else if (browserWidth > 1024 && browserWidth <= 1280) {
} else if (browserWidth > 1024 && browserWidth <= 1280 && browserHeight <= 720) {
} else if (browserWidth > 1280 && browserWidth <= 1600) {
} else if (browserWidth > 1280 && browserWidth <= 1600 && browserHeight > 768 && browserHeight <= 900) {
} else if (browserWidth > 1920 && browserWidth <= 4000) {
} else if (browserWidth > 1920 && browserWidth <= 4000 && browserHeight > 1080 && browserHeight <= 4000) {
} else {
}

if you really want to do this method, then i suggest a cascade comparison from highest to lowest (sort of switch statement). that way, you don't need ranges:
var w = $.Window.width();
if(w>4000){
//greater than 4000
} else if(w>1920){
//assumed less than 4000 greater than 1920
} else if (w>1280){
//assumed less than 1920 but greater than 1280
} else if (w>1024){
//assumed less than 1280 but greater than 1024
} else if (w>800){
//assumed less than 1024 but greater than 800
} else {
//small sized
}

javascript to jquery

I am trying to update my javascript to be jquery.
Here is the javascript (this is working correctly)
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof (window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('content')
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
contentElement.style.visibility = 'visible';
}
else {
contentElement.style.position = 'static';
contentElement.style.visibility = 'visible';
}
}
}
}
window.onload = function () {
setContent();
}
window.onresize = function () {
setContent();
}
</script>
Here is the jquery (this just returns a blank screen without errors)
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof (window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if ($.documentElement && $.documentElement.clientHeight) {
windowHeight = $.documentElement.clientHeight;
}
else {
if ($.body && $.body.clientHeight) {
windowHeight = $.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if ($) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = $('content')
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
contentElement.style.visibility = 'visible';
}
else {
contentElement.style.position = 'static';
contentElement.style.visibility = 'visible';
}
}
}
}
$(document).ready= function () {
setContent();
}
$(document).onresize = function () {
setContent();
}
</script>

Your function bindings at the end are a bit off, they should look like this:
$(setContent);
$(window).resize(setContent);
This will lead to other errors though, $ isn't a replacement for document, overall I think this is what you're looking for:
function setContent() {
var windowHeight = $(window).height();
if (windowHeight > 0) {
var contentHeight = $('#content').height();
if (windowHeight - contentHeight > 0) {
$('#content').css({ position: 'relative',
top: ((windowHeight / 2) - (contentHeight / 2)) + 'px',
visibility: 'visible' });
}
else {
$('#content').css({ position: 'static',
visibility: 'visible' });
}
}
}
$(setContent);
$(window).resize(setContent);​
You can give it a try here, a few notes on this compared to the code in the question:
document.getElementById('content') is $('#content'), notice the # for an #ID selector.
$(window).height() uses .height() to take care of the cross browser/various case heights.
You can't replace document with $, they're very different things :)
.css() takes an object, so you can shorten you style setting above.

try this code..
$(function(){
var windowHeight = $(window).height();
var content = $('content');
if (windowHeight > 0) {
if (windowHeight - content.height() > 0) {
content.css({'position':'relative','top':((windowHeight/2) - (content.height()/2) + 'px','visibility':'visible' });
}else{
content.css({'position':'static','visibility':'visible'});
}
}
});