Jquery Loop for timed banner animation - javascript

I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!

You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp

Related

How can I close parent div function when I clicked child div and when I clicked parent div again, the function will activity

I want to let user go to some website when he clicked my website background picture(parent div), but the function need be closed when user clicked my website content(child div), and then when user clicked the background picture(parent div) again, the function will be activity.
I try many times, but when I clicked my website content(child div), and clicked website background picture(parent div) again, the function didn't work.
What can I do? Thank you!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(){
bgADlink=false;
return i = 1;
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
just remove that || i == 1 condition from test1() function like below.
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
check this fiddle https://jsfiddle.net/ca7Lbsy3/
I am not sure that is what you need, but basically you need to stop event bubbling from child to parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
$(document).ready(function(){
$(".tt").on("click",function(){
bgADlink();
});
$(".content").on("click",function(e){
e.stopPropagation();
});
});
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
this snippet is not opening parent div link either..but use this on html page then try it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(varr,event){
// bgADlink=false;
event.stopPropagation();
return i = 1;
}
function bgADlink(){
console.log("bgADlink")
window.open('https://www.google.com');
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2('',event)"></div>
</div>
</body>
</html>
There are different problems in your code.
Because events propagate from an inner element, to it's parent element (not only parent but all the hierarchy up), the "tt" div will always fire, so the best thing to do is to stop the propagation of the events with
onclick="event.stopPropagation();test1()"
I don't really understand what you're trying to accomplish with the "i" and why your having a function bgADlink() and then assigning it a Boolean, JavaScript lets you do that, but basically your function is now a Boolean.
I made you a small sample fiddler yo you can see the stopPropagation working, hope it helps.
https://jsfiddle.net/pimboden40/kg9wfdqj/29/

fadeToggle is malfunctioning with animate width?

Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.
http://jsfiddle.net/neowot/g0teoyrc/
So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.
Does anyone have ideas as to what might be happening?
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
Works for me as fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>

How to overlay one div over another?

When I hover my mouse over a div with id one, dialog box appears, but the div with id three moves to the right.
I want the dialog box to appear over div with id three without it moving to right.
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;
}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>
You need a wrapper to position the dialogboxes against:
<div class="wrapper">
<div id="one"></div>
<div id="dialogone"></div>
</div>
Then you'll need to position the wrapper relatively, and position them to your liking (eg. with float). The dialog can be positioned absolutely, for example: position: absolute; left: 100% to position them just outside the wrapper to the right.
JSFiddle example
Note: please try to format your code a bit more readable, with indents and spaces... Whenyouwriteinenglishyoualsousespaces,doyou?

jquery/html/css making a image appear in the middle with an opaque background

hi guys im new with web programming using html, css, javascript and jquery. i have this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My test Site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssTest.css">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id = "divMain">
<div id="div1">
<img src = "1.jpg" disabled="disabled">
<img src = "2.jpg" disabled="disabled">
<img src = "3.jpg" disabled="disabled">
</div>
<div id="div2">
<img src = "4.jpg" disabled="disabled">
<img src = "5.jpg" disabled="disabled">
</div>
</div>
<div id="div3">
<div class="myCanvas" width=100% height=100%; ></div>
</div>
</body>
</html>
JS :
$(document).ready (function(){
$("a").click(function(){
$(".myCanvas").fadeIn();
$(".myCanvas").html ($(this).html());
});
});
CSS :
body{
background-color: grey;
}
#div1,#div2{
border:solid;
border-color: red;
}
#div1 img{
position: relative;
border: solid;
border-color: blue;
margin:5px;
z-index:1;
}
#div2 img{
position: relative;
border: solid;
border-color: blue;
z-index:1;
}
#div3{
background-color:black;
position: relative;
position-align: center;
top:-500px;
z-index:2
}
.myCanvas{
position: relative;
background: solid;
background-color: grey;
opacity: 0.5;
width:100%;
height:100%;
display: block;
z-index:3;
}
what I am trying to do is whenever i click on an image i would like to make the image appear in the middle with an opaque background that will be covering the other images.
Thank you guys for the help and sorry for the noob question.
You could consider using Fancybox; it gives you the functionality you're looking for.
HERE you can find the solution :)
jsFiddle
HTML
<div id="privacy">OPEN ME</div>
<div id="bgrprivacy"></div>
<div id="privacyopen">
I'M OPEN!!
</div>
CSS
#privacy{
text-decoration:none;
color:#999;
font-size:12px;
cursor:pointer;
}
#privacyopen{
display:none;
background:white;
height:30%;
width:50%;
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:101;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
padding:20px;
}
#bgrprivacy{
display:none;
background-color:rgba(0,0,0,0.4);
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:100;
width:100%;
height:100%;
cursor:pointer;
}
jQuery
jQuery(document).ready(function($){
$("#privacy").click(function(){
$("#privacyopen").fadeIn();
$("#bgrprivacy").fadeIn();
$("body").css("overflow", "hidden");
/*$("header").css("z-index", "1");*/
});
$("#bgrprivacy").click(function(){
$("#privacyopen").fadeOut();
$("#bgrprivacy").fadeOut();
$("body").css("overflow", "auto");
/*$("header").css("z-index", "1");*/
});
});
Ps: it contains some code that you don't need it because I forgot to delete it :) ( I did this for my website! )

javascript in Internet Explorer 10, no respond

Could you tell me why this js is working in Firefox and Chrome, but is not working in Internet Explorer? I am trying to solve that 3 days now, and I have no idea why it is not working. I would like this to be working at least on IE 8,9 and 10. I will be really happy if anyone would now how to fix this.
SCRIPT
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt=" "/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$('.envelope').mouseover(function() {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function() {
$(this).find('.list')
.toggleClass("listmove");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
cursor: pointer;
}
.list {
width:236px;
height:180px;
background:white;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:120px;
left:36px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
font-size: 16px;
background:gray;
}
.envtop {
position:absolute;
top:20px;
left: 24px;
z-index:1;
-webkit-transition:0.5s;
transition:0.5s;
}
.envbot {
position:absolute;
top:20px;
left: 24px;
z-index:3;
-webkit-transition:0.5s;
transition:0.5s;
}
.envani {
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
left: 35px;
top: 10px;
}
.listani {
top:80px;
left: 45px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.listmove {
top:0px;
}
Can you check the given below jsfiddle link in IE10
LINK
Note : Where you wrote your js code?. Is it external js?. If it is internal(page itself) js you need to write javascript within <script type="text/javascript" language="javascript"> ... </javascript> tag.

Categories