 DHTML Fade-in/out Loading Bar, (Firefox Only) |
|
|
|
|
  |
  Nov 10 2006, 03:38 AM
Post
#1
|
|
|
Newbie [ Level 1 ]  Group: Members Posts: 5 Joined: 10-November 06 Member No.: 17,141  |
Today I was looking around for a good DHTML loading bar and couldn't find one so I decided to make it myself!
Here is the javascript that goes into the <head> part of the doc: CODE var x = 0; var y = 115; var a = 0; setTimeout(fadeIn, 1); function fadeIn(){ document.getElementById("003").style.opacity=a; a = a+.1; if(a<1.1){ setTimeout(fadeIn, 100); } else{ setTimeout(progressBar, 1); } } function progressBar(){ x = x+1; document.getElementById("001").style.width=x; document.getElementById("002").style.width=x; if(x<113){ setTimeout(progressBar, 1); } else{ setTimeout(fadeOut, 1000); } } function fadeOut(){ document.getElementById("003").style.opacity=a; a = a-.1; if(a!=0){ setTimeout(fadeOut, 100); } } And here is the table that I put the bars and text in: CODE <table id="003" style="opacity: 0; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="vertical-align: top; text-align: center;"> <hr id="001" style="border: 1px solid rgb(51, 119, 255); margin-bottom: 0px; height: 2px; width: 0px;" noshade="noshade"></td> </tr> <tr> <td align="center" valign="top"><span style="color: rgb(51, 119, 255);">Loading Conent</span></td> </tr> <tr align="center"> <td style="vertical-align: top;"> <hr id="002" style="border: 1px solid rgb(51, 119, 255); margin-top: 1px; height: 2px; width: 0%;" noshade="noshade"></td> </tr> </tbody> </table> Sorry, but this only works in FF, but with a little tweaking it could work in IE and Opera. Post if you have any Q's! |
 |
 
|
|
Nov 10 2006, 04:19 AM
Post
#2
|
|
|
SM- the Man -The Myth - The Legend Himself Group: Members Posts: 443 Joined: 4-September 05 From: Drinking da rootbeers Member No.: 8,313 |
Although I could easily load this up and take a look at it, but it would be good to have a live demo link to show us what it looks like.
Also your tables info could be converted to css as well make the coding look cleaner as well. |
|
|
|
|
Nov 10 2006, 08:57 AM
Post
#3
|
|
|
Super Member Group: Members Posts: 595 Joined: 4-September 04 Member No.: 228 |
I went for the bother to copy and paste and run it it browser. And it looked quite neat actually! I've been considering dhtml menus for me new site design and a loader like this would be quite neat.
By the way, I tested in Opera 9.02 too and worked like a charm. And if it works in Firefox it'll work with all modern Gecko based browsers like Netscape and Mozilla. So I guess your script just doesn't work in IE. And we don't really care, right? 
|
|
|
|
|
Nov 10 2006, 02:56 PM
Post
#4
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 5 Joined: 10-November 06 Member No.: 17,141 |
For hercco: Well, most people do use IE (which sucks!), so I will probably fix that by changing some of the CSS.
For saint-michael: I made the tables in a WYSIWYG editor (NVU) but I could edit them manually if I needed to (the javascript is all original). And one of the reasons I posted this is that I need a good place to host my schools debate site, (which needs smtp). |
|
|
|
|
Nov 10 2006, 05:57 PM
Post
#5
|
|
|
SM- the Man -The Myth - The Legend Himself Group: Members Posts: 443 Joined: 4-September 05 From: Drinking da rootbeers Member No.: 8,313 |
Well for demo purposes you could use trap17.net services you don't have to post, just have to deal with the ads. But since it is a demo you shouldn't have to worry about it.
But to fix the problems you will have to convert it to css. Regardless if your a opera, ff, IE user, your designing a website for other people. Meaning you have to make sure the design is flawless all three browsers. Yeah it takes extra work to get it perfect, but after it's done oyu don't have to have to worry about making changes to the website while peopel are trying to access it. |
|
|
|
|
Nov 10 2006, 06:37 PM
Post
#6
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 5 Joined: 10-November 06 Member No.: 17,141 |
Here is a live demo that is hosted on awardspace (which is crappy cuz it doesn't have SMTP).
http://skriptkrypt.awardspace.com/ Just click login and the page should come up. The script is in the sidebar. This post has been edited by naurus: Nov 10 2006, 06:39 PM |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 7th October 2008 - 06:07 PM |