We Keep Coding

JQuery, not animating my background image when trying to refresh

I'm talking about this site here: malcolmtanti.com
I am using this function:
<script>
var image = new Image();
image.onload = function () {
$('header').animate({opacity: 1}, 2000);
}
image.src = "./images/background.jpg";
</script>
to animate the fade in of my main background image and the title etc. It should fade in the header element in my css.
This is the CSS:
header{
position: relative;
background: url(../images/background.jpg) no-repeat top center;
background-size: cover !important;
-webkit-background-size: cover !important;
/*height: 700*/
top:50px;
min-height:95%;
max-width: 100%;
overflow: hidden;
opacity:0;
}
For some reason, the first time I access the site, the picture loads for me, but once I press refresh, the opacity of the header tag is remaining 0. How can this be?

It might be a problem with the browser caching the image so that when you refresh the page it doesn't fire the animation since the image is already preloaded.
Try loading the image with a unique id (like the current time) to prevent this.
<script>
var image = $('<img/>');
var srcText = './images/background.jpg?t=' + new Date().getTime();
image.attr('src', srcText).load(function() {
$(this).remove();
$('header').animate({opacity: 1}, 2000);
});
</script>

U have used the link from (link tag, script tag )the href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" and src of the script like this. Don't use like this. copy the code of above link and place it in your folder and refer that local link..

Swap background on hover

I'm trying to swap background using jQuery. But the problem is that it doesn't successfully switch to new background, instead, the old one is removed and I get a white background instead.
I've been googling and trying out putting the path as a var instead for example, and some other unsuccessful suggestions.
My jQuery function looks like the following:
$("#btn").hover(function () {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
});
And my CSS for the default background looks like this:
#page1 {
height: 100vh;
max-height: 100vh;
background-image: url("../images/bg1_rw.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
I'm using Java Play Framework and the pictures are in the same folder, and it is the correct path to it since the default background works.
EDIT: I Tried as well to use an img source from the web, just to be 100% sure it wasn't some issues with the path, but it still only makes it white.

I believe jQuery's hover() function isn't able to remove that particular style when the mouse leaves.
You could just do it yourself
$("#btn").on({
mouseenter : function() {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
},
mouseleave : function() {
$('#page1').removeAttr('style');
// or simply set the backround again to the other image
}
});

Try .addClass and .removeClass functions - it's simple and all style work is done in stylesheet file:
$("#btn").on({
mouseenter : function() {
$('#page1').addClass('inverted');
},
mouseleave : function() {
$('#page1').removeClass('inverted');
}
});
and then simply add
#page1.inverted {
//style as you need
}
to your stylesheet.

If you're using images you could do an image swap like this
https://jsfiddle.net/RachGal/oee3guxz/
$("#flowers").mouseover(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
_this.toggleClass("opaque");
});
.opaque {
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
or if you could just use color like this
$("#color").mouseleave(function () {
$("body").css("background-color","black");
});
$("#color").mouseover(function (){
$("body").css("background-color","red");
});
$("#color").click(function(){
$("body").css("background-color","green");
});
body, #color {
height: 800px;
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="color"> </div>
https://jsfiddle.net/RachGal/8p783jfo/
Hope this helps
Rach

Load Iframe with spinner

This code loads correctly the spinner, but how do I hide it after loading completes?
iframe {
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}

As an alternative solution, you can do this as well:
<div id="spinner">
<div>
<img src="http://www.ajaxload.info/images/exemples/25.gif" />
</div>
</div>
<iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>
Style the position of the spinner absolute to the page container to center it appropriatedly

Try jQuery:
$( document ).ready(function() {
$( "iframe .load" ).hide();
});
and create a second css-class for the loading-action:
.load{
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
width:100%;
height:100%;
}
iframe{
position:relative;
}
Let me know if it works.

Here it is, using font-awesome and jQuery:
$(document).ready(function () {
showSpinnerWhileIFrameLoads();
});
function showSpinnerWhileIFrameLoads() {
var iframe = $('iframe');
if (iframe.length) {
$(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
$(iframe).on('load', function() {
document.getElementById('spinner').style.display='none';
});
}
}

You could listen to when the iframe is loaded, and then put a class on the iframe, setting background image to nothing.
iframe.onload = function() {
// remove spinner
};
Sorry for the short answer, but I'm on a phone atm :)

I just wanted to add that another way to do this without Javascript is to have the spinner appear behind the iframe, and give the iframe an initially transparent background; so long as the iframe's content has a background colour it will cover the spinner once it loads.
This is a great way to do this if your iframe is "single-use", i.e- it loads embedded content only once and contains no clickable links, or if you don't care about displaying the spinner once the initial content has loaded.*
There are two easy ways to do this:
CSS Background
HTML:
<div class="iframe_container">
<iframe src="http://example.org"></iframe>
</div>
CSS:
.iframe_container {
background-image: url('path/to/spinner.gif');
background-position: center;
background-repeat: no-repeat;
}
.iframe_container iframe {
background: transparent;
}
Basically the spinner is a background for .image_container, positioned in the center, and visible because the iframe's background is initially transparent. When the iframe content loads it covers the image, even if an error occurs.
Z-Index
HTML:
<div class="iframe_container">
<img class="spinner" src="path/to/spinner.gif" />
<iframe src="http://www.example.org"></iframe>
</div>
CSS:
.iframe_container {
position: relative;
}
.iframe_container .spinner {
position: absolute;
top: 50%;
left: 50%;
}
.iframe_container iframe {
background: transparent;
z-index: 1;
}
In this case we have our spinner embedded as a specific element (which you may need to do for Bootstrap spinners and such), which is positioned using CSS. The iframe in this case covers the image because it has been given a z-index (you may need to use a higher number, if other elements with z-indexes) but the trick is essentially the same.
Notes
As long as it doesn't bother you that the spinner is still technically in the background this works great for a single page-load iframe, or when you only care about the first load.
This is also a good trick to use if you want your site to support users with Javascript disabled, as they won't be left with a spinner that won't disappear.
*If you want to re-use a spinner via Javascript you can still do-so using the z-index option, by setting the spinner's z-index to be higher than the iframe's, like so:
var e = getElementById('my_iframe');
e.onload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 0;
}
e.onunload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 100;
}
This works by pushing the spinner above the iframe when unloading (source is changed) and behind it again on load (new content is visible).

You can use jquery on load
$('#showFrame').on("load", function () {
console.log('iframe loaded completely'); //replace with code to hide loader
});

================================================================
=========================2022 Answer==========================
Iframes have a onLoad attribute that you can set to a function
In react you could do something as such:
const spinner = async () => {
document.getElementById('spinner').style.display = 'none';
}
Rendered in a Modal as such:
<div
id="spinner"
style={{
backgroundColor: '#ECECFE',
borderRadius: '8px',
padding: '20px',
}}
>
<Loading
spinnerColor="#2E7DAF"
text="Loading...."
/>
</div>
<iframe id="iframeid" src="" width="650px" height="650px" onLoad={spinner} ></iframe>
</div >

JIT Spacetree Save Labels as Image

I am using the JavaScript InfoVis Toolkit (http://thejit.org/) and am trying to print my expanded space-tree visualization using canvas.toDataURL("image/png"). While this works for my ForceDirected graph -- in the SpaceTree we have our labels in a separate DIV so when I print the image I get a blank graph.
Does anyone know how to print the labels? Any help would be greatly appreciated. I have attached a manual screenshot of the graph and the image we get when printing.
Yes - I did see the question here -- but it doesnt answer my question as we cannot use "Native" labels because we do some on the fly styling.
HTML Code:
<div id="infovis" style="height: 412px;">
<div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
<canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
<div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
-- Labels are in here --
</div>
</div>
</div>
Manual Screenshot
Blank Printed Image

I sort of solved this issue by using html2canvas plugin. Basically, html2canvas will create a new canvas of a div element (with its children) which then you convert to a png image file with myCanvas.toDataURL("image/png"). This image will include your HTML labels. (Beware that html2canvas may not handle properly the labels' CSS properties.)
html2canvas(document.getElementById("diagram-container"), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
document.write('<img src="'+img+'"/>');
}
});

I should have posted this back in October when I found it -- but it slipped my mind. I was able to find an answer to my own question.
First check out the post here HTML 5 Canvas Save Image
Here is how I implemented the solution (get CanvasSaver function code from link above):
function SaveCanvas(canvasName) {
var canvas = document.getElementById(canvasName);
var imgUrl = null;
if (canvas.getContext) {
//Get alternative image URL for spacetree only
if (canvasName.indexOf("tag") == -1) {
imgUrl = $jit.ST.prototype.print.call();
}
var cs = new CanvasSaver('http://joeltrost.com/php/functions/saveme.php');
//cs.saveJPEG(canvas, 'image');
cs.savePNG(canvas, 'image', imgUrl);
}
}
Finally -- code your ASP button to call the SaveCanvas function:
<asp:ImageButton ID="ImageButton1" ImageUrl="Images/save_icon.png" ToolTip="Save Visualization" AlternateText="Save Visualization" OnClientClick="SaveCanvas('tagCloudVis-canvas');return false;" Style="left: 2px; top:3px; position:relative;" runat=server />

I know this thread is old. But, in case anyone is looking for this and do not want to use html2canvas. here is a solution for you guys.
Label: {
type: 'Native'
},
Add the above in your javascript code var st = new $jit.ST({ <here> })
To save it as a image, add the following code.
HTML:
<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>
JS:
function getImage(a, filename, id){
a.link = document.getElementById(id).toDataURL();
a.download = filename;
}
Happy Coding :)

Javascript to only display animated gif when loaded

I have an animated gif banner on my website that is around 2MB. For people with slow connections, I want to include some Javascript that will only display (and start playing) this gif when it is fully loaded, so that the rest of the website will already display whilst the gif is still loading. Ideally, I would have one image (loading.gif) be displayed first, and then switched to the banner (banner.gif) with javascript when banner.gif is loaded.
How do I do this? (I'm new to Javascript)
Thanks!

You can do this using an Image object, like so (do this when you want to start loading the banner, probably in onload):
var banner = new Image();
var loading = new Image();
var bannerElement = document.getElementById("banner"); // assumes an element with id "banner" contains the banner image - you can get the element however you want.
banner.src = "location/of/the/image.gif";
loading.src = "loading.gif";
banner.onload = function() {
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(banner);
};
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(loading);
Your banner element should look like this:
<div id="banner"><img src="location/of/the/image.gif" alt="Banner" /></div>
This is so that 1) The bannerElement.removeChild part will work and 2) To keep with the principles of progressive enhancement so people without JavaScript aren't left out.

How about a jquery script like http://jqueryfordesigners.com/image-loading/
So you would do
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; }
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
overflow: hidden;
}
DIV#loader.loading {
background: url(/images/spinner.gif) no-repeat center center;
}
-->
</style>
$(function () {
var img = new Image();
$(img).load(function () {
//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'myimage.jpg');
});
Note, you dont need to create a new image element if you already have one set. If you create one already then you can just use a selector. something like $('#myimage').load(... which is an image tag with an id called myimage.

I don't think you need JavaScript for this - you can set your image area's background image with css (use a very small image so that it appears quickly) and then within that area have your image tag with the 2mb image's src already set. That way it should appear when ready.
example css:
#banner {background: url('/img/banner-background.jpg');}