How to add jquery in specific width - javascript

I am using skroller.js. But after using this jquery, Touch is not working on the mobile version of my site.

You want something like this?
Check this DEMO : http://jsfiddle.net/aq5vb/4/
Try to resize the result frame see what happens when the window's size reaches 960px.
JQUERY
$(document).ready(function(){
doThisScript();
});
$(window).on('resize', function () {
doThisScript();
});
function doThisScript() {
$('.content').html('Your current width is '+$(window).width());
if($(window).width() >= '960'){
// add your scripts here
$('.content').css({'background':'green'});
}
else{
$('.content').css({'background':'white'});
}
}

Related

Navbar change on scroll and on window load or resize

I have this issue that I'm not being able to work correctly.
I have a navbar that must change on scroll(this part works fine) but it must also change when window/viewport is < 991px.
It actually does work, but I must scroll to apply the effect.
Here's my code:
$(document).ready(function()
{
var $navbar = $('.navbar');
// ----------
$(function()
{
$(window).scroll(function()
{
if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
{
$navbar.addClass("compressed");
}
else
{
$navbar.removeClass("compressed");
}
});
});
});
If I shrink the broswer, nothing happens. At the first scroll, it works correctly. How should I trigger it when load or resize the window?
Thanks!
Just replace this:
$(window).scroll(function() {...});
with this:
$(window).on("load scroll resize", function() {...});
That will result in the function being called on any of the listed events.

Hide div when iframe gets to certain height automatically

My users book an appointment on our website which changes the height of an iframe when the iframe has changed height I want to hide the above the iframe automatically. This is what I have so far the limitation is it only works on the following events but I want it to hide the dynamically rather than on page re-size or scroll as these events dont take place
$(window).on('load resize scroll', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
I use the iframeresizer js plugin to detect dynamically update the height of the iframe
<script>
jQuery(function($) {
$(window).on('DOMSubtreeModified', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
});
</script>

Check browser width after resize, without reload (Javascript)

I have a small piece of Javascript that checks what the browser's width is on load and, depending on the result, runs a piece of jQuery. This to display a different menu on mobile devices
However, it CAN happen a user starts with a very small browser on his desktop, running the jQuery (and therefore the mobile menu). If he then resizes to full-screen, the menu doesn't change, because the check on the browser's width doesn't run again.
The question: How do I adapt the Javascript so it checks every time the browser is resized?
My code:
if (window.innerWidth <= 992) {
jQuery(document).ready(function($) {
$(".main-menu").hide();
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
});
}
else {
jQuery(document).ready(function($) {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
});
}
You can use a resize function wrapper like this:
function resize(){
// do all your stuff here
}
And then call it once on page load, and recall it on every resize event:
$(document).ready(function(){
resize();
$(window).resize(resize);
});
Instead of the wrapper you could also use an anonymous function ($(window).resize(function(){/*Do stuff here*/})), but then you can't call your function on page load and you'd have to repeat yourself.
Your specific case
In your specific case you'd have to take out the document readys. Heres how it should look:
function resize(){
// First we need to show all, then we will selectively hide based on page width
$(".main-menu, .mobile-nav-button, .mobile-cart-button").show();
if (window.innerWidth <= 992) {
$(".main-menu").hide();
// also, because you bind a click event here, you'll need to unbind it every time
// otherwise it will be executed multiple times after a couple of resizes
// (you could also do what #david does and move this into the document.ready below)
$(".mobile-nav-button").off("click").click(function() {
// slideToggle will toggle display of an element, but because its wrapped in click()
// it only gets executed onclick, not resize. Also, you don't want animation on resize.
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
A snippet
Below is a snippet with the code working. I reduced the width to 700 pixels so I could see the effects at a smaller screen difference (because that how the snippet editor looks) but it all works.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mobile-nav-button">Mobile Nav Button</div>
<div class="mobile-cart-button">Mobile CART Button</div>
<div class="main-menu">MAIN MENU</dov>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function resize(){
$(".mobile-nav-button, .mobile-cart-button, .main-menu").show();
if (window.innerWidth <= 700) {
$(".main-menu").hide();
$(".mobile-nav-button").off("click").click(function() {
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
</script>
</body>
</html>
you can use
jQuery(document).ready(function($) {
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
$(window).resize(function()
{
if (window.innerWidth <= 992) {
$(".main-menu").hide();
}
else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
));
$(window).resize();
));
Just call resize function on pageLoad
$(document).ready(function($) {
$(window).resize(YourFunctionName);
$(window).resize();
});
function YourFunctionName() {
// Here is your code which you want to run automatically on page resize.
}

Remove JS function at certain screen width

I am trying to remove certain functionality when the screen is at certain widths. I was wondering if you could tell me why this doesn't work?
http://jsbin.com/ALAYOru/1/edit
I remove the 'has-sub-menu' class when the screen goes below 700px but it still executes the mouseover event.
Thanks!
Or this.
function isWindowSmall()
{
if(window.innerWidth < 700px) return true;
else return false;
}
$(".some-btn").on('click',function()
{
if(isWindowSmall()){
//do something for small windows
}
else{
//do something else for big windows
}
});
That is becauase what this is doing is.
$(".has-sub-menu").mouseenter(function(){
$(this).css('background-color','red');
}).mouseleave(function(){
$(this).css('background-color','transparent');
});
This goes and finds all of the elements with the class of .has-sub-menu and then it attaches the event listener, so this listener will be applied forever, what you could do is something like this.
$("body").on({
mouseenter: function(){
$(this).css('background-color','red');
},
mouseleave: function(){
$(this).css('background-color','transparent');
}
}, '.has-sub-menu');
This will check to see if the element has the class every time it is clicked
Demo: http://jsbin.com/ALAYOru/6/edit
Note: in the demo, you might have to make the output window bigger than 720px and then refresh to see the proper effect.
You can add a function to check the screen size and remove the onmouseover event listener.
function check_screen() {
if(window.innerWidth < 700px)
{
whateveryourelementiscalled.removeEventListner('onmouseover', //whatever your mouseover function was);
}
}
try this.
window.onresize = function () {
if(window.innerWidth < 700) {
// your code here
}
}

Unload jquery function if window resize

I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.
i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel

Categories