I want to use jQuery to fade in a div when an image is clicked, when the image is clicked again, I want it to hide and so on.
How would I do this?
I basically need a toggle switch.
$('#my_img_selector').click(function(){$('#my_div_selector').fadeToggle()});
Try it out here.
Try also slideToggle() and toggle() in place of fadeToggle().
You have to change the selectors $('#fadeMe') and $('#bindImage') according to your markup. The magic is here
$(document).ready(function(){
$('#bindImage').on('click', function(){
$('#fadeMe').fadeToggle();
//return false; // only useful if you trigger an
});
});
$('#yourimage').on('click', function(event){
if ($("#something").is(':visible')) {
$(".something").hide("drop", {
direction: "up"
}, 2000);
}else{
$(".something").show("drop", {
direction: "up"
}, 2000);
}
});
Related
I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)
Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});
I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
I'd like to change the button to read Close when clicked and also to act as a Close too.
Fiddle Demo
How do I achieve this with my current code?
jQuery:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
});
});
You can use .is(':visible') to check whether div is visible and set text appropriately.
code
$("#open").click(function () {
$("div#panel").slideToggle("slow", function () {
if ($("div#panel").is(':visible')) {
$("#open").text('Close');
} else {
$("#open").text('Quick Quote');
}
});
});
DEMO
You can simply achieve this using .slideToggle():
$("#open").click(function(){
if($("div#panel").is(':visible'))
$(this).html('Quick Quote');
else
$(this).html('Close Quote');
$("div#panel").slideToggle("slow");
});
Working Demo
Using SlideToggle is a neat solution.
You can also achieve the functionality using addClass and removeClass. Without making much changes to the code that you have written.
http://jsfiddle.net/4dkoke6w/
I have created a class "hidden" and it applies "display: none" styling.
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
$("#open").addClass("hidden");
$("#close").removeClass("hidden");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
$("#close").addClass("hidden");
$("#open").removeClass("hidden");
});
I want to write a code which can toggle two sentences fading in and fading out. But I want to toggle the sentences at the same location ie one text fades and the other starts coming in place of the first. In this case the sentences occur one below the other. Is there any way I can do this as in html content always comes one below the other.
This is the jquery script.
<script>
$(document).ready(function(){
$(function(){
$("#hide1").hide();
while(1)
{
$("#hide2").fadeOut(3000);
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000);
$("#hide2").fadeIn(3000);
}
});
});
</script>
Html
<p id="hide1"> Hide 1 <p>
<p id="hide2"> Hide 2 <p>
Demo
Try like this make the queue and animate
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000);
$("#hide2").fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000, hide1);
}
hide1();
OR Chaining
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000).fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000).fadeOut(3000, hide1);
}
hide1();
This code would react dynamically, and it does not need any changes even if you want to apply this effect for more than two p elements
$("p").hide();
function test(elem) {
elem.fadeIn(1000, function () {
elem.fadeOut(1000, function () {
test(elem.next('p').length ? elem.next('p') : $('p:first'));
});
});
}
test($('p:first'));
DEMO
Try this:
setInterval(function () {
$('#hide1').fadeOut(1000, function () {
var $this = $(this);
$this.text($this.text() == 'Hide 2' ? 'Hide 1' : 'Hide 2');
$this.fadeIn(1000);
});
}, 3000);
Toggle the text within the setInterval function.
Fiddle Demo
Use a single paragraph tag and toggle the text within it while you try to fade it in and out.
$(document).ready(function(){
$(function(){
window.setInterval(function() {
$("#hideorshow").fadeToggle(1000, "linear", function() {
$("#hideorshow").text($("#hideorshow").text() === "Hide 1" ? "Hide 2" : "Hide 1");
$("#hideorshow").fadeToggle(1000, "linear");
});
}, 2000);
});
});
Also, I would suggest you use fadeToggle() instead of fadeIn() and fadeOut().
Here is a working JSFiddle demo.
I have a side bar which when you mouseover it slides over the content, when you mouseout it slides back. All working great.
I then have a button which when you click it, it locks the sidebar in place, pushing the content behind over. Locking the sidebar in place. Also works great..
My problem is that I wish for when the sidebar to be locked, to disable the hover, and keep it in the expanded state, then when you unlock it, to go back and re-enable hovering.
Fiddle
Thanks
$('.sec-sidebar-toggle').click(function (e) {
e.preventDefault();
if ($(this).closest('.sec-sidebar').hasClass('sidebar-locked')) {
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '38px'
}, 300).css({
'overflow': 'visible'
});
} else {
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '253px'
}, 300).css({
'overflow': 'visible'
});
}
});
//Hover
$('.sec-sidebar').mouseover(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '0px'
}, 300);
}).mouseout(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '-215px'
}, 300);
});
You can unbind the mouseover and mouseout events.
http://jsfiddle.net/3n1gm4/VEUe9/
$('.sec-sidebar-toggle').click(function(e){
e.preventDefault();
if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});
// ADD EVENT HANDLERS
setupHover();
} else{
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});
// REMOVE EVENT HANDLERS
$('.sec-sidebar').unbind('mouseover');
$('.sec-sidebar').unbind('mouseout');
}
});
function setupHover() {
//Hover
$('.sec-sidebar').mouseover(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
}).mouseout(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
});
}
setupHover();
I have wrapped the mouseout function in an IF statement to check whether the sidebar has the sidebar-locked class. If it does the following animation will not be executed.
if(!$('.sec-sidebar').hasClass('sidebar-locked')){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
}
Is this what you were hoping to achieve?
Here is the JsFiddle.
Note: The ! at the start of the IF statement is to say IF NOT. So, If not this class in the above example.
There are two easy solutions in my head.
1: You could check the classes of the sidebar if 'sidebar-locked' is present with .hasClass() in the mouseevents.
2: You could remove the mouse events completely by unbinding them when you lock it and rebinding them when you unlock it.
See jQuery API: unbind.
Sidenote:
Consider using the hover event instead of the two seperate mouse events.
You should to clear mouseover event handler, and reassign it back when it needs.
Remove an event handler.