Client Side JavaScript Loading Order - javascript

I have JavaScript files named: nav.js, content.js, and footer.js
My HTML page is structured like so:
<body>
<div id='nav'></div>
<div id='content'></div>
<div id='footer'></div>
<script src='nav.js'>
<script src='content.js'>
<script src='footer.js'>
</body>
I then use JavaScript to dynamically load the navigation bar to the nav div, same with the content and so on.
However, when the page loads, it loads the navigation bar, the footer, and then the content. Is there any way to address this problem?

Related

Changing CSS proprety of another div located in another page

Hello i would like to change the DOM of an html page but from another page i tried sharing the same script between the 2 pages but it didnt work here is an illustration for what i am trying to do
1-First page
<div>
<p id="simpletext">Hello world</p>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script> <!-- same script file is present in the second page -->
</div>
2-Second page
<div>
<button>Click me </button>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script><!-- same script file is present in the first page -->
</div>
script.js
$("button").on("click",function(){
$("simpletext").css("color","blue");
});
i am trying to when i click on the button wish is located on the second page to change the color of the text on the first page
You can send messages from one page to another. At the buttons side send a message:
$("button").on("click",function(){
wondow.postMessage("show","*");
});
Then at the other page, wait for a message:
window.addEventListener("message",function(event){
if(event.data === "show") {
$("simpletext").css("color","blue");
}
});
I assume that both windows are opened on the same machine, if not, you need ajax or websockets instead and do serverside proxying.

The loading screen for my website isn't disappearing

I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website (link) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
Try to import your jQuery inside the head tag.
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

HTML do not refresh common elements when switching pages

I'm wondering if it would be possible to have common elements between pages that don't refresh when you change pages.
More specifically, what I mean is: I have a header that is common to several pages, and contains the links to the pages themselves. Only, whenever I click on the header, the whole page refreshes, with the typically annoying flickering that comes with it. I would like to know if it would be possible to have the header fixed between pages, so that when I click on a link to change page the content refreshes but the header doesn't. (The same goes for the background as well).
What I have right now is this:
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("../header_footer/header.html");
});
</script>
and in the body (common to all pages)
<body>
<div id="header"></div>
</body>
Is it possible to do this with just HTML or Javascript?
Thanks!
Unfortunately, this isn't possible using traditional page loads. If you don't want the flickering, I'd recommend making your site a Single Page App. Basically, you'd be loading your page once in the browser, and then all subsequent pages are dynamically loaded into the DOM via Ajax calls.
<style>
#pg2,#pg3{display:none;}
</style>
<body>
<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">
</div>
<div id="pg2">
</div>
<div id="pg3">
</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
pg[1].style.display='none'
pg[2].style.display='none'
pg[3].style.display='none'
pg[p].style.display='block'
}
//]]>

How to get the content of a html page from another html page?

I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

Categories

Resources