Floating menu script problem if used with slideshow script

[tigger_na]

I am using the

> Floating menu script by Roy Whittle
at http://www.dynamicdrive.com/dynamici...staticmenu.htm

together with the

> Fade-In Slideshow (v1.5)
at http://www.dynamicdrive.com/dynamici...nslideshow.htm

A demonstration of my problem is at http://www.starke.com.na/menutest.htm. The webpage was written for a 1024x768 screen resolution. Everything works fine in IE 6.0, but things get hairy in Opera 8.54 for smaller screen resolutions (for instance 800x600, or when the Opera toolbar on the left is opened, reducing the available width for the window below 1024px). Now, as soon as the window is scrolled (to the right or to the bottom, doesn't matter), the window jumps back to its origin as soon as the slideshow fires. Without the slideshow, the problem disappears. Without the floating menu, the problem also disappears. An no, I have not tested in Firefox.

Otherwise, thanks guys (and girls), DD has helped me quite a bit with my webpage. And all this for free!! Super, really.

[djr33]

I can't answer your question myself, and don't be too surprised if it takes a while and/or no one answers because of the complexity due to having multiple scripts on one page.

Basically... try to find what is conflicting. There is some function name, varialbe name, etc that is shared and causing problems. Most likely. Some just don't really work on the same page without a lot of work.

Also, if you need it to work without a lot of fixing, you could put one within an iframe.

[Strangeplant]

Humm, it could be because you need to read and invoke the instructions 1 through 7 at the bottom of the slideshow script page.

Specifically, the array name, height, width, etc need to be specified in the call.

Try it out!

[djr33]

Actually, looking again... what exactly is not happening that should? (Or is happening that shouldn't?)

[tigger_na]

Incidentally, I've read some of the general remarks after posting my query. There's the one specifically about multiple scripts on one page, and I feel a little now. Be that as it may.

Actually, looking again... what exactly is not happening that should?
In Opera, go to http://www.starke.com.na/menutest.htm. Drag the browser window smaller, say to 400 px wide. Then . The horizontal scrollbar is visibly refreshed twice per one second cycle. Now try to scroll to the right and leave it there. The windows scrolls back to the left.

Humm, it could be because you need to read and invoke the instructions 1 through 7 at the bottom of the slideshow script page. Did that. See line 69 in the above code.

I tried to find duplicate variable or function names, and couldn't. Remember, this happens only in Opera, not IE. If its a function or variable name conflict, surely it should happen in IE too?

Best regards
Arthur

[djr33]

Hmm... more complex then. I don't have opera or know much about it's differences. Any problems in firefox? other browsers?

Window size is constantly rendered, based on content. As such, if there is no content (flashing to refresh) it will jump to the upper left. If the content shows up again, some browsers (all?) won't jump back to where it was before. You can test out this theory at any of the "draggable elements" scripts on DD. Just drag them off screen and you'll see.
Perhaps the problem is that IE jumps back to the spot you were at after refreshing while opera doesn't. (can't tell you, though.)

If its a function or variable name conflict, surely it should happen in IE too?

IE has lots of bugs. It's just a messy browser. Does it work well in everything else? If so, then it's Opera. If not, it's almost surely IE, just that in this case the "bugs" are helping you, probably with less strict rules for page interpretation.


To solve the problem in general, you could force page width with another element, such as a <hr> tag (horizontal rule) of whatever width it needs to be. A <hr> would be really obvious, and it's just an easy example.. not neccessarily the best. Maybe a table would be a good idea. Put your content into a table of set width and there you go. It refreshes but the table holds it's place.

Make sense?

[Strangeplant]

Stuff off the top of my head.....the javascripts here on DD are written with html in mind. I noticed that the slideshow.js script is not strict xhtml compatible. For example, the <img> tag has no closure, and the 'id' attribute should be used instead of 'name', and there is no mandatory 'alt' tag, as in this line (and there are others):

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

and in popitmenu.js, the onMouseover, etc. should be onmouseover since capitalization is not permitted in xhtml:

document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

While this may be the problem, I think that the real problem is that the slideshow images are not wrapped in a container of predefined width, so that when the slideshow fires, the page width is redefined each time with page refresh. Have you tried that? Why not define a width in the wrapping <td>?
I mention this because of this line in the slideshow.js code:

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filterrogidXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filterrogidXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')

where the width is redefined each time an image is displayed.


But, I may be offbase circling Saturn because I sure have my own unsolved mysteries at times.

[tigger_na]

Thanks for trying, girls and guys. Until now, no cigar.

IE has lots of bugs. It's just a messy browser. Does it work well in everything else? If so, then it's Opera.

I am horrified to report that it must be Opera. I tested in Netscape 8.1, Firefox 1.5.0.3 and Mozilla 1.7.5 now, and all of them work wonderfully.

Put your content into a table of set width and there you go.

It IS sitting in a table. TD width is defined by a row of TD's above this one. Just to make sure, I tried to define the containing TD's width. No go.

[jscheuer1]

I've often noticed that Opera has problems with overflow:hidden, not really 'getting it' with a single reference but requiring two or sometimes more. This worked here, surround your table in two divisions:

<div style="position:relative;width:860px;height:155px;">
<div style="position:absolute;width:860px;overflow:hidden;">
<TABLE cellSpacing="0" cellPadding="0" bgColor=#fafafa summary=forlayout border="0" style="table-layout: fixed; overflow: hidden;" class="layout"> . . .

 . . .      <TD background="./images/graybackground.gif" colspan="6">&nbsp;</TD>
		</TR>
  	</TBODY></TABLE></div></div>

[tigger_na]

In one go, you have saved my webpage and my sanity. Thanks a million!!!