JQuery Behave how media queries on browser resize?
I have been struggling with this for a while. Basically I have a div (#memberrevealwrapper) that is a specific height, if the viewport is less than 790px wide then it is a different height. (This is a responsive web design)
#Memberrevealwrapper is now animated with jQuery to make it function like a pull tab that pops out of the top of the browser when clicked and then clicked again and it goes back.
Here's my jQuery:
<script>
$(document).ready(function() {
$('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 200);
$('#memberloginlink a').toggle(
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
},
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 500);
}
);
});
$(document).ready(function(){
var pageWidth = $(window).width();
if ( pageWidth <= 790 ) {
$('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
$('#memberloginlink a').toggle(
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
},
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
}
);
};
});
</script>
This works great as long as you don't resize your browser. When you resize the browser, it doesn't find the new height and does not readjust the height.
Here's the site in action: clients.januarycreative.com/PES. I mean the User Login tab at the top of the page.
Does anyone know how I can get jQuery to refresh on browser resize? I've tried everything I can, and managed to cut everything off to make the page bounce like basketball over and over again.
Thank you in advance!
source to share
You need to run the code over again as the browser is resizing. What you have just runs code one on page load. You will need a loop (technically an event that fires over and over when the page is resized).
Here you go:
function updateSize() {
var pageWidth = $(window).width();
if ( pageWidth <= 790 ) {
$('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
$('#memberloginlink a').toggle(
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
},
function(){
$('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
}
);
}
}
$(window).resize(updateSize);
source to share