StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is a small modification of another answer, <strong>that takes into account the fact that you want this effect only for mobiles.</strong> Of course, you could use <strong>media queries</strong> for applying different styles depending on the screen size; but you would still need some logic in order to do something on click events.</p> <p><strong>CSS</strong></p> <pre><code>div{ width:40px; } img{ max-width:100% } .clicked{ max-width:none !important; } </code></pre> <p><strong>jQuery</strong></p> <pre><code>$('img').click(function(){ if(window.innerWidth < 769){ $(this).toggleClass('clicked'); } }); </code></pre> <p>Take a look at my fiddle <a href="http://jsfiddle.net/augusto1982/7uKUs/" rel="nofollow">http://jsfiddle.net/augusto1982/7uKUs/</a></p> <p>Also note that I'm considering a Mobile device any screen narrower than 769px. You can change this to apply to whatever logic you use for determining whether a device is a mobile or not.</p> <p>And <strong>here there's a solution without jQuery</strong>, that requires each image to add an onclick function.</p> <p><strong>HTML</strong></p> <pre><code><div> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);"/> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" /> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" /> </div </code></pre> <p><strong>Javascript</strong></p> <pre><code> function toggleClass(obj){ if(window.innerWidth < 769){ if(obj.className.match(/\bclicked\b/)){ obj.className = obj.className.replace('clicked', ''); }else{ obj.className += " clicked"; } } } </code></pre> <p><strong>Single HTML solution that doesn't require 'onclick' on each image</strong></p> <pre><code><div> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" /> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" /> <img src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" /> </div> <script> if(window.innerWidth < 769){ var elements = document.getElementsByTagName('img'); for (i = 0; i < elements.length; ++i) { elements[i].setAttribute('onclick','toggleClass(this)'); } } function toggleClass(obj){ if(obj.className.match(/\bclicked\b/)){ obj.className = obj.className.replace('clicked', ''); }else{ obj.className += " clicked"; } } </script> </code></pre> <p>The script must be added after all the images.</p> <p>Demo: <a href="http://jsfiddle.net/augusto1982/L89m5/" rel="nofollow">http://jsfiddle.net/augusto1982/L89m5/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload