SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting started horizontal scroll

    Hy There,

    In order to design a new site for our bar I was looking for a rather different look and feel.

    The walls of the bar are brown-white (split allmost at the middle) and there are lots of pictures and other stuff on the walls. The basic Idea was to make a site, with a fixed header and footer and the rest should be like the wall. So I thought it would be nice to have a horizontally scrolling site.

    I nice looking site which has kind of the behaviour I was looking for is:
    www.makersmark.com

    Offcourse I would like to try this in just HTML, CSS and JavaScript. The last one isn't my field. I searched quite some sites, but I couldn't really find anything with a clear example. except this one:
    here

    Can I adept that one to fit my needs? Or do you have better Ideas?

    Thanx for any input.
    What good are one-liners if they don't
    fit.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    starter for 10?

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    function 
    zxcScroll(){
     
    document.getElementById('header').style.left=zxcScrollLeft()+'px';
     
    document.getElementById('footer').style.left=zxcScrollLeft()+'px';
    }


    function 
    zxcScrollLeft(){
     
    zxcSL=0;
     if (!
    document.all){ zxcSL=window.pageXOffset; }
     else if (!
    document.body.scrollLeft){ zxcSL=document.documentElement.scrollLeft; }
     else { 
    zxcSL=document.body.scrollLeft; }
     return 
    zxcSL;
    }

    window.onscroll=zxcScroll;


    //-->
    </script></head>

    <body>
    <div id="header" style="position:relative;top:100px;left:0px;height:100px;border:solid black 1px;text-Align:center;" >
    HEADER
    </div>
    <div id="zxcMap" style="position:relative;overflow:hidden;top:100px;left:0px;height:100px;width:2000px;border:solid black 1px;text-Align:center;" >
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    <div id="footer" style="position:relative;top:100px;left:0px;height:100px;border:solid black 1px;text-Align:center;" >
    FOOTER
    </div>
    </body>

    </html> 

  3. #3
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's quite like it.

    Now something more difficult. What if I want the scrollbar in the footer (or the middle content div), or no scrollbar at all and just two fixed buttons (or eara's) where you can hover over in order to scroll?

    I know there must be some code for this like sometimes used in customized tekst area's. For some reason I couldn't get google to give me an example
    What good are one-liners if they don't
    fit.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •