I'm trying to show a div when an image is clicked and then hide it after a given number of seconds. I've found two separate code samples that match my needs but I don't have the knowledge to put them together.
the code which makes content disappear after x seconds:
<script>
window.setTimeout(function() {
$('#fadeout').hide(2000);
}, 4000);
</script>
The code which makes the div appear on imageclick:
<SCRIPT>
function fade(div_id, button) {
if(button.value == 'FadeOut') {
$('#'+div_id).fadeOut('slow');
button.value = 'FadeIn';
}
else {
$('#'+div_id).fadeIn('slow');
button.value = 'FadeOut';
}
}
$('#sometext').fadeOut(2);
</script>
Maybe this could help:
$('#fadeout').hide(); // hide div
$('img').live('click', function(e){
e.preventDefault(); //cancel default action of click
$('#fadeout').show().delay(5000).fadeOut(1000); //show div on img click then hide after 5 seconds
});
here's a working sample: http://jsfiddle.net/7X767/3/
Instead of using 'slow', you can use time value in milliseconds.
Related
I have this button that will hide when no more content to load in review page. The button is working great except that it will still show up even if there are no more data to display. I want it to not show up if there is nothing left to load. Does anyone have any suggestions? Thank you.
Here is my code
$(document).unbind('click').on('click', ".recentreviews5 .showmore", function () {
$('#last').val(parseInt($('#last').val()) + 10)
$('.hide').each(function () {
var itmidx = $(this).index();
if (parseInt(itmidx) < parseInt($('#last').val())) {
var g = $(this).attr('id')
$(this).removeClass('recent').removeClass('hide')
$(this).addClass('recent').addClass('show')
}
});
if ((parseInt($('#last').val()) >= parseInt($('#total').val())) || (parseInt($('#last').val()) < 10)) {
$(".showmore").css('cssText', 'display:none!important')
}
});
You can use this code to manually set the style. The .css call generally speaking doesn't support !important.
$(".showmore").attr('style', 'display: none !important')
$(".showmore").attr('hidden', 'hidden')
This code toggle visibility with display:none / display:block
$(".showmore").toggle();
I have a function that o'clock open and ( should) close a series of div.
Let's say its' an accordion.
<div class="cat_table_header" onclick="show_hide_table(this);">
The problem is that the first div of this accordion starts always visible, and I would like that this starts closed.
Also if I click it, doesn't close, but if I click another div it closes and open the clicked div.
Any suggestion?
This is the javascript:
jQuery(document).ready(function() {
jQuery(".cat_table_container").hide();
jQuery(".cat_table_container:first").show();
});
function show_hide_table (table) {
table = jQuery(table).parent().find(".cat_table_container");
if (jQuery(table).is(":visible")) {
if (jQuery(table).parents(".cat_container").attr("class") != "cat_container cat_container_parent") {
if (jQuery(".cat_container_parent .cat_table_container").length > 0)
jQuery(table).hide();
}
}
else {
jQuery(".cat_table_container").hide();
jQuery(".cat_container_parent .cat_table_container").show();
jQuery(table).show();
}
}
'
Many thanks
On my site I have a contact button that when pressed slides a div containing a contact form downwards (using jQuery animate). This div has a close button in it that when pressed slides it back up (it's original position is off the screen). I need to make it so when the contact button is pressed, it only works once but then works again when the div has been closed.
I know this uses the bind / unbind function, however I can't get it working. Here is my code:
$(document).ready(function() {
var handler = function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
}
$('#contact').bind('click', handler);
$('#contact').unbind('click', handler);
});
$('#close').click(function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
});
the site where I'm trying to add it into is here: www.samskirrow.com/projects/move_div
Thanks for your help.
Sam
Figured it out, decided not to use bind, unbind commands but instead toggle. I have a close button that just takes on the role of the open button, therefore it doesn't disrupt the toggle cycle.
$(document).ready(function() {
$('#contact').toggle(function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
},function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
})
$('#close').click(function() {
$("#contact").click();
});
});
Hope this is useful to someone :)
I'm making my own lightbox and I have problem after closing the lightbox and turning it on again.
Here is the simple function code
(function($) {
$.fn.lghtbx = function() {
var lghtbxLink = $(this);
lghtbxLink.click(function() {
$('body').append("<div id=\"ZoomGallery\"></div>");
$('#ZoomGallery').css({'width': '100%','height': '100%', 'position': 'absolute', 'left': '0px', 'top': '0px', 'backgroundColor':'#000'});
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
})
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37://left
alert('left!');
break;
}
})
})
}
})(jQuery);
I'm calling that function like this
$(document).ready(function() {
$('.lightbox').lghtbx();
});
And this is the simple html
<a class="lightbox" href="#">a</a>
When I click on the link and press left arrow on the keyboard alert appears. That's how it's supposed to work. But when I close the lightbox by clicking on the black div and when I open it again by clicking on the link then the problem pops out. Every time I click the left arrow I'm getting alert two times. If I close and open lightbox again and press the left arrow I will get alert three times... and so on.
Can you help me to solve this problem?
first remove the old event
$(document).unbind("keydown").keydown(function(event) {
That's becuase you are binding the event more then once. You should unbind the event when you close the lightbox:
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
$(document).unbind("keydown");
})
fiddle here: http://jsfiddle.net/ASS4D/
I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).
What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I'm doing is replacing the buttons with images, each with a "pressed" version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to "un-pressed". Essentially so that only one image can be "pressed" at a time.
Right now the code for me pressed images are
$(function() {
$(".img-swap1").live('click', function() {
if ($(this).attr("class") == "img-swap1") {
this.src = this.src.replace("_U", "_C");
} else {
this.src = this.src.replace("_C","_U");
}
$(this).toggleClass("on");
});
});
I thought about using an if statement to revert all the "_C" (clicked) back to "_U" (unclicked).
Hopefully I've included enough information.
A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.
Also, your if statement ($(this).attr("class") == "img-swap1") is redundant -- it will always be true because it's the same as the original selector $(".img-swap1").live('click'...
Try
$(function() {
$(".img-swap1").live('click', function() {
$(".img-swap1").removeClass('on').each(function(){
this.src = this.src.replace("_U", "_C");
});
this.src = this.src.replace("_C","_U");
$(this).addClass("on");
});
});
If I understand the question correctly the following may work for you:
$(function(){
$('.img-swap1').live('click', function() {
$('.img-swap1').removeClass('on').each(function(){
$(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
});
$(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
$(this).toggleClass("on");
});
});
I hope this helps.