Nov 21, 2009

DHTML Fade-in/out Loading Bar - (Firefox Only)

 		free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

DHTML Fade-in/out Loading Bar - (Firefox Only)

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!

 

 

 


Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

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? tongue.gif

Comment/Reply (w/o sign-up)

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).

Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : dhtml, fadein, loading, bar, firefox

  1. Css With Firefox
    (5)
  2. 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.....
  3. Firefox Plugins For Web Developers
    (20)
    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 ....
  4. 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?....
  5. Internet Explorer 7 Problem
    Works fine in Firefox! (Shocker) (9)
    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....
  6. 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....
  7. 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 ....
  8. 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....
  9. 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?!....
  10. Flash Movie Loading.
    Not the "loading movie" :) (3)
    Hello /smile.gif" style="vertical-align:middle" emoid=":)" border="0" 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" ....
  11. 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......
  12. 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?.....
  13. 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" style="vertical-align:middle" emoid=":D" border="0"
    alt="biggrin.gif" /> So here's what I have and here's what I want to do....
  14. 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.....


      15. Looking for dhtml, fadein, loading, bar, firefox

See Also,

*SIMILAR VIDEOS*
Searching Video's for dhtml, fadein, loading, bar, firefox
advertisement



DHTML Fade-in/out Loading Bar - (Firefox Only)

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com