questions - 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

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.