SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I use Javascript for this?

    Hi folks,

    Ive made a scrolling ajax navigation bar very similar to the one on the apple site here using prototype.js, scriptilicois.js etc:
    http://www.apple.com/mac/

    The trouble I have is with the text on the scrollbar. On mine, if I click the text it doesnt scroll because its just like clicking text - on the apple site they have somehow made it so when you click the text it ignores the text and just scrolls the bar.
    Any idea, how I can make the text invisible to the mouse - i.e. it cant be clicked, instead, the bar underneath is clicked and hence it scrolls.

    thanks in advance!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Go and read about event bubbling and capturing. That should give you a good hint as to what to do.

    Also, how is that navigation bar "ajax"? Looks like just the "j" without the "a" and "x". And if your prettiness script is called scriptilicois.js, maybe you've been duped.

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah its not ajax, but thats what people seem to be calling it and the name of the js is spelt wrong but I reckon you know what I mean
    thanks for the link, will check it out.

  4. #4
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm I kindof see what the article is saying, but as I don't know anything about Javascript really I dont know how to implement it.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's the problem with learning to use prototype and scriptaculous but not javascript - as soon as you encounter real javascript you panic and don't know what to do. Unfortunately I'm unfamiliar with prototype and with scriptaculous, so I can't really help you.

    The whole point about what that article is saying is that when you set the event handler using the old-school method (element.onclick = foo), it will be set in the bubbling phase. That means that when you actually click on something, the event will bubble up the DOM from the element where it happened, all the way up its parent nodes until it stops at the document. If it encounters any event handlers on the way, they will be fired.

    This is useful for your case because you can register an onclick event on your scrollbar and even if you click on the text while it is over the scrollbar, it should still work as long as the text is an ancestor of the scrollbar. Then you can position the actual scrolling thing (which is just an indicator for where the mouse pointer currently is) based on where the mousedown event occurred on the scrollbar and wherever after it has moved after that.


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
  •