PDA

View Full Version : Update poss.for Left-Right Curtain Script?



Des Gander
11-27-2008, 12:22 PM
1) Script Title: Left-Right Curtain Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/document6.htm

3) Describe problem: Hi,

This script looks ideal for opening the main page of a new site I'm doing for my wife's 'amateur dramatics' society. I adapted it (following an old thread on this forum) to use a 'curtains background', but although this works in Opera 9.61 on my PC, it sadly doesn't online (see http://www.topshamestuaryplayers.org.uk/test/index3.html), nor in IE7 and Safari 3.1 (I don't know about Firefox).

The original script does work OK for me in Opera 9.61 (see a http://www.topshamestuaryplayers.org.uk/test/index6.html) but again, not the others.

Are there any changes that could be made to the script so that it will work in these other browsers please? (Pretty please?).

ddadmin
11-28-2008, 09:37 AM
This is a really old script, and I'm surprised it still runs in Opera 9 for you. What's the URL to the old thread you followed to get to where you are now? In general I don't see a quick way to get this script to work cross browser short of a complete rewrite, which would take some time for me to get to.

jscheuer1
11-28-2008, 10:51 AM
Speaking about the script as it appears in the Dynamic Drive Library:

http://www.dynamicdrive.com/dynamicindex3/document6.htm

For all its flaws (by modern standards), the one thing that really dates it is that it was written for quirksmode. So, if you were to remove the DOCTYPE from your page, that could very well solve your problem.

Des Gander
11-28-2008, 01:04 PM
Hi DDAdmin - the old thread's at http://www.dynamicdrive.com/forums/showthread.php?t=4458.

Thank you for looking at it.

Des

Des Gander
11-28-2008, 01:05 PM
Speaking about the script as it appears in the Dynamic Drive Library:

http://www.dynamicdrive.com/dynamicindex3/document6.htm

For all its flaws (by modern standards), the one thing that really dates it is that it was written for quirksmode. So, if you were to remove the DOCTYPE from your page, that could very well solve your problem.
Thanks John - I'll give it a try.

Des

Des Gander
11-28-2008, 03:47 PM
if you were to remove the DOCTYPE from your page, that could very well solve your problem.

Sadly this made no difference - but thanks again for the thought,

Des

jscheuer1
11-28-2008, 05:11 PM
I had a script laying around that did something like this vertically. It's pretty much up to date, so I figured how hard could it be to change it to horizontal? I think I've worked that out. It uses jquery-1.2.6.pack.js and requires the body to have no margin or padding, a 'fixed_container' division for the page as well a bit of other markup:


<body>
<div id="fixed_container">
<div class="left_cover"></div>
<div class="right_cover"> </div>
<div class="slidebut">
<input class="but" type="button" value="Reveal">
</div>
Your content goes here
</div>
</body>

It also requires at least a valid HTML 4.01 Transitional DOCTYPE. The button can be disabled, so that the effect occurs on page load, and the background for the curtains may be set via css style:

http://home.comcast.net/~jscheuer1/side/blinds/horz_curtain.htm

Use your browser's 'view source' to get the code.

Des Gander
11-29-2008, 06:20 PM
Thank you very much John! It was kind of you - I shall have great fun trying this out and I'll let you know how I get on,

Cheers
Des

Des Gander
12-01-2008, 09:39 PM
Success! It's up and running at www.topshamestuaryplayers.org.uk

I left the button off and used CSS on both slides so that I now have a 'stage curtain' and it works in Opera 9.61, Safari 3 and IE7 on a PC (just a little jerky on the latter). I can't test for a Firefox on PC or Mac but am hopeful.

Many thanks John, I really am grateful (& in appreciation I've made a small donation to the IRC.)

Des

jscheuer1
12-02-2008, 03:39 AM
The IRC and I am grateful. Have you ever tested your code in IE 6? I'm seeing minor problems with it in that browser that shouldn't be to hard to work out. Otherwise, things look pretty good.

One thing that strikes me about this approach though is that it works best once the images are cached. To that end we could consider adding a preload with progress bar sort of thing, so that first time users would get a more optimal experience.

Des Gander
12-03-2008, 08:21 PM
Have you ever tested your code in IE 6? I'm seeing minor problems with it in that browser that shouldn't be to hard to work out.

No, I don't have access to IE6. I've just tried Browsershots and seen a great white rectangle in the middle of the page - but that could've been the page still loading when the image was taken (Browsershots couldn't capture the sliding 'curtains' I guess. What were the minor problems please?


One thing that strikes me about this approach though is that it works best once the images are cached. To that end we could consider adding a preload with progress bar sort of thing, so that first time users would get a more optimal experience.

You're right - is it a question of my adding something like 'Body Onload (something)'. Can you point me to a script please?!

(If I had left the 'Reveal' button in with a message, would this have acted a a sort of preloader I wonder?)

Cheers
Des

jscheuer1
12-04-2008, 06:55 AM
The problem in IE 6 (which was the same thing you were seeing I believe) appears to be this line from the curtain script:


'body {background: ' + (bgimage? 'url(' + bgimage + ') ' : 'url(foo) ') + 'fixed;}\n'+


It's overriding the background color for the page.

That doesn't need to happen, simply change this in your stylesheet:


body {
background: #000000;
font: 95% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFFF;
}

to:


body {
background-color: #000000!important;
font: 95% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFFF;
}

Even without the !important directive, specifying that it is the color should be fine, but just to be safe, use the directive as well.

As far as the preloading goes, I'm not sure if there is much we can do other than to add it right into the script:


if(document.getElementById)
(function(){
var l = .5; //fraction of the window covered at the left
var r = .5; //fraction of the window covered at the right
var rv = "15em"; //offset of Reveal button from the top
var bgimage = false; //required for IE 6 only, set to quoted image URL if the body has a background image, otherwise false (unquoted)
var useButton = false; //should there be a button to reveal content? use true for yes, false for reveal on page load

//Note: For best results when using a background image for the body, in all browsers, its background-attachment should be fixed

///////////// Edit Below at Your Own Risk /////////////

var cimages = ['test/images/top.gif', 'images/closed-left2.gif', 'images/closed-right2.gif']
for(var pcimages = [], i = 0; i < cimages.length; ++i){
pcimages[i] = new Image();
pcimages[i].src = cimages[i];
}


Ideally we would wait until these three images were loaded before launching the effect, but that might ruin it. Though I have an idea.


Here's the idea, instead of the above addition to the script, this:


var cimages = ['test/images/top.gif', 'images/closed-left2.gif', 'images/closed-right2.gif'];
for(var loaded = 0, pcimages = [], i = 0; i < cimages.length; ++i){
pcimages[i] = new Image();
pcimages[i].onload = function(){++loaded;};
pcimages[i].src = cimages[i];
}

Then near the end, instead of:


}else {
(function() {
l.animate({left: -l.width() + 'px'}, 2500, 'swing', function(){l.hide();});
r.animate({left: '+=' + r.width() + 'px'}, 2500, 'swing', function(){
r.hide();
$('#fixed_container').css({position : 'static', width : 'auto', overflow : '', height : ''});
$('html').css('overflow', '');});
})();}

do:


}else {
var doit = function() {
if(loaded < cimages.length){
setTimeout(doit, 300);
return;
}
l.animate({left: -l.width() + 'px'}, 2500, 'swing', function(){l.hide();});
r.animate({left: '+=' + r.width() + 'px'}, 2500, 'swing', function(){
r.hide();
$('#fixed_container').css({position : 'static', width : 'auto', overflow : '', height : ''});
$('html').css('overflow', '');});
};
doit();
}

Des Gander
12-04-2008, 10:06 PM
Thank you John

1. The change in the stylesheet seems to have fixed the IE6 problem - great!

2. I tried both variations in the script. The first one threw up an error in IE7 (though I didn't double check to see if I'd made a 'copy & paste' error). The second script to my mind hasn't made a great difference (especially in IE7) though I've cleared my cache so many times in testing I may have forgotten what the original looked like! The site is now using that second script (www.topshamestuaryplayers.org.uk).

Is there anything further I can alter in the script to hold back the main page showing/speed up the curtains?

Either way I'm very grateful for all your help in getting this far!

Des

jscheuer1
12-05-2008, 12:58 AM
I think the problem is now, since IE 7 takes it sweet time with background images, your inline style:


<div class="left_cover" style="background:transparent url(images/closed-left2.gif) repeat-x;"></div>
<div class="right_cover" style="background:transparent url(images/closed-right2.gif) repeat-x;"> </div>


That makes the curtains transparent until the background images load. Instead, try giving them an appropriate background color as a stand in until the images arrive:


<div class="left_cover" style="background:#6e0b12 url(images/closed-left2.gif) repeat-x;"></div>
<div class="right_cover" style="background:#6e0b12 url(images/closed-right2.gif) repeat-x;"> </div>

I'm also noticing another potential problem not directly related to this that could impact upon it or other things, but if this takes care of it more or less (obscures the page with an appropriate color while the curtains load) and nothing else crops up as an issue, I'm not going to worry about it.

Des Gander
12-05-2008, 09:30 PM
I think the problem is now, since IE 7 takes it sweet time with background images, your inline style:

...try giving them an appropriate background color as a stand in until the images arrive

Thanks John, yes a definite improvement particularly with IE7 where I can see the color before the images arrive. www.topshamestuaryplayers.org.uk

Out of interest I've also experimented with including the button from your original script as well as the preloader (see www.topshamestuaryplayers.org.uk/index1.html) but I'm still in 2 minds about whether one is quicker than the other. (As ever) IE7 does something funny with the page position before the curtains open but I hope I can rectify that with more CSS tinkering(?)


I'm also noticing another potential problem not directly related to this that could impact upon it or other things, ...

Now I'm intrigued! Is it something I need to be aware of? IE8 ....?

As ever - thank you for helping me with this

Des

jscheuer1
12-06-2008, 01:32 PM
OK, remove:


jQuery(function($) {

from the beginning and:


});

from the end.

That's what's causing the problem with loading in IE 7. It defers the script somehow. It is also there to prevent conflicts with other libraries, but you have no other libraries. I think the change we made with the background color is still important, but if you remove the jQuery(function($) { no conflict wrapper, that will really help.

Another thing. The fixed container is supposed to contain all of the rest of the page. I know, if you do that, it makes the content jump to the middle until after the curtains part in IE. But if you add to this line as shown:


(window[iW] && d.documentElement[cW]? '' : 'div#fixed_container {position:fixed;width:100%;left:0;top:0;}\n')+

that won't be a problem. This is a fine point, but what that does is not allow the header to be scrolled out of view while the curtain is in place, and helps control some browser's behavior as regards the absence or presence of the vertical scrollbar in a more appropriate fashion. This is what I was referring to as a potential problem before, so that mystery is now revealed.

If you are concerned about IE 8, and you should be, place this meta tag with your other meta tags:


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

That will make IE 8 render like IE 7. However, don't use that unless you know there is a problem in IE 8, or unless there is no way for you to find out about how the page looks/works in IE 8 at the moment.

Currently I'm not bothering with IE 8 at all. I'm waiting until it is officially released. There will be a lot of code to update at that point, what fun. :rolleyes:

Des Gander
12-06-2008, 09:53 PM
That is brilliant - thank you once more for all your help! You and the other guys at DD are helping to keep the web a fun place. Much appreciated.

Des

jscheuer1
12-07-2008, 07:28 AM
As a side note, I researched this prevent conflict wrapper in jQuery thing a bit more. It's supposed to delay execution until document load. There is another type of prevent conflict wrapper that doesn't do that. I've updated the demos to use it:

http://home.comcast.net/~jscheuer1/side/blinds/horz_curtain_load.htm

and:

http://home.comcast.net/~jscheuer1/side/blinds/horz_curtain.htm

BTW, last I checked, you still hadn't extended the:


<div id="fixed_container">

to contain the whole page, but had made all of the other recommended updates. Your choice, it's just better with it containing the whole page I think.

To do so move the highlighted closing </div> tag to right before the closing </body> tag:


<body class="ep">

<div id="fixed_container">
<div class="left_cover" style="background:#6e0b12 url(images/closed-left2.gif) repeat-x;"></div>
<div class="right_cover" style="background:#6e0b12 url(images/closed-right2.gif) repeat-x;"> </div>

</div>

Des Gander
12-07-2008, 06:42 PM
BTW, last I checked, you still hadn't extended the:


<div id="fixed_container">

to contain the whole page,

Thanks John, my oversight - done now!

Cheers
Des

jscheuer1
12-07-2008, 08:13 PM
You may want to update to the new script code as well, there have been a number of improvements and bug fixes.

http://home.comcast.net/~jscheuer1/side/blinds/horz_curtain_load.htm

Des Gander
12-08-2008, 09:07 PM
Thanks John - I've now updated to your new code - www.topshamestuaryplayers.org.uk/index.html (http://www.topshamestuaryplayers.org.uk/index.html) and www.topshamestuaryplayers.org.uk.index1.html (http://www.topshamestuaryplayers.org.uk/index1.html) - (still pondering over which one to settle on).

With the script on the first URL (i.e. without the button) I've still included:



var cimages = ['images/top.gif', 'images/closed-left2.gif', 'images/closed-right2.gif'];
for(var loaded = 0, pcimages = [], i = 0; i < cimages.length; ++i){
pcimages[i] = new Image();
pcimages[i].onload = function(){++loaded;};
pcimages[i].src = cimages[i];
}


above the line -


var d = document, c = 'compatMode', cH = 'clientHeight', cW = 'clientWidth', iH = 'innerHeight', iW = 'innerWidth',[
and just wanted to check this was still right for my purposes?

Just an observation: only in Safari3 does the page not 'jerk' when a vertical scrollbar kicks in, in IE7 and Opera9 it does. Odd - but no complaints!

jscheuer1
12-09-2008, 12:02 PM
I don't see the jerk in Opera or IE. I am noticing a problem in Opera, that it adds an empty horizontal scroll bar in certain situations. But that's due to Opera not distinguishing between overflow-y and overflow-x. I'm not sure if that can be fixed, but it isn't too annoying.

The preload routine is fine, but you would want to add along with it here (highlighted):


commit = function(){ if(loaded < cimages.length){setTimeout(commit, 300); return;}
l.animate({left: -l.width() + 'px'}, speed, 'swing', function(){l.hide();});
r.animate({left: '+=' + r.width() + 'px'}, speed, 'swing', function(){
r.hide();
$('#fixed_container').css({position : 'static', width : 'auto', overflow : '', height : ''});
if(ie && ie < 7)
$('#fixed_container').css({overflow : 'auto', height : 'auto'});
$('html').css('overflow', '');});
};

Des Gander
12-09-2008, 07:03 PM
I've added that now John.

Funny think is that there is no 'jerk' with IE on my PC now (I'm using a monitor resolution of 1024x768), just with Opera but as you say it's not a problem as such.

Thanks again!

Des

jscheuer1
12-10-2008, 09:33 AM
Well, one of the things that the script does is to detect if there would be a vertical scrollbar or not in browsers like Opera, FF, Safari, etc. Basically all but IE, which always has a vertical scrollbar (at least the space for it), even when one isn't required.

If the need of a vertical scrollbar is detected, the overflow-y of the HTML element is set to scroll to force an empty vertical scrollbar while the fixed container takes up only the height of the window, which would otherwise remove the vertical scrollbar. Once the effect plays out, the real vertical scrollbar takes over. If no need of a vertical scrollbar is detected, none of this happens. This is all to prevent the page from jumping from side to side.

Opera doesn't support overflow-y scroll, but reads it as overflow scroll, so it sets the overflow to scroll, also resulting in an empty horizontal scrollbar in that browser. When normal flow is restored to the document, the normal vertical scrollbar takes over, and the horizontal one disappears, but I see no jump in the page when that happens, though the effect is less than optimal.