SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A few simple javascript questions for you

    I've just got a few (hopefully) quick questions so I thought I'd keep it all to one post rather than clog up the forum. I've been working on a page but with an admittedly poor grasp of JS I've fumbled myself along as far as I can.

    Please take a look at:

    http://ubtemp.110mb.com/

    1. Firstly, take a look at the main navbar at the top. See how the rollover effect slides accross as you move from button to button, what I'd like is for it to return to 'home' after the cursor has been away from the navbar for a certain amount of time. Any ideas?

    2. Secondly, the pink search form in the centre of the page: when I click in the input field I have been able to make the background image 'Please enter...' disappear when you click. How can I make it stay disappeared once the user has entered text?

    3. Finally, the 'slideshow' on the right-hand side. What I'd like is, as the image changes, the respective link below to turn to its :hover state. However, I'd like both image and link changes to be interrupted by clicking on a link. Any advice would be appreciated.

    Thanks very much.

  2. #2
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas?

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone at all?

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We are willing to help you, but we don't want to adopt you.

    Ask a question about one of your problems, and you will probably get some feedback. Include the javascript that isn't working.

  5. #5
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Righto, will do!

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You haven't posted a particular bit of code, so you're probably not going to get many replies (no one wants to dig through all of your code trying to find the particular bit of functionality you're referring to). But I'll answer your questions with some generic advice.

    1. Firstly, take a look at the main navbar at the top. See how the rollover effect slides accross as you move from button to button, what I'd like is for it to return to 'home' after the cursor has been away from the navbar for a certain amount of time. Any ideas?
    I'd say you need to, on mouseout, run setTimeout to call a function after n seconds (that function would move the bar to home). Assign the result of setTimeout to a global variable. Then, on mouseover, call clearTimeout on that global variable.

    2. Secondly, the pink search form in the centre of the page: when I click in the input field I have been able to make the background image 'Please enter...' disappear when you click. How can I make it stay disappeared once the user has entered text?
    Well, you're swapping that image using the :focus. What you may need to do is add a listener to the onblur for that input. Then check to see if the value length > 0. If so (the user entered text), append a class (like 'notEmpty') to the input and in your CSS:
    #search form input.findblinds:focus,
    #search form input.notEmpty {
    ...
    }
    Likewise, if the value length == 0, then you would remove the 'notEmpty' class from the input.

    3. Finally, the 'slideshow' on the right-hand side. What I'd like is, as the image changes, the respective link below to turn to its :hover state.
    Not possible. You can't trigger the :hover state. But...
    However, I'd like both image and link changes to be interrupted by clicking on a link. Any advice would be appreciated.
    You could probably do something similar to what I suggested for the search input. As the image changes, assign a new class to whichever link is currently being represented (removing the class from the other links at the same time).

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jonny View Post
    1. Firstly, take a look at the main navbar at the top. See how the rollover effect slides accross as you move from button to button, what I'd like is for it to return to 'home' after the cursor has been away from the navbar for a certain amount of time. Any ideas?
    Add this to the moveBg function in the menu.js file

    Code Javascript:
    this.timer = $clear(this.timer);
    this.timer = this.moveBg.delay(10000, this, this.menu.getElements('li')[0]);

    Quote Originally Posted by Jonny View Post
    2. Secondly, the pink search form in the centre of the page: when I click in the input field I have been able to make the background image 'Please enter...' disappear when you click. How can I make it stay disappeared once the user has entered text?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Add this to the moveBg function in the menu.js file

    Code Javascript:
    this.timer = $clear(this.timer);
    this.timer = this.moveBg.delay(10000, this, this.menu.getElements('li')[0]);
    Thanks, this works except I only want the slider to return once I'm no longer hovering on the button. At the moment, regardless of where the cursor is, the slider returns.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jonny View Post
    Thanks, this works except I only want the slider to return once I'm no longer hovering on the button. At the moment, regardless of where the cursor is, the slider returns.
    In that case, leave the clear timer part in the moveBg function, and move the delay part to where you were fiddling with it in the initialize function area.

    Code Javascript:
    item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
    item.addEvent('mouseout', function(){
        this.timer = this.moveBg.delay(10000, this, this.menu.getElements('li')[0])
    }.bind(this));
    item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pmw57 - this is about 99% there now. There's just one minor issue:

    I've now got this:

    Code:
    		this.menu.getElements('li').each(function(item){
    			item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
    //			item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
    			item.addEvent('mouseout', function(){  this.timer = this.moveBg.delay(1500, this, this.menu.getElements('li', 'li ul li')[0]) }.bind(this));
    			item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
    		}.bind(this));
    http://ubtemp.110mb.com/

    I want the background to remain when you're on a child <ul> of a <li>. It does, until you move to another <li> and it returns. Any ideas on a fix for this?

    Thanks again.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The code that's commented out does that nicely for you, so take the code inside the function of the commented out line, and use that in the delay method instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've now got this:

    Code:
    item.addEvent('mouseout', function(){  this.timer = this.moveBg.delay(1500, this, this.moveBg(this.current) }.bind(this));
    It doesn't work at all. As I say, my javascript knowledge is seriously limited. Where am I going wrong?

    (Really appreciate your help by the way)

    Thanks.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I applied some basic formatting to the line and the problem became immediately visible.

    Code Javascript:
    item.addEvent('mouseout', function(){
        this.timer = this.moveBg.delay(1500, this, this.moveBg(this.current)
    }.bind(this));

    Do you see the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Honestly? I don't really understand javascript that well at all, so even having studied your formatted code quite thoroughly, the answer is no.

    Could you be so kind as to give me at least a hint?

    (Apologies for my apparent stupidity)

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Look at the parenthesis on the middle line.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah thanks, spotted the missing bracket. Only problem is now the sliding background seems to shoot back as soon as you leave each button, creating a strange twitching effect.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That strange twitching effect is because you're calling this.moveBg(this.current) whenever you're setting the delay. Using just this.current should work just fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I now have this:

    Code:
    item.addEvent('mouseout', function(){  this.timer = this.current.delay(1500, this, this.menu.getElements('li', 'li ul li')[0]) }.bind(this));
    which doesn't work. Where am I going wrong?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I'm having trouble seeing any further solution Jonny
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks for all your help anyway.


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
  •