Need help about this jQuery code

Need help about this jQuery code - javascript

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();

Related

How do I use blur in jQuery?

I have the following code:
$(function() {
$('.type_choice_textarea').on('focus', function() {
$(this).css("height", "150px");
});
if ($('.type_choice_textarea').val().length == 0) {
$('.type_choice_textarea').on('blur', function() {
$(this).css("height", "30px");
});
}
});
but blur does not work. How do I use if in blur?

Just write you if condition within blur event handler
$(function() {
let elem = '.type_choice_textarea';
$(elem).on('focus', function() {
$(this).css("height", "150px");
});
$(elem).on('blur', function() {
if ($(this).val().length == 0) {
$(this).css("height", "30px");
}
});
});

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=""
/>

Preventing a $(window).on('scroll function) from firing until after a .click function

I do not want $(window).on('scroll', function() {} to begin until after $('#load_more_photos').on('click', function() {} has already been run. I want to achieve Instagram-like pagination that begins with the button being clicked and transitions into scrolling pagination. Also, I would like to add a time transition so that each pagination takes 1500ms, right now I feel that the photos are loading too fast on scroll and it is awkward.
$(document).on('page:change', function () {
if($('#infinite-scrolling').size() > 0) {
$('.pagination').hide();
$('#load_more_photos').show();
$('#load_more_photos').on('click', function() {
var url = $('.pagination .next_page a').attr('href');
$.getScript(url);
$('#load_more_photos').hide();
});
$(window).on('scroll', function() {
var url = $('.pagination .next_page a').attr('href')
if($(window).scrollTop() > $(document).height() - $(window).height() - 60 && $.active == 0) {
$.getScript(url);
}
});
}
});
Edit: I tried to add a boolean below but it is not working, the click function does not work at all.
$(document).on('page:change', function () {
var clicked_yet;
clicked_yet = true;
if($('#infinite-scrolling').size() > 0) {
$('.pagination').hide();
$('#load_more_photos').show();
$('#load_more_photos').on('click', function() {
var url = $('.pagination .next_page a').attr('href');
$.getScript(url);
$('#load_more_photos').hide();
clicked_yet = false;
});
if (!clicked_yet) {
$(window).on('scroll', function() {
var url = $('.pagination .next_page a').attr('href')
if($(window).scrollTop() > $(document).height() - $(window).height() - 60 && $.active == 0) {
$.getScript(url);
}
});
}
}
});

I got this code working after rolling back the code. There might have been css issues somewhere in the code previously. It works as intended now.
$(document).on('page:change', function () {
if($('#infinite-scrolling').size() > 0) {
$('.pagination').hide();
$('#load_more_photos').show();
$('#load_more_photos').on('click', function() {
var url = $('.pagination .next_page a').attr('href');
$.getScript(url);
$('#load_more_photos').hide();
$(window).on('scroll', function() {
var url = $('.pagination .next_page a').attr('href')
if($(window).scrollTop() > $(document).height() - $(window).height() - 60 && $.active == 0) {
$.getScript(url);
}
});
});
}
});

Combining 2 JavaScript .scroll functions

var stickyTopbar = $('#mainHeader').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
}
});
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
At the moment just the "stickyTopbar" is working. The "stickyTopbar2" doesn't. I have a feeling I should combine both?!

Try this:
var stickyTopbar = $('#mainHeader').offset().top;
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
};
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
jsfiddle: https://jsfiddle.net/vhwuvhrd/1/

when not on mobile use the jquery

I have a jquery function for a fixed sidebar. but i only want to use the scrolling function for desktop. so if it's opened on a mobile phone i want him to do nothing. when i'm on desktop i want him to print this code:
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},200);
} else {
$("#sidebar").stop().animate({
marginTop: 0
},200);
};
});
});
</script>
I tried to do it like this, but this didn't work. then it will never go with you when you scroll down the page.
<script>
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if(isMobile.any()){
document.write('')
} else {
document.write('<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},200);
} else {
$("#sidebar").stop().animate({
marginTop: 0
},200);
};
});
});
</script>')
}</script>

Develop Reference

JavaScript is the programming language of the Web.

Need help about this jQuery code - javascript

Related

How do I use blur in jQuery?

Source control for images with jquery?

Preventing a $(window).on('scroll function) from firing until after a .click function

Combining 2 JavaScript .scroll functions

when not on mobile use the jquery

Categories

Resources