SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cursor Magnifier won't work in both Moz and Webkit browsers

    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

    Code:
    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.

    Code:
    cursorcss: 'url(magnify.cur), -webkit-zoom-in, -moz-zoom-in',
    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

    Code:
     <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?

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In css 2 rules
    Code:
    img {cursor:url(magnify.cur),-webkit-zoom-in;}
    img {cursor:url(magnify.cur), -moz-zoom-in;}
    Also the jQuery script works just return including the image
    Code:
    return 'url(magnify.cur), -moz-zoom-in';

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, can you be a little more explicit? I tried various versions of your suggestions with no success. I am a JS noob.
    Thanks

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css works as given.

    For the jQuery:
    Code:
     <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>

  5. #5
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that, it's perfect.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •