Forums

virtual

I am having difficulty getting the cursor to turn into a magnifier in both Mozilla and Webkit browsers. In the js file, I have this line

cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

which works fine with Firefox, however if I do this, neither of them work.

cursorcss: 'url(magnify.cur), -webkit-zoom-in, -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

I can only get one or the other to work, not both at the same time.

I also tried adding this into the html file

 <script type="text/javascript">
$("img").css('cursor', function() {
             if (jQuery.browser.mozilla) {
                return '-moz-zoom-in';
            }
            else if (jQuery.browser.webkit) {
                return '-webkit-zoom-in';
            }
            else {
               return 'pointer'; 
            }
        });
</script>

but that did not work with either of the browsers.

Can anyone tell me how to get this to work?

virtual

Anyone??

chriscoyier

This definitely warrants some study. I'll have it bookmarked to look into deeper.

virtual

Thanks Chris, if I find the solution elsewhere I'll post it.

virtual

I just figured out that if I add the cursor style inline it works. But Oh what a pain, adding all that markup, I was hoping for a more dynamic solution.

virtual

I was given a better solution, the return statement of the js script added to the html file needs to be modified a little to read as follows:

 <script type="text/javascript">
$("img").css('cursor', function() {
             if (jQuery.browser.mozilla) {
                return 'url(magnify.cur), -moz-zoom-in';
            }
            else if (jQuery.browser.webkit) {
                return 'url(magnify.cur), -webkit-zoom-in';
            }
            else {
               return 'pointer'; 
            }
        });
</script>

Then there is no need for the inline markup.

jimsilverman

just stumbled upon this thread from Google. have you tried using plain old CSS? this worked for me.

img {
	 	 cursor:pointer;
	 	 cursor:-moz-zoom-in;
	 	 cursor:-webkit-zoom-in;
	 }

zoom icon works for both mozilla and webkit. other browsers get the regular pointer icon.

treehouse : what would you like to learn today?

Forums

Magnifying cursor won't work in both Moz and Webkit browsers