Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2009
    Posts
    1
    Member #
    20533
    Simple beginner question:

    I'm creating a horizontal scrolling website. I want the header to scroll up with the horizontal scrolling content section if the window is minimized, but I don't want it to scroll horizontally with the content. basically when scrolling horizontally the header should always be visible, but if the window in minimized I was want it to scroll off screen.

    an example of what I want:
    http://inside.nile.ru/#years-2008/

    and example of what I don't want:
    http://www.thewebsqueeze.com/samples...ing/jquery-on/

    The first one when the window is minimized the header scrolls up with the content, but stays fixed when the content scrolls. The second example the header doesn't scroll up or sideways, its just fixed.

    Thanks for the help!

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    They put their own scrolling mechanism in the first one as to void default browser behavior. they put the content in a div, then set overflow hidden. They use javascript to position a div within that div with a negative margin. However, they are using tables for layout, which I wouldn't recommend.

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    #head { position: fixed; top: 0px; left: 0px; right: 0px; width: auto; height: 100px; }
    #content { position: absolute; top: 100px; bottom: 0px; left: 0px; }

    javascript is not needed for that trick unless you require the arrow scroll. remember to compensate height for borders and such to keep it from scrolling down, with or without javascript.

    while($get_it !== true){ continue; }

  5. #4
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    Dorky, that won't work for thegiantsdrunk because the #head element is going to stay fixed on the upper left.

    Here is a jquery effect that I found:

    http://ajaxdump.com/2009/09/02/horiz...-using-jquery/

    and this is pretty close to what you want using css:

    http://css-tricks.com/how-to-create-...crolling-site/

    I would say just to google around till you find pretty close to exactly what you are looking for, then come back and give us the link. from there we can guide you on how to achieve it.

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    im not sure why you feel the need to contradict others in order to offer your own opinion.

    http://www.studio378d.com/sideways.html


    an example of what I want:
    http://inside.nile.ru/#years-2008/

    i could use some contradiction of font tho. have a look at my critique post about my site.

    while($get_it !== true){ continue; }

  7. #6
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    Sorry, I didn't mean to contradict you, but I had a hard time understanding what the OP was asking for at first. They only want it fixed to the left when scrolling right and not up and down. The code you gave will fix it to the upper left if scrolling any direction. Am I right?

    I'm guessing this is not wanted because it will cover up content when scrolling up and down.

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    not really sure what the left thing is all about but aside from the javascript arrow on the site they pointed out as "what they want" it does the same thing, horizontal scrolling only. click the link to see it in action, the header is 100% and fluid so it is always left and right. ill be leaving the page live for at least a year for seo reasons.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com