Getting the Mouse position in jQuery is very simple. However, getting the position from within an element take some extra steps.
Normally, a javascript event such as onmousemove would use event.layerX and event.layerY to get the coordinates of our mouse when it moves.
For jQuery, pageX and pageY will return values from the top left of the page and not the layer. Unless the element you’re working with is left-aligned, you need to calculate the offset of that element as well. Not only that (unless there is a better way to do this) the offset values returned doesn’t include the offset values of the parent tag.
In this example, I have two divs.
And you can imagine that #frame is centered and has padding. Getting #content’s offset won’t include anything outside of the frame so $(#content).offset().left; would only get you the distance of itself and its parent.
Get your layerX for jQuery
For this example, we are using a known set of divs so we can just write out each div in this script.
The variables are declared inside the event function to handle window resizing. Now were this a more complicated page and the element in question has deeply nested or even dynamically generated, writing our all the parent tags wouldn’t necessarily work (or be very efficient).* But the approach would remain the same. That’s it!
My previous how-to showed a new way to look at the slider function featured at the Apple.com/mac site. This one goes to Apple once again and their bucket ads shown in the iTunes Music Store (screen shot). The buckets are what I’m calling them. They are the three spots at the top of the music store which rotate graphics like the slideshow functions of many galleries. The difference is that these three take turns.
I was able to replicate this function using Scriptaculous on our beloved comic shop website (latest screen shot). But after a few years of constantly adding duct tape to the site, it was time to move everything to a single framework. And that mean making this triptych banner script run on jQuery. Hopefully without a lot of html recoding. Continue reading →
If you haven’t seen Apple’s product slider in action, you must check it out. It’s a horizontal gallery of their products with horizontal slider controlled with javascript. I believe they are using the scriptaculous motion for this, but there should be a way to build this in jQuery.
Truth be told, I was a die-hard fanatic for scriptaculous/prototype, but after ExpressionEngine announce their adoption of jQuery for EE 2.0, it was time to grow beyond the one framework pony.
Luckily, someone already set out to build the slider in jQuery. And major hat’s off to Remy Sharp for a great approach to this. If you looking for a way to build your own slider, start there first. Continue reading →
Somehow I’ve ended up following too many people on Twitter. Not that I don’t want to read each and every person’s tweet, but sometimes, I really don’t care and just want to follow a select few. LiveJournal has a filter feature for both posting and reading specific sets of your LJ buddies. Maybe twitter will set up some kind of filter.
Until then, here’s some css code file you can add to your Safari preferences.
/* turn off all tweets */
li.status {
display: none;
}
/* now turn on for your peeps */
li.u-zeuscomics, li.u-kingbaz, li.u-pvponline, li.u-seanjackson, li.u-AronHead, li.u-UltraboyNYC {
display: block;
}
NOTE: css is case-sensitive.
It doesn’t fix the timeline of the site, so if your “peeps” haven’t updated in a while, you’ll get a blank page. Ah, the silence!
