2

So Ive got a jQuery UI slider, and I am using it in HTML5 fullscreen mode on the latest Chrome browser.

When the user clicks and drags the slider handle, because jQuery UI draws the slider handle as an <a> tag with href="#", Chrome displays the link # in its "status bar" at the bottom of the fullscreen (just as it does with when you hover over links, a little status bar appears at the bottom of the browser window).

This is ruining my fullscreen experience.

Is there anyway of stopping Chrome from doing this specifically just for that slider tag, or any link with a href of #? It would be useful to still display this information for other links.

Failing this, is there anyway of getting jQuery to draw sliders as <div> tags instead of <a> tags?

Finally, (just because I am curious) why would the overlords on the jQuery UI team divine that it would be wiser to use <a> tags in this scenario than <div> tags?

Jimmery
  • 9,783
  • 25
  • 83
  • 157
  • 1
    According to [this post](http://superuser.com/questions/239202/turn-off-the-link-hover-statusbar-in-google-chrome) on superuser, you cannot turn it off and http://stackoverflow.com/questions/10010770/why-the-handle-in-jquery-ui-slider-is-a-tag gives one explanation on why the slider is an `` – andyb Apr 08 '13 at 14:11

2 Answers2

1

It seems like the <a> tag is staying selected after the slider has been used. After the user has finished with the slider, How you detect this is up to you, you could use jQuery.blur() to deselect the element as simply as this:

$('#element').blur()

It's not a perfect solution but I feel it's going to be the best you'll find for now.

Jamie Taylor
  • 4,709
  • 5
  • 44
  • 66
1

If you were to remove the href from the anchor tag on page load then the status bar in Chrome (or any browser probably) would not appear.

Not a fantastic solution I agree.

To do it add the following line to the end of your $(document).ready() so that it executes after the whole page has loaded:

$(<* selctor for jQuery UI Slider *> ).removeAttr('href');

I selected the element by doing this:

$('.ui-slider-handle').removeAttr('href');
m1ket
  • 388
  • 1
  • 12