Corsor:pointer wont work

JavaScript
1

take a look at:
http://www.thetirewarehouseinc.com/beta

i have an included .js file called fader.js which controls the fading panels at the top of the page.

on line 84 of fader.js is a function called setMouseOverHandlers().

it sets it so that when you over over the current panel it does 3 things:

  1. pauses the timer
  2. replaces the navigation image with the paused state image
  3. changes the cursor to a pointer.

the problem is with item#3… i cant figure out why i cant get it to give me the pointer cursor… all the other stuff seems to be working.

can someone please advise?

2

Thee is one more thing you could try; wrap the images in anchor tags and place a :hover rule on your anchor. This is still semantically more correct than going the JS way. besides, when you

What I was saying earlier about placing the pointer property on the document is that it will not fire on the image, but it will on the document. Then you would have to set the pointer on the document onmouseover of the image, and on mouseout of the image set the cursor back to default. This should do the trick.

@craigslist123: if you are going to ask a separate question, please post it in a new thread, but you can check http://javascript.about.com/library/bltut13.htm if you want answers to your question.

3

Hi guys!
Please fine me a good way out of this crap 
How to attach any JavaScript code in HTML?

4

First question; why do you also have .css(‘cursor’, ‘hand’) in the first place? Pointer should work for all browsers… And why is the semi-colon missing from the end of that line?
Second question; what errors or warnings do you see when you debug your script
Third question; what happens when you do this.style.cursor = ‘pointer’
Forth question; do you have the same problem on every browser?

These are the first-impression questions I had when first looking at the code…

5

i also just did this test…

i wanted to make sure that the .imageholder item was actually triggering the hover event so i changed the line which added the pointer cursor from this:
$(this).css(“cursor”,“pointer”);

to this:
$(this).css(“cursor”,“pointer”).css(“border”, “3px solid #000000”);

and when i test it, as soon as i hover over the panel, i get a 3px black border… so its adding the css but it just wont take the pointer cursor…

i don’t get why…

6

they are indeed clickable… this piece of my fader.js code makes them clickable:
function setLinks(){
$(“.fadeWrapper”).click(function(){
var link=$(“.imageHolder”).eq(currentImage).find(“a”).attr(“href”);
if(link!=null){
location.href=link;
}
});

}

whats weird is that when i use firebug to inspect the element and its css it has cursor:pointer attached. but it just doesn’t work. i cant seem to figure out why.

and my apologies but i don’t understand why the cursor:pointer shoudl be attached to the body element. wouldn’t that make a pointer cursor for everything in the document body??

7

Are these images actually clickable? Maybe there is a layer in front of them, but I have never heard of a JS framework not picking up CSS styles, if your classes and id’s have been properly defined in the CSS. If that is the case, then I strongly suggest you change framework. I say this because you really don’t want to be defining your cursor style outside of CSS.

About your second question, yes, you have to set the pointer on the document element. This is why you need to fire a onmouseover AND a onmouseout event, but both ServerHerder and I agree that this is really not the elegant way of doing things.

8

i tried adding it to the css:
in my style.css file…
.imageHolder{
cursor:pointer;
}

that didn’t seem to help.

I think it has to be done via JS because of the way fader.js is putting the images into an array to scroll through them for the crossfade effect.

TommiChi: if i were to put the pointer cursor on the body element then wouldn’t everything on the page have a pointer cursor?

9

ServerHerder makes a good point actually, and probably the most important question. It would make your life a whole lot easier if you do this in CSS.

Also doing this via Javascript would also mean that you have to trigger a behavior on mouse out to return the cursor to it’s original state.

If you still want to do it the JS way, I guess you would have to do $(‘body’).css(‘cursor’, ‘pointer’)

10

You shouldn’t need to set the cursor on the mouseover event: The cursor attribute only applies when an element is being moused over.

Have you tried just using static CSS to define the cursor attribute instead of attempting to set it on the mouseover handler?


[I]selector[/I] { cursor: pointer; }
11

  1. I added in the cursor:hand because i have read that older versions of IE need it. i have tried it with just cursor:pointer and with both - neither one works… and good catch on the semicolon - i added that in.

  2. no errors seem to be thrown anywhere in the process which makes it more difficult. using Firefox and firebug it appears as though the cursor styles are actually being added on roll over. and i know the code is firing because at one point i put an alert in there and when i hovered the alert popped up.

  3. i tried replacing $(this).css(“cursor”,“pointer”).css(“cursor”,“hand”); with this.style.cursor = ‘pointer’ and it still didn’t work.

  4. i have experienced the same problem in every browser i have tested in so far (Chrome, Firefox, IE8, IE7)