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.
Related
The problem is this: I have an image on a website. During the duration of a click, the image should be replaced to look like a "clicked-state"... Simultaneously a javascript function should be called...
individualy ":active" and "onclick" are working without a problem, but not combined...
Is there a simple solution?
If "//visibility: hidden;" the onclick() works...
function play0() {
alert("TEST");
}
#play0 {
left: 10px;
top: 10px;
height: 100px;
width: 100px;
cursor: pointer;
z-index: 3;
}
#play0:active {
visibility: hidden;
}
#play1 {
left: 10px;
top: 10px;
height: 100px;
width: 100px;
z-index: 2;
}
.animation_items {
position: absolute;
}
<img class="animation_items" id="play0" onclick="play0()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">
Perhaps this
function clicked(e) {
alert(e.target.id)
}
document.getElementById("play0").addEventListener("mousedown",clicked)
#play0 {
left: 85px;
top: 160px;
height: 100px;
width: 100px;
cursor: pointer;
z-index: 3;
}
#play0:active {
visibility: hidden;
}
#play1 {
left: 85px;
top: 160px;
height: 100px;
width: 100px;
z-index: 2;
}
.animation_items {
position: absolute;
}
<img class="animation_items" id="play0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">
I'm just practicing some html/css/js and thought about creating a small program that acts like a light switch that turns an image on and off.
Everything is fine except for my 'ON' button and 'OFF' button has the same heading 'H2' so when I go into CSS it has no idea which one is for what which is understandable. I tried renaming the 'H2' to 'H2.left_switch' and 'H2.right_switch respectively <-- saw it somewhere, but it didn't work/ it wasn't displaying the correct heading.
HTML
h1 {
position: absolute;
left: 65px;
top: 150px;
}
h2 {
position: absolute;
left: 40px;
top: 150px;
}
h2 {
position: absolute;
left: 100px;
top: 150px;
}
.leftButton {
position: absolute;
top: 300px;
left: 60px;
width: 40px;
height: 30px;
background-color: gray;
}
.rightButton {
position: absolute;
top: 300px;
left: 130px;
width: 40px;
height: 30px;
background-color: gray;
}
.backBoard {
position: absolute;
top: 210px;
left: 40px;
width: 150px;
height: 150px;
background-color: rgb(218, 216, 216);
}
<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "gayle.css">
<head>
<h1>FESTA</h1>
<h2> ON </h2>
<h2> OFF </h2>
</head>
<body>
<div class="center">
<div class="backBoard"></div>
<!--on-->
<div class="leftButton"></div>
<!--off-->
<div class="rightButton"></div>
<img id = "btsArmyBomb" src = "btsArmyBomb.png"/>
</body>
</html>
Thank you!
H2.left_switch refers to an h2 element with a class name of left_switch. The same goes with the h2.right_switch element.
Just add a class name to your h2 elements as follows:
<h1>FESTA</h1>
<h2 class="left_switch"> ON </h2>
<h2 class="right_switch"> OFF </h2>
And then target the h2 elements in your CSS like this:
h2 {
exampleStyle: exampleProperty; /* This would apply to both h2 */
}
h2.left_switch { /* This would apply to the h2 with ON */
position: absolute;
left: 40px;
top: 150px;
}
h2.right_switch { /* This would apply to the h2 with OFF */
position: absolute;
left: 100px;
top: 150px;
}
N.B. The first h2 in the css is just an example. You don't have to add that.
<h2 class="on"> ON </h2>
<h2 class="off> OFF </h2>
.on{
position: absolute;
left: 40px;
top: 150px;
}
.off{
position: absolute;
left: 100px;
top: 150px;
}
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);
});
[![enter image description here][1]][1]Hi I am desingning a webpage. I have set the header div width with the screen width using javascript code as follows
window.onload=getSize;
function getSize()
{
var x=window.screen.availWidth;
var y=window.screen.availHeight;
document.getElementById("header").style.width=(x-50)+'px';
document.getElementById("header").style.height=(0.2*y)+'px';
document.getElementById("wrapper").style.width=(x-50)+'px';
document.getElementById("wrapper").style.height=(0.6*y)+'px';
}
Now what happening is when I am adding the child divs to the parent div(header) the width of header gets increased considerably but i want it to remain fixed according to the display size
here is the css file
#CHARSET "ISO-8859-1";
#header {
margin: auto;
position : relative;
background-color: #009acd;
}
#logo1 {
position: absolute;
top: 5%;
left: 0.4%;
}
#caption {
position: absolute;
top: 50%;
left: 30%;
color: #FFFFFF;
}
#marquee{
position: absolute;
top: -15px;
color: #FFFFFF;
left: 300px;
}
#info{
position: absolute;
top: 60px;
left: 1075px;
color: #FFFFFF;
}
h3{
position: absolute;
top: 90px;
left: 1000px;
color: #FFFFFF;
}
#menu{
position: absolute;
bottom: 0%;
left: 0.215%;
}
#wrapper{
position: relative;
background-color: #FFFFFF;
}
#videos{
position: absolute;
top:0px;
left: 22px;
}
#studymaterial1{
position: absolute;
top:148px;
left: 32px;
}
#downloads{
position: absolute;
top: 315px;
left: 22px;
}
#wowslider-container1{
left: 233px;
top: 10px;
}
.formoid-solid-blue{
position: absolute;
left: 912px;
top: 12px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
You are checking
window.screen.availWidth
which is a constant and is equal to the width of your computer screen. Eg '1366px'
Instead you must use
window.innerWidth
which gives you the width of your browser window when the page loads.
var x=window.innerWidth;
var y=window.innerHeight;
Hope this helps. :)
You are missing unit(px/%) while assigning the width/height property.
Try this:
document.getElementById("header").style.width=(x-50)+'px';
____________________________________________________^^^^^^
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>