So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x
Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle
To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle
Related
ok so I have this script that controls an open/close of menu ....
of the three major functions (seen below) the first two work well in that the button-toggle changes its class (to an X) "active" which makes it an X.
However the fourth (commented out )function doesn't work... This was designed so that when you click on the body or anywhere other than the menu when it is open , it will close. please can someone help me to rewrite the last function so that it works.
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
I have provided a JSFiddle below (The menu is set to full colapse on startup not open as in the demo fyi)
http://jsfiddle.net/greggy_coding/ppX53/66/
Use e.target instead of this, as this refers body and not current clicked element.
event.target
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
Updated Fiddle
Here is the modified javascript that would work:
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function (e) {
e.stopPropagation();
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
$('#menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
});
});
Here is the forked working jsfiddle:
http://jsfiddle.net/ytnLyqrv/1/
my code is not working and I have no idea why.
Here is a demo
$(".color").click(function() {
$(".color-picker").fadeIn(function() {
var colorClick = $(".color-box").click();
var timeOut = window.setTimeout(1000);
if (colorClick || timeOut) {
$(".color-picker").hide();
}
});
});
EDIT: To clear the confusion - I want to hide the box with the colors when the user clicks on one of them $(".color-box") or on the dropdown $(".color-picker"), or if he doesn't the box should hide anyway in a couple of seconds. Sorry, I thought it was clear from my code.
EDIT 2: Using #AlvinMagalona's code I tried to add the timeout functionality with no success demo
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
})
.setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
OR I think this way is much better, but still doesn't function (demo):
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
function timeOut() {
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
}
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
The other part of the code works fine, but I'm not embedding the setTimeout function properly. Can somebody help me with that? Thanks!
EDIT 3:
I made it work: (demo)
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
This one has everything I needed - when you open the drop down and click on color the box hides, when you click on the dropdown again the box hides and if you don't do any of that the box hides after couple of seconds. I hope this code will be helpful for others as well. Thanks for your help, everybody!
Try with -
$(document).ready(function() {
$(".color p").click(function() {
$(".color-picker").fadeIn();
});
$(".color-box").on('click', function() {
$('.color-picker').fadeOut();
})
});
It will simply open the div containing the color boxes and on clicking on that boxes will hide it with transition effect.
Are you trying to hide the box after you select a color? If you do, try this code.
$(document).ready(function() {
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
});
So to answer my own question if you want to have the simplest drop-down menu where you pick something and then the drop-down box hides itself. Here is a demo, here is the code:
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
console.log("timeOut");
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
Special thanks to #AlvinMagalona, I've rewritten the code he proposed to make it work for my situation.
here is my fiddle
I have a click function (item) that shows 'item-overlay' but i'd like to also add a hover to preview the div 'item-overlay' by 100px I added a mouseenter and mouseleave with height to my current code but this then works on click ?! this is my click function -
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').slideToggle('fast');
}
and an example of what i tried to do -
}).on("mouseenter", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(100); }
}).on("mouseleave", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(0); }
The problem is that your other open/close animations use hide and show, which also alter the display style.
Try this JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/3/
}).on("mouseenter", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').css({display: "block"}).height(100);
}
}).on("mouseleave", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').hide().height('');
}
});
notes:
height('') will reset the height css to inherit (i.e no value).
If you want the height reset when you click again set it with the slideToggle call:
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height('').slideToggle('fast');
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/5/
i need help with closing a div tag that has been expanded using jquery when a "read more" link has been clicked.
I can get one to work but not the rest.
I have attached a fiddle of my code:
http://jsfiddle.net/R9LvG/
This is the first time i have ever used jquery and i am very new to it so please bear with me.
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
As all those part of code are crappy, I would use :
$(document).ready(function () {
$('[class^="clickme"]').click(function (e) {
e.preventDefault();
$(this).next().slideToggle("slow");
});
});
Simpler, cleaner.
:)
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
JsFiddle
Also:
remove the '#' href to prevent it from jumping to the top of the page whenever it is clicked
<a class="clickme"><u><b>Read more</b></u></a>
To your clickme css class:
.clickme{cursor:poniter}
and then add a hover event:
.clickme:hover{color:#F00}
You close it 2 times which means it opens up again
Remove this at the end
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
Don't use dom ready functions more times in a single page.
Use Multiselector for click functions
For examples
$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
$(".content").slideToggle("slow")
});
Please use only one
$(document).ready(function () {
$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
$(this).slideToggle("slow");
});
I didn't find any problem in you code.You modify the anchor tab by removing the href="" element, this will prevent moving the page to top each time you click on Read more.
<a class="clickme2" ><u><b>Read more</b></u></a>
And include the jQuery script in you page by copyng the below content in your page,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And you can update the script for expanding and compressing as below since you are dealing with different divs with different classes,
<script>
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
</script>
is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/
Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});