When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
$(window).load(function() {
$('#loading').hide();
});
This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.
Related
I try to do this, put an image on an iframe, when I click on it, I see a gif image (upload) and at the end I show the iframe with JavaScript, I try to do it with this code but I can not get the image deleted, it just stays the gif image.
I would like to do something like this:
https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour
<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.container {
height: 100%;
overflow: auto;
}
.section {
position: relative;
width: 100%;
}
.section p {
margin: 0;
}
/* sizes */
.fit {
height: 100%;
}
.wide {
height: auto;
padding-top: 56.25%;
/* 9 / 16 = 0.5625 */
}
.wide .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* centering */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cargando {
color: #fff;
font-family: Arial;
position: relative;
font-size: 20px;
z-index: 1;
font-weight: bold;
top: 35%;
cursor: pointer;
}
.cargando img {
width: 150px;
height: 150px;
}
.theplayer {
z-index: 10000;
}
.play-background:hover {
transition: all .6s;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.play-background {
cursor: pointer;
}
iframe {
position:absolute;top:0;left:0;width:100%;height:100%;display: none; }
</style>
</head>
<body class="play-background">
<div class="container">
<div class="section fit">
<div class="t">
<div class="tc">
<div class="cargando">
<img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
<iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$( ".play-background" ).click(function() {
$(".go-boton").hide();
$(".load").show();
$(".theplayer").show();
$(this).removeClass("play-background");
});
</script>
</html>
As I would do when I clicked, I saw the gif image of loading, disappear and show me the iframe.
A loading gif should appear when the iframe is not entirely loaded. If you have slow loading iframes a loading gif is a good thing to have, but having an iframe load with minimal or no latency is better.
Does your page have multiple iframes?
If so, you should reassess your layout. Iframes are the slowest elements to load and rendering multiple iframes will compound loading times.
If not, you should reassess the content of the iframe itself. If the content is a video, try another service to upload and play the video like YouTube or your own site, etc.
Can you edit the page in the iframe?
If so, then establish communication between the parent page (ie the page you are presently located on) and the child page (ie the page within the iframe). Go to this page for details on how to detect when a child page within an iframe is loaded.
If not, you'll need to consider alternatives as described in this post.
Once you have determined that the iframe is loaded, remove the loader gif and reveal the play button image.
Delegate the click event to the play button image and have the callback function remove the play button image and reveal the iframe.
$(play-button-image).on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, figcaption').fadeIn().addClass('active');
e.stopPropagation();
});
If a "double clicking" behavior occurs (ex user clicks the button once and callback function is called but quickly reacts to a second ghost click), add e.stopPropagation(); to the end of the callback function to prevent event bubbling from triggering any other event handlers registered on ancestor tags.
Add/remove a special class (ex .active) that represents the state of a tag (ex hide or show)
Apply a similar event handler that will remove the iframe and reveal the play button image. In the demo the user clicks the figcaption.caption (see the last code block in demo).
Note: In the demo a setTimeout() is called to simulate the iframe loading slowly. Also, due to SO sandbox rules certain features are blocked (figcaption.caption doesn't show, video isn't responsive, etc.). To run with full functionality copy and paste the source to a text file, save with the .html (alt .htm) extension to file name, and open in a browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
}
main {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5vh auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.hframe {
margin: 0 auto;
padding-top: 56.25%;
width: 100%;
height: auto;
position: relative;
}
iframe {
min-width: 100%;
min-height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.hframe img {
width: 150px;
height: 150px;
position: absolute;
z-index: 0;
top: calc(50% - 75px);
left: calc(50% - 75px);
cursor: pointer;
}
.load:hover {
cursor: not-allowed;
}
.caption {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
font: 100 small-caps 1.2rem/1.2rem Verdana;
color: cyan;
background: rgba(0, 0, 0, 0.2);
}
.go:hover,
.caption:hover {
transition: all .6s;
transform: scale(1.1);
cursor: pointer;
}
.active {
display: block !important;
z-index: 1000;
}
</style>
</head>
<body>
<main>
<figure class="hframe">
<img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
<img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
<iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
<figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
</figure>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', loading);
function loading(e) {
setTimeout(function() {
$('.load').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
}, 2500);
}
$('.go').on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, .caption').fadeIn().addClass('active');
e.stopPropagation();
});
$('.caption').on('click', function(e) {
$('iframe, .caption').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
$('iframe')[0].src = '';
e.stopPropagation();
});
</script>
</body>
</html>
If I understand correctly, you want the element in front of the iframe to disappear, and then remove class command is not working in the script. Perhaps you are referencing the wrong object to remove the class from?
Instead of
$(this).removeClass("play-background")
Try
$("body").removeClass("play-background")
I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded.
The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
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; }
Javascript
<script >
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();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.
The error that is in the console on the page is jQuery is not defined. So you need to load jQuery in your scripts. Here is how you can use it with CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can try this code.
Add HTML inside the body.
<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>
Add this CSS Code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
margin: 0 auto;
text-align: center;
}
div.se-pre-con img{
max-width: 300px;
top: 20%;
position: relative;
}
div.se-pre-con.highlighted{
display:none;
}
And this jQuery code in the footer:
<script>
jQuery(function() {
jQuery(this).addClass('highlighted');
setTimeout(function () {
jQuery('.se-pre-con').addClass('highlighted');
}, 2000);});
</script>
I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards
I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).
page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});
Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});
I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}