loading bar in Dreamweaver

TO LET OPINIONS , QUESTION , REQUEST or JUST FOR LET FRIENDLY MESSAGE

loading bar in Dreamweaver

Postby elfydesign on Thu Jan 29, 2009 6:04 pm

Hi,
How can I create a loading bar before the first page of my website
which could load all my website... It is a portfolio, and I have lots of pages and pictures
Thanks
User avatar
elfydesign
 
Posts: 10
Joined: Wed Jan 28, 2009 5:50 pm

Re: loading bar in Dreamweaver

Postby RAD on Thu Jan 29, 2009 8:46 pm

hi

the easy way to make a preloader , is to ad a small javascript and a bit CSS, that show you a preload image
Exemple
for this exemple the code was
CSS
Code: Select all
/*this is what we want the div to look like    when it is not showing*/
div.loading-invisible {
/*make invisible*/
   display: none;
}
/*this is what we want the div to look likewhen it IS showing*/
div.loading-visible {
/*make visible*/
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px;
   margin-left: -50px;
   text-align: center;
   background: #b0b0b0 url(ajax-loader.gif);
   border:0;
}


the js

Code: Select all
<script type="text/javascript">
  document.getElementById("loading").className = "loading-visible";
  window.onload=function(){
    document.getElementById("loading").className = "loading-invisible";
  }
</script>


And the Full HTML with the div loading in body tag ahd the js JUST AFTER THIS DIV !!!

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">           
  <head>                       
    <title>RAD ZONE Webcreation                   
    </title>               
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />                 
    <meta name="author" content="http://radservebeer.free.fr" />                   
    <meta name="generator" content="PSPad editor, www.pspad.com" />                   
    <link rel="stylesheet" href="preload.css" type="text/css" />     
  </head>       
  <body>
<!-- div for preload image -->         
    <div id="loading" class="loading-invisible">
<script type="text/javascript">
  document.getElementById("loading").className = "loading-visible";
  window.onload=function(){
    document.getElementById("loading").className = "loading-invisible";
  }
</script>         
    </div> 
<!-- END div for preload image -->               
    <p>
      <img src="http://radservebeer.free.fr/images/00587_acceptance_1600x1200.jpg" border="0" alt="big size image">
    </p>       
  </body>
</html>


Download the exemple files

after you can customize with the css !!

if you want other preload gif http://www.ajaxload.info/

hope that help you
RAD

Image La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.
User avatar
RAD
Administrateur - Site Admin
 
Posts: 532
Joined: Thu Aug 31, 2006 12:02 am

Re: loading bar in Dreamweaver

Postby elfydesign on Fri Feb 06, 2009 11:55 pm

hi
thanks
I really understand your code and everything but I can't find where in the code, I have to mention the page html I would like open after the preloader gif...
Where have I to write it ?
Is this code is ok to load all the website or only the first page (index.html)
thanks
User avatar
elfydesign
 
Posts: 10
Joined: Wed Jan 28, 2009 5:50 pm

Re: loading bar in Dreamweaver

Postby RAD on Sat Feb 07, 2009 12:30 am

HI
Is this code is ok to load all the website or only the first page (index.html)

loool

no this code is for the curent open page only ! you can t load an entire site on enter , and lucky not !!

did you imagine for my web site if you have to preload near 5 giga ! :shock:

so you ad the code at every page you need a preload !

cu
RAD

Image La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.
User avatar
RAD
Administrateur - Site Admin
 
Posts: 532
Joined: Thu Aug 31, 2006 12:02 am


Return to RAD ZONE FORUM

Who is online

Users browsing this forum: No registered users and 2 guests

cron