When the browser changes size fires we can respond to the event using resize() function like so: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex39.js?actionable=true
Of course the resize event can be used to change thing in the DOM.
For example we might can hide the gray area on resize: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex40.js?actionable=true it is possible to measure the size of the resize window using window.innerWidth. In code, this will be represented as : https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex41.js?actionable=true
<script>
$(document).ready(function(){
XT1
});
</script>
$(document).ready(function(){
XT1
});
</script>
Copy to clipboard
Live demo
<div id="minidivpage" class="example-live"><div id="popUp" class="pop-up">Gray Area</div></div>
<script>
$(document).ready(function() {
XT1
});
</script>
$(document).ready(function() {
XT1
});
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
