Jquery mobile: The header flashes before disappearing once the page is completely rendered

Before the closing paragraph tag, all markup I include is briefly visible but disappears once the page is fully rendered. However, it remains visible in Source/Firebug.

I am using HTML5Boilerplate for this project and suspect there may be some code collisions that I have not yet identified.

<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>

<body>
<!-- The header vanishes post-rendering :( //-->
<div data-role="header">
 Here goes the Head-Content
</div>

<h3>This content also disappears after rendering... </h3>

<!-- Content below this point stays visible! //-->
<div data-role="page">...</div>    
</body>

...

<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
cssjquery-mobile

Answer №1

Here is the solution to your question :)

When using jQuery Mobile, remember that data-role="page" serves as the actual page content rather than just a container for your content. Make sure to place your data-role="header" inside the data-role="page" in order for it to be displayed properly.

You can create a basic jQuery mobile page by visiting jquerymobile.com.

<!DOCTYPE html> 
<html> 
<head> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

  // Any content outside of this won't be visible   

  <div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
  </div> 

  // Any content outside of this won't be visible

</body>
</html>

For a demonstration, you can check out this example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a plugin that can fix all CSS issues with Internet Explorer in one go?

Currently encountering issues with various versions of IE. Different js plugins are available to address specific problems in IE, like jquery.corner.js for corner radius. Is there a single plugin that can solve all IE problems across different versions ( ...

cssinternet-explorerplugins

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

Does Internet Explorer have a tool similar to Firebug for debugging websites?

Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...

htmlcssinternet-explorer

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

What is the best way to incorporate background colors into the sidebar menus of grandchildren?

I am currently utilizing the advanced sidebar menus page which can be accessed through this link: https://wordpress.org/plugins/advanced-sidebar-menu/ Within the plugin, there are widgets that allow users to add background colors and text colors to child ...

csswordpress

Achieving a shadow effect above a CSS border: tips and tricks

<div class="row"> some content <div class="info-box"> some other content </div> </div> .row { float: left; margin-bottom: 1.5%; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border ...

css

Achieving a layout with four columns in a row using SimpleForm in SAPUI5

I'm struggling to align the columns within the <form:SimpleForm> element. I'm aiming for 4 columns in a row, but only 2 columns are currently aligned properly. You can see an example of my issue on JsBin Desired output : label input-field ...

csssapui5sap-fiori

What causes the breakdown of flexbox when set to column and wrap?

Here is the code I am working with: <div id="parent"> <div class="produit_sup"> <p>Aubergine</p> <p>Betterave</p> <p>Courgette</p> <p>Oignon</p> <p>Poir ...

htmlcssflexbox

Aligning a Facebook share button to the center of a webpage

On my webpage, I have the following section: <div style="align:center"> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script> <fb:like hre ...

htmlcssstyling

Designing exquisite button navigation

Hey everyone, I'm currently working on creating a circular button navigation for my website. I want to have 4 buttons, each with a different color, and I want them to glow when the user hovers over them. So far, this is what I have in my HTML: HTML: ...

htmlcss

Modify the color of the legend when the input is selected

Can I change the color of legend text with CSS when an input is focused, similar to how fieldsets work? Fieldsets change color when their respective input fields are focused. I want to achieve the same effect for legends. ...

htmlcss

using image as background instead of a button for dropdown menu

I have a dropdown already set up with the code below: Note: The CSS class 'bg_r' is used for the background image (url) globe <span class="bg_r"> Language: <a id="Lang" href="#">Dro ...

csshtmltwitter-bootstrapbootstrap-4

Using Jquery to find the following element with a specific class and then hiding the current element

I am currently working on a feature that involves showing part of the content (5 positions at each part) when clicking on the "load more" button. However, I am facing difficulties in selecting the next element by class. For a clearer demonstration, you ...

jqueryhtmlcss

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

htmlcsssvg

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: https://i.sstatic.net/6mvBu.png Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: ...

htmlcssangulartypescript

Include an additional Div tag in the existing row

I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other. Here is the HTML code: <div class="content-grids"> <div clas ...

htmlcsswidthdivision

CSS styling can be used to generate a line break above and below a drop-down menu

While working on my CSS drop down menu, I noticed that it was generating unwanted line breaks before and after the dropdown. Below is the HTML code: <body> <!--nav class="navi"--> <div class="navi" id="navi"> <ul> <li& ...

javascripthtmlcssdrop-down-menu

When the user is actively scrolling in the browser, the button will disappear. However, once the scrolling action is completed, the button will gradually fade

Is there a way to hide the button with the id #stats while the user is scrolling, and then have it fade back in once they finish scrolling? It seems like the code below is not working as expected. Any help would be greatly appreciated! <button id="st ...

javascriptjquerycss

Positioning Images at the Top of the Screen in React Native

I have two images that I would like to display side by side at the top of the screen. <View style={styles.container}> <View style={styles.topWrapper}> <Image source={TOP_START_GRAPHIC} style={styles.topStartImage} /> ...

javascriptcssreact-nativecss-positionimage-resizing

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

htmlcss