Adding and Animating DIVs - javascript

I'm trying to create div boxes step by step and animate them for several times when a button is pressed. I created a running sample code, and everything is going well. It goes right to the endhost, then it goes left again to its original place.
I want to simulate TCP, exactly as shown at http://histrory.visualland.net/tcp_fast_recovery.html.
Now I want each step when the button is pressed, and that between the DIVs in the same step, there should be delay when they move so one can distinguish them once they are animated. Can anyone help me with that?
$(document).ready(function() {
$("button").click(function() {
var d = $("#t");
var number = $("#number1").val();
var speed = 2000;
// if(state==true){
d.animate({
left: '+=230px'
}, speed);
d.animate({
left: '+=230px'
}, speed);
d.animate({
top: '+=20px',
backgroundColor: "#f09090",
text: '12'
}, speed / 4, "swing", function() {
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500);
});
});
d.delay(1000).animate({
left: '-=230px'
}, speed);
d.animate({
left: '-=230px'
}, speed);
d.fadeOut();
});
});
<body id="myapp">
<img src="https://via.placeholder.com/50" style="left: 0px; width: 50px; height: 50px;" />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; left: 275px; position: fixed; " />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; right: 0px; position: fixed; left: 548px;" />
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 10px; z-index=-1;"></div>
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 30px; z-index=-1;"></div>
<p>
Speed (mS): <input value="1000" id="number1" type="number" style="position: relative"></input>
<button style="position: absolute; top: 150px">Apply!</button>
<!-- dynamic area -->
<div id="t" style="position: absolute; text-align: center; vertical-align: middle; width: 20px; height: 20px; left: 60px; top: 10px; background-color: lightgreen">
<font id="span">
1
</font>
</div>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Related

Show dice element corresponding to random number generated on click

I was trying to make a dice random, and I created different faces of it by using HTML and CSS. Now I cannot hide them. I want to show only one face of the die at a time. How can I call a single face on random numbers from 1 to 6 and in javascript I tried onclicking a button to change the border color. How can I link CSS, HTML and javascript so that on clicking it shows one of the face designed through CSS?
HTML
function roll() {
var die = Math.floor(Math.random() * 6) + 1;
$('#die').removeAttr('class').addClass('die' + die);
}
#die {
width: 30px;
border: 5px solid black;
padding: 25px;
margin: 25px;
}
#die.die1 {
width: 30px;
border: 5px solid green;
padding: 25px;
margin: 25px;
}
#die.die2 {
width: 30px;
border: 5px solid pink;
padding: 25px;
margin: 25px;
}
#die.die3 {
width: 30px;
border: 5px solid violet;
padding: 25px;
margin: 25px;
}
#die.die4 {
width: 30px;
border: 5px solid yellow;
padding: 25px;
margin: 25px;
}
#die.die5 {
width: 30px;
border: 5px solid red;
padding: 25px;
margin: 25px;
}
#die.die6 {
width: 30px;
border: 5px solid blue;
padding: 25px;
margin: 25px;
}
.dice {
border: solid 3px #aaa;
border-radius: 3px;
display: block;
width: 100px;
height: 100px;
margin: 7px auto;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.dice .dot {
border-radius: 50%;
position: absolute;
width: 15px;
height: 15px;
background: #000;
}
.dice:first-child .dot {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.dice:nth-child(2) .dot:first-child {
top: 20px;
left: 20px;
}
.dice:nth-child(2) .dot:last-child {
bottom: 20px;
right: 20px;
}
.dice:nth-child(3) .dot:first-child {
top: 15px;
left: 15px;
}
.dice:nth-child(3) .dot:nth-child(2) {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.dice:nth-child(3) .dot:last-child {
bottom: 15px;
right: 15px;
}
.dice:nth-child(4) .dot:first-child {
top: 15px;
left: 15px;
}
.dice:nth-child(4) .dot:nth-child(2) {
top: 15px;
right: 15px;
}
.dice:nth-child(4) .dot:nth-child(3) {
bottom: 15px;
left: 15px;
}
.dice:nth-child(4) .dot:last-child {
bottom: 15px;
right: 15px;
}
.dice:nth-child(5) .dot:first-child {
top: 15px;
left: 15px;
}
.dice:nth-child(5) .dot:nth-child(2) {
top: 15px;
right: 15px;
}
.dice:nth-child(5) .dot:nth-child(3) {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.dice:nth-child(5) .dot:nth-child(4) {
bottom: 15px;
left: 15px;
}
.dice:nth-child(5) .dot:last-child {
bottom: 15px;
right: 15px;
}
.dice:nth-child(6) .dot:first-child {
top: 15px;
left: 15px;
}
.dice:nth-child(6) .dot:nth-child(2) {
top: 15px;
right: 15px;
}
.dice:nth-child(6) .dot:nth-child(3) {
top: 0;
bottom: 0;
left: 15px;
margin: auto;
}
.dice:nth-child(6) .dot:nth-child(4) {
top: 0;
right: 15px;
bottom: 0;
margin: auto;
}
.dice:nth-child(6) .dot:nth-child(5) {
bottom: 15px;
left: 15px;
}
.dice:nth-child(6) .dot:last-child {
bottom: 15px;
right: 15px;
}
.content {
left: 80%;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="dice.css" type="text/css" />
<script src="dice.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="die">
</div>
<button type="button" onclick="roll()">Click me!</button>
<div class="container">
<div class="dice">
<div class="dot"></div>
</div>
<div class="dice">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</body>
</html>
Rather than hiding, showing, and repositioning the dice elements you have created, you could just create the element you need on click (with some css modifications to take advantage of the random number generation to help position the dots). As an aside, there is no real need for jQuery here, but it is used in the example since you were using it in your original approach.
The js creates a click event listener on the #roll button. Each time the button is clicked, the num variable is set to a random number between 1 and 6. The cls variable sets the prefix for the various classes that determine the positioning of the dots on the die - it assumes the roll is an odd number and then adjusts if it is even. Then, we remove any child elements from #die with empty() (so any dots from a previous roll are removed before we add new ones). Finally, we use a loop to append the same number of dots to #die as generated in our num variable. At the same time, we append the numbered class for each dot (which is why we named our classes odd-1, even-1, etc). For example:
$('#roll').click(() => {
const num = Math.floor(Math.random() * 6) + 1;
let cls = 'odd-'
if (num % 2 === 0) {
cls = 'even-'
}
$('#die').empty();
for (let i = 1; i <= num; i++) {
$('#die').append(`<div class="dot ${cls}${i}"></div>`);
}
});
.dice {
position: relative;
margin: 8px;
border: solid 3px #aaa;
border-radius: 3px;
width: 100px;
height: 100px;
}
.dice .dot {
position: absolute;
background: #000;
border-radius: 50%;
width: 16px;
height: 16px;
transform: translate(-8px, -8px);
}
.odd-1 {
top: 50%;
left: 50%;
}
.even-1,
.odd-2 {
top: 25%;
left: 25%;
}
.even-2,
.odd-3 {
top: 75%;
left: 75%;
}
.even-3,
.odd-4 {
top: 75%;
left: 25%;
}
.even-4,
.odd-5 {
top: 25%;
left: 75%;
}
.even-5 {
top: 50%;
left: 75%;
}
.even-6 {
top: 50%;
left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="roll" type="button">Click to roll</button>
<div id="die" class="dice">
</div>
</div>
Something possessed me to create a Vanilla JS version of #benvc's excellent answer (upvoted).
This uses the exact same strategy, but of course without the jQuery conveniences like .empty() and .append()
I also chose to use const in place of let where possible, collapsed the determination of the class name "cls" into a ternary ?: in place of an if, and I'm displaying the random number to visually confirm that the rendered die matches the number which makes for minor changes in the HTML.
The CSS is completely unchanged.
const die = document.getElementById('die');
const val = document.getElementById('value');
document.getElementById('roll')
.addEventListener('click', () => {
const num = Math.floor(Math.random() * 6) + 1;
const cls = num % 2 === 0 ? 'even-' : 'odd-';
val.innerText = num;
die.innerHTML = '';
for (let i = 1; i <= num; i++) {
die.innerHTML += `<div class="dot ${cls}${i}"></div>`;
}
});
.dice {
position: relative;
margin: 8px;
border: solid 3px #aaa;
border-radius: 3px;
width: 100px;
height: 100px;
}
.dice .dot {
position: absolute;
background: #000;
border-radius: 50%;
width: 16px;
height: 16px;
transform: translate(-8px, -8px);
}
.odd-1 {
top: 50%;
left: 50%;
}
.even-1,
.odd-2 {
top: 25%;
left: 25%;
}
.even-2,
.odd-3 {
top: 75%;
left: 75%;
}
.even-3,
.odd-4 {
top: 75%;
left: 25%;
}
.even-4,
.odd-5 {
top: 25%;
left: 75%;
}
.even-5 {
top: 50%;
left: 75%;
}
.even-6 {
top: 50%;
left: 25%;
}
<div>
<button id="roll" type="button">Click to roll</button>
<span id="value">0</span>
<div id="die" class="dice"></div>
</div>

Unable to locate canvas elements present on the page using casperjs

I am new to casperjs and still exploring it. One problem i am facing here is i am unable to locate element on the page. basically there is one plot and i want to use this.test.assertExixts but it is failing.
the element i want to locate on the page's html code is:
<div id="htmlwidget_container" style="position: absolute; top: 40px; right: 40px; bottom: 40px; left: 40px;">
<div id="htmlwidget-db33fd07312733aaf5e4" class="dygraphs html-widget html-widget-static-bound" style="width: 100%; height: 100%;">
<div style="text-align: left; position: relative; width: 520px; height: 320px;">
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas class="dygraph-rangesel-bgcanvas" style="position: absolute; z-index: 9; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<canvas class="dygraph-rangesel-fgcanvas" style="position: absolute; z-index: 9; cursor: default; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 113.737px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 424.919px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<input style="display: none; position: absolute; z-index: 10; top: 231px; left: 57px;" size="2" type="text"/>
<div style="position: absolute; left: 0px; top: 0px; width: 515px; height: 28px; text-align: center; font-size: 20px; font-weight: bold; z-index: 10;">
<div class="dygraph-legend" style="position: absolute; font-size: 14px; z-index: 10; width: 250px; top: 28px; left: 264px; background: white none repeat scroll 0% 0%; line-height: normal; text-align: left; overflow: hidden;">
and casperjs code part is :
casper.then(function () {
this.waitForSelector("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", function () {
this.test.assertExists("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", "Confirmed!. element exists");
});
});
also tried to get element info using below but it is returning anything
casper.then(function () {
var temp = this.getElementInfo("#htmlwidget_container").tag;
this.echo('Image :' + temp);
});

Slider sliding back to original position

I've created an horizontal slider containing multiple slides, and I've set it up so that by clicking on the nav bar arrows the slider moves to the left so the next slide takes up the screen. The total width of the slider is 500%, and it contains 5 slides that measure 20% in width each. The code looks like this:
$('.arrow-next').click(function() {
$(".slider").animate({marginLeft: "-=100%",}, 600);
});
$('.arrow-prev').click(function() {
$(".slider").animate({marginLeft: "+=100%",}, 600);
});
Now what I'm trying to achieve is:
For the slider to slide back to its original position, 0, after arriving at its end.
And not to slide to the right when its at the first slide or rather at position 0.
I know its a very simple code and that there are different (and probably more efficient) ways to code an horizontal slider, but I've started coding just recently and that's the only way I've succeeded in making it work.
This is how I would do it. If you need any explanation, just tell me.
$.fn.createSlider = function(options){
var container = $(options.container, this),
slides = $(options.slides, this),
total = slides.length,
pos = 0,
animating = false;
container.width(total + '00%');
slides.width(100 / total + '%');
$(options.arrowLeft, this).click(previousSlide);
$(options.arrowRight, this).click(nextSlide);
function previousSlide(){
if(!pos || animating) return;
pos--;
moveSliderTo(pos);
}
function nextSlide(){
if(animating) return;
pos++;
if(pos == total) pos = 0;
moveSliderTo(pos);
}
function moveSliderTo(n){
animating = true;
container.animate({left: '-' + n + '00%'}, options.duration, function(){
animating = false;
});
}
};
$('.slider').createSlider({
'container' : '.slides',
'slides' : '.slides li',
'arrowLeft' : '.arrow-prev',
'arrowRight' : '.arrow-next',
'duration' : 600
});
.slider{
width: 65%;
padding-top: 27.22%;
overflow: hidden;
margin: 1em auto;
position: relative;
}
.slides{
list-style:none;
position: absolute;
top: 0;
left: 0;
}
.slides li{
float: left;
}
.slides li img{
width: 100%;
}
.arrow-prev, .arrow-next{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 100%;
background: rgba(255,255,255,.5);
font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
font-size: 25px;
font-weight: bold;
line-height: 170px;
text-align: center;
cursor: pointer;
}
.arrow-prev:hover, .arrow-next:hover{
background: #fff;
}
.arrow-next{
left: 100%;
margin-left: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider">
<ul class="slides">
<li><img src="http://i62.tinypic.com/2088l0l.jpg"/></li>
<li><img src="http://i58.tinypic.com/2rfv4b6.jpg"/></li>
<li><img src="http://i62.tinypic.com/9a7nk4.jpg"/></li>
<li><img src="http://i59.tinypic.com/o7k7cw.jpg"/></li>
</ul>
<div class="arrow-prev"><</div>
<div class="arrow-next">></div>
</div>
Here's my final try, it takes seven div's but will only show five at a time, best I could come up with:
$('.arrow-next').click(function() {
$(".slider").animate({left: "-=25px"}, 600, function(){
var left = $(this).css('left');
$(this).css('left', left == "0px" ? "175px" : left);
});
});
$('.arrow-prev').click(function() {
$(".slider").animate({left: "+=25px"}, 600, function(){
var left = $(this).css('left');
$(this).css('left', left == "200px" ? "25px" : left);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 150px">
<button type="button" class="arrow-prev">></button>
<br>
<div style="display: inline-block; width: inherit; overflow: hidden;">
<div id="before" style="position: absolute; left: 0px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
<div style="position: absolute; left: 25px; height: 25px; width: 25px; background-color:red; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 50px; height: 25px; width: 25px; background-color:purple; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 75px; height: 25px; width: 25px; background-color:blue; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 100px; height: 25px; width: 25px; background-color:green; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 125px; height: 25px; width: 25px; background-color:greenyellow; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 150px; height: 25px; width: 25px; background-color:yellow; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 175px; height: 25px; width: 25px; background-color:orange; vertical-align:middle;" class="slider"></div>
<div id="after" style="position: absolute; left: 175px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
</div>
<br>
<br>
<br> <button type="button" class="arrow-next" style="display:inline-block">
<</button>
</div>

Am I able to dynamically change the captions on a jssor slider?

I'm working on a site where I have data being pulled in from an external source via js. I want to take this data and plug it into each of the captions and img sources in the slider. I'm using a simple slider with caption that I pulled from the "slider-with-caption.source.html" file provided in the Jssor.
The data coming down are all simple strings. I have run the console to a breakpoint and I do indeed recieve the intended data.
This is where my issue comes in. I have set the content of each of the three slides with a unique id (SEE BELOW). Yet, when I gather my data and subsequently try to insert it into the tag, nothing happens. I've used $(id).text(data string); as well as .html(data string);
I'll include the code below, please tell me if there's anything in the jssor code that could prevent such an action.
Thanks
EDIT: Noticed that jssor seems to make a copy of all the tags and overlays them, so I tried $("#annone).each($(this).text(title); to no avail.
Page HTML:
<div id="announcements">
<div id="slider1_container" class="announcements">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 725px; height: 345px; overflow: hidden;">
<!-- Slide -->
<div>
<img id="annimgone" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide1.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px;">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="annone">The Change Network</a>
</div>
</div>
</div>
<!-- Slide -->
<div>
<img id="annimgtwo" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide2.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="anntwo">Express Learning</a>
</div>
</div>
</div>
<!-- Slide -->
<div>
<img id="annimgthree" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide3.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="annthree">Opport-Tuesdays</a>
</div>
</div>
</div>
</div>
<a style="display: none" href="http://www.jssor.com">javascript carousel</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
var siteURL = '/sites/chna-aar/'
var clientContext = new SP.ClientContext(siteURL);
var site = clientContext.get_web();
var list = site.get_lists().getByTitle('Announcements');
var query = '<Query><Where><IsNotNull><FieldRef Name="Title" /></IsNotNull></Where><OrderBy><FieldRef Name="Created" Ascending="False" /></OrderBy></Query>'
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query);
var items = list.getItems(camlQuery);
clientContext.load(items);
clientContext.executeQueryAsync(function () {
var enumerator = items.getEnumerator();
while (enumerator.moveNext()) {
var item = enumerator.get_current();
var title = '';
title = item.get_item('Title');
$("#annone").text(title);
//Alternative - $("#annone").html(title);
}
}, function () { });
});
</script>
</div>
It looks correct, not sure what's the problem.
But it would be better if you initialize jssor slider after you altered all captions.
clientContext.executeQueryAsync(function () {
var enumerator = items.getEnumerator();
while (enumerator.moveNext()) {
var item = enumerator.get_current();
var title = '';
title = item.get_item('Title');
$("#annone").text(title);
//Alternative - $("#annone").html(title);
}
//initialize jssor slider when you get all content ready
var jssor_slider1 = new $JssorSlider$(...;
}, function () { });

Random fade-in and fade-out

I need each of the sparkles below to fade in and fade out randomly, not all at once though. 1-2 at a time is ok. Also, I do not want the "Pack" image to fade. I do not want the sparkles to fade in/out due to a function like on hover. I also need them all of them to disappear after 5 seconds. Please help, I have tried everything, can't figure it out.. I'm new to web development and javascript.
Here is a fiddle I found, I would like it to be similar to this, I tried editing the code. I'm very confused right now.
http:// jsfiddle(dot)net/maniator/rcts4/ - Fiddle (I couldn't upload more than 2 links, please take out the space after http:// and replace the "(dot)" with . to view the Fiddle.
http://pastebin.com/DkDjU0qS - HTML
http://pastebin.com/Zr1vjafn - CSS
HTML
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Pack -->
<img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png">
<!-- Sparkles-->
<div id="sparkles">
<img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
</div>
<script>
// Define a random integer function
function random(n) {
return Math.floor(Math.random() * n);
}
// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#sparkles img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
images.eq(current).fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
</script>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
background-color: white;
}
#pack {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#sparkle1 {
position: absolute;
top: -8%;
left: 50%;
height: 140px;
width: 150px;
}
#sparkle2 {
position: absolute;
top: 90%;
left: 57%;
height: 180px;
width: 155px;
}
#sparkle3 {
position: absolute;
top: 94%;
left: 29%;
height: 140px;
width: 115px;
}
#sparkle4 {
position: absolute;
top: 25%;
left: 86%;
height: 150px;
width: 123px;
}
#sparkle5 {
position: absolute;
top: 20%;
right: 83%;
height: 145px;
width: 118px;
}
#sparkle6 {
position: absolute;
top: 79%;
right: 82%;
height: 150px;
width: 120px;
}
#sparkle7 {
position: absolute;
top: 52%;
right: 85%;
height: 150px;
width: 130px;
}
#sparkle8 {
position: absolute;
top: 50%;
left: 85%;
height: 180px;
width: 160px;
}
#sparkles {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
Here is the updated JSFiddle
Hope this helps.

Categories