Changing the axis this JS "runs on"...

[jw0ollard]

I took it upon myself to convert the Interface "Fisheye" script to run vertically instead of horizontally, but I've never really worked with JS before. (JS terrifies me, whereas I'm perfectly comfy with PHP--what gives? =p)

So before you reply "NOOB" and walk away, I actually do have this script working... almost. It's just that the script I've changed only works with my current icon size. If I make the icons smaller, the script believes that by 2/3rds of the way down the "dock", that your mouse pointer is on the last icon, when in fact you're hovering 2 icons above it.


Here's the original source: (I've only shown the relevant part as I'm about 95% sure it's either the distance formula or the posx/y variables causing the problem)

jQuery(document).bind(

'mousemove',

function(e)

{
var pointer = jQuery.iUtil.getPointer(e);
var toAdd = 0;
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')
var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')
var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
else
var posx = pointer.x - el.fisheyeCfg.pos.x;
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);
el.fisheyeCfg.items.each(
function(nr)
{
distance = Math.sqrt(
Math.pow(posx - nr*el.fisheyeCfg.itemWidth, 2)
+ posy
);
distance -= el.fisheyeCfg.itemWidth/2;

distance = distance < 0 ? 0 : distance;
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
distance = el.fisheyeCfg.proximity - distance;

extraWidth = el.fisheyeCfg.maxWidth * distance/el.fisheyeCfg.proximity;

this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
toAdd += extraWidth;
}
);

jQuery.iFisheye.positionContainer(el, toAdd);

}

);

And what I've whittled the code down to:

jQuery(document).bind(
'mousemove',
function(e)
{
var pointer = jQuery.iUtil.getPointer(e);
var toAdd = 0;

var posx = pointer.x - el.fisheyeCfg.pos.x - el.fisheyeCfg.itemWidth;
var posy = pointer.y - el.fisheyeCfg.pos.y - el.fisheyeCfg.itemWidth;
el.fisheyeCfg.items.each(
function(nr)
{
distance = Math.sqrt(
Math.pow(posy - nr*el.fisheyeCfg.itemWidth, 2)
+ Math.pow(posx/2, 3) /** I've made posx^3 simply so that your cursor must be closer **/
);
distance -= el.fisheyeCfg.itemWidth/2;
distance = distance < 0 ? 0 : distance;
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
distance = el.fisheyeCfg.proximity - distance;

extraWidth = el.fisheyeCfg.maxWidth * distance/el.fisheyeCfg.proximity;

this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
toAdd += extraWidth;
}
);
jQuery.iFisheye.positionContainer(el, toAdd);
}
);

And finally, here are the variables provided in the HTML:

jQuery('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 70
}
)

In case anyone is wondering why I haven't changed everything to "itemHeight" it's because it doesn't matter; the items are square. I also don't know what on Earth maxWidth's unit is supposed to be.. It's definitely not px. A value of 30 gives me approx. a max magnification of 70px. And also, you'll notice I deleted all the "halign" conditionals in the JS.. There was no need for it in my situation as this will always be on the left. And it would hardly matter anyway, as the only problem I'm having is in the vertical axis.

Like I stated before, I'm brand new to JS, so please go easy on me. It's probably something glaringly obvious that I've missed the whole time. I'm aware the JS I "fixed" is probably nowhere close to optimal, but it's my first attempt at JavaScript ever. That's why I'm asking the pros!!!

-------------------

OH, and I guess I should give an example of the problem:

If I change "itemWidth" to 25px, the script assumes that I've also moved the icons closer together (vertically of course) and stops lining up by the 2nd icon down.. I guess the "easy" fix would be to change the positioning of the icons every single time I need to change the "itemWidth" or.. I figured there must be something I'm overlooking in the JS.


Thanks!

 

[jw0ollard]

Also, I currently have each item in a descending z-index order, so that the first item is z-index:100, 2nd 99, and so on. I changed the JS below to change the z-index on mouseover so that the item I'm currently hovering on is z-index:200, so that it overlaps the icon above it. Example: Hover on 2nd item, was 99 now becomes 200 so that it overlaps the 1st item which is at z-index:100.

The only problem with my code below is that I can't figure out how to force the original z-index to each item, meaning 100 for the 1st, 99 for the 2nd, etc. What I have now returns all z-index to 100, and once you've moused over each item and hover down the list again, it goes a little visually screwy, since the icons overlap each other in the wrong order (until you hover on it, which of course it then goes back to z-index:200.

jQuery.iFisheye.positionItems(el);
el.fisheyeCfg.items
.bind(
'mouseover',
function()
{
jQuery(this).get(0).style.zIndex = '200';
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block';
}
)
.bind(
'mouseout',
function()
{
jQuery(this).get(0).style.zIndex = '100'; /*** I want something like jQuery(this).get(0).style.zIndex = ORIGINAL STYLE Z-INDEX; ***/
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none';
}
);

I could use an obtrusive javascript function for each dock item, but that's just gross. I figured there must be a way to do it in the actual JS file. Blah, I'm guessing I'll just have to fill my HTML with obtrusive code now.