0

I am toggling the header visibility and when I hide it, I need it to be transparent and show the scrolling content.

I tried several ways but the header is not transparent. Please note it's hidden correctly but it left a white background instead. So I wanted to make it transparent:

 $('.ui-header').hide().animate({opacity: 0.0});// Hide the header but its opacity doesn't get to 0
 $(".ui-header").css("backgroundColor", "transparent");// No effect

How to make the header transparent so it will show the content underneath?

Malloc
  • 15,434
  • 34
  • 105
  • 192
  • If you hide it manually, you need to call `$.mobile.resetActivePageHeight()`. Page has top padding 40px for header. – Omar Oct 12 '14 at 15:04
  • possible duplicate of [set content height 100% jquery mobile](http://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile) – Malloc Oct 13 '14 at 08:07
  • Are you sure that answer is what you're looking for? – Omar Oct 13 '14 at 08:09
  • Yep, kind of the same issue – Malloc Oct 13 '14 at 08:10
  • I cant find any relevance; maybe I misunderstood your question. You may post an answer before this post gets closed. – Omar Oct 13 '14 at 08:12

1 Answers1

0
$(".ui-header").hide();

Should be sufficient. Hiding the element means not showing it, which is equivalent to setting the opacity of the element to zero.

When reading the documentation for the jQuery function .hide(), it clearly states that .hide() without any parameters is the equivalent to display: none; in CSS.

If you can't find the error with JS, I suggest giving display: none; to the ui-header class in CSS. If neither works we need more code to track down the error and give you a proper answer.

Edit: A JSFiddle demo available here.

Hooder
  • 68
  • 1
  • 5