We Keep Coding

Text showing in a sequence

I am trying to run a simple sequence with text. I want the text to show for a second and then hide() or fadeOut(), then the next() one within the queue to show.
Does anyone see what I am doing wrong? Right now, only the last div is showing.
Side note, can anyone point me to a function or give me an idea of how to make the text slide in from the right, like on this page. https://artversion.com/
$(function() {
$('.cover1-seq').delay(1000).queue(function(next) {
$(this).show().prev().hide();
next();
})
/*.toggle("slide", {
direction: 'right'
}, 1000);*/
});
.cover1-seq {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cover1-seq">
<h1 class="cover1-title">Apple</h1>
</div>
<div class="cover1-seq">
<h1 class="cover1-title">Book</h1>
</div>
<div class="cover1-seq">
<h1 class="cover1-title">Cat</h1>
</div>

The javascript is executing all at once, in the case 3 times the '$(this).delay(1000)', what will happen is that it will execute everything together.
I made an adjustment in your code to run every 1 second:
$(function() {
var i = 0;
$(".cover1-seq").each(function(){
$(this).delay(1000 * ++i).queue(function() {
$(this).show().prev().hide();
});
});
});
Or, as asked, so it keeps repeating. And to execute when the page loads, we add the '$(document).ready':
$(document).ready(function() {
var arr = $(".cover1-seq");
var arrLen = arr.length;
var i = 0;
setInterval(function(){
$(".cover1-seq").hide();
$(arr[i]).show();
i === arrLen ? i = 0 : i++;
}, 1000);
});
I hope I have helped!

If there are less than 3 divs then show other div

i am fading in multiple divs all with the same class 'noti_box' using jquery. these are essentially notification boxes, and a user can close one or all of these boxes. what i am trying to do is find a way to compensate for the closed divs by showing another div in its place using jquery.
so if there are 3 notification boxes / 'noti_box' divs showing, and a user closes one of these, i want jquery to show a different div, 'other_div' to fill the space of the closed div. same if the user closes 2 of 3 then 2 'other_divs' should be shown and so on.
i need to find a way of being able to do this only after each 'noti_box' div has faded in, as they take about 2 to 3 seconds to fade in and so dont want divs being shown to fill gaps whilst the other div is still trying to fade in still. so needs to be only when a user closes the div.
heres my code at the moment, hope someone can help and show me where im going wrong
<div class="right_panel_outer">
<div class="right_panel">
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Messages</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Notifications</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>6 Matters Needing Your Attention</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>3 Insurance Due To Expire Today</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>1 Outstanding Application</h4></div><div class="close_box"></div></div>
<div class="other_div">HELLO</div>
<div class="other_div">HELLO</div>
</div>
</div>
<script type="text/javascript">
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
});
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut();
});
</script>
<script>
$('.other_div').hide();
if ($('.noti_box').length < 3) {
$('.other_div').show("fast");
}
</script>

I think this might be what you are looking for:
<script type="text/javascript">
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
});
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut(function() { //is called once fadeOut completes
$(".other_div:hidden:first").show() //gets the other divs that are hidden, then selects the first one and shows it
});
});
</script>
<script>
$('.other_div').hide();
</script>

Why not just place it here?
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
$('.other_div').show("fast");
});
Then one is opened every time another is closed.

You could try doing something like this
http://jsfiddle.net/acidrat/Fnya8/1/
$('.noti_box').each(function(i) {
$(this).toggleClass('fading');
$(this).hide().delay(i * 1500).fadeIn(1500, function() {
$(this).toggleClass('fading');
});
});
$('.close_box').on('click', function() {
if ($(".noti_box.fading").size() <= 0) {
$(this).closest('.noti_box').fadeOut();
}
});
$('.other_div').hide();
if ($('.noti_box').length < 3) {
$('.other_div').show("fast");
}

adding counter to a jquery slideshow

I'm using a slideshow I've built with Javascript for my website.
I would like to add a counter.
1 of 3...
slide 1 / total slide...
I can't manage to find the solution...
here is my code :
$(document).ready(function() {
// set display:none for all members of ".pic" class except the first
$('.image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides = $('.image_news');
$slides.click(function(){
// stores the currently-visible slide
var $current = $(this);
if( $current.is($slides.last()) ) {
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$current.hide().next().show();
}
});
});
and a fsfiddle link with example : http://jsfiddle.net/XRpeA/3/
thanks a lot for your help !

Write this:
var count = $('.image_news').length; //length gives total length of elements
$("#total").text(count);
if ($current.is($slides.last())) {
$("#current").text("1");//first slide
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$("#current").text($current.next().index()+1);
//index() returns index, add 1 because it starts from 0
$current.hide().next().show();
}
Fiddle here.

Just add a counter and change the html. Here is a Fiddle.
var counter = 1;
$("#counter").html("image "+counter+"/3");
$slides.click(function(){
// stores the currently-visible slide
var $current = $(this);
if( $current.is($slides.last()) ) {
$current.hide();
$slides.first().show();
counter = 1;
$("#counter").html("image "+counter+"/3");
}
// else, hide current slide and show the next one
else {
counter++;
$current.hide().next().show();
$("#counter").html("image "+counter+"/3");
}
});

thanks a lot.
I'll use the first option, #Hiral. I have another slideshow in my website and when trying the other options it's not working fine... but thanks a lot everyone !
I have another thing to fix. when I have 2 or 3 slideshow on my page, it doesn't work...
I'm using a repeater custom fields in my admin page, so I'm not able to know in advance how many slideshow I will need...
does anyone knows how I can fix it ?
here is a jsfiddle : http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
thanks a lot

Give each image an id eg:1,2,3 and display the id when you are on that image.

Another option
// stores the currently-visible slide
var $current = $(this);
$current.hide();
if( $current.is($slides.last()) )
{
$current = $slides.first();
}
// else, hide current slide and show the next one
else
{
$current = $current.next();
}
$current.show();
$('#counter').text('image ' + ($slides.index($current) + 1) + ' / ' + $slides.length);
Plenty of options to choose from

How to loop animation in jQuery

I´m trying to loop this animation but I don´t know why it does not work ?
I have 4 divs with differences images and I want to loop this to replay again and again.
$(document).ready(function () {
setInterval("comeon()", 2000);
});
function comeon() {
var current = $(".current");
var next = current.next();
if (next.length == 0) {
next = $(".current:first");
}
current.removeClass('current').addClass('previous');
next.css("opacity", "0.0").addClass("current").animate({
opacity: 1.0
}, 500, function () {
current.removeClass("previous");
comeon();
});
What I have done wrong ?
**UPDATE**
<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>
</div><!-- End slider-->
Please have a look at http://jsfiddle.net/7kt9z/6/

next = $("cur:first");
This is attempting to select an element like <cur>. Oops!
You want:
next = $(".current:first");
or
next = cur.first();
Edit
I finally understand what you need:
next = current.siblings().first();

setInterval needs to be used in a certain way.
You need to assign setInterval to a variable, and this assignment should be attached to an event.
var setIt;
$(window).load(function() {
setIt = setInterval(comeOn, 1000);
});
Since you're using images, you can wait for all the images to load and then starting your slider (that's using the load event to assign setInterval to the variable setIt).
Also, do not wrap your function in qoutes in setInterval. Instead of:
setInterval("comeOn()", 1000)
Do this:
setInterval(comeOn, 1000)
I've got a working example here:
http://codepen.io/anon/pen/rHzpL

How do I swap one div with another on a certain time

I have 2 divs (#divA & #divB). I want one to display #divA, then on a certain date hide divA, and show #divB.
DivA would represent 'Coming soon' and DivB would represent 'Now Here!'

Try something like :
if (new Date() < new Date(2013,1,1)) {
document.getElementById("diva").style.display = "block";
document.getElementById("divb").style.display = "none";
} else {
document.getElementById("diva").style.display = "none";
document.getElementById("divb").style.display = "block";
}
This checks if todays date (new Date()) is before a selected date (new Date(2013,1,1)) if it is then it shows diva and hides (display = "none") divb - else the reverse

You can set display:none to hide the Div and display:block to show it
<div id="divA" style="display:none;">Coming Soon </div>

use setInterval() to achieve that, e.g,
assuming you are using jQuery and the page should look like:
<div id="A"> comming soon</div>
<div id="B" style="display:none"> Now here! </div>
<script>
function check_if_some_content_is_loaded(){
//your implementation code here...
is_loaded = ....
if(is_loaded){
$("#A").toggle();
$("#B").toggle();
}
}
$(function(){
// call the "check ..." function every 10 seconds.
setInterval("check_if_some_content_is_loaded()", 10000);
})
</script>

You have to use a server site technology like php, i think. No use of loading all the stuff to client side. Your web page will be slow. Just see if possible to use php.