Organizational Research By

Surprising Reserch Topic

Question:Show or hide button text responsively in jQuery Mobile


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.

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.

asked Sep 13, 2013 in Java Interview Questions by anonymous
edited Sep 12, 2013
0 votes
44 views



Related Hot Questions

2 Answers

0 votes
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 tag.
answered Sep 13, 2013 by anonymous
edited Sep 12, 2013
0 votes
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 tag.
answered Sep 13, 2013 by anonymous
edited Sep 12, 2013

...