naurus
Nov 10 2006, 03:38 AM
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!
Reply
saint-michael
Nov 10 2006, 04:19 AM
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.
Reply
Hercco
Nov 10 2006, 08:57 AM
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? 
Reply
naurus
Nov 10 2006, 02:56 PM
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).
Reply
saint-michael
Nov 10 2006, 05:57 PM
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.
Reply
naurus
Nov 10 2006, 06:37 PM
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.
Reply
Recent Queries:--
ajax login top login on mouse fade in - 133.58 hr back. (1)
-
filter fade in fade outs dhtml - 172.02 hr back. (1)
-
loading flame with loading progress bar in net - 269.72 hr back. (1)
Similar Topics
Keywords : dhtml fade loading firefox- Firefox Plugins For Web Developers
- (13)
The best Extensions available for Firefox that will ease the work of the Web Developer and provides
very useful features. Aardvark Extension Accessibility Add N Edit Cookies Adsense
Preview BBComposer Checky Chickenfoot Clippings Codetch ColorZilla CrossFTP
CSS Sync CSSMate CSSViewer cuneAform DevBoi Dom Inspector Drag de Go Dummy
Lipsum Event Spy Fangs Screen Reader Emulator FireBug Greasemonkey HTML Validator
IE View Link Checker Live HTTP Headers Load Time Analyzer Measure It ...
Css With Firefox
- (5)
Internet Explorer 7 Problem
- Works fine in Firefox! (Shocker) (8)
Hey, I'm helping my mom with one of her web projects for class and I've noticed a pretty
big problem (no thanks to IE7) that cost her a few points. It won't load an image of an email
icon, however, Firefox will load and display it properly. Here's the line for the image: CODE
Also, IE7 complains about some ActiveX content, but this is just a basic page and NO
JavaScript, NO Java applets, NO ActiveX of any kind! I've never seen anything as crazy as this!
Wow... IE really sucks... anyone had a similar problem? F...
Xhtml Js Loading.
- (6)
CODE As Xhtml 1.1, the resize of body, and onload of img are the only errors. How could
I do this? All I could think was the onload at the end of the page, but as the image is 1.5mb, I
doubt this will work for most people. Btw, the empty src is correct, if you're intrested its the
RS world map....
Firefox Inventing Its Own Html?
- (9)
I am building a website for a client. I finally have the animations and the site content the way i
want it. I updated the site via FTP, and IE displays it perfectly. Firefox however displays my "work
in progress" animations still, even though the index file references the new animation. I have
cleared cache, and even looked up the site on different computers, and on every one, FF displays
those darn rough draft animations while IE works perfectly. Any idea as to what is going on here?...
Ajaxload Creates For You Free Custom Animated Ajax "loading" Icons
- (0)
I've been scanning through a whole lot of blogs these days and quite often I come across really
interesting tidbits from all around the net.. here's a recent discovery called Ajaxload.info
. If you're implementing ajax scripts in your site and was to show those funky animated loading
indicators instead of a vanilla "Please wait... loading" message, then this is the site for you...
Here's my review from my site: QUOTE(ChaosLab) Nowadays every second site you see employs
some form or AJAX or the other - either wholly or in parts. With the old-sc...
Web Designers Dream Package
- FireFox 2.0 add-ons/plug-ings that are a must have (9)
Well since Fire fox got updated and I have got the universal package browser for web design I
thought why not share it to those who do not know about these tools so here we go. I will explain
each tool and what it is used for and then give you the simple instructions on where to get it and
where to find it. First download Firefox http://www.mozilla.com/products/download.h...&lang=en-US
then install it and your set from there, Now for the plug-ins and add-ons. ColorZilla What
this program does is that once you select it a small ink dropper icon will show up and ...
How Do You Show..
- borders for frames in Firefox? (11)
Okay, I don't know if it's because of the Firefox browser not supporting this part of the
HTML code, which I doubt, since it shows up just fine around text, but not sections where graphics
are. Anyways, here's what the layout looks like in IE: And what it looks like in Firefox:
And here's the code I'm using that wants to screw with my head, apparently: CODE
style="border-right:2px solid #003300; border-top:2px solid #003300; border-left-width: 1;
border-bottom-width: 1; padding: 0"> And that's basically what it looks like for a...
Loading Time And Looks
- How do you get a.... (4)
How do you get a site that has good looks and a fast loading time? Ive been trying for ages and ive
never achived It? HELP?!...
Flash Movie Loading.
- Not the "loading movie" :) (3)
Hello /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> I have got a
little question about loading the flash movie on the website. In fact I made my website and have
inserted some flash movies on the main page. My flash movies are about 80KB. And while the movie is
loading it is white, but my website's background colour is black. So the question would be: Is
it possible to keep the movie BLACK while it's loading to the webpage, without creating this
"loading..." thing ? Eh... I hope you understand what I mean /rolleyes.gif' border='...
Help>> Fade Images
- (1)
Hi, Im trying to find out how to fade in scaled down images when the user holds the mouse over the
image. The image will be linking to the original image in a popup window that fits the size of the
image, if that makes any difference. also i dont want the image to be totaly faded out before the
user puts the mouse over, like 20% visible then when mouse over occurs it slowly goes to 100%, hope
u can help.....
Creating Dhtml Menu
- do you know how to create cool menu? (2)
I've searching for a while, but never could find the best solutions for menu design. could
anyone tell me where to find the best site that provide DHTML menu creation?....
Help! Redirecting After Loading .mov
- (2)
You know I believe there is some serious lag going on. I just got my post erased for the THIRD time.
Gah. Anyway, I seriously tried to search (and destroy) this problem and mine but I just can't
find the specific solution. Well, I thought I had a good lead on some other site, but then turns out
you had to PAY TO SEE THE ANSWER. Those bastards. Hip hip for astahost! This place is turning out
more useful than I thought... /biggrin.gif' border='0' style='vertical-align:middle'
alt='biggrin.gif' /> So here's what I have and here's what I want to do: .mov ...
Imagemap/IE/Firefox problem
- (0)
OK - The first page (intro page) of my website uses an imagemap button to link to the menu page of
the site (I use an embedded flash menu). This all works fine in Firefox, but when I use IE,
clicking on the "Enter Site" button opens a new IE window for the menu page - even though I put
_SELF in the imagemap link. In Firefox, the menu page loads into the same browser window, which is
how it should be. Can anyone explain why this is happening? Thanks....
Looking for dhtml, fadein, loading, bar, firefox
|
*SIMILAR VIDEOS*
Searching Video's for dhtml, fadein, loading, bar, firefox
|
advertisement
|
|
