Results 1 to 12 of 12

Thread: Scrollable Website Idea.. Help!

  1. #1
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts

    Scrollable Website Idea.. Help!

    ..I'm currently creating a website for a local band. Basically alot of it consists of rollovers and large interactive images.



    So above is what I am trying to achieve, basically I want the Image on top (being the black).. then behind it some scrollable content, like text, another .html file etc.. But using the buttons I design above and below (shown above..) as the scroll buttons.. so when you hover over, click..etc.. It scrolls the content.

    Now I know this is possible, but it's kind of out of my knowledge.. I believe this is possible in Javascript, but don't know it. I am just learning php/mySQL.. But I can't see this being a real help for this.

    So my main question was if someone could point me in the right direction of a Java tutorial, or show me how to do it, or find the code to adapt etc.. Also what was the best way to embed the scrollable content?.. As a frame.. Iframe ..etc.

    Thanks for any help.

    Lewis.

    ..I'm pretty sure this was the best place to post!


    [ iTomaHawk | My Music MySpace ]

  2. #2
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    Why would you want to do that, scrollable divs are incredibly annoying unless you use a scrollbar as it's impossible to pick the point at which you want to scroll to. I suggest you just use a <div> and set scrolling to true. Far easier to use

  3. #3
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Quote Originally Posted by Iain
    Why would you want to do that, scrollable divs are incredibly annoying unless you use a scrollbar as it's impossible to pick the point at which you want to scroll to. I suggest you just use a <div> and set scrolling to true. Far easier to use
    To be perfectly honest I DON'T want to do it.. but it's the wishes of the Band!.. To go in with their whole 'site' design.. As it's basically made up from the one of the band members drawings.. and a grey scrollbar would look too intrusive over the design element, which I can understand..

    But I TRIEd to persuade them otherwise.. but now I'm looking for ways to do it.. their way!



    [ iTomaHawk | My Music MySpace ]

  4. #4
    Cable Guy Jonny M's Avatar
    Join Date
    Jul 2003
    Location
    Loughborough Uni
    Posts
    4,263
    Thanks
    0
    Thanked
    4 times in 1 post
    Just style the scrollbar then.

  5. #5
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Quote Originally Posted by Caged
    Just style the scrollbar then.
    Yeah but they particular wanted it on the top and bottom and not on the side.. Anyways of doing this.. in HTML/CSS? I guess if not I'll have to try and persuade them otherwise... if there is no other way etc..

    ..It will be hard to style it as literally everything is made from scanned in hand drawn images.. so it would stick out a bit.



    [ iTomaHawk | My Music MySpace ]

  6. #6
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    Do it in Flash, I don't want that html anywhere near me

  7. #7
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Quote Originally Posted by Norky
    Do it in Flash, I don't want that html anywhere near me
    Yeah that was my original idea.. BUT I have now done the rest of the site in HTML/CSS.. and like for people without Flash I would need to then create a non-flash version.. All more time etc..

    Also the scrollable content would need to be updated regularly.. and I don't have enough knowledge on Flash to pull it off..



    [ iTomaHawk | My Music MySpace ]

  8. #8
    Treasure Hunter extraordinaire herulach's Avatar
    Join Date
    Apr 2005
    Location
    Bolton
    Posts
    5,618
    Thanks
    18
    Thanked
    172 times in 159 posts
    • herulach's system
      • Motherboard:
      • MSI Z97 MPower
      • CPU:
      • i7 4790K
      • Memory:
      • 8GB Vengeance LP
      • Storage:
      • 1TB WD Blue + 250GB 840 EVo
      • Graphics card(s):
      • 2* Palit GTX 970 Jetstream
      • PSU:
      • EVGA Supernova G2 850W
      • Case:
      • CM HAF Stacker 935, 2*360 Rad WC Loop w/EK blocks.
      • Operating System:
      • Windows 8.1
      • Monitor(s):
      • Crossover 290HD & LG L1980Q
      • Internet:
      • 120mb Virgin Media
    The first result on google was this page:
    http://www.quirksmode.org/js/layerscroll.html#
    Which seems to be exactly what you want, however i would agree that is a really annoying effect

  9. #9
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Quote Originally Posted by herulach
    The first result on google was this page:
    http://www.quirksmode.org/js/layerscroll.html#
    Which seems to be exactly what you want, however i would agree that is a really annoying effect
    Thanks alot seems like a great tutorial.. Will try this method see its effects. Would rather do the DIV container method.. but yeah the band would like this method really..

    So thanks again. Will try this... and let the band know!



    [ iTomaHawk | My Music MySpace ]

  10. #10
    Theoretical Element Spud1's Avatar
    Join Date
    Jul 2003
    Location
    North West
    Posts
    7,494
    Thanks
    335
    Thanked
    313 times in 249 posts
    • Spud1's system
      • Motherboard:
      • Gigabyte Aorus Master
      • CPU:
      • 9900k
      • Memory:
      • 16GB GSkill Trident Z
      • Storage:
      • Lots.
      • Graphics card(s):
      • RTX3090
      • PSU:
      • 750w
      • Case:
      • BeQuiet Dark Base Pro rev.2
      • Operating System:
      • Windows 10
      • Monitor(s):
      • Asus PG35VQ
      • Internet:
      • 910/100mb Fibre
    Quote Originally Posted by Norky
    Do it in Flash, I don't want that html anywhere near me
    *slap* flash is evil, don't even think about it.

    let us know how you get on though

  11. #11
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Ok.. I have used the above tutorial and managed implement it nicely.. But then when I came to testing it on my home computer (with a res of 1280x1024) Everything moved around and didn't display properly...

    And the reason for this is because the JavaScript layer scroll thing works, but for one if the image is larger than the screen it makes the browser window have a scroller to the end of the image even though it cannot be seen.. (say for example the scrolling layer is 1500px in height, then the window will have a scroll bar so that you can scroll down the page which is blank, but it is as high as the largest image!?..)

    ALSO the script says it HAS to be set as ABSOLUTE positioning, which is knackering and as my images/other layers are set as relative, (to deal with different screen resolutions and browser window resizing) it all moves around on different resolutions and when the browser window is resized.. .

    SOO any JavaScript experts know away around this?.. Like is it possible to have a relative scrolling layer? etc..

    Any help would be awesome, thanks!



    [ iTomaHawk | My Music MySpace ]

  12. #12
    Seething Cauldron of Hatred TheAnimus's Avatar
    Join Date
    Aug 2005
    Posts
    17,164
    Thanks
    803
    Thanked
    2,152 times in 1,408 posts
    okay, this might be out of date, becuase i did this with IE5 in mind.

    Basic premise is if its not absolute mouse capture has problems.
    (mouse capture:
    Generally speaking in all WIMP environments "objects" only get mouse events (such as move or click) when that happens in their area, when making something that scrolls, you need to detect the movment outside of the objects shape, to do this, you aquire the mouse capture (iirc its object.SetCapture(false)) now you get updates for the mouse moving even when its outside the shape of object.)
    Now you can do it with relative (i did it in the end) so you could try it.

    I'd recomend trying to write your own, just to play with, its not *that* hard once you get your head round javascript and mouse capture.
    throw new ArgumentException (String, String, Exception)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Automating Website Backup?
    By Aaron in forum Software
    Replies: 12
    Last Post: 31-08-2005, 01:55 PM
  2. Website / Name Purchasing and Hosting (Help)
    By muddyfox470 in forum Software
    Replies: 8
    Last Post: 08-07-2005, 03:27 PM
  3. BBC culls Cult website
    By Steve in forum HEXUS News
    Replies: 0
    Last Post: 01-07-2005, 01:47 PM
  4. Dell Website Not Working From Main PC, Fine From Second?
    By Devilman in forum Networking and Broadband
    Replies: 18
    Last Post: 21-04-2005, 01:55 AM
  5. recommend some website design software
    By petrefax in forum Software
    Replies: 24
    Last Post: 23-09-2004, 09:00 AM

Posting Permissions

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