Pieces of image stick around after altering display to "display: none" - javascript

I've been using the following function to hide my div's when I no longer wanted them to be visible
function hide(div) {
document.getElementById(div).style.display = 'none';
}
However the problem has arrived with the div inparticular.
<div id="loading">
<img src="./img/loading.gif"/>
</div>
When I call the function hide('loading') only parts are the image are hidden, and slices of it are burnt onto the page. Considering this is supposed to be a little loading icon, having is stamped into the page isn't really what I'm going for, how can I prevent this?
I'm using the loading icon while processing network data, then hiding it upon receiving and processing data from the server(nodejs).
css as requested:
#loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -64px;
margin-left: -64px;
z-index: 999;
}

can u try this..??
Html
<div id="one">
<img src="https://elora.aerb.gov.in/ELORA/images/loadingnew.gif">
</div>
<div id="two">
<img src="http://www.schultzlawoffice.com/img/loading/loading.gif">
</div>
Script
$(document).ready(function () {
$("div").on("click", function () {
var thisId = $(this)
hide(thisId);
});
});
function hide(thisId) {
$(thisId).hide();
}
Fiddle Sample

Related

How to swap images from side bar to the middle div on clicking on those sidebar images?

I'm new to JavaScript and I'm trying to build a web page and I've 3 images of that product in my sidebar and one main image in the middle now I want to get the sidebar image in the middle when a user clicks on that sidebar image. I don't know how to go about this. I've already tried couple of ways which I've found online, one of them is this
1. How to swap image and video to another div?
But these are not working out for me.
What you have to do is save both images in a variable and then swap them. Look at the example below
var imgleft,
imgcenter,
$center = $(".center img");
$(".sidebar img").click(function(){
imgleft = $(this).attr("src");
imgcenter = $center.attr("src");
$center.attr("src", imgleft);
$(this).attr("src", imgcenter);
});
.sidebar{
position: absolute;
top: 0;
width: 70px;
height: 100%;
background: red;
}
.center{
width: 80px;
height: 80px;
margin:25% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<img src="http://placehold.it/70x70">
<img src="http://placehold.it/70x60">
<img src="http://placehold.it/70x50">
</div>
<div class="center">
<img src="http://placehold.it/70x40">
</div>
You can use javascript's event handling (on each of your sidebar images) to solve this problem. First add the following java script code in your html:
<script type="text/javascript">
function changeToImage1(){
if(centerImage.src != "[1st-image-url.*]"){
centerImage.src = "[1st-image-url.*]";
}
}
function changeToImage2(){
if(centerImage.src != "[2nd-image-url.*]"){
centerImage.src = "[2nd-image-url.*]";
}
}
function changeToImage3(){
if(centerImage.src != "[3rd-image-url.*]"){
centerImage.src = "[3rd-image-url.*]";
}
}
</script>
Then you can simply add the above functions in the onClick attributes of your three sidebar div's accordingly. This can be done like this:
<div id = "first" onclick = "changeToImage1()">
...
</div>
<div id = "second" onclick = "changeToImage2()">
...
</div>
<div id = "third" onclick = "changeToImage3()">
...
</div>

Hover(), mouseenter(), mouseover(), etc jumping back and forth

I am trying to make a situation when you hover over an image then it will hide an image and show another. and the other way around when you hover out.
I have tried using all the various hover effects that comes to mind like mouseenter, mouseover, hover, etc.
They all cause the same problem. If i very firmly and quickly drag my cursor into the field of action then it will give me the desired effect. however if i slowly drag my cursor into the field of action then it will jump between the images a couple of times before finally stopping at the correct image.
this looks very unprofessional and i want it to be much more consequent doing this action so that no matter if i do it slow or fast then it will only jump once.
this is my script:
$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
this is a non working fiddle
https://jsfiddle.net/ydeLvxx2/
hope you guys can help me figure this out.
Here is a pure Javascript solution (no jQuery needed)
https://jsfiddle.net/uL0hpxbu/
Update: version with CSS3 "puff" effect: https://jsfiddle.net/230ta4tk/2/
Here is how the main script looks like:
var InfoBadge1 = document.getElementById("InfoBadge1");
var InfoLogo = document.getElementById("InfoLogo");
var DenmarkMap = document.getElementById("DenmarkMap");
InfoBadge1.addEventListener("mouseover", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
InfoBadge1.addEventListener("mouseout", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
and CSS part (just an example, change it as you want)
#DenmarkMap {
position: absolute;
left: 0;
top: 0;
transition: .5s all;
}
#InfoLogo {
position: absolute;
left: 250px;
top: 120px;
transition: .5s all;
}
#InfoBadge1 {
position: absolute;
left: 0px;
top: 120px;
}
.puff {
transform: scale(1.2);
opacity: 0;
}
and HTML:
<img id="InfoBadge1" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoBadge1" alt="" />
<img id="InfoLogo" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoLogo" alt="" />
<img id="DenmarkMap" class="puff" src="http://dummyimage.com/200x100/3c8036/ffffff&text=DenmarkMap" alt="" />
You should not bind your hover's mouseleave/mouseout event to the same image, because you've just hidden it.
Instead, consider binding the hover functions to the parent DOM node (a DIV for example):
<div id="images">
<img id="InfoBadge1" src="./Photos/DenmarkInfoBadge.png">
<img id="InfoLogo" src="./Photos/InfoLogo.png">
<img id="DenmarkMap" src="./Photos/DenmarkMap.png">
</div>
Your javascript can then become:
$("#DenmarkMap").hide();
$("#images").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});

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 >

Have created a click effect for a single image, but would like to have the other images have the same effect

I'm at a point where I've tried every other option, but I can't seem to solve this problem. Here's an explanation of the experience:
When visiting the page, the person is introduced to a number of images (tagged with classes, for example two of the images are tagged img01 and img02). When an image is clicked, the image maintains it's place (img01's z-index is risen) while all the other images fade away (DIV with a white fill fades in and covers img02), and a text that explains the piece fades in as well (DIV tagged object-text with img01's supporting text fades in).
While I got the img01 functionality to work, I can't seem to do the same for img02. I'm also planning on adding more tags (such as img03 and img04) and am wondering if there is a smarter, more effective way this can be structured.
For functionality reference, here's a http://jsfiddle.net/kenhimself/nvwzgus0/4/
Below, is the html, css, and the java code.
Thanks in advance!
html
<img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div id="object-text" class="img01">
<h1>img01 Text<br/>img01 Text</h1>
</div>
<img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div id="object-text" class="img02">
<h1>img02 Text<br/>img02 Text</h1>
</div>
<div id="filler"></div>
CSS
html, body {
width:100%;
height:100%;
}
#object {
top: 100px;
left:100px;
}
#object-text {
display:none;
z-index:100000;
bottom: 0;
left: 0;
}
#filler {
display:none;
width:100%;
height:100%;
position:fixed;
background-color: white;
z-index:1000;
opacity: 0.8;
}
h1 {
font-size:20px;
font-family: sans-serif;
font-weight: 100;
font-style: normal;
color: red;
}
.img01, .img02 {
position:absolute;
}
.img01 img, .img02 img {
width:200px;
height:auto;
}
.img01 {
top: 20px;
left: 20px;
}
.img02 {
top: 20px;
right: 20px;
}
Javascript
$("#object").click(function (e) {
e.stopPropagation();
});
$("#object").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#object").css("z-index", "2000");
$("#object-text").fadeIn("slow");
$("#filler").fadeIn("slow");
$("#inner").css("z-index", "2000");
});
$(document).click(function () {
$("#filler").fadeOut("slow");
$("#object-text").fadeOut("slow");
});
There are a few issues with your code. You should be using unique ID's for each DOM element, and targeting your images by class name. I've made a few changes to your example and restructured it slightly to show you a better approach.
http://jsfiddle.net/nvwzgus0/6/
Wrapped each image in a containing tag, removed duplicate ID's and using class names instead
<a href="#" class="img img01">
<img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div class="object-text">
<h1>img01 Text<br/>img01 Text</h1>
</div>
</a>
<a href="#" class="img img02">
<img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
<div class="object-text">
<h1>img02 Text<br/>img02 Text</h1>
</div>
</a>
<div id="filler"></div>
Added CSS class for changing z-index instead of setting it manually, to make it easier to toggle on and off.
a.top {
z-index: 2000;
}
Modified event handling to target new containing tag:
$("a.img").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("top");
$(this).find(".object-text").fadeIn("slow");
$("#filler").fadeIn("slow");
});
Modified how images z-index is reset:
$(document).click(function () {
$("#filler").fadeOut("slow", function() {
$("a.img").removeClass("top");
});
$(".object-text").fadeOut("slow");
});
The main problem I see here is that you have two objects with the same id. Change this, and your code should work. I would recommend switching what you have as ids (object) to classes, and what you have as classes (img02 and img01) to ids.
I looked over your code some more and it seems you are doing this a lot. Make sure that when you code you NEVER reuse ids...like ever. Both your a's and your divs have duplicate ids....
Not to be mean, but this does need a lot of work. Feel free to ask any questions if you need more help.

Get the image to appear larger with moving my other elements on my page

Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.
If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/
I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/

Categories