We Keep Coding

How to display and hide loader before and after the image in printed on screen through API?

I want the user to enter a specific number and display that many images with the help of Unsplash API, but when the function calling the API is called there is a gap of 5 seconds before images finally appear on screen, and in that gap, I want to display a gif(loader) and hide it when images are finally visible on DOM, but I am not able to achieve this, can someone help
let imgNum = document.querySelector('#num')
let btn = document.querySelector("#btn")
let output = document.querySelector("#output")
let loadImg = document.querySelector("#load") // gif image
let url = "https://source.unsplash.com/random"
loadImg.style.visibility = 'hidden';
function disLoad() {
loadImg.style.visibility = 'visible';
}
function hideLoad() {
loadImg.style.display = "hidden"
}
function displayFunc() {
disLoad()
let img = ""
for (let i = 0; i < Number(imgNum.value); i++) {
let newImg = `<img src=${url}>`
img += newImg
}
hideLoad()
output.innerHTML = img
}
btn.addEventListener("click", displayFunc)
<!-- GIF in HTML -->
<div id="num"></div>
<button id="btn">button</button>
<div id="output">
<img src="https://media.tenor.com/lwoULCdn-y4AAAAC/placeholder-text.gif" id="load">
</div>

This is because the UI and your JS run on the same thread, so you add and remove the loading gif (after your processing is complete!) without the UI showing it.
You would need to add the gif and then run your processing, as a separate function, within a setTimeout() with a timeout of 0.
Detailed answer here

Spinning circle on click

I have a code where onclick a word on left side of the page, it shows some text on right hand side of page. Here's the jsfiddle of working code.
Now, my problem is I want to display spinning circle on page on every onclick and then show text on the right hand side of the page. My code for spinning circle is:
HTML:
<div id="loading">
<img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>
JavaScript:
function hideLoading() {
document.getElementById("loading").style.display = 'block';
}
function showLoading() {
document.getElementById("loading").style.visibility = 'visible';
}
CSS:
#loading {
display: none;
}
Now, I don't know how to place them in my working code to get the desired result. Anybody knows the correct way of doing it?
Desired result: onclick "abc" on left hand side, spinning circle should be displayed for 1 sec and then "I should be printed on left side" should be displayed. Again on clicking "mno", first spinning circle should be shown for 1 sec and then text "I should be printed on left side" will be displayed. The fiddle has working version of onclick.

You should use a single handler function on each element that will both hide and show the loading gif. Also, it's a good idea not to use getElementById on every call, so save it in a variable:
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
Here I am trying to split the webpage into two columns and display text.</div>
<div id="one">
<div id="loading">
<img src="http://support.snapfish.com/euf/assets/images/answer_images/SpinningWheel.gif" />
</div>
<div id="message"></div>
</div>
<div id="two"> <b>This is test one<br /></b>
<b>This is test two<br /></b>
</div>
Javascript:
var elements = {};
function loadSpanContent() {
elements.loading.style.display = 'block'; // Show loading gif
spanContent = this.innerHTML
setTimeout(function () {
elements.message.innerHTML = "I should be printed on left side - " + spanContent;
elements.loading.style.display = 'none'; // Hide loading gif
alert("onclick Event detected! " + spanContent);
}, 1000);
}
window.onload = function mydisplayArray() {
var array = ['abc', 'xyz', 'mno'];
elements.loading = document.getElementById("loading");
elements.one = document.getElementById("one");
elements.message = document.getElementById("message");
for (i = 0; i < array.length; i++) {
var span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = loadSpanContent;
one.appendChild(span);
}
};
Here is a fiddle: http://jsfiddle.net/nBaCJ/1/

I'm still confused by what you actually want here, but if you want to have the loading message disappear after one second, you should use setTimeout. Something like this:
function showAlert() {
showLoading();
setTimeout(hideLoading,1000);
//Hide loading circle
var myString = "I should be printed on left side";
document.getElementById("two").innerHTML = myString;
}
But you also need to fix your "showLoading" and "hideLoading". Something like this:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}
http://jsfiddle.net/7uxHC/9/
BTW: if you want your loading gif to appear over your content, then set its position:absolute in css, but note that you gif has a white, rather than transparent background so it will obscure your content.

Your request isn't clear.
But first, you should fix these 2 functions:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}

Spot div on same position

I am trying to show hide image using javascript. Code works fine but image displays on different location. Now i want to show and hide the images on same spot.
<script type="text/javascript">
function showImage()
{
if(document.getElementById('check').checked==true)
{
document.getElementById("image").style.visibility = 'visible';
document.getElementById("images").style.visibility = 'hidden';
}
else if(document.getElementById('check').checked==false)
{
document.getElementById("image").style.visibility = 'hidden';
document.getElementById("images").style.visibility = 'visible';
}
}
</script>
<body onload="showImage()">
<font align="left">
<input type="checkbox" id="check" onclick="showImage()" />
Show Image
<div class="checkboxes" id = "image" >
<img class = "jive-image" height="125" src ="Tulips.jpg ">
</div>
<div id="images">
<img class = "jive-image" height="125" src="Desert.jpg">
</div>
</body>
How it possible?

If you use the display style you can remove the image from the page and not just hide it like visibility. This will mean the bottom image is pushed up as the first isn't taking up space any more. Set element.style.display to 'block' to show the element and 'none' to hide it.
jsFiddle
function showImage() {
if (document.getElementById('check').checked == true) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else if (document.getElementById('check').checked == false) {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
}

It's because you're using visibility. CSS's visibility style doesn't affect the page flow. It's as if you were setting the opacity to 0. Instead, you may want to use display.
function showImage() {
if(document.getElementById('check').checked) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
};

Instead setting visibility, set display to either none or block.

Change Style of Single Element Multiple Times in Same Function (only latest style shown at exit of function)

I've got a setup of multiple images stacked on top of each other (image1 = normal icon, image2 = highlighted icon).
My objective is to highlight the icon, do processing, then set the icon back to normal. Also, to process as fast as possible. The bottleneck is the workarounds to get the "highlight" to show up.
To accomplish this, I'm just switching the
.style.visibility = {"hidden", "visible"}
The behavior that I'm seeing is that only the latest style is shown, and it doesn't update until the function exits. From my research on SO, I've found the following:
Toggle the .style.visibility or .style.display off and on to force a redraw
Didn't see the correct behavior. Only the latest update shown
Use setTimeout(callback, 0) or setInterval(callback, 0)
Behaves as expected. However, due to the browser enforced "minimum wait time", the code is not executing as fast as I need it to.
The setInterval() function implementation requires that the function is called twice to perform one operation (once to highlight, second time to process then unhighlight)
I can upload code if necessary
I've attached a quick sample code to demonstrate that only the last style is shown
<!doctype html>
<head>
<title>test redraw</title>
</head>
<body>
<img id="logo"
src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot from wikipedia" /></img>
<script>
function pausecomp(ms) {
ms += new Date().getTime();
while (new Date() < ms) {
}
}
function hide_then_show() {
var id = document.getElementById("logo");
pausecomp(1000);
id.style.display = "none";
id.parentNode.style.display = "none";
id.parentNode.style.display = "block";
pausecomp(1000);
id.style.display = "block";
id.parentNode.style.display = "none";
id.parentNode.style.display = "block";
}
window.addEventListener("click", hide_then_show());
</script>
</body>
</html>
Any suggestions would be appreciated. I don't know if I'm approaching this the best way

I've a doubt you're not using setTimeout() correctly. Here's how you can make this work.
function hide_then_show() {
var id = document.getElementById("logo");
setTimeout(function () {
id.parentNode.style.display = "none";
setTimeout(function () {
id.parentNode.style.display = "block";
}, 1000); // Hiding time
}, 1000); // Delay between click and hide
}
window.addEventListener("click", hide_then_show, false);
A working demo at jsFiddle. You can play with the fiddle and adjust delays, you'll see, how fast you can switch the image display.
If you need a blinker, you can check this fiddle.

Collapsing JavaScript/HTML div on page load?

I need help collapsing a collapsible div on page load.
I'm using this JavaScript code:
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
document.getElementById('aboutme').style.display = 'none';
</script>
to collapse HTML div id="aboutme" when the <a ...>about me</a> is clicked:
<div class="container">
about me
<div id="aboutme">
sample text to be expanded and collapsed
</div>
</div>
I can't get the page to close my div#aboutme on page load.
I want this page to load with my div collapsed.
I thought that the JS line
document.getElementById('aboutme').style.display = 'none';
should do the trick but it doesn't. What am I doing wrong?
Thanks for your help.

If you want your div to load collapsed, simply write the following
<div id="aboutme" style="display:none">
sample text to be expanded and collapsed
</div>
This should resolve the problem.
However, if you are still interested in the JavaScript solution keep reading.
As you said I can't get the page to close my div#aboutme on page load - the problem is that you are not using "onload" event.
Simply put the line document.getElementById('aboutme').style.display = 'none'; in your body's onload attribute..
something like this
<body onload="document.getElementById('aboutme').style.display = 'none';">
...
</body>
and you should see the results with JavaScript. I recommend you use "style" method instead. much better.

Exactly how do you make that JS run on window load? It may simply run before the page is rendered
Does clicking on the link work? if it does, that would prove that the issue is simply the loading sequence
The easiest solution would be to place your code at the very end of your HTML file, just before the closing </body> tag. The code below is more generic, and can be placed anywhere. Note that to toggle the link back on I set the display to 'inline' (or block, i.e. whatever it was before - you may want to save that to a variable to be sure)
<script type="text/javascript">
function switchMenu(id) {
var el = document.getElementById(id);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'inline'; //or block - i.e. whatever it is rendered by
}
}
//add to the window onload event
if( window.addEventListener ){
window.addEventListener( 'load', function(){ switchMenu('aboutme')}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(){ switchMenu('aboutme') } );
}
</script>