45078

How to remove button text responsively in JQuery Mobile

I'm very new to Jquery & jquery mobile. I'm resizing a button so it's responsive to window size. To be more specific, i'm changing it from iconpos="left" to iconpos="notext" to remove the text on small windows. I found the following function, which works for me.

$(window).on("throttledresize", function() { var smallButtons = $(window).width() <= 480; $('#menu_toggle').toggleClass('ui-btn-icon-notext', smallButtons); $('#menu_toggle').toggleClass('ui-btn-icon-left', !smallButtons); });

But it only works on the window resizing. Obviously, I'd also like it showing the correct size on pageload, not just resizing. I found the code below, but I don't know how put them both into 1, more succinct bit of code.

$("#page_id").on("pageshow" , function() { The Function });

Answer1:

jQuery Mobile >= 1.4

.buttonMarkup() as well as data-role="button" are deprecated and will be removed in <strong>1.5</strong>. Instead, classes should be added manually to Anchor tag.

    <li>

    Create a function to manipulate classes of Anchor. As of jQM page events are now replaced with pageContainer events. The new events can't be bound to a specific page, therefore, you need to look for the Anchor inside active page.

    Note that $.mobile.activePage is also deprecated and replaced with $.mobile.pageContainer.pagecontainer("getActivePage").

    function resizeBtn() { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); if ($(window).width() <= 480) { $("#notext.ui-btn-icon-left", activePage) .toggleClass("ui-btn-icon-notext ui-btn-icon-left"); } else { $("#notext.ui-btn-icon-notext", activePage) .toggleClass("ui-btn-icon-left ui-btn-icon-notext"); } } </li> <li>

    Call function on pagecontainerbeforeshow event:

    $(document).on("pagecontainerbeforeshow", resizeBtn); </li> <li>

    Call function on throttledresize event:

    $(window).on("throttledresize", resizeBtn); </li> </ul>

    Note: throttledresize is better than resize as it delays firing resize event coming from the browser.

    <strong>Demo</strong>

    <hr>

    jQuery Mobile <= 1.3

    You need to use .buttonMarkup() if you're using jQuery Mobile 1.3 or lower.

    $(".selector").buttonMarkup({ iconpos: "notext" });
      <li>

      Resize function:

      function resizeBtn() { if ($(window).width() <= 480) { $(".selector").buttonMarkup({ iconpos: "notext" }); } else { $(".selector").buttonMarkup({ iconpos: "right" }); } } </li> <li>

      Call function on pagebeforeshow:

      $(document).on("pagebeforeshow", resizeBtn); </li> <li>

      Call function on resize:

      $(window).on("resize", resizeBtn); </li> </ul>

      <strong>Demo</strong>

Recommend

  • Stop table row toggle upon clicking link
  • AJAX jquery json sending array to php
  • jQuery panel slider opens with button click but won't close
  • Add foreach value to Ajax
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • jQuery toggle hide on click elsewhere
  • Eventbus onMessageEvent not getting called
  • css font-size and line-height not matching the baseline
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • Creating a Multi-Step Modal Using Jquery
  • How to implement Deep Linking in Roku SG application?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • ActiveRecord query for a count of new users by day
  • Change JButton Shape while respecting Look And Feel
  • javaw.exe and eclipse startup problems
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • Release, debug version and Authorization Google?
  • Websockets service method fails during R startup
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • jQuery tmpl and DataLink beta
  • How to get next/previous record number?
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Apache 2.4 - remove | delete | uninstall
  • Proper way to use connect-multiparty with express.js?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Trying to get generic when generic is not available
  • embed rChart in Markdown
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • python draw pie shapes with colour filled
  • EntityFramework adding new object to nested object collection
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal