Im trying to make this image fade into the one below it using a jQuery animation and then have the webpage load about 2 seconds after the fade. How do set a timer for the second function to load? Here is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.fade
{
z-index:1;}
.abs
{position:absolute;
z-index: 10;}
</style>
</head>
<body>
<div id="fadephoto">
<div id="f4d" class="abs">
<img src="1.jpg" >
</div>
<div class="fade"> <img src="4.jpg" /></div>
</div>
</body>
<script>
{var fadeClicked = false;}
$("#f4d").click(function () {
$(this).fadeTo(2000, 0.01)
fadeClicked = true;
});
$('#fadephoto').click(function()
{
if (fadeClicked)
{
window.location.href = ('http://www.ifdvidfji.com');
}
});
</script>
You can use settimeout. Because you don't want to repeat code you can trigger the click event on your manual bypass.
http://jsfiddle.net/3nKDD/
$("#f4d").click(function() {
$(this).fadeTo(2000, 0.01)
fadeClicked = true;
setTimeout(function() { $('#fadephoto').trigger('click'); }, 2200);
});
Although I would restructure your javascript because right now clicking triggers both handlers and I think you only want it to trigger one of them.
http://jsfiddle.net/3nKDD/2/
Related
I am working on a project, and I want to make 4 images move in a circular fashion once I click on one of them. This is what I have so far, but I can't figure out how to make the circle keep going. Any help?
<!DOCTYPE html>
<html>
<head>
<title> Lab 13B </title>
<style>
#pic1 {
padding-left:325px;
}
#pic2 {
padding-top: 100px;
}
#pic3 {
padding-left: 350px;
padding-top: 100px;
}
#pic4 {
padding-left: 325px;
padding-top: 120px;
}
</style>
<script>
function one() {
document.getElementById("pic1").src = "water.PNG";
document.getElementById("pic2").src = "fire.PNG";
document.getElementById("pic3").src = "Air.PNG";
document.getElementById("pic4").src = "earth.PNG";
document.getElementById("pic1").id = "pic2";
document.getElementById("pic2").id = "pic4";
document.getElementById("pic3").id = "pic1";
document.getElementById("pic4").id = "pic3";
}
</script>
</head>
<body>
<img src = "Air.PNG" alt="air" width="300px" height="300px" id="pic1" onclick="one()";> <br>
<img src = "water.PNG" alt="water" width="300px" height="300px" id="pic2" onclick="one()";>
<img src = "earth.PNG" alt="earth" width="300px" height="300px" id='pic3' onclick="one()";> <br>
<img src = "fire.PNG" alt="fire" width="300px" height="300px" id='pic4' onclick="one()";>
</body>
</html>
You are essentially talking about an animation where you need to change something around after specific time interval.
To achieve things like that Javascript provides setInterval function where you can run a piece of code responsible for "change" after given interval in milliseconds. So your function one will look something like
function one() {
setInterval(function() {
// your logic for swapping src of images
}, 1000)
}
But this will require you to properly handle click event, first click will start the animation but second will create the interval again and so on, so considering this if you already have interval running then on second click you might want to stop the animation or at least prevent the creation of second interval. This might be of some help Is there any way to kill a setInterval loop through an Onclick button
I have a webpage which is a huge form (6 pages long). In order to make it more user friendly, I decided to break this down into different sections (div tags).
I have placed Previous and Next button on page. On previous click it should display the previous div tag I was at and next should display the next div tag. I was wondering what would be the best way to implement it? So far I have this function which I know is hardcoded for div tag called GeneralSection. Just like GeneralSection, I have 20 more sections. Any ideas how should I go about it ? Help appreciated! :)
$(document).ready(function () {
$("#imgNext").click(function () {
$("#GeneralSection").hide();
});
});
You could just iterate through an array of elements.
Here's a simple JSBin that should get you going: https://jsbin.com/siyutumizo/edit?html,js,output
$(document).ready(function() {
var $steps = $('.step');
var currentStep = 0,
nextStep;
$steps.slice(1).hide(); //hide all but first
$('#next').on('click', function(e) {
e.preventDefault();
nextStep = currentStep + 1;
if (nextStep == $steps.length) {
alert("You reached the end");
return;
}
$($steps.get(currentStep)).hide();
$($steps.get(nextStep)).show();
currentStep = nextStep;
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wizard">
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</div>
<div class="step">4</div>
<div class="step">5</div>
<div class="step">6</div>
</div>
<button id="next">Next</button>
</body>
</html>
Another way of implementing this is through siblings.
Jsbin: https://jsbin.com/tarajuyusu/edit?html,js,output
$(function() {
$('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
$('#imgNext').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].nextElementSibling).show();
});
$('#imgPrev').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].previousElementSibling).show();
});
});
Give each section class pages and per section ids page-1, page-2 like that
$(document).ready(function () {
var pages = $(".pages").length;
$("#imgNext").click(function () {
var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
if(nextPageNo > pages)
return false;
$(".pages:visible").fadeout();
$("#page-"+nextPageNo).fadeIn();
});
});
Havent fully tetsted but this should get you going.
Update
HTML
<div id="container">
<div id="page-1" class="pages">1</div>
<div id="page-2" class="pages">2</div>
<div id="page-3" class="pages">3</div>
<div id="page-4" class="pages">4</div>
<div id="page-5" class="pages">5</div>
<div id="page-6" class="pages">6</div>
</div>
CSS
.pages{
display: none;
}
#page-1{
display: block;
}
I want to make a couple things happen here:
Start button starts the animation and then turns into Stop button.
Stop button then stops animation where it is and turns back into Start button and enables me to resume from where it stopped.
Instead the animation just disappears once i press start or stop again.
I am a newbie when it comes to this kind of stuff, if I am not clear in my intent please tell me so, and I will try to clear it up as best as I can.
<html>
<head>
<meta charset="UTF-8">
<style>
div {left: 0px;
bottom: 100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
move();
Stop();
});
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
function Stop(){
$("input[value='Stop']").click(function(){
$( ":animated" ).stop(true, true, false);
$(this).val('Start');
move();
});
}
</script>
</head>
<body>
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton'>
<div style="height:100px;width:100px;position:absolute;">
<img id='myRobot' src='myRobot.jpg' width="250px" height="200px"/>
</div>
</body>
</html>
Your JavaScript code is a little bit messy. First of all your move function:
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
Your Stop function (not the one set as callback function of the animate function) will be called while the div is animated. You don't want this.
What you might wants is essentially three different functions:
move
pause
reset
Your move function will essentially start to move your object, the pause will obviously pause it, while the reset will put your object in the initial position, if you wanto so.
Let say your HTML file is structured like this:
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton' />
<div id="object">
<img id='myRobot' alt='test' src='http://www.clker.com/cliparts/7/b/d/b/1237099752389782475nicubunu_Soccer_ball.svg.thumb.png'/>
</div>
Your CSS:
#object {
position: absolute;
left: 0px;
bottom: 100px;
width: 100px;
height: 100px;
}
And finally the JS:
var animating = false;
$("#oneButton").on("click", function() {
if (!animating) {
$(this).val("pause");
move();
} else {
$(this).val("start");
pause();
}
});
function move() {
animating = true;
$("#object").animate({left:'100%'},1000, reset);
}
function pause() {
$("#object").stop();
animating = false;
}
function reset() {
animating = false;
$("#object").css({left: '0%'});
}
Here is a FIDDLE where you can seet in "action".
I have a div where certain controls which are added dynamically after getting data from database.
Its kinda news details that are going to get added. I just wanted that news to scroll automatically which I have achieved through javascript.
Now if I want to stop the animation on mouseover and continue on mouseout how can I modify the javascipt.
This is my html page:
<section id="secbody" runat="server" style="position:absolute; background-color:dimgray; max-height:183px; min-height:183%;margin-top:14px;margin-left:545px;width:535px;">
<div id="galheader" style="width:535px;" runat="server">
<label id="Label1" style="color:White; position:absolute; font-size:20px; left:20px; height: 26px; width: 100%;" runat="server"> Upcoming Programs</label>
</div>
<section id="secdetails" runat="server" style="font-family:'Palatino Linotype';color:white; min-width:500px;overflow-wrap:break-word;background-attachment:fixed;position:absolute;margin-top:25px;"></section>
</section>
and this is my javascript
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#secdetails").animate(
{
top: $("#secbody").height() - $("#secdetails").height(),
opacity: 1
}, 4000, function(){
$("#secdetails").css("top", 1);
$("#secdetails").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
I know we need to use .stop functionality but do not know the proper way to use it.
You can use .hover() function to accomplish your task
Try,
$("#secdetails").hover(function(){
$(this).stop(); //Stop the animation when mouse in
},
function(){
marqueePlay(); //Start the animation when mouse out
});
How about this?
function stopAnimation(){
$("#secdetails").stop();
}
<div id="secdetails" onmouseout="marqueePlay()" onmouseover="stopAnimation()"></div>
Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I'm looking to make 3 divs fade in on page load one after another.
So far I have this
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.
But this only fades them in all at once.
Any ideas?
You can .delay() each so the one before fades in at the right time, for example:
$("#1, #2, #3").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.
Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:
$(".fadeMe").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
Then you require zero maintenance on the JavaScript side to add additional <div> elements to fade.
The fade in command contains a call back function, see documentation. This means you could chain the events.
<script type="text/javascript">
$('#1, #2, #3').hide();
$('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
<script type="text/javascript">
$('#1').hide().fadeIn(1500, function(){
$('#2').hide().fadeIn(1500, function(){
$('#3').hide().fadeIn(1500);
});
});
</script>
Using the Delay function as following:
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().delay(1500).fadeIn(1500);
$('#3').hide().delay(3000).fadeIn(1500);
</script>
Here is a cleaner and generic way to achieve this effect:
check it out on http://jsfiddle.net/BztLx/20/
Logic trick relies on the callback functionality of the fadeIn and using .eq() as an iterator over the selected elements.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
var els = $(selectorText), i = 0;
(function helper() {
els.eq(i++).fadeIn(speed, helper).css("display", display);
if (callback && i === els.length) callback();
})();
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
console.log("I am just an optional callback");
});
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>