Develop Reference

Javascript: unable to add delay and load functionality

I have a following code which displays the clicked image in the below div using pause JS. I wanted to added some delay during which i show a loader/spinner on screen for few seconds and then show the pic. But i am getting a problem, that when I click image loader appears for a sec(no matter the delay ms e.g. 5000) and then image loads in the browser, not there div, Below is my HTML code for section I am targeting.
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("imageDescription")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var imageDescription_p = document.getElementById("imageDescription_p");
var imageDescription_d = document.getElementById("imageDescription_d");
var imageDescription = document.getElementById("imageDescription");
if (imageDescription.firstChild.nodeType == 3) {
imageDescription.firstChild.nodeValue = text;
// imageDescription_p.textContent=prob;
imageDescription_d.innerHTML=test
imageDescription_d2.innerHTML=test1
}
document.getElementById('placeholder').style.display='block'
document.getElementById('loading').style.display = 'none';
// if (imageDescription_p.firstChild.nodeType == 3) {
// imageDescription_p.firstChild.nodeValue = text;
// }
return false;
}
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","./img/resources/neutral_1.jpg");
placeholder.setAttribute("alt","your image goes here");
placeholder.style.padding='20px'
placeholder.style.marginBottom='50px'
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var imageDescription= document.createElement('h1');
imageDescription.setAttribute("id","imageDescription");
var imageDescription_p= document.createElement('p');
imageDescription_p.setAttribute("id","imageDescription_p");
var imageDescription_d= document.createElement('div');
imageDescription_d.setAttribute("id","imageDescription_d");
var imageDescription_d2= document.createElement('div');
imageDescription_d2.setAttribute("id","imageDescription_d2");
var desctext = document.createTextNode("");
imageDescription.appendChild(desctext);
var heading= document.getElementsByTagName('h3')
var gallery = document.getElementById("imagegallery");
// insertAfter(description,heading);
insertAfter(description,gallery)
insertAfter(placeholder,description);
insertAfter(imageDescription,placeholder);
insertAfter(imageDescription_p,imageDescription);
insertAfter(imageDescription_d,imageDescription_p);
insertAfter(imageDescription_d2,imageDescription_d);
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
document.getElementById("imagegallery").style.display='none'
document.getElementById('placeholder').style.display='none'
document.getElementById('loading').style.display = 'block';
// document.getElementById('placeholder').style.display = 'none';
// setTimeout(calculateResults, 2000);
// e.preventDefault();
// return setTimeout(showPic(this), 2000)
// return showPic(this);
setTimeout(()=>showPic(this),5000)
}
}
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a href="./img/team/t1.jpg" title="Black Man in Glasses" >
<img src="./img/team/t1.jpg" alt="the band in concert" height="75px" width="75px" />
</a>
</li>
<li>
<a href="./img/team/t2.jpg" title="Black Man in Glasses" >
<img src="./img/team/t2.jpg" alt="the band in concert" height="75px" width="75px" />
</a>
</li>
<li>
<a href="./img/team/t3.jpg" title="Brown Women">
<img src="./img/team/t3.jpg" alt="the guitarist" height="75px" width="75px" />
</a>
</li>
<li>
<a
href="./img/team/t4.jpg" title="White Women">
<img src="./img/team/t4.jpg" alt="the audience" height="75px" width="75px" />
</a>
</li>
</ul>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
</div>
If you are getting confused by my version of code you can look at here. I am using the same code and flow here, except that i want to implement loader/spinner and hide(ul images get hidden after click) functionality.

The placeholder element you are creating is being created in the document:
var placeholder = document.createElement("img");
You need to place a div in your html code where you want the image to display, then you can append the placeholder image to that div:
document.getElementById('id of the div you insert').appendChild('block you want to insert')

is style.display = "none"; breaking my javascript code?

I am trying to build a website and have run into a problem with style.display. I have a similar piece of code in it that works fine and am thus stuck.
I've tried "isolating" both the working and non working code into seperate html files in an attempt to try and find out what is wrong and have tried adding a document.write("hello world") in the javascript file in an attempt to debug it however the tet doesn't show up.
Upon looking into the problem it appears that the issue is with the very first .style.display = "none"; code (the one not in a function) in the javascript code as if you remove it the hello world text shows up however the functions still don't work. This doesn't make sense to me as the working code doesn't have an issue with the style.display and thus I came over to stack exchange after browsing arround to no avail.
The not working html and javascript code is below (the other 5 functions are essentially repeats so they weren't included)
<h1>Activities</h1>
<div class="Activities_Holder">
<div class="Activities_Btns">
<input type="button" value="Activities" id="Activities" onclick="ActivitiesButton()"><!--
--><input type="button" value="Joint Events" id="JE" onclick="JEButton()"><!--
--><input type="button" value="Movie Nights" id="MN" onclick="MNButton()"><!--
--><input type="button" value="Socials" id="Socials" onclick="SocialsButton()"><!--
--><input type="button" value="SocSport" id="SocSport" onclick="SocSportButton()"><!--
--><input type="button" value="Trips" id="Trips" onclick="TripsButton()">
</div>
<div class="Activities_Paragraphs">
<p class="Activities_Text">Activities</p>
<p class="JE_Text">JE</p>
<p class="MN_Text">MN</p>
<p class="Socials_Text">Socials</p>
<p class="SocSport_Text">SocSport</p>
<p class="Trips_Text">TripsText</p>
</div>
<script src="Activities.js"></script>
</div>
var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");
j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";
document.write("hi");
function ActivitiesButton() {
if (a.style.display === "none") {
a.style.display = "block";
j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";
}
}
The working code is below
<div class="Intro"><!-- container for intro/about section -->
<div class="About">
<h1>Intro / About</h1>
<p id="About_Text">About Text</p>
<p id="Comittee_Text">Comittee text here</p>
<p id="Sponsors_Text">Sponsor text here</p>
</div>
<span>
<div class="About_btns">
<input type="button" value="Comittee" id="Comittee" onclick="ComitteeButton()"><!--
--><input type="button" value="Sponsors" id="Sponsors" onclick="SponsorsButton()">
</div>
</span>
<script src="About.js"></script>
</div>
var x = document.getElementById("About_Text");
var y = document.getElementById("Comittee_Text");
var z = document.getElementById("Sponsors_Text");
y.style.display = z.style.display = "none";
function ComitteeButton() {
if (y.style.display === "none") {
y.style.display = "block";
x.style.display = z.style.display = "none";
document.getElementById("Comittee").value = "About";
document.getElementById("Sponsors").value = "Sponsors";
}
else {
y.style.display = z.style.display = "none";
x.style.display = "block";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "Sponsors";
}
}
function SponsorsButton() {
if (z.style.display === "none") {
z.style.display = "block";
x.style.display = y.style.display = "none";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "About";
}
else {
z.style.display = y.style.display = "none";
x.style.display = "block";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "Sponsors";
}
}
The code is supposed to have 6 buttons and paragraph text underneath. On loading, only the Activities paragraph should be visible - the other paragraphs should be hidden. Upon pressing on the relevant button, the previously shown text should be hidden and the corresponding text should show up instead. This isn't happening for me - all six paragraphs are shown at once and the buttons do nothing.
Thank you in advanced for your time.

You are using getElementById, but not passing id, instead of Id you are passing class name.
<p class="Activities_Text">Activities</p>
<p class="JE_Text">JE</p>
<p class="MN_Text">MN</p>
<p class="Socials_Text">Socials</p>
<p class="SocSport_Text">SocSport</p>
<p class="Trips_Text">TripsText</p>
var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");
In this case, all variable will be null and will throw error if you try to use any property.
Instead of using getElementById, you can use getElementsByClassName.

How to hide already opened panel when click on other button?

<html>
<head><title></title></head>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.width = "250px";
}
function closeNav1() {
document.getElementById("mySidenav1").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "200px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
</body>
</html>
in the above code when api panel is opened and when click on the login api panel should close. here i am posting the code please go through this an suggest.

Use style.display="none" instead of specifying width

Here is the updated code. When you click on login, API panel closes. and when you click on API, login panel closes.
function openNav1() {
document.getElementById("mySidenav2").style.display = "none";
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav1").style.display = "none";
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
.sidenavlogin,
.sidenavapi {
display: none;
}
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>

use common class for nav blocks.
Like sideNav and style attributes instead of setting width.
function closeAll(){
var divsToHide = document.getElementsByClassName("sideNav");
for(var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "none";
// divsToHide[i].style.width = "0"; // if purpose fully you want to use width then use this
}
}
function openNav1() {
closeAll();
document.getElementById("mySidenav1").style.display = "block";
}

You want to use element.style.display instead of width
element.style.display = 'block'; to show
element.style.display = 'none'; to hide
<html>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
</script>
</body>
</html>

Javascript Show/Hide not working in IE8

I have this bit of code that is working in FF, Chrome, Safari, and even IE9. Naturally, it doesn't work in IE8. It's a show/hide on two divs using Javascript. I'm not terribly proficient with JS so any help would be appreciated.
Javascript function :
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].getAttribute("class");
if (name == 'subscriberinfo') {
if (subscriberinfo[x].id == thechosenone) {
subscriberinfo[x].style.display = 'block';
} else {
subscriberinfo[x].style.display = 'none';
}
}
}
}
HTML code :
<ul class="options">
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo1');" >Account</a>
</div>
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo2');" >Subscriber Options</a>
</div>
</ul>
<!-- options -->
<div class="subscriberinfo" id="subscriberinfo1">Div #1</div>
<!-- subscriberinfo1 -->
<div class="subscriberinfo" id="subscriberinfo2" style="display: none;">Div #2</div>

Instead of getAttribute("class") have you tried className?
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].className; // <-- Here is the change
if (name == 'subscriberinfo') {
subscriberinfo[x].style.display =
(subscriberinfo[x].id == thechosenone) ? 'block' : 'none';
}
}
}

Can not get the javascript "show hide" div code to work

I CANNOT use jQuery on this project (client policy).
My html code is:
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript:toggle();">show answer</a>
Javascript code is:
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
I cannot get this code to work.
Any suggestions to resolving this?

Here you need to pass two references to your toggle function, one to the target, and one to itself:
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript://" onclick="toggle('dvAnswer<%#Eval("num")%>',this);">show answer</a>
(plus, it's is good practice to use onclick, not href for inline javascript)
Then pass these references to your function:
function toggle(target,me) {
var ele = document.getElementById(target);
var text = me
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}

The ID of your element is not toggleText and I don't see an displayText element either.

First your div doesn't have id="toggleText" and no id="displayText"
so what you need to do is create small algorithm for that
function toggle(lnk) {
var num = lnk.getAttribute('id').toString().replace('btn','');
var ele = document.getElementById('dvAnswer'+num);
if(ele.style.display == "block") {
ele.style.display = "none";
lnk.innerHTML = "show";
}
else {
ele.style.display = "block";
lnk.innerHTML = "hide";
}
}
and your html should look like this
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" onclick="toggle(this); return false;" href="#">show answer</a>

It appears you are calling elements by the wrong IDs. In your HTML, I do not see 'toggleText' or 'displayText' IDs for any of your elements.
The ID looks dynamic from your example. Perhaps just pass the object reference in your function:
function toggle(objRef) {
var ele = document.getElementById(objRef);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
And HTML of:
<a id="btn<%#Eval("num")%>" href="javascript:toggle("dvAnswer<%#Eval("num")%>");">show answer</a>

Probably your id's in html are not the same as requested by javascript ? This "should" work
<div style="display:none" id="toggleText" class="TextFontBold">A:<%#Eval("answer") %></div>
<a id="displayText" href="javascript:toggle();">show answer</a>