I'm trying to toggle a divs height, but when I do it only clicks once on and once off. Is there anyway to get it to toggle no matter how many times I click? Thanks! Here's my code:
$(document).ready(function () {
$('#block1').click(function () {
toggle = document.getElementById('block1').style.height;
if (toggle <= 30) {
$("#block1").css('height', '200px');
} else $("#block1").css('height', '30px');
});
});
document.getElementById('block1').style.height returns 30px.
'30px' <= 30 returns false, so the height keeps getting set to 30px.
You could use .height(), which returns a number, but I'd suggest using a class and toggling:
http://jsfiddle.net/TQs6h/
$(document).ready(function () {
$('#block1').click(function () {
$(this).toggleClass('tall');
});
});
As you are using jQuery I will suggest you to use height() method it will return Integer value you can compare instead of String value.
$(document).ready(function () {
$('#block1').click(function () {
var toggle = $( this ).height();
if (toggle <= 30) {
$( this ).css('height', '200px');
} else $( this ).css('height', '30px');
});
});
Or you can use parseInt function:
var toggle = parseInt( document.getElementById('block1').style.height, 10) ;
See jsFiddle demo
Related
I want to hide a div once my slider passes a scrollTop() value of 200px. I've looked at this article and tried using it as a template for what I want. I have the following code, but its not hiding the element. Live site
function removeArrow() {
$(window).scroll(function() {
if($('.portfolio-sliders:first-child').scrollTop() > 100) { //use `this`, not `document`
$('.scrl-dwn').css({
'display': 'none'
});
}
});
}
UPDATE
I've updated by code:
function removeArrow() {
$(window).scroll(function() {
var slider = $('.portfolio-sliders:first-child').position.top;
if(slider >= 10) {
$('.scrl-dwn').hide();
}
});
}
which should work, but its not...
Position is a function, not a property. You need to call the function with ():
var slider = $('.portfolio-sliders:first-child').position().top;
Replace your whole removeArrow function with this code.
(If you open your live site, and run this in the console, you can see it's working).
The scroll event never fired, so I handled theese mousewheel events instead.
$(window).bind('DOMMouseScroll mousewheel', function() {
var div = $(".portfolio-sliders:first-child"),
top = div.position().top,
display = top < 400 ? 'none' : '';
$('.scrl-dwn').css({ 'display': display });
});
Use This :
$(window).scroll(function(){
if ($(window).scrollTop() > 660)
{
$(".Left-Section").css("position", "fixed");
$(".Center-Content").css("margin-top", "0");
$(".Right-Nav img").css("transform", "rotate(360deg)");
}
;)
I have a grid width dynamic boxes where on parent mouseleave if input value is changed the boxes resize. Equal resize is not complete but for the purpose of this question it works.
in boxes add anything that equals to 100 eg: 40 10 10 10 30 or 50 50 0 0 0
http://jsfiddle.net/MT4Fp/16/
$('ul').on('mouseleave', function (event) {
var elems = $(this).find('input');
elems.each(function (el, i) {
$(this).parent().parent().animate({
width: $(this).val() + '%'
}, 500);
if ($(this).val() <= 1) {
$(this).parent().parent().addClass('hidden');
} else if ($(this).val() > 1) {
$(this).parent().parent().removeClass('hidden');
}
});
});
problem i have is that on mouseleave even if you dont change anything the animate starts animating , you can see this when you enter/leave the grid , the size of grid will change for few sec.
how can i run animate only if the input is changed? I have tried , keyup , change and few other methods but could not get it to work. The main thing is that the animation fires only on grid leave and if something is changed.
any help is appreciated. Thank you!
OK, a comment is not to big.
var i = $("#inputid").val();
$('ul').on('mouseleave', function (event) {
if ($("#inputid").val() == i){return true;}
EDITED: i = $("#inputid").val();
var elems = $(this).find('input');
elems.each(function (el, i) {
$(this).parent().parent().animate({
width: $(this).val() + '%'}, 500);
if ($(this).val() <= 1) {
$(this).parent().parent().addClass('hidden');
} else if ($(this).val() > 1) {
$(this).parent().parent().removeClass('hidden');
}
});
});
Also, you may consider targeting elements like $('ul').on('mouseleave','.i',....)
Sorry, I edited. If it is a change, addit to the value of i var.
You want to animate for value change, not for 'mouseleave'. So bind value change with this method.
jQuery('input[type="text"]').on('input', function() {
// do work such as animate ...
console.log($(this).val()); // i tried with this and get value
})
For some reason, when I try to toggle a div between two sizes using .animate, it simply disappears rather than scaling to the size I want it to. I have played with all of the the syntax and little things in so many ways, but nothing works. Here is the jquery that I have used and messed around with a bunch.
$("#expandable").click(
function() {
$("#expandable").toggle(
function() {
$("#expandable").animate(
{width:600, height:600}
)
},
function() {
$("#expandable").animate(
{width:400, height:200}
);
}
);
}
);
I have a jsfiddle here for you to look at.
http://jsfiddle.net/justinbc820/qt7GV/
Try it without using toggle
http://jsfiddle.net/qt7GV/9/
$(document).ready(function(){
$("#expandable").click(function(){
var divheight = $(this).height();
if (divheight == 400)
{
$(this).animate({height:'150px', width:'150px' });
}
else
{
$(this).animate({height:'400px', width:'400px' });
}
});
});
Take a look at this http://jsfiddle.net/qt7GV/4/
$("#expandable").click(function() {
if ($(this).width() < 600) {
$(this).animate(
{width:600, height:600}
)
} else {
$(this).animate(
{width:400, height:200}
);
}
});
http://api.jquery.com/toggle/
Description: Display or hide the matched elements.
var on = false;
var box = $("#expandable");
box.click(
function() {
if (on = !on) {
box.animate(
{width:600, height:600}
)
} else {
box.animate(
{width:400, height:200}
);
}
}
);
According to http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Here is one way to do it
$('#expandable').data('flag', true);
$("#expandable").click(
function() {
$("#expandable").animate(
$(this).data('flag')
? {width:600, height:600}
: {width:400, height:200}
)
$(this).data('flag', !$(this).data('flag'));
}
);
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/
I am very new to jQuery/JS and I have little problem with add or remove function in a specific window size.
I would appreciate if you can take a look at my code and correct it.
In detail, I use tinyscrollbar plugin that I want only appear in a specific window size(let's say above 650px of window width).
Here is my code:
<!--****preload latest jQuery and tinyscrollbar plugin, then...****-->
<script type="text/javascript">
function newsScroll() {
$("#newsScroll").tinyscrollbar();
};
/*
if windows width is less than 650px, remove newsScroll function and
switch DIV ID to "spNewsScroll" and vice versa.
*/
function scrollOnOff(width) {
width = parseInt(width);
if (width < 650) {
$(window).unbind(newsScroll);
$("#newsScroll").attr('id','spNewsScroll');
} else {
$(window).bind(newsScroll);
$("#spNewsScroll").attr('id','newsScroll');
}
};
$(function() {
//get window size as of now.
scrollOnOff($(this).width());
$(window).resize(function() {
scrollOnOff($(this).width());
});
});
</script>
Try this, tested and working :-)
Live demo: http://jsfiddle.net/oscarj24/fUsnj/21/
function scrollOnOff(width) {
width = parseInt(width);
if(width < 650){
$(window).trigger('newsScroll');
$('#newsScroll').attr('id','spNewsScroll');
} else {
$('.scrollbar').hide();
$('#spNewsScroll').attr('id','newsScroll');
}
};
$(function() {
$(window).bind('newsScroll', function(e) {
$('.scrollbar').show();
$('#newsScroll').tinyscrollbar();
});
var screenWidth = $(this).width();
scrollOnOff(screenWidth);
$(window).on("resize", function(event){
var w = $(this).width();
scrollOnOff(w);
});
});