how to make effects happen one after another - javascript

hi i want to make these events one after another. That means when 1st event ends another events occur. But unable to do so. The 2nd image appears just after first event starts animating Please help me. my code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>‌​
<script>
$(document).ready(function(){
$("#pin01").animate({left: '650px'});
$("#pin01").promise().done(function(x){
$("#pin02").animate({left: '350px'});
});
});
</script>
</head>
<body>
<img src="mission.gif" id="pin01" style=" position:absolute;top:300px;left:300px;transition:5s"/>
<img src="mission.gif" id="pin02" style=" position:absolute;top:300px;left:900px;transition:5s"/>
</body>
</html>

The animate functions has its own callback function. Use it like this:
$("#pin01").animate({left: '650px'}, 500, function() {
$("#pin02").animate({left: '350px'});
});
The 500, is the delay, after the completion of the first animation, you can set it to be 0 if you do not want any delay. And the delay is given in ms (milliseconds).

Related

Add class to html root

I would like to add a class to the root html tag at the top of the page when a button is pressed. The only code I have come across is for adding classes to div elements with ids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="THIS IS WHERE I WANT THE CLASS TO BE ADDED" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Start presentation
I have tried to adapt this code but nothing works ;
<script type="text/javascript">
$("#addClass").click(function () {
$('para1').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
If I understand you correctly, you can use:
$('html').addClass("someclass")
to add a class and
$('html').removeClass("someclass")
to remove it.
If you have a button with id="mybutton" then you would use like this:
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
If your code does not follow the button element on the page, you also need to wrap your jQuery in a DOM ready handler (otherwise the click handler will never be connected):
$(function(){
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
});
This is just a handy shortcut version of $(document).ready(function(){...}):
Update using your new example
So, using your existing example, it would be:
<script type="text/javascript">
$(function(){
$("#addClass").click(function () {
$('html').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('html').removeClass('highlight');
});
});
</script>

How to remove a javascript function in the previous page on jQuery Mobile?

I have a site made up of various html pages in jQuery mobile. On one page I have a javascript function in the content. Upon going to another page, this function still exists. How can I remove it before displaying the next page?
I am using the following, which removes the dom elements on the previous page, but the javascript functions from the previous page are still available.
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
Here's the full code of two pages. Upon clicking from page 1 to page 2, the function testContent which is only on page 1 still works.
Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
Page 2
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
// this function still exists on the next page, how can it be removed?
alert("testContent");
}
function doPageShow() {
alert("Page 1");
alert($("#test").length); // shows 1 which is correct
testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Page 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
Page 1
<script>
function doPageShow() {
alert("Page 2");
alert($("#test").length); // shows 0 which is correct
testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Javascript objects live until the page refreshes. This is one of the advantages of jquery mobile, as parsing JS can take a long time on mobile devices, it is considered better to do it once.
If you really need to you could set the function to null.
I think I figured this out. Basically in JavaScript a function is just another object like:
doPageShow = function(){...}
Everything set in javascript persists on subsequent ajax loaded pages, so if I set a variable in one page, it will still have that value in another ajax loaded page, including functions.

Javascript and jQuery for a grey button to turn red

I am developing an application where I have the next JS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/var/www/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/var/www/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/var/www/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
The directory where I have button.png, button-hover.png and jquery.js is the one specified in the code. The code is supposed to turn a gray button (button.png) into a red button (button-hover.png) when putting the mouse over the gray button. The browser initially shows the image of the gray button but doesn't turn red when putting the mouse over it so I am assuming jquery.js is not being loaded correctly, any idea?
It would appear that you are referencing the server file location not the website relative location. if you are hosting the website from the www dir then I would try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
Looks like you are referencing the file from the server's physical path, not the virtual one. Try remove var/www/ from the URLs, and if your HTML-file already resides in /JSPROBAK/ you can specify the paths as straight out relative paths like <img src="button.png" />.
jsFiddle( http://jsfiddle.net/ZWxEg/10/ )
If this code doesn't work for you, then you're not loading jQuery correctly.
-- Edited -- Using hover at gdoron's request :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover( function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sovereignty12_hp.jpg");
},
function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sundback12-hp.jpg");
});
});
</script>
</head>
<body>
<img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" />
</body>
</html>​
you won't be able to fade like this, if its just a solid colour you can do it with https://github.com/jquery/jquery-color
otherwise create <a> container with position relative (or another element if its not supposed to be clickable)
inside have 2 absolutely position images, one on top of the other
the underneath one is the hover and should have a lower z-index set (set z-index on both)
on the <a> hover event fadeOut the one with the highest z-index
on animation complete swap the z-indexes

jquery .load() doesn't work

i can't seem to get jquery's .load() function to work. must be something simple i'm missing...basically just trying to load a fragment of more.html into index.html.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.5.js" />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function () {
alert("jquery script executing...");
$('#foo').load('more.html #bar', loadComplete);
});
function loadComplete (response, status, xhr) {
alert("load complete.");
}
</script>
</head>
<body>
<div id="foo">
foo foo foo
</div>
</body>
</html>
more.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>More</title>
</head>
<body>
<div id="bar">
bar bar bar
</div>
</body>
i see both the alerts -- the script is being executed, and the callback is being called (i.e. the load is completing). however, the contents of do not change. i've tried on safari, chrome, and firefox (all on OSX). there must be something obvious i'm missing...?
The load function is broken in jquery 1.5 release. You can find the bug ticket at http://bugs.jquery.com/ticket/8125. This is fixed in version 1.5.1. You can find the very latest jquery release with all the latest fixes including load() at http://code.jquery.com/jquery-git.js

how do I set up sevenup?

I am just trying to get this plugin to work but I am not sure what I am doing wrong.
http://code.google.com/p/sevenup/
So I tried to follow the one like of code they give you.
<script type="text/javascript" src="sevenup.0.3.min.js"></script>
...
<body onload="sevenUp.test( options, callback );">
My test page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript"></script>
</head>
<body onload="sevenUp.test( options, callback );">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
So I did that and I get "option" is not defined.
So I tried this then
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript">
var options = {
enableClosing: true,
enableQuitBuggingMe: true,
overlayColor: "#000000",
lightboxColor: "#ffffff",
borderColor: "#6699ff",
downloadLink: osSupportsUpgrade ?
"http://www.microsoft.com/windows/internet-explorer" :
"http://getfirefox.com",
overrideLightbox: false,
lightboxHTML: null,
showToAllBrowsers: false
};
var callback = function() {
// Switch IE-specific content
// AJAX call to map IP to 'IE6 user' status
// etc.
}
sevenup.test(options, callback);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
but nothing happens.
What am I missing.
Can someone set me an example up? Like I tried many different ways other then above and I still can't get it to work.
A standard Html page should be fine. Since this really does not need serverside stuff.
Here is a standard html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="sevenup.0.3.js"></script>
<script type="text/javascript" src="sevenup_black.0.3.js"></script>
</head>
<body onload="sevenUp.plugin.black.test( options, callback );">
</body>
</html>
So not sure what I am still doing wrong. Get options undefined.
Try passing an empty options object and function as a parameter. The options variable is NOT exposed by the script and that seems to be why it says it's undefined (because it is). The callback variable isn't exposed either.
sevenUp.test({}, function(){} );
You could also easily load up the page in Firefox, put up a breakpoint and inspect the local variables.
You're using ASP.NET and the Body OnLoad is not a great place for putting JavaScript hooks.
Add this to the very bottom of your page before the </body> tag:
<script type="text/javascript">
// Call sevenUp
sevenUp.test( options, callback );
</script>
Another thing you want to do is make sure that you are referencing the correct path to the source JavaScript file:
<script type="text/javascript" src="<%=ResolveClientURL("~") %>/Scripts/sevenup.0.3.min.js"></script>
Remove the runat="server" from your <head> tag. That should fix it.

Categories