New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flipswitch standalone widget scrolls to the top of the page when knob is clicked #8148

Closed
omarshammas opened this Issue Jun 10, 2015 · 2 comments

Comments

Projects
None yet
2 participants
@omarshammas

omarshammas commented Jun 10, 2015

Within the flipswitch widget, when the knob is clicked I'm taken to the top of the html page.

Steps to reproduce:

  • download a custom build of jquery mobile where only the flipswitch widget and its dependencies are selected.
  • create a basic html page and paste this in the body of the html
  <div style='height: 1000px;'></div>
  <input type='checkbox' id='jqm-test'/>
  <script>
    $('#jqm-test').flipswitch(); //.parent('.ui-flipswitch').on('click', 'a', function(e) { e.preventDefault(); });
  </script>
  • make sure you scroll down so the window is not at the top of the page already
  • click the knob
  • you will be taken to the top of the page

It appears the knob is actually a hyperlink element with an attribute href='#'. The click event is never caught in the standalone version hence the user is taken to the top of the page.

<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all ui-flipswitch-active">
  <a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</a>
  <span class="ui-flipswitch-off">Off</span>
  <input type="checkbox" id="jqm-test" class="ui-flipswitch-input" tabindex="-1">
</div>

In the meantime I've added an event listener that prevents the default behavior.

$('#jqm-test').flipswitch().parent('.ui-flipswitch').on('click', 'a', function(e) { e.preventDefault(); });

Thanks!

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jul 2, 2015

Member

@omarshammas Thank you this is indeed a bug we will look into this for 1.5

Member

arschmitz commented Jul 2, 2015

@omarshammas Thank you this is indeed a bug we will look into this for 1.5

@arschmitz arschmitz added this to the 1.5.0 milestone Jul 2, 2015

@arschmitz arschmitz self-assigned this Jul 2, 2015

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 2, 2015

Flipswitch: Use a span with a tabindex instead of an anchor
This avoids needing to listen for clicks and prevent default

Fixes gh-8148

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 2, 2015

Flipswitch: Use a span with a tabindex instead of an anchor
This avoids needing to listen for clicks and prevent default

Fixes gh-8148
@omarshammas

This comment has been minimized.

Show comment
Hide comment
@omarshammas

omarshammas Jul 2, 2015

Awesome, thanks 👍

omarshammas commented Jul 2, 2015

Awesome, thanks 👍

arschmitz added a commit that referenced this issue Jul 23, 2015

Flipswitch: Use a span with a tabindex instead of an anchor
This avoids needing to listen for clicks and prevent default

Fixes gh-8148
Closes gh-8167

@arschmitz arschmitz closed this Jul 23, 2015

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 4, 2016

Flipswitch: Use a span with a tabindex instead of an anchor
This avoids needing to listen for clicks and prevent default

Fixes gh-8148
Closes gh-8167
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment