How to show a div only after the page render completely - javascript

I have a php rendered menu. This menu is the first item to appear while my page is rendering.
The problem is that menu apperas like a simple text list, like a broken page, so after the page render completly the menu appears as it should appear.
I already try tu use fadein, delay and nothing worked for me.
At my case, how I could show this menu only after the page load completly?
I'm using prototype and jquery. How do it with no conflict?
the structure at html is simple:
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
Menu before page render:

I assume that you already know about this if you have tried fadein.
#menu {
display: none;
}
I have had some problems with the jQuery implementation in the past and just used pure Javascript. Could you just put this at the bottom of your HTML page?
It is kind of a hack, but it depends on your use case.
<script>
document.getElementById("menu").style.display = "block";
</script>

<html>
<head>
<script type="text/javascript"
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'>
</script>
<style>
#menu{
display: none;
}
</style>
</head>
<body>
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
</body>
<script>
$(document).ready(function(){
$('#menu').css("display", "block");
})
</script>
</html>

If you are using jquery below is where you need to display the menu. $( document ).ready is fired after html is renndered
$( document ).ready(function() {
//change menu style to display
});

Thank you guys!
I used your code with no conflict!
<script type="text/javascript">
var j = jQuery.noConflict();
j( document ).ready(function( $ ) {
j('.hide-menu').css("display", "block");
});
</script>

Related

Div suddenly became unresponsive

I am working on a project to explain jQuery to my students. I had a div that would slide on click and then added a second to hide. Then nothing worked so I removed all new code but the slide div no longer works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
// slide function
$("#frog").click(function() {
$("#frog").animate({left: "200px"}, 500);
});
</script>
<style type="text/css">
#frog{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 20px;
}
</style>
<title>I hate JS!</title>
</head>
<body>
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<h2>Top 3 Best Animations</h2>
<h4><li>Slide</li></h4>
<div id="frog"></div>
</ol>
</body>
Your HTML is invalid. This can break any javascript as elements get rendered wrong. It should look like this:
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<li><h2>Top 3 Best Animations</h2></li>
<li>
<h4>Slide</h4>
<div id="frog"></div>
</li>
</ol>
<script>//javascript here</script>
Also, it is strongly recommended to include your JS before your closing body tag. Because when the javascript initiates, the element it has to bind to, has to exist first! If the javascript renders before the element does, it will never be able to find it, therefore not work, so include javascripts at the end of your document, not the start.
You also need to wrap your javascript within a
$(function(){
//Javascript here
});
So that it will trigger on all browsers when the page has finished loading. (Not all browsers automatically trigger javascripts)
See this JS fiddle for a working example:
https://jsfiddle.net/5cxnLe4v/1/
-- also slightly important: make sure you close all your elements, like the </body> and </html>!

Replace div content from one page with div content from another

I have a page with links in a nav. When a user clicks Page B, I'd like to load content from Page B into the div #main-text of Page A but I can't seem to get it to work. I'm very new to js, so be easy on me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#nav_a").on("click", function(){
$("#main_text").load("pageA.html");
});
$("#nav_b").on("click", function(){
$("#main_text").load("pageB.html");
});
});
</head>
</script>
<body>
<div class="nav">
<ul>
<li><a id="nav_a" href="#">Page A</a></li>
<li><a id="nav_b" href="#">Page B</a></li>
</ul>
</div>
<div id="main_text">Page A</div>
</body>
</html>
If the pages are from the same domain as the page with the script and contain valid (x)html, then it should work.
Note: Ajax does NOT work from file system. It needs all files to come from a web server.
I would personally do
$(".nav a").on("click", function(e){
e.preventDefault(); // cancel the click
$("#main_text").load("page"+this.id.split("_")[1].toUpperCase()+".html");
});

Twitter Bootstrap tabs not working in IE8

I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.

jQuery mobile: Applying style after reloading content

First of all I' very new to jQuery and JavaScript but not to HTML and PHP.
I found many posts about that problem but no solution. I think I am doing something (completely?) wrong...
I've got two files, the index.php and content.php which should dynamically add content to the page.
index.php:
<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"></link>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<title>Ajax test</title>
<script language="JavaScript">
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
$(function(){
$('#page2').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
</script>
</head>
<body>
<div id="hm-agenda" data-theme="a" data-role="page">
<div data-theme="a" data-role="header">
<h1>Ajax test</h1>
</div>
<div id="content" data-role="content">
Default content
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
</div>
</body>
</html>
So a click to "Page 1" or "Page 2" in the navigation should load content.php?page=x into the div with the id "content".
And this is how content.php looks like:
<ul data-role="listview" class="hm-list">
<li data-role="list-divider"><h3>You are on page: <?php print $_GET['page']; ?></h3></li>
</ul>
Loading the file into the content-div works fine put jQuery won't apply the styling stuff.
The strange thing is that after clicking the link in the navigation the style is getting applied for about one second and disappears immediately.
This example is online at: http://m.sepulturagenda.ch/ajax/
Any help is appreciated. I stock here for hours now...
Your problem is with this line:
$('#content').load($(this).attr('href')).trigger("create");
You are creating an asynchronous request via .load() and not waiting for it to complete before calling the .trigger("create") method. So basically you are calling the .trigger("create") method before there is any HTML to initialize.
You can utilize the callback function that you can pass to .load() to call the .trigger("create") method at the correct time.
For example:
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
A Quick Note:
Is there a reason you're using .load() to load external content? jQuery Mobile will do this for you as long as the external content is in the proper format. Here is some documentation to explain what I mean: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
And a Side Note:
Using the document.ready event handler is not recommended when using jQuery Mobile. Instead you should bind to one of the jQuery Mobile page-events, like pageinit.
For example:
//place this in the global scope
$(document).on('pageinit', '#my-page', function () {
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
Although since you're using an ID as the selector for your click event handler, you might as well delegate the event handler strait to the #page1 element.
For example:
$(document).on('click', '#page1', function () {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
Here is the documentation for jQuery Mobile events (see the large yellow warnings at the top of the page): http://jquerymobile.com/demos/1.1.1/docs/api/events.html
I'm sure there is a better way to do this but you could just manually tell it to add the "ui-btn-active" class..
$(function(){
$('#page2').click(function(event) {
$(".ui-btn-active").removeClass("ui-btn-active");
$('#content').load($(this).attr('href')).trigger("create");
$(this).addClass('ui-btn-active');
return false;
});
});

Extra space added after list on jQuery reload of div in IE

I am writing a web page which updates a list using jQuery when something is selected. Below the list is a button. The update works fine in Firefox and Chrome, but in IE, a bit of space is added between the list and the button every time it updates. Following is a stripped-down example that does the same thing:
<html>
<head>
<style type="text/css">
#list {
padding: 10;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="test">
<ul>
<!-- List -->
<li>
<div id="list">
<ul>
<li>before 1</li>
<li>before 2</li>
</ul>
</div>
</li>
<!-- Button -->
<li>
<div>
<button id="button" onClick="reload();">button</button>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function reload() {
var html =
"<ul>" +
"<li>after 1</li>" +
"<li>after 2</li>" +
"</ul>";
$("div#list").html(html);
}
</script>
</html>
Click the button. In Firefox and Chrome, it stays put. In IE (9), it shifts down a bit (a bit meaning about 10 or 20 pixels. Easily noticeable to the human eye, that is) every time I click it. Can anyone tell me what is causing this?
Thanks.
Update
Seems like the problem is related to IE padding calculating rather than your code, since the same happens using js .innerHtml() directly.
I would then suggest removing the padding and adding margins to the ul, since it affect the element you are removing maybe also the margins will be removed this time.
#list {
padding: 0;
}
#list ul {
margin:10;
}
http://jsfiddle.net/qEphF/6/
According to jQuery docs
This method uses the browser's
innerHTML property. Some browsers may
not generate a DOM that exactly
replicates the HTML source provided.
Maybe you should try a different approach. For example
$("div#list").empty().append($(html));
<style type="text/css">
#list {
padding: 10;
}
</style>
Each time you call the reload function, IE adds 10 padding which is the cause of your problem.

Categories

Resources