We Keep Coding

Alternate <div> content at every 10 seconds is not working

Functionality:
I have 2 diff <div> content at the same page, hence, Content A is shown before Content B is shown and the loop will re-iterate again. Therefore, the process is as described below:
Content A (shown for 10seconds)-> Content B (shown for 10seconds) -> Content A (shown for 10 seconds) -> Content B (shown for 10 seconds)
Hence, the display of the content will be shown in an re-iteration for infinite loops.
Content A -> a list of jplayer content
Content B -> a static <div> content
What has been done:
I have set the following:
Created a <div> for Content A:
<div id="M_Start" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<!--Video Div for Content A-->
<div id="Start_Video" style="position:absolute;"></div>
</div>
Created a <div> for Content B:
<div id="I_Page" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
<table cellspacing="0" cellpadding="0" width="1080">
<tr>
<td width="1080" align="center">
<div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>
</td>
</tr>
</table>
</div>
Secondly, I have done setTimeInterval for both Content such that after 10 seconds, the contents will switch. My code as shown:
var videoList = ["lib/video/MainBackground.mp4", "lib/video/I.mp4"];
var videoIndex = 0;
setInterval(function() {
$("#M_Video").jPlayer({
ready: function() {
console.log("currentPlaying " + videoList[videoIndex]);
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
videoIndex++;
console.log("NewCurrent:" + videoIndex);
console.log("current :" + videoList[videoIndex]);
if (videoIndex >= videoList.length) {
console.log("Next" + videoIndex);
videoIndex = 0;
//ContentB to fadeIn
$('#IPage').fadeIn({ duration: slideDuration, queue: false });
}
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 1080,
height: 1920
}
});
$("#M_Video").show();
}, 10000);
<!--Content A -->
<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<!--Video Div-->
<div id="M_Video" style="position:absolute;"></div>
<button class="MilleniaStart" onclick="Start()"></button>
</div>
<!--Content B-->
<div id="IPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
<table cellspacing="0" cellpadding="0" width="1080">
<tr>
<td width="1080" align="center">
<div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>
</td>
</tr>
</table>
</div>
Issue:
After the contents have been switched after 10secs, the switch of content stops and it does not re-iterate the switching of the content anymore. Meaning: after Content A has switched to Content B, it stops, when the correct behaviour should be Content A switched to Content B and then switches back to Content A before switching to Content B and to Content A, the re-iteration should never stops.
Hence, I do require some help. Please help. I do not know how to proceed or what has gone wrong.
Thank you.

Try this:
/*** javascript/jQuery: ***/
var videoList = ["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4"];
var videoIndex = 0;
console.log("current: " + videoList[videoIndex]);
$("#M_Video").jPlayer({
ready: function() {
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 500,
height: 400
}
});
setTimeout(swapVideo, 10000);
function swapVideo(){
videoIndex++;
if (videoIndex >= videoList.length) {
//console.log("Next < " + videoIndex);
videoIndex = 0;
}
//console.log("NewCurrent:" + videoIndex);
$("#M_Video").jPlayer("destroy");
$("#M_Video").jPlayer({
ready: function() {
console.log("current: " + videoList[videoIndex]);
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 500,
height: 400
}
});
setTimeout(swapVideo, 10000);
}
/*** CSS: ***/
.divs{position:absolute;top:0;left:0;width:500px;height:400px;background-repeat:no-repeat;}
#M_Start{z-index=1;}
#M_Video{position:absolute;}
#IPage{z-index=3;display:none;}
#i_page_content{height:400px;width:500px;overflow-y:scroll;overflow-x:hidden;z-index:2;}
<!-- *** HTML: *** -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<!--Content A -->
<div id="M_Start" class="divs" align="center">
<div id="M_Video"></div>
<button class="MilleniaStart" onclick="Start()"></button>
</div>
<!--Content B-->
<div id="IPage" class="divs" align="center">
<table cellspacing="0" cellpadding="0" width="500">
<tr><td width="500" align="center"><div id="i_page_content"></div></td></tr>
</table>
</div>
Reference (please upvote):
jQuery jPlayer change media not working

Well, if you are looking for just switching the div's after every 10 secs with infinite loop, check this fiddler.
https://jsfiddle.net/nalinkaggarwal/vj01xezm/`

How to set icon to flicker when clicked

Functionality:
When User navigates from one page to another via interaction with the button, the side-icon from the first page will flicker/blink for quick succession, before the page transits to the next page. The page transition is animated such that the button will have 'drop' effect while the new page will slide and fade in while the old page will slide and fade out.
What has been done:
I have tried using the following:
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;
if (isBlink) {
isBlink = false;
if (selectEffectCounter == 5) {
selectEffectCounter = 0;
clearInterval(selectEffectInterval);
}
} else {
$('#NewZealandPinPoint').fadeIn();
$('#NewZealandPinPoint').fadeOut();
isBlink = true;
selectEffectCounter++;
}
Issue:
During page transition, I am not able to see the effect. Hence, I would like to ask how is it possible for me to set the side-icon to flicker/blink when the button is interacted by the user
Code:
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;
function Australia() {
console.log("Australia");
$('#Australia').toggle("drop", {
duration: slideDuration
}, {
easing: 'easeInOutQuart',
queue: false
});
$('#NewZealandPinPoint').hide();
if (isBlink) {
isBlink = false;
if (selectEffectCounter == 5) {
selectEffectCounter = 0;
clearInterval(selectEffectInterval);
}
} else {
$('#NewZealandPinPoint').fadeIn();
$('#NewZealandPinPoint').fadeOut();
isBlink = true;
selectEffectCounter++;
}
$('#Oceania_Page').fadeOut({
duration: slideDuration,
queue: false
});
$('#Oceania_Page').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Australia_Page').fadeIn({
duration: slideDuration,
queue: false
});
$('#Australia_Page').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
<div id="Oceania_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:1921px; ">
<img src="lib/img/Country/Oceania/Background.png" />
<!--Countries-->
<img id="AustraliaPinPoint" src="lib/img/Country/Oceania/AustraliaPinPoint.png" />
<button id="Australia" onclick="Australia()">
<img src="lib/img/Country/Oceania/Country/Australia.png">
</button>
<button id="PageBack" onclick="PreviousPage()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>
<div id="Australia_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:1921px; ">
<img src="lib/im/FootprintsBackground.png" />
<button id="PageBack" onclick="Page()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>

Here's a working mockup of something that works as I assume you want it - note, this is JUST the button part, and there's a piece of code that uses a setTimeout - as noted in the code, rather than using setTimeout, you would use the [complete] callback that jquery has for animation methods
$(function() {
$(".nav").click(function() {
var $curr = $(".nav.current"); // determine the previously selected button
$curr.addClass('blinky'); // add the blinky class
$curr.removeClass('current'); // remove any class associateed with current from previous selected button
$(this).addClass('current'); // add any class associateed with current selection to the button that was just pressed
function animationDone() {
$curr.removeClass('blinky');
}
// do your animation of page content
setTimeout(animationDone, 2500);
// I use a setTimeout just for the delay - what you would do is use the "complete" callback of the jQuery animation method
});
});
.current {
box-shadow:0 0 5px #00ff00;
}
.blinky {
animation-duration: 100ms;
animation-name: blinker;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes blinker {
0% {
opacity:1.0;
}
100% {
opacity:0.3;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav current">Link 1</button><br />
<button class="nav">Link 2</button><br />
<button class="nav">Link 3</button><br />
<button class="nav">Link 4</button><br />

You put the fadeIn inside a function in the fadeOut (or the other way around). Here's a working version:
var isBlink = false,
blink = function($this){
$this.fadeOut( function(){
$this.fadeIn();
if (isBlink) blink($this);
});
}
$("#AustraliaPinPoint").click( function(){
isBlink = !isBlink;
blink($(this));
});
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/bz5nkbyq/

jQuery animation with setInterval()

I am confused about the pauses and the seemingly erratic behaviour of the animations. The pauses are way longer than 2000ms and the animation jumps way farther then I want it to.
function myFunction() {
myVar = setInterval(slideit, 2000);
}
I want to run a sequence of animations every 2 seconds (or 6 seconds rather, but for testing I'll go with 2) but the result seems kind of weird.
What am I doing wrong?
I am aware that I do not need callbacks for animations but the whole thing went out of sync when the window was minimized then, so I hoped that using callbacks could prevent that.
var myVar;
var countit;
countit = 1;
function myFunction() {
myVar = setInterval(slideit, 2000);
}
function slideit() {
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(".imgcontainer").animate({ // Next Image
"top": -($(".imgcontainer").height() * countit)
}, 500, function() {
$(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
myFunction();
#banner {
background: url(img/rauch-klein.jpg);
overflow: hidden;
height: 350px;
background-size: cover;
}
#subbanner {
width: 800px;
margin: 0 auto;
}
#banner .imgcontainer {
position: relative;
text-align: left;
height: 350px;
}
#banner img {
height: 100%;
vertical-align: middle;
position: absolute;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner">
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 150mm</div>
<img src="img/units/absaugarm.png" style="vertical-align:middle;">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 200mm</div>
<img src="img/units/absaugarm-200mm.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugkran</div>
<img src="img/units/absaugkran.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugtisch</div>
<img src="img/units/absaugtisch.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P10</div>
<img src="img/units/Airtech_P10.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P30</div>
<img src="img/units/Airtech_P30.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">BlowTec</div>
<img src="img/units/BlowTec.png">
</div>
</div>

From the Jquery docs:
If multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole
That means the complete function is called for each bannertext class element. If you don't want to fadeout only specific elements, the quickest solution is referring to this inside the callback function.
function slideit() {
var cnt = countit;
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(this).parent().animate({ // Next Image
"top": -($(".imgcontainer").height() * cnt)
}, 500, function() {
$(this).children(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
jsfiddle example.
(Another side effect was that countit was increased right away. In normal execution it would have been increased before the first complete callback was executed. That's why a temp variable cnt is used as well)

Researching on Animate() in Jquery.

Inside a Main Wrapper , I have 5 Divs. The very First div contains 4 Box(box_1, box_2,box_3,box_4) where my click event will occur.
Other 4 divs inside main wrapper , are the content of box_1, box_2, box_3, box_4 respectivly.
All box contain an hyperlink tag with unique Id to Move back to very first div.
For first time, When I click on any menu , corressponding box container appers.
e.g, clicked on redbox > Moved to Box-1 content > Clicked on Back to menu > Moved to 4 Colored box section.
Again clicked on gany box. Lets say , Green box> Moved to Box2 container > Clicked on Back to Menu > Oops !!! My 4 Colored box jut slide out from my screen.
Here is the JS Fiddle lINK. I want the 4 colored div section to stay on the screen.
http://jsfiddle.net/swapnaranjita_nayak/8XcZX/
## HTML ##
<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
<div class="wrapper">
<div class="row">
<div class="box1" id="box_1"></div>
<div class="box2" id="box_2"></div> <div class="clear"></div>
</div>
<div class="row">
<div class="box3" id="box_3"></div>
<div class="box4" id="box_4"></div> <div class="clear"></div>
</div>
</div>
</div><!---End of Container fluid--->
<div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
<h1>Box1 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
<h1>Box2 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
<h1>Box3 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
<h1>Box4 Content</h1>
Back to #Menu
</div>
</div>
css
.container_fluid {
width:100%;
}
.wrapper {
width:1208px;
margin:auto;
}
.row {
padding:3% 3% 3% 3%;
}
.box1 {
height:100px;
width:100px;
background-color:red;
margin-right:2%;
float:left;
}
.box2 {
height:100px;
width:100px;
background-color:green;
margin-right:2%;
float:left;
}
.clear {
clear:both;
}
.box3 {
height:100px;
width:100px;
background-color:black;
margin-right:2%;
float:left;
}
.box4 {
height:100px;
width:100px;
background-color:brown;
margin-right:2%;
float:left;
}
JS
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"+=150%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});

"marginRight":"+=170%"
every time you add 170% or :
"marginLeft":"-=150%"
decrease 150% , this should be set , not increment or decrement the value.
http://jsfiddle.net/prollygeek/8XcZX/1/
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"0%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});

JQuery Cycle not working right

I am trying to do a function after my first slide has shown. I basically want to do the same function after each slide, but my 2nd slide is just still. Nothing is fading in or coming in.
Here is my JQuery
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: false,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
Here is my html
<div id="slideshow" class="slides">
<div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;">
<div id="slideText">
<h1>asdf</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<div class="slide" style="background-color: #fff;">
<img class="slideTwoImage" src="slideTwoKid.png"></img>
<div id="slideText">
<h1>Test.</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div>
<div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> -->
</div>
It works for the first slide..the animation for the text, but on the 2nd slide it is not working.

Change containerResize: false to containerResize: true then it should work.
See demo here

I figured it out. You have to name elements in the before and after function differently.
I had them both named #slideText as you can tell in the functions. Just name them separate.
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: true,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
$("#slideTextTwo").css('padding-left', '0px');
$("#slideTextTwo").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
$("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
So now I can make changes on separate slides the way I intended.