Page "Splash Screen Div" on outgoing and loading pages - javascript

I already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.
E.g.
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the .css is imported in the <head> with the .js just before the end of the <body> tag.
This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded.
Workflow:
http://i.imgur.com/dIOZSMS.jpg
Key Points:
I have a feeling this is only possible with a browser plugin because:
The link isn't an anchor to another div. E.g. url#div -> url#div2
Based on the above, given that the link is to another .html page the content currently displayed would... stop based on how pages are displayed in nature.
Note that:
This is strictly intra-site.
I don't care about IE.
This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.
I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.
Any ideas guys? I am very stumped on this.

Since your Javascript is at the bottom, it'll load asynchronously, after the page.
index.html
I don't understand why you nested the DIVs that way. Will the page load inside the logo element?
loading.css
With moving the div off the screen, is it part of your animation?
$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);
loading.js
If you want to show an element after the link is clicked, just do it without the window.load function.
http://jsfiddle.net/Etd2D/

Related

Open dialogbox or popup or messagebox after entire page loads using javascript or bootstrap

I have jsp/javascript page which shows some of the content based on some business logic. This page loads some data that being pulled from database. Sometimes Page Load can take more time. So there is no specific time.
Things to do:
Show a popup/messagebox/dialogbox in the middle of screen after the entire page is loaded. should have close or "X" button to close.
Popup/messagebox/dialogbox is sequence of 4-5 screens/content messages. Meaning as soon as popup comes it shows 1st content, then there should be "next" or ">" sort of icon within that popup screen. clicking on that it should proceed to next screen or content. When you arrive at last content or screen, you should be able to scroll back to first message.
I have tried using https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
and https://www.w3schools.com/w3css/w3css_modal.asp.
With that I am having difficulty showing modal or carousel inside messagebox/popup/dialogbox at the middle of screen after entire page is loaded
I followed some of the questions here on stackoverflow. They cover all basic things, but not exactly this specific scenario.
If you use the W3.CSS modal, there's a little hint in their first example on this page. In the onclick attribute on the button, there's a little Javascript snippet:
document.getElementById('id01').style.display='block'
To get that behavior when the page is finished loading, you can put it into an event listener on the window object that waits for the load event MDN doc.
Here's a small example using the boilerplate from the W3.CSS modal page:
<!-- In your HTML -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">
×
</span>
<p>Where your carousel goes</p>
</div>
</div>
</div>
/*
In a <script/> tag below the rest of your imported scripts
or in a separate, linked .js file.
*/
window.addEventListener('load', function() {
document.getElementById('id01').style.display = 'block';
});
As far as the carousel, you can just replace the <p /> element inside the modal with the relevant code. I'd start by just copy/pasting the W3Schools slideshow example. Make sure you include the <link /> and <script /> required to use Bootstrap and don't forget to replace their images with yours.
If you need any more help, please include some of your code as so folks have better insight into your problem.
Take care!

Loading up separate html files before they are requested with js

So I have this as my source code and all is well, apart from when I try to load up the pages with a slow internet connection. What happens is that the current page gets faded out and back in, and after the content from the external html file is loaded it just pops in.
I'm trying to tackle this with just loading everything once the page is loaded initially, how would that work?
Main JS script link - here
I'm posting this as a separate answer as it focuses on your current approach.
Instead of using .load(), use .get() so it isn't replacing the content of your div right away. Then .fadeOut() the div, replace the HTML, and .fadeIn() upon success.
$.get("news.html", function(data) {
$("#content").fadeOut(function() {
$(this).html(data);
}).fadeIn();
});
I was only able to test this with a slow connection simulator (Network Link Conditioner for Mac OS X), but it ran smoothly for my tests.
A better method than my comment suggestion to store in variables would be to render the HTML in hidden divs and display them as needed. That way you're only rendering once.
HTML
<div id="content">
<div class="hidden" id="home"></div>
<div class="hidden" id="news"></div>
<div class="hidden" id="contact-us"></div>
</div>
CSS
.hidden { display: none }
Now use .load() in the background to populate the divs. I'd defer loading until the page is ready for the user so you aren't blocking user interaction. Your menu clicks would then be responsible for adding / removing the .hidden class from each div.

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Load page once all the images are loaded

My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).
Is there anyway in javascript to accomplish this?
Thanks!
I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.
i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this
<body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
<div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>
<!-- Other HTML content here -->
</body>
This is just a rough code, hope this helps
You can write javascript that adds the rest of the page to the DOM once everything is loaded.
It's one of the easiest things you can do with jQuery.
However, I don't see the point. As a user I don't want you to do that to me.

Categories