I have this HTML:
<body>
<div id="content-container" style="display:none">
<div>John</div>
</div>
<div id="verifying">
<div id="message">Verified</div>
</div>
</body>
And this Javascript:
var body = document.body;
var signup = document.getElementById("content-container");
setTimeout(function(){
body.removeChild('verifying');
signup.style.display = "block";
}, 5000);
I am trying to remove <div id="verifying"> and show <div id="content-container"> after 5 seconds, but for some reason it is not working. Any idea why? I am loading the script after the page loads so that is not the problem.
You need to pass an element reference to removeChild, not a string:
body.removeChild(document.getElementById('verifying'));
You could also just hide it:
document.getElementById('verifying').style.display = "none";
your removeChild needs to get an element, not a string
var body = document.body;
var signup = document.getElementById("content-container");
setTimeout(function(){
body.removeChild(document.getElementById('verifying'));
signup.style.display = "block";
}, 5000);
to remove you can use (as stated) removeChild:
var x = document.getElementById('elementid');
x.parentNode.removeChild(x);
And to hide an element:
var x = document.getElementById('elementid');
x.style.display="none";
EDIT:
oh and if you want it hidden but not taken "out of flow", use this:
var x = document.getElementById('elementid');
x.style.visibility="hidden";
Related
I am trying to write some code and I have one issue. Basically I am trying to write some statements (ifs, else etc) and I need to access some <p> elements from different <div> sections.
<body>
//works with the one below = changes its value from x to 10
<p id="one" class = "class">x</p>
<script type="text/javascript">
var time = new Date().getHours();
if (time < 20) {
document.getElementById("one").innerHTML = "10";
document.getElementById("two").innerHTML = "10";
}
</script>
<div class="green2">
<p id ="two" class="class" >x</p>
//with this one nothing happens
</div>
I guess it doesn't reach the actual element with id two so how can I handle it?
Your script is being loaded before the two, you should put your script tag always at the very bottom of your body tags (inside them), so that all your content will be loaded first, only then your script.
To expand on Pedro's answer, you can also use jQuery and wrap everything in a document.ready function:
$(document).ready(function(){
var time = new Date().getHours();
if (time < 20) {
document.getElementById("one").innerHTML = "10";
document.getElementById("two").innerHTML = "10";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="one" class = "class" >x</p>
<div class="green2">
<p id ="two" class="class" >x</p>
</div>
This way you can have the JavaScript appear anywhere on the page.
Alternatively, you can add an event listener such as jQuery's .ready() or javascript's document.onDOMContentLoaded or window.onload events. Then you may place the script where you like and the function will only be executed when the page is ready.
Simply wrap your code in the listener function like such:
<p id="one" class = "class" >x</p>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
var time = new Date().getHours();
if (time < 20) {
document.getElementById("one").innerHTML = "10";
document.getElementById("two").innerHTML = "10";
}
});
</script>
<div class="green2">
<p id ="two" class="class" >x</p>
</div>
window.onload = function(){
var about2 = document.getElementById("about");
about2.addEventListener("click",about);
}
function about(){
var divabout = document.getElementById("aboutme");
if(divabout.style.display == "none"){
divabout.style.display = "flex";
divabout.style.justifyContent ="center";
}else{
divabout.style.display ="none";
}
}
please tell me the reason why i have to click twice to run this function .And how to fix pls . many thanks .
i just set display:none for 1 div tag in css , and i want to change display attributes .
Because you haven't set any dislplay property to your HTML by default.
That's why On first click javascript sets everything it needs. then started working from 2nd click.
Here is your code, where you dind't add style in html
<div id="about">Hello</div>
<div id="aboutme">About Me</div>
And Here if I fix/add this style="display:flex;justify-content: center;" in your about me like this
<div id="about">Hello</div>
<div id="aboutme" style="display:flex;justify-content: center;">About Me</div>
Now you can check you need only one click to run
window.onload = function() {
var about2 = document.getElementById("about");
about2.addEventListener("click", about);
}
function about() {
var divabout = document.getElementById("aboutme");
if (divabout.style.display == "none") {
divabout.style.display = "flex";
divabout.style.justifyContent = "center";
} else {
divabout.style.display = "none";
}
}
<div id="about">Hello</div>
<div id="aboutme" style="display:flex;justify-content: center;">OK About Me</div>
resultTable is initially hidden. When play button is clicked, the game will run and it will display the finalscore inside the hidden content. I need a function to display the finalscore. Currently the showResult function I have is not working (obviously)
I deleted unnecessary contents because the whole thing is a little big and messy. Hope the code still makes sense.
<body onload="loadGame()">
<div>
<button onclick="playButton()" id="play">Play</button>
</div>
<div id="resultTable" >
<span id="result"></p>
</div>
<script>
function loadGame(){
var hideResult = document.getElementById("resultTable");
hideResult.style.display = "none";
}
function playButton(){
playGame();
showResult();
}
function playGame(){
/*Some code here*/
document.getElementbyId("result").innerHTML = "finalscore";
}
function showResult(){
var show = document.getElementById("resultTable"); //fixed.
show.style.display = "block";
}
</script>
</body>
Change the way you are finding the element to set its display as block or none. You are using the "getElementsByClassName" method, but there is no element with such classname in the DOM.
Moreover, the "getElementsByClassName" will return you an array of all the elements, if found, in the DOM and you have to loop through the array to access it.
function showResult(){
document.getElementById("resultTable").style.display = "block";
}
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';
}
I'm pretty new to javascript and programming and have run into a brick wall with my project. I have a div which contains the javascript to embed a quicktime player, when the page is first loaded no .mov file is pointed at by the page so a placeholder div is 'unhidden' and the player div is set to style.display = 'none'.
So far so good, the user then enters the name of the new movie, the placeholder div is hidden and the player div is unhidden. My problem is that the javascript in the player div didn't run when the div was made visible, if I make the script for the player into a seperate function then call it when the player div is unhidden then the player runs full screen and not in the div.
I've tried using jquery to add the javascript into the div after the div is made visible but can't seem to get $("#player").load(somescript) or $("#player").html(htmlwithjavain) to add the script.
I know the player div contenst can be changed as I can use $("#player").empty(); and $("#player").html(); to manipulate it.
Thanks for reading, hope you can help
Here's the relevant code:-
<html>
<head>
<title>Browse Media Player</title>
<link rel="stylesheet" type="text/css" href="CSS/browser.css" />
<script type="text/javascript">
<!--
var userinterrupt=false;
var runonce=false;
var currentfile;
var basemediapath = "http://10.255.10.71/IsilonBrowse/movfiles/";
var playerheight = 750;
var playerwidth = 900;
var currenttc;
var basetime;
var baseduration;
var currentduration = "no tc available";
var tcoffset = 35990;
var playspeed = 1;
var boolisplaying=true;
var boolonslide=false;
//function to fire off other methods when the DOM is loaded
//Use in place of body onload, using jquery library
//
$(document).ready(function()
{
//showEvents('jquery running');
showhideplayer(null);
});
//-->
</script>
</head>
<body onload="forceslider(); timecode()">
<div class="container">
<div id="timecode_container">
<div class="tc_overlay"></div>
<div id="timecode" class="timecode"></div>
</div>
<div id="player" class="playerdiv" style="display:none;">
**javascript for player goes here...**
</div>
<div id="noclipoverlay" class="playerdiv" style="display:none;">
<p>No media loaded...
</div>
<div id="noclipoverlay2" class="playerdiv" style="display:none;">
<p>loading media....
</div>
</div>
<div id="loadstatus"></div>
<div id="alerts"></div>
</body>
</html>
Now the mainstuff.js file which should add the javascript code:-
//function to switch the player div and mask div is no media file is
//defined in the 'currentfile' variable
//
function showhideplayer(state)
{
if (!currentfile)
{
showEvents('wtf no media');
document.getElementById("player").style.display = 'none';
document.getElementById("noclipoverlay").style.display = 'block';
}
else if (currentfile)
{
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
showEvents('valid media file');
}
}
//end of showhideplayer
//function to change movie files, note SetResetPropertiesOnReload must be set to false
//otherwise the B'stard player will default all attributes when setURL runs
//
function changemovie(newmovie)
{
oldfile = currentfile;
if (newmovie == currentfile)
{
showEvents('same file requested so no action taken');
return;
}
if (newmovie != currentfile)
{
showEvents('changing movie');
//switch the divs around to hide the 'no media slide'
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
}
showEvents('movie changed to: '+newmovie);
currentfile=newmovie;
if (!oldfile)
{
$("#player").empty();
showEvents('the old media file was blank');
$("#player").load("/path/loadplayer.js");
}
document.movie1.Stop();
document.movie1.SetResetPropertiesOnReload(false);
document.movie1.SetURL(currentfile);
//showEvents('movie changed to: '+newmovie);
if (boolisplaying)
{
document.movie1.Play();
}
}
[EDIT] and here's the contents of loadplayer.js:-
var movie1 = QT_WriteOBJECT(
currentfile, playerwidth, playerheight, "",
"controller","false",
"obj#id", "movie1",
"emb#id","qt_movie1",
"postdomevents","True",
"emb#NAME","movie1",
"enablejavascript","true",
"autoplay","true",
"scale","aspect",
"pluginspage","http://www.apple.com/quicktime/download/"
);
Without knowing the content of your loadplayer.js file, it will be difficult to give you a solution.
For example, if the script attempts to do a document.write() after the page has loaded, it will create a new page, overwriting the current page. Is that what you mean when you say the quicktime movie is running full screen?
Also it is generally not a good idea to load a SCRIPT element and insert it as HTML. When you add HTML to the page, jQuery finds all the SCRIPT elements and evaluates them in a global context, which might give you unexpected results.
Use QT_GenerateOBJECTText_XHTML or QT_GenerateOBJECTText from AC_QuickTime.js if you'd like to return a string.