Why does my horizontally scrolling site choke in Opera?

HTML & CSS
1

Hi,

I’ve made a horizontally scrolling web page following Raena’s tutorial: Thinking Laterally: Build a Side-scrolling Site Layout with CSS & jQuery » JavaScript & CSS » SitePoint Blogs

You can find my effort here: Test web page

My question - why does my page choke in Opera 11.01 (on Win 7)?

You can see what I mean if you scroll through the menu points.
“Home” and “photo 1” to “photo 4” work perfectly, you can scroll between them at will, but as soon as you click “Photo 5”, the other links in the menu bar cease to work.

I have no idea as to how to go about debugging this, so would be grateful for any pointers you could give me.

I would also be grateful if another Opera user could confirm that the same thing happens for them (so that I can exclude anything else in my configuration).

I posted in the CSS forum as I thought maybe it had something to do with exceeding the maximum width of a div (the container div in my example has a width of 11,580px - it crashes somewhere above 9650px).

Thanks very much in advance (and sorry that this error is only reproducible in Opera).

P.S. Maddeningly, this page works just fine in IE6.

2

Yes, it’s failing for me in Opera 11 in the same way.

It does appear to be to do with the total width. By reducing the width/padding on .box, you can get it to play nicely and behave … but if you carry on scrolling right, when you hit the same point, all the links just stop working.

So my suggestion would be to reduce the padding between boxes to bring the total width down to a workable size.

3

Thanks for the reply, at least now I can exclude any mistake within my configuration.

I reason the boxes are so wide, is that the divs should appear as separate pages on even a wide-screen monitor. My resolution is 1920 x 1200, for example.

The site is going to be used to make a private announcement to friends and family, not for business purposes.

We don’t know anyone that uses Opera, but we do know people with wide monitors, so I guess I’ll leave it as it is.

Do you think this could be a bug in opera, as surely it should render a div of any width. I can reproduce the same behaviour with javascript turned off, so it can’t be a js issue.
What do you think?

Thanks again for the reply.

4

You could try mine I put together. It will auto adjust to any screen size and be center. And I’m pretty sure it works in Opera. { visibility: inherit; } How to make a horizontal website

5

Hi,

Thanks for that.
I tried your code and the immediate problem that I encountered is that by adding a sixth menu point, the design breaks.

All I did was copy Demo 2 from your website and include the necessary javascript dependencies.

I then added the following to the HTML:

<div id="wrap">
...
<div id="six"><p>SIX</p></div>
</div>

and

<ul>
...
<li><a href="#six">SIX</a></li>
</ul>

Now, when I click on menu point three, the site scrolls to point three, but I unfortunately see point six displayed directly underneath it.

You can see what I mean here: Demo 2

6

Welcome. Simple math. You have 6. So the #wrap should be width 600% (not 500% as the demo) and each div should be 16.66% (not 20%). 100 divided by 6 comes up with 16.66666667. So hopefully there aren’t any rounding errors.

7

Oh yeah, simple maths. I forgot about that. Sorry! :slight_smile:

So, I made a horizontally scrolling page with seven panels.
#wrap width: 700%
individual div widths: 14.28%

In Firefox it works just fine, unfortunately in Opera however, I encounter the same problem as previously described.

I have made a boiled down example here: demo3

Any idea what is causing Opera to choke?

Thanks very much for your help so far.

8

I’m on vaca at Disneyland so I can’t test anything untill Sunday. But if no one else does I will definitely have a look then.

Just your new test page fails in Opera or my original demo too?

9

Hi,

It’s your original page with two added menu points and the #wrap div increased correspondingly to 700% viewed on a monitor with a 1200 x 1900 resolution.

It seems that it is in fact the same problem as I stumbled upon previously as in my case 100% = 1920, thus 700% = 13440, and any div with a width of over 10000 pixels seems to be causing Opera to freeze.

However, the same page that freezes on my 1200 x 1920 monitor, works great on a different monitor with a 1280 x 1024 resolution (presumably because 1280 * 7 = 8960, which is less than 10000).

So, in summary, your solution works better than my original as now my page only freezes in Opera on a big monitor, before it froze in opera - full stop.

Many thanks again for your kind help.
I hope you have a great time in Disneyland.

10

Ok. Prob just another version of operas max width bug. Out of curiosity I’ll still play with it when I get home. But this is operas fault. You could use a PHP browser sniffer and feed opera something else. But it’s probably not worth it. Operas a dieing breed anyways.