i need to make a div text disappear after x seconds of displaying it using an ajax call
can you help me on this please ?
thanks
You can use empty() to remove a <div> contents:
setTimeout(fade_out, 5000);
function fade_out() {
$("#mydiv").fadeOut().empty();
}
assuming:
<div id="mydiv">
...
</div>
You can do this with an anonymous function if you prefer:
setTimeout(function() {
$("#mydiv").fadeOut().empty();
}, 5000);
or even:
var fade_out = function() {
$("#mydiv").fadeOut().empty();
}
setTimeout(fade_out, 5000);
The latter is sometimes preferred because it pollutes the global namespace less.
You can try the .delay()
$(".formSentMsg").delay(3200).fadeOut(300);
call the div set the delay time in milliseconds and set the property you want to change, in this case I used .fadeOut() so it could be animated, but you can use .hide() as well.
http://api.jquery.com/delay/
$.doTimeout( 5000, function(){
// hide the div
});
You would need to set something like setTimeout('$("#id").fadeOut("slow")', 5000) but other than that it depends on what the rest of your code looks like
This should work:
$(document).ready(function() {
$.doTimeout(5000, function() {
$('#mydiv').fadeOut();
});
});
You may need to display div text again after it has disappeared.
This can be done in 1 line.
$('#div_id').empty().show().html(message).delay(3000).fadeOut(300);
This Answer is without jQuery, you can just grab your element and know its index position.
Then use it in the div below. I will be your div's index number in dom.
const div = document.querySelectorAll('div');
setTimeout(() => {
div[i].textContent = '';
}, 3000);
Related
As you can see below $(nextDiv + ' > div').eq(i).fadeIn('slow'); does not work as it seems to be malformed. nextDiv is on inspection the div below the anchor, how do I achieve getting the two divs that sit inside it?
HTML:
Sub Click
<div>
<div>I want this to fade in on the click</div>
<div>Followed by this etc.</div>
</div>
Javascript:
function subClick(myAnchor)
{
var nextDiv = $(myAnchor).next();
function showDiv(i) {
if (i > 2) return;
setTimeout(function () {
$(nextDiv + ' > div').eq(i).fadeIn('slow');
showDiv(++i);
}, 50);
}
showDiv(0);
}
You are trying to concatenate a string with jQuery, that won't provide a valid selector. The concatenation would provide something like "[object Object] > div" which doesn't select any elements in your code.
Instead, get the div children using children() method on the jQuery nextDiv object.
nextDiv.children('div').eq(i).fadeIn('slow');
If there are only two divs then you can reduce the code using delay() method.
function subClick(myAnchor) {
var nextDivs = $(myAnchor).next().children();
// if you want to do the animation after the first then
// use the below code, where second animation initializing within
// the first animation success callback, which also provides a 50ms
// delay for second animation(avoid .delay(50) if you dont nedd that delay)
// nextDivs.eq(0).fadeIn('slow', function() {
// nextDivs.eq(1).delay(50).fadeIn('slow');
// });
// in case you just want to provide a 50ms delay
// between animation then use, your code does this
nextDivs.eq(0).fadeIn('slow');
nextDivs.eq(1).delay(50).fadeIn('slow');
}
var nextDiv = $(myAnchor).next(); then nextDiv is an object not a selector. If you want to access its div children use this:
nextDiv.children('div').eq(i).fadeIn('slow');
I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script>
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script>
Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"></div>
<div class="div2 hidden"></div>
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
}
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");
}
});
You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here
});
It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}
else if ($('.div2').is(":visible")) {
$('div1').hide();
}
});
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.
You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
})
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code
I want to append .item element before .content element but it just simply removes .item from previous location and append before .content.
What i want is to use some animation that slowly remove .item element from its original position and appear slowly on its new position.. how can i do this?
$Item = $('.item');
$('.content').before($Item);
Regards.
How about something like this:
$Item = $('.item');
$Item.fadeOut(1000, function() {
$('.content').before($Item);
$Item.fadeIn(1000);
}
The .fadeOut() method fades the element over the specified time (in milliseconds), and on completion calls the function which then moves the element and fades it back in.
Demo: http://jsfiddle.net/9gGAT/5/
You can also use the hide and show -methods of jquery to achieve a sliding effect. I'd also package the transition within it's own method so it can be reused, so you don't have to write the same code multiple times.
var smoothLikeSilk = function(mover, before) {
$item = $(mover);
$content = $(before);
$item.hide('slow', function() {
$content.before($item);
$item.show('slow');
});
}
$(function(){
$('#btnMove').on('click',function(){
smoothLikeSilk('.item', '.content');
});
});
http://jsfiddle.net/9gGAT/6/
Do you mean something like this:
jsFiddl Link
Try this,
$(function() {
$('#btnMove').on('click', function() {
$Item = $('.item').fadeOut('slow', function() {
$('.content').before($Item);
$Item.fadeIn('slow');
})
});
});
Demo
I have two divs with individual id's and a class to style the same.
foo_1 has a z-index so it's above foo_2.
<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>
What I'd like to do is to have foo_1 fade out with foo_2 behind it.
I did try this;
HTML
<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>
jQuery
$(document).ready(function()
{
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
$("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
});
Thanks!
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
// remove $("#foo_1").remove();
// line from code,
// because, its removing #foo_1 from dom,
// so in next strp you can't catch it
// $("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
Sounds to me like what you're doing is a bit of an overkill.
Let me summarize: You have two divs, they are positioned at the same spot, but only #foo_1 is visible because it's on top. You now want to hide #foo_1 to reveal #foo_2.
So it should be sufficient to make #foo_2 visible while fading out #foo_1:
setTimeout(function() {
// Make #foo_2 visible
$('#foo_2').show();
// Fade out #foo_1
$('#foo_1').fadeOut('slow');
}, 5000);
Just use standard jQuery function with parameter in ms FadeOut(500), FadeIn(500):
$(document).ready( function ()
{
$('#foo_1').fadeOut(1500);
$('#foo_2').text('No, I am!').fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo_1' style='display:block;'> I'm awesome </div>
<div id ='foo_2' style='display:none;'></div>
I'm having a bit of a trouble trying to figure this out today, i want to make 5 items inside my DOM (which is listed under the same attribute element, $('.elements')) fade in and out, and after reading up a bit on the API i thought .each() would be a fabulous idea to implement a fade in and fade out showcase gallery.
However, i'm currently using:
$('.elements').each(function() {
$(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})
but everything gets faded in and out at once.
How do i do a sequential effect where everything is chained together and it starts from the first item in the list (a.k.a - $('elements').eq(0)?) down to the last one, and then restarts again?
Do i really need a while loop to do this in javascript/jquery? I was hoping there would be a similar function that i could chain for jQuery to perform to reduce load and filesize.
Also, is there a way to restrict the images from overflowing out from my div?
(function loop() {
$('.elements').each(function() {
var $self = $(this);
$self.parent().queue(function (n) {
$self.fadeIn(2000).delay(200).fadeOut(2000, n);
});
}).parent().promise().done(loop);
}());
demo: http://jsfiddle.net/uWGVN/2/
updated to have it looping without end.
2nd update: a different, probably more readable, approach:
(function fade(idx) {
var $elements = $('.elements');
$elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
fade(idx + 1 < $elements.length ? idx + 1 : 0);
});
}(0));
demo: http://jsfiddle.net/uWGVN/3/
You can add a callback
offical doc :
('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
and call the same function with i++ et $('.elements').eq(i)
http://jsfiddle.net/dFnNL/
For your overflowing , style it with CSS:
div.(class) { position:relative; overflow:hidden; }
Beautiful way :
(function hideNext(jq){
jq.eq(0).hide("slow", function(){
(jq=jq.slice(1)).length && hideNext(jq);
});
})($('a'))
last first :
(function hideNext(jq){
jq.eq(jq.length-1).hide("slow", function(){
(jq=jq.slice(0,length-1)).length && hideNext(jq);
});
})($('a'))