When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});
Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});
<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});
You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});
Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});
What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors
Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
Related
I'm having trouble figuring out a way to get this toggle function to close.
It will open happily, but closing is a different story.
Console Error: property 'toggle' of undefined at focusMobileSearch
Code:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('200').queue(function (next) {
$(this).css('visibility', 'visible');
next();
});
}
reveal().toggle();
}
This was my Previous Code (it had a weird issue where the first click did nothing:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' }).toggle();
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
}).toggle();
}
reveal();
}
Thanks!
Use a class for the toggle.
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').toggle('visible');
$('.input-group').delay('240').queue(function(next) {
$(this).toggle('visible');
next();
});
}
reveal();
}
.visible {
visibility: visible;
}
.search-dropdown.visible {
height: 64px;
}
This fixed it:
function focusMobileSearch() {
$('.ef-header-alt__search').removeClass('is-focused');
function reveal() {
if ($('.search-dropdown').css('visibility') == 'hidden') {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
})
} else {
$('.search-dropdown').css({'visibility': 'hidden', 'height': '0px'});
$('.input-group').css('visibility', 'hidden');
}
}
reveal();
}
Big thanks to: #Taplar for letting me know toggle doesn't effect visibility, but rather just display property.
I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();
A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.
Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');
Hope you could check my code. Just want to animate. Toggle the top position of div tag with 'accordionHeader' class.
<script type="text/javascript">
$(document).ready(function() {
$(".accordionHeader").toggle(function() {
$(".accordionHeader").animate({"top": "0 144px"}, 500);
function(){
$(".accordionHeader").animate({"top": "144px 0"}, 500);
);
});
</script>
Thank you so much.
you mean:
$(document).ready(function(){
$(".accordionHeader").toggle(
function(){
$(".accordionHeader").animate({"top": "144px"}, 500);
},
function() {
$(".accordionHeader").animate({"top": "-144px"}, 500);
});
});
As an alternative, since jQuery.toggle() is deprecated, you could also do:
$(".accordionHeader").on("click", function() {
var clicked = $(this).data('clicked');
if (clicked) {
$(".accordionHeader").animate({"top": "144px"}, 500);
}
else {
$(".accordionHeader").animate({"top": "-144px"}, 500);
}
$(this).data("clicked", !clicked);
});
you can try this on click event
$('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);
As some example code, I might have something like this:
$('a.parent').click(function(){
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
$(this).animate({
width: '160px'
},200,function(){
});
});
The problem is that I don't want the element that was clicked to animate to 140px width and then back to 160px.
Is there a way to run 'each' on only the elements in a set who were not clicked? Or is there a better way?
you can use :not(this) so change :
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
to :
$('a.parent:not('+this+')').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
or use .not(this) after $('a.parent') , so :
$('a.parent').not(this).each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
Is it possible to style inline the div .trigger on the following code and set its display to block?
$('.trigger').toggle(function() {
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
});
You can simply use $('.trigger').css('display', 'block');
if you want to implement it inside your toggle function you can do something like this :
$('.trigger').toggle(function() {
$(this).css('display', 'block');
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
$(this).css('display', 'none');
});