Home/ Questions/Q 6855739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:47:46+00:00

Basically, i am trying to create a web page that utilises jquery in order

  • 0

Basically, i am trying to create a web page that utilises jquery in order to slide in new content. i started out using this tutorial.
http://www.queness.com/resources/html/scroll/horizontal.html

now from that ive spent the several hours trying to figure out a way to solve this.. i find it may be easier to explain with the aid of a picture..
Layout image

what happens when you visit the demo page (see above). it appears that all the content divs all load side by side, but just arent in view (ie. overflow is set to hidden hence you cant scroll horizontally. and when u click on a link, the page slides left/right to go to the correct box.

Now my webpage is a bit different in that ive made the boxes bigger. what that means is that the “content” boxes (see diagram) over lap the bottom of the page.

what i wanted to do was to be able to scroll down to view the rest of the content. but here is where i run into problems.

i used the answer on this question: Hide html horizontal but not vertical scrollbar
to set the overflow-y:scroll and overflow-x:hidden which seems to let me scroll up and down while not compromising the content boxes either side of the one being viewed.
but when it scrolls, the content goes over the logo..

Question:
i want the logo to move vertically with the content box so that they do not overlap one another. BUT i want to keep the logo at the top WHEN the user clicks on another box.. when the user clicks on a link and another content box slides in, the logo stays above the first content box. I was thinking of having a logo over each content box but this would look tacky.. and i wanted to give the effect of the content being slided in/out..

What ive tried:
Ive tried making the logo position:relative. the logo moves up and down but im not sure how to keep it from moving out of view (ie: from the diagram, if the logo was above content1 in this scenario, when content2 is clicked, content2 slides in and logo hides with content1)

keeping the logo as position:fixed. it stays in the correct place whenever any new content box appears BUT when i scroll horizontally, it does not move with the content box.. therefore it just stays there, doesnt move horizontally or vertically and gets covered up by the content box upon scrolling.

Sorry for the really long winded question.. i appreciate the time you’ve taken to read this and if you can shed some light on this it would be very helpful.. Thank you 🙂

Edit for Sohnee:
After playing around on the jsfiddle thing you made.. its seems to solve half the problem.. basically it slides perfectly ( on my code and on the js fiddle) so thank you for that. but im still having issues with the scrolling.. im using safari and when u first load up the page (my code and your jsfiddle code) you dont see any scrollbars.. (even if the content height is set to something like 6/700px) so when i click on the bottom right as if im going to resize the browser window ( i barely move it a pixel), a scrollbar pops up in exactly the right place that i want it.. and it allows me scroll the page vertically and the sliding function doesnt seem to be affected either which is good. but as soon as i refresh the page.. the scrollbar is gone.. might there be a away to bring up this type of scrollbar on page load and keep it there?

(scrollbar also appears if i zoom in once and then zoom out once)

ive included screenshots to explain what i mean..

before:
original

after (resizing window barely a pixel):
after resizing

You’l notice that ive moved the scrollbar down and it moves the logo and content vertically in sync.. is there anyway to achieve this?
(Essentially wanna be able to scroll logo and content vertically, while preventing the logo moving horizontally when the slide function takes place)
(sorry to keep bothering you)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are almost there with this one, at the moment you have the logo included in the scrollable area (I think you are using the actual body element for scrolling.

    If you surround your scrollable “bits” with a container, such as a div and apply all you’ve done to that div rather than to the entire document, your logo won’t be affected…

    For example, in psuedo-code

    <body>
    <logo>
    <content1>
    <content2>
    <content3>
</body>

    Would change to

    <body>
    <logo>
    <div id="scroller">
        <content1>
        <content2>
        <content3>
    </div>
</body>

    And you now change $('body') to $('#scroller').

    I have created a JS Fiddle based on the original example to show this in action.

    http://jsfiddle.net/Sohnee/QB5hd/

    • 0