Printable View
I am wondering about a script from DD. I dont' understand what causes it to load. It doesn't indicate what I do with this extra page that is hidden that loads all the images. Do I put something in my .index page that will open this other page (first)?
Here is the script I am trying use (figure out) from DD
If you are using this to preload images for your index page, you would need to rename your index page to like index2.htm and have that be the page to switch to after preload and name the preload page to index.htm. This is not the best situation for search engines though to say the least. If preloading images on your main index page is your goal, a different script, one that works on that page would be far preferable. Something like:
Preload Image (with progress bar) Script 2
I just tried this one. It worked.....but it appears under my page. I have a very large display area (resolution 1920x1440) on my computer so I could see it poking out on the right side, but any other person wouldn't see the animated bar. Any ideas why this is happening?
Thanks, BTW (jscheuer1)
That is a layout problem. If you've followed the installation instructions exactly as written on the demo page, it probably means that the techniques used to position the progress bar on a page don't work with your layout and would need to be tweaked to do so.
Of course, it could be that you missed an important part of the instructions.
Please post a link to the page on your site that contains the problematic script so we can check it out.
Here is the link: Site
This is part I modified (except for putting in my image):
Thanks again.
Code:var yposition=400; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='black' ; // PROGRESS BAR COLOR
var unloadedcolor='yellow'; // BGCOLOR OF UNLOADED AREA
var barheight=25; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=700; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
There are two problems, the first is layout. To fix that, open the script in a text editor and change this:
to:Code:var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
The second problem is a conflict with your animate script. I think this is only a problem in FF but, should be resolved. Remove this from the script:Code:var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute;z-index:100; visibility:hidden; background-color:'+bordercolor+'">';
Add it to your body tag like so:Code:window.onload=loadimages;
In IE and Opera, the rightmost part of the bar will still appear somewhat to the right of the layout if the window is wider than the layout itself. If the window is the width of the layout, the entire bar will be over the layout.Code:<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#800080" topmargin="0" onload="dynAnimation();loadimages();">
Due to limitations in testing locally, there could be other problems but, that should do it.
This is over my head but what is "z-index:100;"?
Is it possible to give the bar an absolute position.....vs "centered"?
Finally, is it possible to make it go thru this before any of the actual page is displayed? I tested this while downloading other things again and it loads the page in pieces and at about halfway thru it shows this progress bar. Do I have to make an intro page that just has this and somehow go to the main page? (I thought if this was in the head it would run before the body would load?)
Quote:
Originally Posted by jscheuer1
What is different about my page that the original script hides the bar behind my page? (again over my head but I want to try to know why (and how) so I don't do it in the future)
And one more time.......THANKS for your time!Quote:
Originally Posted by jscheuer1
The z-index style property sets the overlay positioning (stacking order) of items on a page that are absolutely or relatively positioned in reference to each other. The default value is 0 and when not set otherwise, this means that, if their positions overlap at all, whatever comes later covers anything that came before. Higher z-index values will cover lower ones regardless of the order in which they appear in your code.
Your page must use this type of positioning, that is why this is required, as the progress bar uses it too. The progress bar is already absolutely positioned but, in relation to the width of the window, hence centered in the window. This could be changed in the code but, since your page is already centered in FF but not in IE, I think you should resolve that difference first.
I went thru the pages and made them all with a 0 margin on top and left...after I read this a few weeks ago. I now have time to play with this some more and I tried this again and the bar was there in the center and it doesn't disappear. Any ideas on why?
I see the place to position it horizontally but not vertically. (var yposition=320;)
I did try putting in an xposition.....which didn't do anything
y is generally the vertical. You either have this wrong or you typed the opposite of what you meant. I believe the script is set up to center it horizontally, that is why you see no variable for that.Quote:
Originally Posted by Ready
I will have a look at your link and advise.
Looking at your layout, I'd change this line in the progressbar.js script:
to:Code:var ww=(IE4)? document.body.clientWidth : window.innerWidth;
That is the width of your layout and will be used instead of the window width to later center the bar.Code:var ww=1000;
I probably mixed up hor & vert. Is there a way to make it appear at a certain pixel? The center section of the page is 700pi and I made the bar @ 680, so can I put it @ X=160?
I noticed a few other things too.....
In I.E. the bar shows up and then stays there. In FF bar comes and goes but my side bars with the 71 & signature are not there. (that is really odd..I've never had that happen before) I changed the link above to my main page not the test page. Ok....now the bar is gone. I'm not sure WHAT I did for that. :mad:
updated link
To sort this all out, I would need to see your demo page, preferably live on your site. You can just name it like - test.htm and provide a link to it. Looking at your layout page, from your link in a previous post, I see the script no longer appears there.
Try my suggestion of ww=1000, you will probably like the result position wise (if not, it can be worked out) but, it will take more work and a look at what you are doing to resolve the other problem.
Ok...I'm lost I don't see any of it now. I have the text to call it (<script language="javascript" src="progressbr.js"> Yes it's spelled incorrectly. I did this to have the original untouched..paraniod I guess) but I don't see it doing anything now:eek: .
the test page is 0.....http://www.andrewmckay71.com/0.html
Well, it now loads in FF just fine, but in I.E. it loads to near the end then stays there at 98% :confused: Any ideas?
I loaded this for the index page www.andrewmckay71.com/index.html
Is it possible to make the border (on the bar) 2 or 3 pixels instead of 1?
EDIT: I noticed on the page for this script when I looked at it in I.E. it doesn't even start. I see the bar, but it doesn't move. Is this a problem with my browswer?
I think it's fixed Thanks jscheuer1!!!. If you know how I can change the border on the bar please let me know. :)
Looks pretty good! One thing I notice is that if you resize the page, the empty bar reappears. That is because of this line in the external script which is no longer needed:
remove it. The border is fairly easy. The current border is really no border at all but an effect due to two different ways of displaying the bar's container and the bar itself. To increase the border, put this stylesheet before the script call on the page:Code:window.onresize=setouterpos;
Adjust the 1px to whatever you like, this value will be added to the existing 1px 'fake' border so, with the above, you get a 2px total border.Code:<style type="text/css">
#perouter {
border:1px solid red;
}
</style>
<script language="javascript" src="progressbr.js">
. . .
One other thing that I notice is that since the bar is no longer dependant upon page width, there is no reason to wait until the page is loaded to start loading the images. This means that, if you like, you can remove this from your body tag:
Making it:Code:loadimages();
And add it to the end of the external script:HTML Code:<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#800080" topmargin="0" leftmargin="0" onload="dynAnimation();">
Code:. . .
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
loadimages();
Hey, how hard is an if function to see if they've already been cached? I glanced at this and went around to the different pages since they don't hve to load and they are already there instantly.....but if I click on home again, it reloads. I did put it in the banner so the text updating content is not covered. It's just annoying if it has already done it. Shouldn't it be almost instant if they have already loaded? (or does it manually force them to load all over again?)
I tinkered with the numbers and made the width a hair less and it appears to be centered now with the wider border and pseudo border.
is this 2 layers ....."perdone" over the "perouter"?
guess i need to learn some java now!
Javascript really has no way to check the actual physical cache of images. It can only test if a given image object is cached. Other than images that are listed as the src attribute of an image tag, the only other type of javascript image object is the new Image() object. Each time you create one of these, it has to be loaded to be tested.
You can create a session cookie that will tell the browser if it has already done this or not and to skip it if it has. If a user has cookies disabled, they will get the loadbar each time. If the user clears their cookies while viewing the site they may (depending upon how the browser handles session cookies when its clear cookies button is pressed, some retain session cookies) have the loadbar again but, in most cases, only one extra time, as long as they don't clear cookies again.
If the user clears their cache but not their cookies, the images will no longer be preloaded. This is not something people usually do but, on occasion, it will happen.
To set this up, add this fairly good cookie unit from quirksmode.org and this variable declaration to the external script, just after the //DO NOT EDIT BEYOND THIS POINT line:
Then before the document.write line, add this test (addition red):Code://DO NOT EDIT BEYOND THIS POINT
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
var needed=readCookie('loaded')=='yes'? 0 : 1
And add this test at the beginning of the function loadimages():Code:if(needed)
document.write(txt);
Finally, add this command to the function hideperouter():Code:function loadimages(){
if(!needed)
return;
if(NS4){
That's it, when all instances of the browser are closed, the cookie will be cleared but, as long as the session continues, preloading will not be repeated except under the circumstances mentioned at the top of this post.Code:function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
createCookie('loaded','yes')
}