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
});
});
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 following div in my page with some css.
with this I have few div on top and below it.
HTML:
<div id="sentdiv"></div>
CSS:
#sentdiv{
margin-left: 13rem;
margin-right: 20rem;
width: 800px;
height: 600px;
padding: 50px;
}
Then I have a ajax call where in I am loading some html page like below.
JS:
$.post('/logme', function(resp) {
$("#sentdiv").load("success.html");
});
here I want to unload the success.html after 5 sec and keep the div with its CSS.
I have tried following
$("#sentdiv").delay(5000).replaceWith("<p>");
$("#sentdiv").delay(5000).fadeOut();
but It is moving the elements below it. I want to keep div and just remove the contents of div.
use the jquery method .empty()
$("#sentdiv").empty();
setTimeout(function() {
$("#sentdiv").empty();
}, 5000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentdiv">
<span>this will be removed in five seconds...</span>
</div>
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();
});
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>
I have a script that grants scrolling of information.
Visit http://richardtamm.com to see what I am talking about. Look in the footer for the blog feed.
I was able to take the code and place it in a .css script so I didn't have the additional properties clogging up my header.
I would like to do the same for the portion of the used code.
I am including the code used for reference.
<style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
CSS style for page.
<div id="marqueecontainer" onMouseover="M1.Speed=0;" onMouseout="M1.Speed=1;">
<div style="position: absolute; width: 98%;">
***CONTENT**
</div>
</div>
Code for to have Marquee inside a sizabe Div
<script type="text/javascript">
/*<![CDATA[*/
function Marquee(o){
var oop=this,obj=document.getElementById(o.ID),top=0;
var marquee=obj.getElementsByTagName('DIV')[0];
this.marqueeheight=marquee.offsetHeight;
marquee.style.top=-this.marqueeheight+'px';
this.marquee=[marquee];
while (top<obj.offsetHeight){
marquee=marquee.cloneNode(true);
marquee.style.top=top+'px';
obj.appendChild(marquee);
this.marquee.push(marquee);
top+=this.marqueeheight;
}
this.Speed=o.marqueespeed;
setTimeout(function(){ setInterval(function(){ oop.scroll(); },30); }, o.delayb4scroll)
}
Marquee.prototype.scroll=function(){
for (var top,z0=0;z0<this.marquee.length;z0++){
top=parseInt(this.marquee[z0].style.top)-this.Speed
this.marquee[z0].style.top=top+"px";
if (top<-this.marqueeheight){
this.marquee[z0].style.top=top+this.marqueeheight*this.marquee.length+"px";
}
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
var M1=new Marquee({
ID:'marqueecontainer',
delayb4scroll:2000, //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
marqueespeed:2 //Specify marquee scroll speed (larger is faster 1-10)
});
var M2=new Marquee({
ID:'marqueecontainer2',
delayb4scroll:2000, //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
marqueespeed:2 //Specify marquee scroll speed (larger is faster 1-10)
});
/*]]>*/
</script>
JaveScript for the marquee to function...This is the information I would like in one or two .js files so all that code isn't in my footer.
Any help would be great.
I tried to remove the attributes and place the rest in a file i name marquee.js and marquee2.js
then put
<script src="location/marquee.js"></script>
<script src="location/marquee2.js"></script>
In place of the full script and it didn't work.