Show or hide button text responsively in jQuery Mobile

Question

I have a jQuery Mobile site with some buttons. I want to show some text on the right side of the button if and when the viewport is 640 pixels or wider and hide the text otherwise.

I know about the iconpos option/data-attribute that is meant for that purpose, and that it can be set to left to show the text when I want it and notext when I don't. I can probably come up with some Javascript to change the attribute and refresh the button on page load, orientation change, and window resize events, but that may become cumbersome, and I am not sure if I am forgetting some event that can cause the viewport width to change.

EDIT 2: I tested my site on several browsers and devices and it seems like changing the orientation, resizing the window, and showing and hiding the on-screen keyboard (in situations where those things are possible) always caused the resize event to be triggered on the window object. Of course, I don't know for sure that this will always happen in all browsers.

I thought about using some sort of media query to set the display CSS property on the text as inline or none depending on the viewport width but after I looked at the code for jQuery Mobile, it seems like the iconpos option affects more than just the visibility of the text: it affects the dimensions, title attribute, icon position, and some other stuff, so this may not be possible using only CSS.

EDIT: I forgot to mention that the button is in a header so it is one of the inline buttons. Simply hiding the text via CSS is going to make it look funny.

Does anyone here know a simple and practical way to show or hide the text based on the viewport width? Or as a more general question, does anyone here know how to alter a data-attribute based on the viewport width and make jQuery Mobile acknowledge the change whenever the viewport width changes? I found a similar question about changing a data-attribute and it does not have any reasonable answers.

Answer 1

This is a pure css solution, it requires a HTML5 browser but then again jQuery Mobile also requires one:

/* Less then 620 px -------------------*/ 
@media all and (max-width: 620px){  
    #custom-button span span { visibility:hidden;} 
}       

/* More then 640 px -------------------*/ 
@media only screen and (min-width: 640px) {
    #custom-button span span { visibility:visible;} 
}  

Visibility is a better solution then Display because button height will remain the same.

This is a working jsFiddle example: http://jsfiddle.net/Gajotres/adGTK/, just stretch a Result area to see a difference.

EDIT :

This should do it, example is the same: http://jsfiddle.net/Gajotres/adGTK/

/* Less then 639 px -------------------*/ 
@media all and (max-width: 639px){  
    #custom-button span span.ui-btn-text 
    { 
        left: -9999px !important;
        position: absolute !important;
    } 

    #custom-button span span.ui-icon 
    { 
        float: left !important;
        margin: 2px 1px 2px 3px !important;
        display: block !important;
        z-index: 0 !important;   
        position: relative;
        left: 0 !important;
    } 

    #custom-button span.ui-btn-inner
    { 
        padding: 0 !important;
    } 

    #custom-button
    { 
        height: 24px !important;
        width: 24px !important;
        margin-top: 5px;
    }     
}       

This example will work only with buttons created with an <a> tag.

Answer 2

This is the best thing I have come up with so far:

$(window).resize(function() {
    $(".ui-btn-left, .ui-btn-right, .ui-btn-inline").filter("[data-icon]")
        .buttonMarkup({iconpos: window.innerWidth >= 640 ? "left" : "notext"})
        .buttonMarkup("refresh");
});

$(document).delegate("[data-role=page]", "pageinit", function() {
    $(window).resize();
});