I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,
$(window).load(function() {
$(".loader").fadeOut("slow");
})
But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded.
And the background image comes under the following section
<div class="loader"></div>
<div class="test_banner services_banner">
</div>
It would be great if somebody give a helping hand to manage this case. Thanks in advance.
Maybe you could use a multiple background-image
example:
div {
height:90vh;
width:90vw;
background:url(http://lorempixel.com/1200/800/nature/) center,
url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */
<div></div>
The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
}
body{
text-align: center;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
// Adding timestamp to set cache false
$.get("/examples/php/customers.php?v="+ $.now(), function(data){
//$("body").html(data);
});
});
// Add remove loading class on body element depending on Ajax request status
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Get Customers Details</button>
<div class="overlay"></div>
</body>
</html>
Related
I am trying to add an image that pops up for mobile viewers upon website entrance. I have a rough idea of the things that must go into the code but not sure exactly how to put things together. Could anyone help me out or point me in the right direction?
I am using cargo collective to build my website if that helps.
I'd like to do something similiar to: https://badbadbadbad.com/ (whenever viewed on a phone)
J
You can use JavaScript's onload function to make an action happen when a page loads. Example below just shows an alert box with some text, but it's a start.
Post your code and we can help further.
<!DOCTYPE html>
<html>
<head>
<title>Pop Up on Page Load</title>
<script>
document.onload(alert("This is my image."));
</script>
</head>
<body>
<p>This is my website.</p>
</body>
</html>
A simple approach could be:
fiddle.
HTML:
<div class="regularBox"></div>
<div class="modalBox">
<img src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
<span class="close">×</span> <!--Click X to close-->
</div>
JS:
function showPopup() {
document.querySelector('.modalBox').style.display = 'block';
}
showPopup(); // show modal image.
function closePopUp() {
document.querySelector('.modalBox').style.display = 'none';
}
document.querySelector('.close').addEventListener('click', closePopUp); // hide modal image
CSS:
img {
width: 80%;
}
.close {
font-size: 50px;
margin-left: -40px;
cursor: pointer;
}
.modalBox {
display: none;
}
.regularBox {
z-index: -1; // placed behind modalbox
position: absolute;
background-color: pink;
width: 500px;
height: 400px;
I have a iframe where I will be displaying contents from a text file. It will continously check whether the text file is available in the folder or not. Till the time the text file is not there, I want it to display a gif or image, and after the content arrives it will show the content and gif will be hidden. How can I do this using jquery and HTML. The code I wrote is as follows:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
setInterval(my_function,5000);
function my_function(){
console.log("reloading...");
$('#printdiv').load(location.href);
}
</script>
</head>
<body>
<div>
<div id="printdiv">
<p><iframe id = "frame1" src="test.txt" frameborder="0" width="95%">
<img id = "imgProg" alt = "Progress" src = "ajax-loader.gif" visible =
"false"/>
</div>
</iframe></p>
</div>
</body>
</html>
Help will be highly appreciated
What I have done below is a simplified method for the iframe waiting to be loaded, and meanwhile in the background a gif is shown. When the iframe is completely loaded, the gif disappears. Be aware that this is specific for jQuery.
I have removed the <img> of your code, this won't work. I have simplified it by adding a class to div#printdiv called load-gif and gave it background styling.
I have also added an opacity function. Otherwise you see a page being loaded in the iframe while the gif is still in the background. To avoid this iframe is invisible (opacity: 0;) until it's fully loaded and then opacity turns back to opacity: 1;.
body {
height: 40vw;
width: 100%;
background-color: #e4e4e4;
}
#printdiv {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e4e4e4;
height: 100%;
margin: 3em;
}
#printdiv>p,
body>div,
#frame1 {
width: 100%;
height: 100%;
}
#printdiv,
#frame1 {
background-color: white;
}
/* Below CSS are the important factors, above is just example styling. */
#frame1 {
opacity: 0; /* set at 0 to avoid gif and iframe mixture in the same div */
}
.load-gif { /* extra class to load gif */
background: url(https://loading.io/assets/img/ajax.gif) center no-repeat;
background-size: contain;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function() { // starts DOM page is ready
jQuery("#frame1").on("load", function() { // when iframe is completely loaded
jQuery(".load-gif").css("background", "unset"); // removes gif
jQuery(this).css("opacity", "1"); // set opacity to normal value
});
});
</script>
</head>
<body>
<div>
<div id="printdiv" class="load-gif">
<p>
<iframe id="frame1" src="/" frameborder="0"></iframe>
</p>
</div>
</div>
</body>
</html>
An alternative way is to remove the load-gif class completely after iframe is loaded. jQuery will look like this:
jQuery(document).ready(function() { // starts DOM page is ready
jQuery("#frame1").on("load", function() { // when iframe is completely loaded
jQuery('#printdiv').removeClass("load-gif"); // removes gif class
jQuery(this).css("opacity", "1"); // set opacity to normal value
});
});
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
I want to make custom height of an element using jQuery. height is being changed but an effect (like blink effect) is being shown on page load every time. How to solve this problem?
$(document).ready(function() {
$('.jQuery-Container').height('100px');
});
.jQuery-Container {
background-color: Red;
height: 700px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jQuery-Container">
This is text..!!
</div>
On page load height of the div is being changed but after the page is fully loaded. I want to change height before the page is fully loaded.
You can See my jsfiddle here.
You could do like this, where you run a script immediately after the element, and as long as it is plain javascript, it will work.
.JS-Container {
background-color: Red;
height: 700px;
width: 200px;
}
<head>
<script>
function changeThis(sel) {
document.querySelector(sel).style.cssText = 'height: 100px;';
}
</script>
</head>
<body>
<div class="JS-Container">
This is a sample text
</div>
<script>changeThis('.JS-Container');</script> <!-- this will run before page is fully
loaded, so no "blink" will occur -->
</body>
make you div first hidden then after your jquery logic make div visible
CSS
.jQuery-Container {
background-color: Red;
height: 700px;
width: 200px;
display:none;
}
JS
$(document).ready(function(){
$('.jQuery-Container').height('100px').show();
});
here is jsFiddle: http://jsfiddle.net/arJEx/
Here's what I got so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Waiting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<style>
* { margin:0;padding:0; }
#wait {
background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function() {
$(".act").live("click",function() {
$("#wait").slideDown("slow");
});
});
</script>
</head>
<body>
<button class="act">Activate effect</button>
<div id="wait">Please wait...</div>
</body>
</html>
I want it so the blue div when I press that button slides down to the middle of the page... but I juts can't seem to find out how to do it. Please help?
edit: ok, it doesn't HAVE to be middle of screen but near the top of part. like.. anywhere near middle to top of page.
Everything is just fine with Your JS. You need to change CSS. First of all div's container must fill all window:
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
Than change div's css. First approach (not sure about IE):
#wait {
/* remove padding and append those */
position: absolute;
top: 5%; /* change it */
bottom: 50%;
width: 100%
}
Second one:
#wait {
/* remove padding and append those */
height: 50%;
}
There is one problem You will need to solve. You will need to verticall align Your text without using padding and this is another question (just search for it in stackoverflow or goole).
Is this what you want?
$("#wait").height(0).animate({height: $(window).height() / 2});
Is this what you're looking for?
$(function() {
$(".act").click(function() {
var h = $("#wait").height()/2;
var t = $(window).height()/2;
var pos = t - h - 50;
$("#wait").slideDown("slow").css('top', pos);
});
});
You'd have to add position:relative; and width: 100% to your css though.
This will show the div and push it down the page by extending the top margin 200px. It uses Jquery's animate, which lets you change a numeric property over time (read: move stuff). SlideDown is basically shorthand for calling an animate function that increases the height of an element to move it down the page. Instead of increasing the height, this keeps the same height and just moves the element to a lower part of the page.
Is this anything close to what you wanted? :D
$(function() {
$(".act").live("click",function() {
$("#wait").show().animate({ marginTop: "+=200" }, 600);
});
});