I am working on a project and I am using bootstrap. I changed the default behavior of onClick to hover, on above 600 and equal to 600 size ( i.e >= 600 screensize) I want to execute the if body. And on less then 600 size of screen I don't want that code to be executed. BUT on less then 600 screen size if body is executed else part(which is by default on click method of bootstrap) is not executed.
if (screen.width >= 600) {
$(function(){
$('ul.nav li.dropdown').hover(function(){
$('.dropdown-menu', this).fadeIn();
},function(){
$('.dropdown-menu', this).fadeOut('fast');
});
});
}
Since explanation is not clear,Hope you want below piece of condition as per my understanding
function sizeFunc(){
var screenWidth = $(window).width();
$('ul.nav li.dropdown').hover(function(){
if(screenWidth >= 600){
$('.dropdown-menu', this).fadeIn();
}
},function(){
if(screenWidth < 600){
$('.dropdown-menu', this).fadeOut('fast');
}
});
}
$(function(){
sizeFunc();//on begin
$(window).on("resize",sizeFunc);//on every window size change
});
Related
I just write a script to auto positioning an element on my page.
$(document).ready(function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll < 180) {
$(".header-bottom").removeClass("scroll-menu");
if ($(window).width() > 991) {
$(".header_user_top").css("position", "absolute");
$(".header_user_top").css("top", "initial");
$(".header_user_top").css("right", "60px");
$(".header_user_top").css("z-index", "1");
}
} else {
$(".header-bottom").addClass("scroll-menu");
if ($(window).width() > 991) {
var rightContainer = ($(window).width() - ($('#header div.header-bottom div.container').offset().left + $('#header div.header-bottom div.container').outerWidth()));
$(".header_user_top").css("position", "fixed");
$(".header_user_top").css("top", "-22px");
$(".header_user_top").css("right", rightContainer+60+"px");
$(".header_user_top").css("z-index", "99");
}
}
});
});
It's working but if I resize browser window the script doesn't reload.
If I refresh the page it's working.
I have add window.onresize = function(){ location.reload(); }to my script to fix this problem but I'm looking for a better solution.
Any idea?
Use on function to call multiple event:
$(window).on("load resize scroll",function(e){
// do something
}
Call function which is handling size on windows.resize also
function handleSize(){
// You code to handle size
}
window.resize=handleSize();
I have a jquery code that I've indicated below. These codes run, When I start scrolling (I mean when the height of scroll is more than 100)
But I want to run just for once, immediately after height of 100, and not to be run more than once.
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//some codes...
}
});
How can I do this? Thank you :)
As soon as your condition is met, unbind the scroll handler:
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//Kill the handler
$(window).off("scroll");
//some codes...
}
});
use
$(window).unbind('scroll');
When you enter first time
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
$(window).unbind('scroll');
//some codes...
}
});
Bind the scroll event to $(window), then when scrollTop() > 100, execute your action then unbind the scroll event from $(window)
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) {
$('body').prepend('Scroll top > 100');
$(window).unbind('scroll');
}
});
});
body { min-height: 1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://codepen.io/pen/
ok this can be done with the help of global variable or flag in order to see the effect first put lots of data into the page so that you can see vertical scroll.
<script>
var flag = 0;
$(document).ready(function() {
$(window).scroll(function() {
if (flag == 0) {
if ($(window).scrollTop() > 100) {
alert('1st time');
flag = 1;
}
} else if (flag == 1) {
alert('second time and u can comment this alert');
}
});
});
</script>
The .off() function will stop the function from firing after the first time.
$(document).ready(function () {
$(window).on('scroll.myEvent', function() {
if ($(document.body.scrollTop > 100))
{
$(window).off('scroll.myEvent');
alert('fired');
}
});
});
Example: http://jsfiddle.net/2k3s9jx8/
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else if (windowSize <= 450) {
$('.menu-361').on('hover', function () {
//mousehover
} , function(){
//mouseout
} );
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
else {}
}
changeDrop();
$(window).resize(changeDrop);
After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?
http://tidalbania.com/tidnew/
The link in witch the demo is on the real site!
If you need a fiddle i can update the question.
As others have mentioned, you should not bind event handlers on every change. This should suffice:
$('.menu-361').hover(hoverInOut);
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
function hoverInOut(event) {
var windowSize = $(window).width();
if (windowSize > 450) {
if(event.type == "mouseenter")
$('.menu-361 ul').show();
else
$('.menu-361 ul').hide();
}
}
Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.
That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.
Take a moment to learn how event handlers work ^_^
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else {
$('.menu-361').unbind('mouseenter mouseleave');
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
}
changeDrop();
$(window).resize(changeDrop);
I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.
Is this the way it should be done?
i want for specific width, specific click animations but it's not working. Why?
Here an example:
From 0 - 959px > anim1 From 960 - 1279px > anim2 From 1280 - 1699 > anim3 From 1700 - open end > anim4
Here is my Code:
$(document).ready(function(){
if ($(window).width() > 959) {
$("#mains").click(function(){
anim1();
});
}
});
$(document).ready(function(){
if ($(window).width() > 1279) {
$("#mains").click(function(){
anim2();
});
}
});
$(document).ready(function(){
if ($(window).width() > 1699) {
$("#mains").click(function(){
anim3();
});
}
});
$(document).ready(function(){
if ($(window).width() < 1700) {
$("#mains").click(function(){
anim4();
});
}
});
You are binding the animation on $(document).ready() based on the screen size. For example when the DOM is ready and the window width is less than 1700 only the function with anim4() will be used. What you need to do is place the window width check inside a single binding.
For example:
$(document).ready(function(){
$("#mains").click(function() {
if ($(window).width() < 959) {
// do something
} else if ($(window).width() < 1700) {
// do something else, etc.
}
});
});
It seems you have mistaken the conditionals. Also you can use just one document ready event handler and use an if else if statement to distinguish between cases. The statements should specifically set the width borders. Something like:
if ($(window).width() < 969 ) {
anim1();
} else if ($(window).width() >= 970 && $(window).width() < 1200) {
anim2();
}
The widths are as everyone can see examplary.
Except that there could be errors in anim* functions, but those errors would definitely mess up the code.
You are binding events on the basis of width size. I would recommend to check width in event handler and perform action accordingly
$(document).ready(function () {
$("#mains").click(function () {
if ($(window).width() > 959) {
anim1();
}
if ($(window).width() > 1279) {
anim2();
}
if ($(window).width() > 1699) {
anim3();
}
if ($(window).width() < 1700) {
anim4();
}
});
});
Read through your existing code and think about what it will do if the window width happens to be 1750:
Your first if test with > 959 will be true so it will bind a click handler that does anim1().
The second if test with > 1279 will also be true so it will bind another click handler that does anim2().
The > 1699 test would also be true, binding a third click handler that does anim3().
The fourth if test would be false since it has < rather than >, but in fact for a width of 1750 you want anim4() to run.
So then a click would call the first three animations.
What you need is an if/else if/else if/else structure so that only one of the four animX() functions is used. Also you probably want to do the test inside the click handler so that it uses the window width at the time of the click, not the width at the time the page loads. So:
$(document).ready(function() {
$("#mains").click(function() {
var w = $(window).width();
if (w < 960)
anim1();
else if (w < 1280)
anim2();
else if (w < 1700)
anim3();
else
anim4();
});
});
Note that at the beginning of the click handler I've put the $(window).width() into the (imaginatively named) w variable to save having to repeat those two function calls in the else if statements.
Try
$(document).ready(function(){
if ($(window).width() > 1699) {
anim3();
}else if($(window).width() > 1279){
anim2();
}else if($(window).width() > 959){
anim1();
}
});
I have a div with a heading using and i have a Vertical Navigation menu in same div.
To make it responsive i use media query and "Display:none and position:abolute" to Navigation Container.
it works perfectly fine till this step.
NOW what i want is that. when i click this heading the the Navigation menu appears and when i click a Link on the Navigation Menu disappears means the menu itself become"Display:none"
I used .toggle() jquery to achieve this.
when this works perfectly fine.
but problem is that i want that this .toggle() function not to work when the width of window is more then 980px;
<h2 id="heading"><span>Office<span class="blue">Managnment</span></span></h2>
<ul id="list">
<li>P</li>
<li>A</li>
<li>N</li>
<li>L</li>
<li>A</li>
<li>R</li>
<li>P</li>
</ul>
and javascript
$(function () {
$("#heading").click(function () {
$("#list").toggle();
});
$("#list").click(function () {
$("#list").toggle('hide');
});
});
and yes i tried if statement to execute this code only when the width is less then 980px but problem is that it only check for width when the page load. i.e if the window is less then 980 on load. script works fine. but when window is more then 980 on load the script do not work even on resizing it to less then 980px.
i dont understand how to achieve this. mainly problem in choosing the condition for the the if else statement.
load the window and check the width
if it is less then 980px execute the script
if it is more then 980 do not execute the script.
on resize of the window check the new width
if it was more then 980 previously
check if the width increased. if it is increased do nothing(script should not work)
check if the width is now less then 980 . START the script.Script should work now.
if it was less then 980 previosly.
check if the width increased more then 980. if it is increased STOP the script. it should not work now
check if the width is now less then 980 . Do nothing. Script should work now.
IN SHORT turn on the toggle function when width less then 980px. and turn the toggle off and set to show when width is more then 980px.
I figured it out as below. It works, but sometimes when i resize slowly it behave strangely.
var $window = $(window),
ONLOADtoggleEnabled = false,
smallscreenbefore = false;
$window.on('resize', function() {
if (smallscreenbefore == false && $window.width() > 1220) {
} else if( smallscreenbefore == false && $window.width() < 1220) {
$( "#Tablist" ).hide(400);
$( "#heading" ).click(function() {
$( "#Tablist" ).toggle(400);
});
$( "#Tablist" ).click(function() {
$( "#Tablist" ).toggle(400);
});
smallscreenbefore = true;
}
else if(smallscreenbefore == true && $window.width() > 1220 ) {
$( "#heading" ).unbind('click');
$( "#Tablist" ).unbind('click');
$( "#Tablist" ).show(400);
smallscreenbefore = false;
}
else if(smallscreenbefore == true && $window.width() < 1220 ) {
smallscreenbefore = false;
}
});
var $window = $(window);
$window.on('load', function() {
if ($window.width() < 1220) {
$( "#heading" ).click(function() {
$( "#Tablist" ).toggle(400);
});
$( "#Tablist" ).click(function() {
$( "#Tablist" ).toggle(400);
});
smallscreenbefore = true;
}
else if($window.width() > 1220) {
smallscreenbefore = false;
}
});
You can listen for the resize event on the window and then use the width to decide what you want to do. I suppose something like this should work:
var MAX_WIDTH = 980,
$window = $(window),
toggleEnabled = false;
$window.on('resize', function() {
// Check window width and check if toggle isn't already enabled
if ($window.width() < MAX_WIDTH) {
// Check if toggle isn't enabled yet
if (!toggleEnabled) {
// Use on() to add eventListener
$("#heading").on('click', function () {
$("#list").toggle();
});
$("#list").on('click', function () {
$("#list").toggle('hide');
});
toggleEnabled = true;
}
} else if (toggleEnabled) {
// Use off() to remove eventListener
$("#heading").off('click');
$("#list").off('click');
// Show the list
$('#list').show();
toggleEnabled = false;
}
$('#output').text('Width: ' + $window.width() + ', toggleEnabled: ' + toggleEnabled);
});
// You can trigger the resize event at the start to set the initial state of the menu
$window.trigger('resize');
Working version with your list: http://jsfiddle.net/srm6p/3/