StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery handler to trigger upon window strict width and/or window resize if window width is less than a strict amount
text
Body
copied!<p>Sorry for the elongated title, Im looking for your help in solving an issue that's driving me mad slowly.</p> <p>I am trying to find a way in which I can run a function under certain circumstances. Those circumstances are the following:</p> <ul> <li>function will trigger if the window width is equal to or less than a specific value (496) upon page load</li> <li>function will run if the window is resized down to the above value or less than</li> <li>function wont run if window width is greater than above value on page load or window resize</li> </ul> <p>If that has confused any of you I apologise, here is the code I have thus far to help explain it further.</p> <p>jQuery:</p> <pre><code>if($(window).width() < 496 || ($(window).resize() && $(window).width() < 496)) { add_cta_arrows_for_mobile(); } function add_cta_arrows_for_mobile() { $("#hori_ctas h4").addClass('arrow-down'); $("#hori_ctas h4").click(function() { if($(this).attr('data-state') == 'dropped') { $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down'); } else { $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up'); } $(this).next().children('div').slideToggle(800); }); } </code></pre> <p>I have not included the html or CSS as I don't feel there is a need, as this is just function over design.</p> <p>Thank you in advance to anyone who takes the time to help.</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