jQuery Forum

I'm developing an image slider. I'd like to be able to trigger functions when the mouse leaves an area, sort of like

I can't seem to wrap my head around how to detect whether a mouse is on left side or the right side of the image. I looked into offset but that's an element's offset relative to the document. Now I could do it by getting the elements offset and subtracting the offset of the mouse from offset of the container element on hover, but there seems like there has to be a much better, more reliable way.

I have two divs that are in the same parent div, only one is shown at once. When I toggle the one that is smaller (height-wise), the position of the scroll bar (and hence the user's current location on the page) remains the same. But when I toggle back to the taller div, the scroll bar launches you back up almost to the top of the page. 

What would be the difference between setting up a click handler using .click() or binding the click handler:

From the title, you're probably already thinking the .next() method (not the case). 

I'm new to jQuery, so forgive my noobness...

I'm setting up my navigation on my  personal site. I have just a basic little layout and a navigation. The navigation is super simple, just plain text links that when they are hovered I set a border-bottom property so I can have a nice thick line below them. However, I can't get a.selected working. When a user hovers, I want a border-bottom property to be displayed but I also want a border-bottom property on the selected link, or the link to the page they are currently on. So if they were on the portfolio page, the portfolio link would have a border-bottom property set, whether they were hovering over it or not. I should be able to use 'a.selected' for this but it's not working and I've tried it a million different ways.

So my question is a simple one. How do I get jQuery to recognize the link of the page I'm currently on? I've seen it done before but for the life of me I can't remember how to do it or find it anywhere. I know it's probably something very simple too.

Something like:

$(this).selected('a').hover(function(){
// not sure what would come here either, I would append a css border-bottom
// property to the currently selected link. That would require finding the currenlty
// selected link's class and appending that css property.
});

Here is what my html and css looks like for the navigation:

#nav {
  position:absolute;
  top:50px;
  left:480px;
}

#ul#menu li {
  position:relative;
  display:inline;
  list-style:none;
  float:left;
  line-height:25px;
}

.msize {width:70px}
.msize1 {width:110px;}
.msize2 {width:95px;}
ul#menu li a {color:#fe4902; text-decoration:none;}
ul#menu li a:hover {border-bottom:2px solid rgb(255,255,255);}
ul#menu li a.selected {border-bottom:2px solid rgb(240,240,240);} /* NOT WORKING */

HTML:

<nav id="nav">
  <ul id="menu">
    <li class="msize"><a href="index.html">Home</a></li>
    <li class="msize1"><a href="portfolio.html">Portfolio</a></li>
    <li class="msize2"><a href="contact.html">Contact</a></li>
    </ul>
</nav>


If anything, I would prefer to do it with CSS alone because that way if javascript is disabled I'm all good. But then again, the navigation works crystal clear except the border-bottom on links of the currently viewed page. So even if I do use JS and it's disabled, I'll still have a good looking, working menu, just without that one property.

Thanks!