CODEWITHSUNDEEP
jquery-mobile
Zero_73
Zero_73

Reputation: 183

Jquery Mobile hide Header

I have a page that hide the header if the window height is less than width thes is my code. 

if ($(window).width()> $(window).height()){
$("#header").hide();
}

This is the output

enter image description here

As you can see the header is hide but the space where the header is not remove. My question is how to remove the space after I hide the header?

Upvotes: 0

Views: 817

Answers (1)

Tasos
Tasos

Reputation: 5361

That is because you have data-position="fixed" in your header

so you need to add margin-top css to your content to what the header height is so that it moves up. you can do this dynamically. When you resize back you can reset the margin back to 0px

Demo

http://jsfiddle.net/scrva2hz/

Jquery

var headheight = $("#header").height();

$(window).on('resize', function(){
if ($(window).width()> $(window).height()){
$("#header").hide();
$(".ui-content").css("margin-top", "-"+headheight+"px");
}
else {
$("#header").show();
$(".ui-content").css("margin-top","0px");   
}
});

Upvotes: 1

Related Questions