html css Loader need to complte Position - javascript

HI friend i have one page loader but the probelm is when load the content also than loader running don't display the loaded the content i want stop loading and load the page deatils and content
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
<div class="js"><!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div><!--END: HTML element-->

1)don't need To function(){$(this).remove();}
2)The load() method was deprecated in jQuery version 1.8 and removed in version 3.0 and occurs when a specified element has been loaded.
So,
Use $(document).ready(function(){});
This is to prevent any jQuery code from running before the document is finished loading.
read More : https://www.w3schools.com/jquery/jquery_syntax.asp
Full Code:
$(document).ready(function($) {
$('#preloader').fadeOut('slow');
});
.js div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div class="js">
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
<div id="preloader"></div>
</div>

use any one, document.ready is enough .No need to add window.onload .because both are same , (perform after document loaded)
jQuery(document).ready(function($) {
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
.js div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js">
<!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div>
<!--END: HTML element-->

Related

Activate and deactivate preloader page when php file has started and finished loading respectively

I have a html form with a php file that is actioned on submission. I want to activate a preloader page (showing the client to be patient) that will then be deactivated when php form has finished loading. I have created the preloader in css. Anyone who can help please?
<script>//paste this code under the head tag or in a separate js file.
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});</script>
<body>
<div class="se-pre-con"></div>
<style>
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/Preloader_11.gif) center no-repeat #fff;
}
</style>

Gif not fading out despite calling .fadeOut command

I am trying to get a gif that I have to fade out after the page loads, but I'm not having much luck.
I want the overlay, which has a white background and the gif, to fade into transparency after everything else on the page is loaded and ready to be seen.
Below is my code, and also a link to a page where I've been testing it:
Link to test code
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!
<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
And the CSS:
#overlay {
background-color: white;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
You use multiple versions of jQuery. If you either delete the include for jQuery 3, or make the following change, it will work.
I recently contributed to document-ready handlers in the SO:Docs which applies here and I think many will not realize as they switch to jQuery 3.
jQuery(function($) {
// Run when document is ready
// $ (first argument) will be internal reference to jQuery
// Never rely on $ being a reference to jQuery in the global namespace
});
All other document-ready handlers are deprecated in jQuery 3.0.
Using that doc-ready handler will work even if you leave both jQuery includes in the code.

Use .animate to scroll text

I'm trying to create something similar this web page, where a video is used as the background and as the user scrolls up and down the text/background video change appropriately so as to tell a story.
Right now getting the video to play is about the only thing working. The video will load, and play, as intended. However the <div> elements are simply stacked below the video one by one. When the user clicks anywhere on the page, I'd like the text to scroll up, from the bottom, and finish scrolling once they reach the same position on the page as the previous text... however I don't think I'm using the .animate() function properly.
This seems like it'd be relatively easy to do, so here's my admittedly weak first attempt.
fiddle: http://jsfiddle.net/f06w76bv/
<!DOCTYPE html>
<html>
<head>
<style>
.textConatiner{
position: absolute;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
left:10%;
}
video.bgvid{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(TurbineStill.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="TurbineStill.png" class="bgvid">
<source src="Turbine.mp4" type="video/mp4">
</video>
<section>
<div class="textConatiner" id="one" style="top:50%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
<section>
<div class="textConatiner" id="two" style="top:150%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).click(function () {
var myDiv = $("#two");
var scrollto = myDiv.offset().top + (myDiv.height() / 2);
myDiv.animate({ scrollTop: scrollTo }, 1000);
});
});
</script>
</html>
EDIT
By adding the position to the div container I'm able to get the original div positions exactly where I want them when the page loads. However, I still cannot get the animate method to move the second div into the page from below.
Your question isn't exactly new, it's just a bunch of questions in one really.
First of all - for your positioning, you'll be able to use plain CSS like you would with any DOM element. Tutorial on that are at W3Schools for example.
Scrolling to an Element using JQuery is answered in this stackoverflow-Question.
And another stackoverflow-question about moving a video by scrolling can be found here.

Flash render bug in Chrome

Look at this bug,
this is the code: "We have a simple webpage with an iframe that is very big and is moved to the left, we are seeing the center part of it. Then with javascript we add a flash object (a clock) in the middle (position 1000x1000) so it is in the visible section of the iframe. At first the flash piece is well rendered but after the "magic" steps that i mention here the flash piece is not rendered"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<iframe id="iframe" style="position: absolute; left: -1000px; top: -1000px; width:2000px; height: 2000px; border: 1px solid black"></iframe>
<SCRIPT LANGUAGE="JavaScript">
window[0].document.write('<body><div id="FlashContainer" style="display: inline;"><embed id="embed" name="embed" type="application/x-shockwave-flash" wmode="transparent" src="http://edmullen.net/flash/relog.swf" allowscriptaccess="always" allowfullscreen="true" swliveconnect="true" style="vertical-align: top; margin: 0px; width: 728px; height: 300px; clip: rect(0px 728px 300px 0px); position: absolute; left: 1000px; top: 1000px; z-index: 1;"></div></body>');
window[0].document.body.style.paddingLeft = "1000px"; //without this works
window[0].document.body.style.paddingTop = "1000px"; //without this works
</SCRIPT>
</BODY>
</HTML>
Run this code in Chrome, open the devtool (F12):
Select the element embed:
Change the values:
postion: relative
left: 0px
top: 0px
(Some times the flash is not rendered here!)
Change again to:
position: absolute
left: 1200
top: 1200
Comment: with these two steps, we moved the embed element to the left top corner of the iframe, and then we restored the original position
So, where is the bug? The bug is that the flash element is not rendered (Can be in step 1 or 2). To check it, press right click (on the left top corner of the viewport) and the flash popup menu should appear.
That is not all folks! if you change the display property of the element "FlashContainer", then the flash piece appears there!
Note: the problem is caused by the padding left & top, I couldn't figure out why is this happening.
Thank you!
Try setting the z-index for the iframe to 1 or greater.

How can I resize an iframe with an external source and offset the contents?

How can I:
Wait for an external iFrame to load
Resize externally sourced iFrame (ex: 100px x 40px)
Offset externally sourced iFrame (ex: 25px x 50px)
Sample code:
<html>
<body>
<p>Here's Google's Logo Today:</p>
<iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</body>
</html>
I know you can't get contents of external iFrame, but what about resizing and offsetting?
I also know my example is ridiculous.
You can't fire an event when an external iframe has fully loaded, the rest is possible though.
Wrap the frame in a div
<div id="frame_wrapper">
<iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>
</div>
Add the following jQuery
$(document).ready(function() {
$("#frame_wrapper").addClass("iframe_shift");
});
Add the following CSS
#google_logo { width: 100%; height: 100%; }
.iframe_shift { width:100px; height: 45px; position: relative; top: 25px; left: 45px; }​

Categories

Resources