The loading screen for my website isn't disappearing - javascript

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>

Related

Client Side JavaScript Loading Order

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?

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>

Start simplemodal on page load

I am coding a little web page and I want to start simplemodal on the start of loading the page.
So now i have this code in body
<div id='container'>
<div id='content'>
<div id='basic-modal'>
<input type='button' name='basic' value='Open' class='basic'/>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Random Text in the SompleModal box.</h3>
</div>
</div>
</div>
You can see the button as a input, when i click it the box poppes up and there is the text.
Here also the basic.js, but i dont understand it, because i started learning Web Designing a few days ago.
basic.js
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
also included are these files.
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
I read that it it possible to use onLoad or in jscript .ready but i dont know how.
Use the $(document).ready() function :
$(document).ready(function() {
// Any thing in here will execute when the DOM has finished loading
$('#basic-modal-content').modal();
});
jQuery Docs for .ready()
Try with this:
<script>
function openModal()
{
$('#basic-modal-content').modal();
}
</script>
<body onload="openModal();"></body>

pagemasking in javascript

In my application i'm using menu...
when i click the menu item particular page will load in the center Frame.
Problem is it takes bit time...
now i want to show a masking (message to let the users know that page is loading)
( As showing in the Image ) until the page loading
how to do this in Javascript
sample code:
<html>
<head>
<style>
#content { display:none; }
</style>
<!-- Javascript that makes one div visible and hides another -->
<script type="text/javascript">
function showhide() {
document.getElementById("load").style.display = "block";
document.getElementById("content").style.display = "none";
}
</script>
</head>
<!-- calls the javascript function when the page is loaded -->
<body onload="showhide();">
<!-- div to be shown while the page is loading -->
<div id="load">
<img src="http://www.photo-canvas.com/images/generic/loading_gif.gif" />
</div>
<!-- div to be shown when the page is loaded -->
<div id="content">
[all the slow content]
</div>
Thank you........
It's not a complete answer, but shouldn't your showhide function be:
document.getElementById("load").style.display = "none";
document.getElementById("content").style.display = "block";
Depending on what you are loading, this may or may not be the solution. For example, I believe (but could be wrong) that onload does not take account of whether images are loaded. It certainly wouldn't take account of AJAX content.
Perhaps an easier way to achieve this would be for your initial page to only contain the loading screen and the rest of the content to be loaded by AJAX. With jQuery this is quite easy (this is an easy way to do it: http://api.jquery.com/load/)

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Categories

Resources