Mouse-wheel scrolling not working until site loads completely

grainspirit

This code allows the website to scroll to the right when the mouse wheel is scrolled down and left when scrolled up. HOWEVER, this works only after all the images in my website have loaded.

How can I allow this mouse-wheel scrolling while my site is loading?

Thank you..

rnd_me

change "window.onload" (at the top) to "window.scroller", and then add this after the last line of the script file:

window.scroller();

move the script tag that points to this new file to the end of the body, just before </body> .

grainspirit

Thank you rnd me. It doesn't seem to be working. Could the reason be that I have two javascripts for the same page? Is there any fix so both scripts can run together?

(I can't code. I'm absolutely new to this. Thank you for helping..)

rnd_me

grainspirit;1042940 wrote:

Thank you rnd me. It doesn't seem to be working. Could the reason be that I have two javascripts for the same page? Is there any fix so both scripts can run together?

(I can't code. I'm absolutely new to this. Thank you for helping..)

yes, if one needs the other, then they must load in the correct order.
i didn't see an actual page, so i didn't know you had more going on.
sound like the mouse wheel script is missed or misses someone else.

the performance problem is that your script waits for an event before it runs.
in this case, it's window.onload(), which happens only after all the images arrive. jQuery provides a load event that fires much sooner, .ready().

there are ways to do that without jQuery.
i offered you the simplest, and perhaps most naive.
i'm not sure of your exact situation and script dependencies, so i can't generically say "do this" and expect it to work.

i can help a lot more if you let me know what other script is running, and better yet, post the HTML page that links to both scripts.

grainspirit

I'm working on wordpress. Attached is exactly all the script I'm working with..It's a horizontal website (like a showcase of only images). The user has the option to grab and drag the page OR use the mouse wheel to scroll the page.

rnd_me

i think you might actually have to wait for the images with that script.
it needs the total size of the body (including images) to calculate positions.
since images tend to reflow the page, trying to run the script early could have unpredictable results.

if every image tag has hard-coded widths and heights, and you set a certain, absolute, pixel-specified width to the body, you might be able to prevent reflow to the point where it would work.

you might try adding jQuery and a couple plugins to replace the scripts you already have. two plugins would have a lot better chance of both playing nice together and being able to run before the images come in.

the jQuery site has a nice plug gallery where you can browse, try live demos, and read instructions. most of them can be virtually cut and pasted into your page:

i'd like to help more, but i can't really rewrite a bunch of code without seeing the document it need to work on.

grainspirit

Thank you rnd me. I will look into the jquery site you posted. However, I confess I fear ending up at square one due to my pathetic knowledge of the basics. One more question however: you mentioned...

if every image tag has hard-coded widths and heights, and you set a certain, absolute, pixel-specified width to the body, you might be able to prevent reflow to the point where it would work.

Does it help that all my images are of the same size - 1000px X 600 px and my gallery width is fixed - 29000px. If you would be kind enough to help further, I am willing to provide you all the information you need to advice. This is my design portfolio and I have no other help. I'm working within the wordpress editor with the stylesheet n header.php file.