|
JavaScript - Animated Gifs Not Animating In Non-ie Browsers
Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me.
I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? Similar TutorialsHey, I had a question about this script I'm working with. I have two functions which I'm using to grow and shrink a div. The growing seems to be working fine but the shrinking function is acting very strange. By strange I mean, in Chrome it will repeatedly shrink and grow over and over. It's all pretty weird. You can view the way it's working here. I'd love any input. Code: <script type="text/javascript">
function grow1(targetid){
set_zindex = document.getElementById(targetid).style.zIndex="1";
thewidth=document.getElementById(targetid).offsetWidth;
if(thewidth<940){
document.getElementById(targetid).style.width=thewidth+10+'px';
}
else if(thewidth>=940){
clearInterval(change);
}
change=setInterval("grow1('div1')",15);
}
function shrink1(targetid){
thewidth2=document.getElementById(targetid).offsetWidth;
if(thewidth2>290){
document.getElementById(targetid).style.width=thewidth2-10+'px';
}
else if(thewidth2<=290){
clearInterval(change2);
}
change2=setInterval("shrink1('div1')",15);
}
</script>
Hello, I'm not sure if this is the best forum for my question or not, but I'll explain what I'm doing and we'll see. I am trying to make a little easter egg hidden inside a web application and its going great except I'd like to hide my .gif files by changing their file extension to something like .dat instead so it won't be so obvious what they are. Basically all I really want to do is have an html image tag that points to a file who's extension is not gif, but really does contain gif content. (I want to mask the fact that the file is really a gif when looking at it in the directory listing.) So, my idea was I would point the <img src=""> tag's src attribute to a cgi script that could write out a Content-type: image/gif header and return the binary gif data. So, I did this and it worked great, but its really slow. (I output the image multiple times and animate it.) So, I thought I could maybe use Javascript to preload these cgi requests and cache them, but every attempt I've made to do this fails! It's like the browser doesn't want to cache the cgi requests. My method of attempting this was to create Image() objects in javascript and set their src attribute to my cgi script call and then set an onload to keep track of when they were all loaded. That seemed to work fine, but then when I try to display an image with the src tag equal to the cgi location (after they were all loaded) its like it goes and reads the code to pull it down again instead of using a cached copy because its really slow. So, then I thought, hey maybe I could just manually edit the binary content of the gif file (which has an extension like .dat) to also contain Content-type: image/gif\n\n embedded at the front of the file. So, I opened the binary file with a hex editor and inserted that text content at the front... but it didn't work. I had <img src="myfile.dat"/> Is there an easy way to make the browser recognize my gif file even if I don't use a gif extension? If not is there a way to preload and cache cgi responses with Javascript so that they don't keep reloading each time I refer to them? Any other ideas? Thanks.
I already asked that question on Stack Overflow, however so far I haven't gotten any answers there, so I thought maybe somebody here could help me. Below is the question, copied from Stack Overflow. I've got this problem that I've been trying to solve for a week and I'm at wit's end (which, well, most likely means my wit's not so great, since it doesn't seem to be a very hard problem; nonetheless I'm very new to Javascript and am trying to look at this as a learning experience). I wanted to have a fixed position element that would rotate as a user scrolls the page. Doing so in CSS is trivially easy, however it doesn't work all that great, especially across browsers (works fine in Chrome, but is janky in Firefox) and under stress (when I turn on FPS meter or some other stuff in Chrome Developer Tools it stops working correctly ― I assume it would also behave similarly if there was another CPU-extensive app open etc.). So I figured that animating in the canvas would be a more stable technique. Doing the basic animation in the canvas is, again, rather easy. However I started having problems while trying to emulate the CSS transition effect. In short, I'm trying to emulate a code like this: Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
#square {
margin: 50px;
width: 150px;
height: 150px;
position: fixed;
background-color: black;
transition: transform linear 0.3s;
}
</style>
<script>
window.onload = function() {
var deg = 0;
var pos = window.pageYOffset;
var square = document.getElementById('square');
window.onscroll = function() {
var npos = window.pageYOffset;
deg += (npos - pos) / 10;
pos = npos;
square.style.transform = 'rotate(' + deg + 'deg)';
}
}
</script>
</head>
<body>
<div id='square'></div>
</body>
</html>
And what I've got currently is below. This is, like, fifteenth try, and if you run it, you'll see that it kind of works but is very ugly and totally not how it should look. I have had better results before, but still not what I was looking for. Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
canvas {
position: fixed;
}
</style>
</head>
<body>
<canvas id='canvas' width='250' height='250'></canvas>
<script>
window.onload = function() {
// some canvas geometry stuff
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.translate(125,125);
var deg = Math.PI / 180;
// initializing variables
var request = null;
var deg = 0;
var ndeg = 0;
var base_degree;
var pos = window.pageYOffset;
var time = 0;
var duration = 300; // in milliseconds
draw();
document.addEventListener('scroll', rotateStart, false);
function rotateStart() {
// at the beggining of the scroll, set the time variable and start the loop.
// if scroll continues, only set the time (thus resetting the animation),
// but don't call loop, since it's already set as a callback to requestAnimationFrame.
if (request == null) {
time = (new Date()).getTime();
loop();
}
else {
time = (new Date()).getTime();
}
}
function loop() {
// time passed as a fraction of total duration of animation. Describes our progress
var fraction = ((new Date()).getTime() - time) / duration;
if (fraction == 0) {
// if current time and old time are the same, skip this frame
request = window.requestAnimationFrame(loop);
}
else if (fraction < 1) {
base_degree = (window.pageYOffset - pos) / 10;
ndeg = deg + base_degree * fraction;
// we operate on ndeg, and preserve deg as a reference point
request = window.requestAnimationFrame(loop);
draw();
}
else {
// clean up code.
// we draw one last time at a definitive degree of rotation because
// in my experience with similar scripts it sometimes doesn't go all the way there,
// e.g. maybe it stops at fraction == 0.95 or something like that.
ndeg = deg + base_degree;
draw();
deg = ndeg;
pos = window.pageYOffset;
request = null;
}
}
function draw() {
c.save();
c.clearRect(-125,-125,250,250);
c.rotate(ndeg * deg);
c.fillRect(-75,-75,150,150);
c.restore();
}
};
</script>
</body>
</html>
Could somebody point out errors in what I'm doing, post a solution, give a hint as to what method would be preferred here, whatever? Hi, I wrote a function which animates an image which looks similar to this: Quote: function animate() { var image = document.getElementById("frontImage"); var cssLeft = image.style.left; var px = cssLeft.substring(0, cssLeft.search("px")); if (px == 100) return; px++; image.style.left = px + "px"; //alert(timage.style.left); setTimeout(this.rotate(), 1); } This seems to be working fine. However, the image goes directly to its final position (100px to the right) and does not go through all the intermediate positions. As soon as I add an alert (the one which is now commented) everything works fine. Anyone knows what the problem is? Thanks in advance for any help Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/ It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different. Picture this: A Super Mario sprite with him standing normally, but to his right is the word "Home". Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites. I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required. Anyone have any ideas or suggestions? Any help is greatly appreciated!! Hello This is brilliant and good to work with, there is one issue i have if someone can help please. I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve. I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need. I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that. here is the code thanks the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm Code: <script type="text/javascript">
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a>
<div id="dog">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a>
<div id="cat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
</div>
Hi! I installed the Animated Information Bar found on http://www.javascriptkit.com/script/.../infobar.shtml Now there is a option to display the bar once per session but this isn't working... Code: infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!
Anyone has installed this bar and knows why this isn't working? I use IE8 greetings Jardin Holland Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look http://www.palousehillscomputing.com...rop/index.html The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks Hi I am trying to include an animated banner on my website but it wont work is there anyone out there who can look at my code and tell me where I am going wrong? Code:
<head>
<title>Online movie store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript" src="mylibrary.js">
</script>
<script type="text/javascript" language="JavaScript">
<!--
var myproducts = new Array("sherlockholmes","anchorman","weweresoldiers","starshiproopers","homealone","gamer","residentevil");
var itemqty = 0;
function showCookies(){
for (i=0;i<myproducts.length;i++){
var qtyWanted = GetCookie(myproducts[i]);
itemqty = qtyWanted ? qtyWanted : "0";
document.dvdform[myproducts[i]+"qty"].value = itemqty;
}
}
function addToCart(dvd){
itemqty = document.dvdform[dvd + "qty"].value;
itemqty = parseInt(itemqty);
SetCookie(dvd,itemqty);
var feedback = "An order for " + itemqty + " dvd(s) of ";
feedback += dvd.toUpperCase();
feedback += " has been added to your shopping cart.";
feedback += " Please click 'Check Out' when finished."
alert(feedback);
}
function checkOut(){
window.location.href = "return.html";
}
var myAds = new Array();
myAds[1] = new Image();
myAds[2] = new Image();
myAds[3] = new Image();
myAds[4] = new Image();
myAds[1].src = "images/sh.jpg";
myAds[2].src = "images/am.jpg";
myAds[3].src = "images/sold.jpg";
myAds[4].src = "images/star.jpg";
/* Callout: The timings represent the number of milliseconds delay between the images.*/
var myTimings = new Array();
myTimings[1] = 3000;
myTimings[2] = 1500;
myTimings[3] = 1500;
myTimings[4] = 1500;
var mySites = new Array();
mySites[1] = "sh.html";
mySites[2] = "am.html";
mySites[3] = "sold.html";
mySites[4] = "star.html";
var adnumber = 0;
var totalads = myAds.length - 1;
var timerID = "";
function startBanner(){
adnumber = 0;
showAd();
}
function showAd(){
if (document.images){
/*Callout: This condition ensures that each image loads
completely before the next image appears in the sequence. */
if (document.myBanner.complete){
adnumber++;
(adnumber > totalads) ? adnumber=1 : adnumber=adnumber;
document.myBanner.src = myAds[adnumber].src;
}
timerID = setTimeout("showAd()",myTimings[adnumber]);
}
}
function goSite(){
clearTimeout(timerID);
window.location.href = mySites[adnumber];
}
//-->
</script>
</head>
<body onload="showCookies(); startBanner();">
<form name="dvdform">
<div id="wrapper">
<div id="inner">
<div id="header">
<h1><img src="images/logo.png" width="519" height="63" alt="Online Movie Store" /></h1>
<div id="nav">
<a href="account.html">your account</a> | <a href="cart.html">view cart</a>
</div><!-- end nav -->
<img src="images/movie.png" width="744" height="198" alt="Banner" /></a>
</div><!-- end header -->
<dl id="browse">
<dt>We Have All Your Favourite Movies</dt>
<div align="CENTER">
<a href="sh.html" onclick=
"goSite();return false;"><img src = "images/sh.jpg"
name="myBanner" width="180" height="400" border="0" alt="Sherlock Holmes"></a></div>
</dl>
<div id="body">
<div class="inner">
<div class="leftbox">
<h3>Sherlock Holmes (2009)</h3>
<img src="images/sh.jpg" width="80" height="100" alt="sherlock holmes" class="left" />
<p>Detective Sherlock Holmes and his stalwart partner Watson engage in a battle of wits and brawn with a nemesis whose plot is a threat
to all of England.</p>
<input type="TEXT" name="sherlockholmesqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('sherlockholmes');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Anchorman: The legend of Ron Burgundy (2004)</h3>
<img src="images/am.jpg" width="80" height="100" alt="Anchorman" class="left" />
<p>Ron Burgundy is San Diego's top rated newsman in the male dominated broadcasting of the 1970's, but that's all about to change when a new
female employee with ambition to burn arrives in his office.</p>
<input type="TEXT" name="anchormanqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('anchorman');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>We Were Soldiers (2002)</h3>
<img src="images/sold.jpg" width="80" height="100" alt="we were soldiers" class="left" />
<p>The story of the first major battle of the American phase of the Vietnam War and the soldiers on both sides that fought it.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="weweresoldiersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('weweresoldiers');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Starship Troopers (1997)</h3>
<img src="images/star.jpg" width="80" height="100" alt="Starship troopers" class="left" />
<p>Humans of a fascistic, militaristic future do battle with giant alien bugs in a fight for survival.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="starshiptroopersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('starshiptroopers');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>Home Alone (1990)</h3>
<img src="images/homealone.jpg" width="80" height="100" alt="Home Alone" class="left" />
<p>An 8-year-old boy, who is accidentally left behind while his family flies to France for Christmas, has to defend his home against idiotic burglars.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="homealoneqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('homealone');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Gamer (2009)</h3>
<img src="images/gamer.jpg" width="80" height="100" alt="Gamer" class="left" />
<p>In a future mind-controlling game, death row convicts are forced to battle in a 'doom'-type environment. Convict Kable, controlled by Simon,
a skilled teenage gamer, must survive 30 sessions in order to be set free. Or won't he?</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="gamerqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('gamer');">
</p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear"></div>
</div><!-- end .inner -->
</div><!-- end body -->
<div class="clear"></div>
<div id="footer">
<div id="footnav">
<a href="account.html">Your Account</a> | <a href="cart.html">View Cart</a>
</div><!-- end footnav -->
</div><!-- end footer -->
</div><!-- end inner -->
</div><!-- end wrapper -->
</form>
</body>
</html>
I think the problem is that I have 2 onload functions in the body tag *<body onload="showCookies(); startBanner();">* does anyone know how I can fix this? Also when I put the Javascript into external files they won't work! but when I included the show cookies file in the html it works does anyone know where I am going wrong? I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code: <img src="img/door_admin_static.gif" width="229" height=401" alt="admindoor" usemap="#admin" name="animate"> <map name="admin"> <area shape ="rect" coords ="65,165,236,501" onClick="document.images.animate.src='img/door_admin.gif'; return true" href ="admin.html" rel="nofollow" target="_self" alt="admin" /> </map> What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete. Any help would be greatly appreciated!! Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ? thanks Hi there, I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code: Code: <script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
headerImage();
});
var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
$('.headerImage').animate({height: '436px'},speed);
$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
$('.headerImage').stop().animate({'height': origHeight},speed);
$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
origMT = $('.headerImage img').css('margin-top');
origHeight = $('.headerImage').css('height');
$('.headerImage img').css('margin-top','0');
$('.headerImage').css('height','436px');
setTimeout(shrinkHeader,speed*2);
$('.headerImage').hover(expandHeader, shrinkHeader);
}
/* ]]> */
</script>
If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere. Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this. I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help. Thanks, Brandon Hi, I searched the web for a button that can be animated, as well as dynamic. but I couldn't find one, so I decided to try my hand at creating one. My method is similar to a post made by Bram2: http://codingforums.com/showthread.php?t=153326, however, I have found my code to be unreliable and it doesn't apply only to the area where the table is, instead of spreading across the screen. The reason for trying to create a button this way is because I'm lazy, I don't want to create a new button in a graphics editor, spending hours trying to make it uniform with the rest of the buttons on the page, every time I want a new button. Doing it this way will also enable to have buttons with mulitple lines of text. I am fairly new to javascript, so I am wondering if anyone can give me a hand making it more reliable or pointing me to a script that has already been created. I put the button Here instead of filling the post with code. Please look at it before telling me it can be done with the <button> tag, because I tried before posting here. thanks, grayatrox Edit:I have managed to get the code to do what I wanted it to do, and more efficently too. Old code is commented out in the orginal webpage. This is a working example on how to impliment the buttons. javascript: Code: /*
Notes:
- Each button MUST have a unique name.
- You may need to create a secondary function that the button can activate like I did with the go(url) function below.
- Email me (grayatrox) at 238atrox@gmail.com for bugs, or to suggest improvements.
- Yes I know tables within tables is bad, if you read through my code carefully you will see where I am talking about.
*/
function loadButton() { //preload the buttons.
image1 = new Image();
image1.src = "images/button_up_L.png"; //button up left
image2 = new Image();
image2.src = "images/button_up_C.png"; //button up centre
image3 = new Image();
image3.src = "images/button_up_R.png"; //button up right
image4 = new Image();
image4.src = "images/button_down_L.png"; //button down left
image5 = new Image();
image5.src = "images/button_down_C.png"; //button down centre
image6 = new Image();
image6.src = "images/button_down_R.png"; //button down right
}
function createButton(buttonName, buttonText, buttonAction, id) { // create the code for a button
output= "<table border='0' cellpadding='0' cellspacing='0' id="+buttonName+">";
output=output+"<tr name="+buttonName+" onclick=\""+buttonAction+"\" onmouseover=\"changeButton('down', '"+buttonName+"')\" onmouseout=\"changeButton('up', '"+buttonName+"')\">";
output=output+"<td align='right'><img id='"+buttonName+"_leftImage' src='images/button_up_L.png'/></td>";
output=output+"<td id='"+buttonName+"_middleImage' align='middle' background='images/button_up_C.png'/>"+buttonText+"</td>";
output=output+"<td align='left'><img id='"+buttonName+"_rightImage' src='images/button_up_R.png'/></td>";
output=output+"</tr>";
output=output+"</table>";
return output;
}
function writeButton(buttonName, buttonText, buttonAction) { // write button immediatly below where function has been called
document.write(createButton(buttonName, buttonText, buttonAction));
}
function writeButtonInId(buttonName, buttonText, buttonAction, id) { // write the button in an id
document.getElementById(id).innerHTML=createButton(buttonName, buttonText, buttonAction);
}
function changeButton(action, name) { // button animation
if (action== "up") {
document.getElementById(name+'_leftImage').src="images/button_up_L.png";
document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_up_C.png)";
document.getElementById(name+'_rightImage').src="images/button_up_R.png";
} else if (action== "down") {
document.getElementById(name+'_leftImage').src="images/button_down_L.png";
document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_down_C.png)";
document.getElementById(name+'_rightImage').src="images/button_down_R.png";
}
}
function go(url) { // written becuase there were too many ' and ". You can do this for any javascript function (I hope)
document.location=url;
}
The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out http://www.sketchtravel.com/ http://www.foofighters.com/us/discography thanks for your help -rob I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list. All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too. Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding! Hi there. I'm relatively new to coding in javascript, so I'm hoping that some kind souls could help me out! I'm trying to make an animated image height changer (example: changing an image's height from 50px to 500px). I'm working on a new web site using HTML5 and want to add some Flash-like animation to my page using javascript and <canvas>. The animation would only need to "play" one time once the web page has loaded. No looping is required and no user interaction (ie mouseovers, etc) is needed. Any help would be greatly appreciated. If anyone knows of similar examples online please send me a link. If you're interested in helping, please let me know if more information is needed. Thanks. I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to. How would I remove the last active div function or get it to close again when toggling other animated divs.. Thanks so much if you can help Here is the site: www.gjoob.terryarchonship.com here is where the last active div java is Code: showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
}
here is the entire javascript: Code: var animatedcollapse={
divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},
showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
},
slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
var animateSetting={height: action}
if ($divref.attr('fade'))
animateSetting.opacity=action
$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
if ($togglerimage){
$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
if (animatedcollapse.ontoggle){
try{
animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
}
catch(e){
alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
}
}
})
return false
}
},
generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
map[arguments[i][0]]=arguments[i][1]
}
}
return map
},
init:function(){
var ac=this
jQuery(document).ready(function($){
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
this.$divref=$('#'+this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
}
else{
var cssdisplay=this.getAttr('hide')? 'none' : null
}
if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
cssdisplay='block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overriding any other setting
}
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
}
}
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function(){ //assign click behavior to each control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){
animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
return false
}
}) //end control.click
})// end control.each
$(window).bind('unload', function(){
ac.uninit()
})
}) //end doc.ready()
},
uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
if (this.$divref.css('display')!='none'){
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value+"; path=/"
},
urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},
preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=arguments[i]
}
}
}
}
Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time. live code is also at chryscreations.com/ns/boynames.html Javascript: Code: function showstuff(divID)
{
els=document.getElementsByName('mydiv')
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}
HTML Code: <head>
<script>
window.onload=function()
{
showstuff('');
}
</script>
</head>
<body>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<div name="mydiv" id="adivide"></div>
<div name="mydiv" id="bdivide"></div>
<body>
I feel a little stupid to ask this question but it has always been on my mind. <html> <head> <script type="text/javascript"> { var lastMod = new Date (document.lastModified); document.write ("<p>Document last modified "); document.write ((lastMod.getMonth() +1) + "-" + lastMod.getDate() + "-" + lastMod.getFullYear()); document.write ("<p>"); } </script> </head> </html> when i open in ie or ff it renders 2/25/11 (supposed to be 2/26/11) but when i use it in chrome or an html test is renders correctly. why? |
|||||||