views:

36

answers:

0

I am using a jquery UI slider on my document. The slider changes the size of the text. In Firefox, the slider maintains the pointer cursor during hover and during the slide action. However, in Safari and Chrome, the cursor changes to the text selector when sliding.

I have tried changing the css for .ui-slider-handle to set cursor:pointer, but the text selector remains when sliding in Safari and Chrome.

The slider cursor in Firefox is fine, but in Safari and Chrome the cursor changes to a text selector when sliding. Anybody have any ideas for a workaround?

Thanks

<div id="content_wrap">
    <div id="content">
    <div class="spacer_15"></div>
    <div id="main">
    <div id="grid_slider"><div class='ui-slider-handle'></div></div>
    <div class="spacer_15"></div>
    <div id="image_grid">
    <ul>
        <li><img src="resized/1.jpg" width="500" height="333" alt="img"></li>
        <li><img src="resized/2.jpg" width="500" height="333" alt="img"></li>
        <li><img src="resized/3.jpg" width="333" height="500" alt="img"></li>
        <li><img src="resized/4.jpg" width="333" height="500" alt="img"></li>
        <li><img src="resized/5.jpg" width="500" height="333" alt="img"></li>
    </ul>
    </div><!--end of <div id="photo_grid">-->
    <div class="clear"></div>
    </div><!--end of <div id="main">-->
    <div class="spacer_15"></div>
    </div><!--end of <div id="content">-->
</div><!--end of <div id="content_wrap">-->

$("#grid_slider").slider({
value: 300,
max: 500,
min: 100,
slide: function(event, ui) {
    initialize();
},
change: function(event, ui) {
    initialize();
}
});