A JS newbie question:
I would like to inactivate a part of a html code (which I manually would do by <!-- ... -->) by Javascript, depending on a numeric variable (which I extract from the file name): If var > 10 do inactivate the code.
EDITED:
If possible only simple Javascript!
A demo html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var param = 10;
</script>
</head>
<body>
<p>Paragraph One</p>
<p>Beginning of the part to be removed if param > 10</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
<p>Paragraph Ten</p>
</body>
</html>
Put everything you want to remove/hide inside one div with a specific class or id, then add an if condition and hide or remove the required div once the condition is true.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<p>Paragraph One</p>
<div id="to_remove">
<p>Beginning of the part to be removed</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
</div>
<p>Paragraph Ten</p>
<script type="text/javascript">
var param = 11;
if(param >10) document.getElementById("to_remove").remove();
//OR if you want to show the div later use this:
//if(param>10) document.getElementById("to_remove").style.display = 'none';
</script>
</body>
</html>
You can remove the elements from the DOM, e.g. by using removeChild():
document.getElementById('div').removeChild(document.getElementById('p2'));
<div id="div">
<p id="p1">Paragraph one</p>
<p id="p2">Paragraph two</p>
</div>
You can use css property for the same, add two classes active and inactive with css .active{display:block} and .inactive{display:none}.now you can use jquery to add and remove active and inactive classes according to your condition.like in jquery you can write
if(var > 10){
$("div").addClass('inactive');
}else{
$("div").removeClass('inactive');
}
A CSS + jQuery way of achieving this could be by adding the class disabled:
if(condition) {
var element = document.getElementByID('#sample_ID');
element.addClass("disabled");
}
This is assuming that you contain the code to be disabled in the <div id="sample_ID">
If you just want to hide it, you can do this by using CSS.
E.g. to hide <div id="myDiv">Bla</div> you'd use this:
var element = document.getElementById("myDiv");
element.style.display = "none";
And if you want to show it again at some point:
element.style.display = "block";
Live example:
function hideDiv() {
var element = document.getElementById("myDiv");
element.style.display = "none";
}
function showDiv() {
var element = document.getElementById("myDiv");
element.style.display = "block";
}
#myDiv {
border: solid 1px green
}
<button onclick="hideDiv()">Hide</button>
<button onclick="showDiv()">Show</button>
<br/>
<div id="myDiv">Bla</div>
Related
I am trying to modify the body section based on the tagName, using JavaScript. But my webpage is loading infinitely when I use insertBefore() method to insert a tag before the <h1> tag. This problem is not happening when I try to insert before some other elements. I am new to JS, please help me.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Para 1</p>
<p>Para 2</p>
<h1 id="head1">Para 3</h1>
<p id="parax"></p>
<div id="div1">
<p>Hello</p>
</div>
<ul id="mylist1">
<li>Script</li>
<li>deep learning</li>
<li>software testing</li>
<li>Python programming</li>
<li>Database systems</li>
</ul>
<p id="firstp">I was supposed to be first.</p>
<input type="button" onclick="myFunc()">
</body>
<script type="text/javascript">
var cn=document.body.children;
for(var i=0;i<cn.length;i++){
if(cn[i].tagName=="DIV"){
var h1 = document.createElement("H1");
var text = document.createTextNode("h1 tag inserted");
h1.appendChild(text);
cn[i].appendChild(h1);
}
else if(cn[i].tagName=="UL"){
var lis= cn[i].childNodes;
for(var j=0;j<lis.length;j++){
if(lis[j].innerHTML=="Python programming")
lis[j].innerHTML="machine learning";
}
}
else if(cn[i].tagName=="H1"){
var p=document.createElement("P");
var text=document.createTextNode("New para inserted before");
p.appendChild(text);
document.body.insertBefore(p,cn[i]);
}
else
document.write();
}
</script>
</html>
At this line i am facing problem (I think so) :
document.body.insertBefore(p,cn[i]);
Because you with this line code:
document.body.insertBefore(p,cn[i]);
increase number of document.body.children and every time you insert child you and number of body children and you never not hit last index.
please add this to see:
document.body.insertBefore(p,cn[i]);
alert(document.body.children.length); // add this line after insertBefore
see every alert show the number of document.body.children was increase
Thanks to Mr #foad , I got the answer for my question. Actually the insertBefore() method is inside a for loop. So in every iteration, a new tag is added to the body and the length of the body increases by 1. This caused the infinite loading.
The correction is to add a break statement after the insertBefore method:
document.body.insertBefore(p,cn[i]);
break;
This terminates the loop after adding the <p> tag before <h1> tag.
What is the javascript in order to only display posts 3 & 4 in order???
Also I need it be dynamic so if I put a 5th post it will only display 4th and 5th posts... I was thinking about something like a date function or a simple incrementor but can't seem to figure it out. I'm new to javascript and have been trying different things but no avail... Thanks in advance...
<!DOCTYPE html>
<html>
<body>
<div id="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div id="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div id="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div id="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>
You dont need script for that. You can do it with CSS.. I have changed your html little bit (made posts-div class in html).
.posts-div{
display:none;
}
.posts-div:nth-child(-n+2) {
display:block;
}
<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post5</h1>
<p class="post">post5</p>
</div>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>
You can test it on JSfiddle as well.. https://jsfiddle.net/nimittshah/b5eL3ykx/6/
$('.posts-div:gt(1)').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</body>
Try this:
<script>
document.addEventListener("DOMContentLoaded", function () {
var allPosts = document.querySelectorAll(".posts-div");
// This is the number of posts you want displayed
var numberOfPostsToShow = 2;
for (var i = 0; i < allPosts.length; i++) {
if(i > numberOfPostsToShow - 1) {
allPosts[i].style.display = "none";
}
}
});
</script>
This way you will choose how many posts you want to be shown with the numberOfPostsToShow variable.
Let me know if this worked. Regards.
The way I interpreted your question, you need a way to:
show only the first n elements;
add new elements to the top of the list of posts, dynamically;
when you add them, update the visible elements.
Assuming a slightly modified version of your code, which corrects the id/class issue and adds a container for all the posts (this time with a proper id):
<!DOCTYPE html>
<html>
<body>
<div id="posts-container">
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</div>
<script>
// ???
</script>
</body>
</html>
this code will do the trick and manage both the addition and the updates to the visibility of the posts:
function showOnly(visible, query){
var elements = document.querySelectorAll(query);
for (var i = 0; i < elements.length; i++){
if (i < visible - 1){
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}
function publishPost(element, visible){
showOnly(visible, '#posts-container .posts-div')
var elements = document.querySelectorAll('#posts-container .posts-div');
element.style.display = 'block';
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}
}
The showOnly function (to be called with the number of elements to be shown and the string that identifies the elements with querySelectorAll) will only make visible the first n elements identified by the string. You can use it independently of the rest of the code if needed.
The publishPost function, on the other hand, is strictly dependent on the modified html above (to use it elsewhere you will need to adjust the strings fed to querySelector and querySelectorAll). It takes the element to be published as the first argument, the number of elements that need to be visible as the second. Then it updates the list of posts prepending the new one to it, and it also updates which posts are visible.
This is a code sample that uses it:
var elDiv = document.createElement('div');
var elH1 = document.createElement('h1');
var elP = document.createElement('p');
elDiv.classList = 'posts-div';
elH1.classList = 'post-title';
elP.classList = 'post';
elH1.innerText = 'some title';
elP.innerText = 'some text for the post';
elDiv.appendChild(elH1).appendChild(elP);
publishPost(elDiv, 2);
showOnly
This function starts by getting a list of the elements whose visibility must be managed:
var elements = document.querySelectorAll(query);
then it loops through the list and examines each element:
for (var i = 0; i < elements.length; i++){
if it has to be visible, it sets the style.display property to 'block':
if (i < visible){
elements[i].style.display = 'block';
otherwise it sets it to 'hidden':
else {
elements[i].style.display = 'none';
publishPost
This function starts by showing only n-1 elements (because it will need to add a new, visible element to the top of the list):
showOnly(visible - 1, '#posts-container .posts-div')
then it retrieve the current posts:
var elements = document.querySelector('#posts-container .posts-div');
it makes the new element visible:
element.style.display = 'block';
finally, it adds the element to the top of the list (the different syntax depends on wether the list is empty):
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}
I'm trying to build a page where I can post a series of long text (in this particular case, song lyrics). I've followed the code from site doing similar things, but cant seem to make it work. any suggestions? My code is posted below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css">
<script>
<!--
function toggle(ID) {
var x = document.getElementById(ID); //get lyrics element
var xdisplay = x.style.display; // get CSS display settings
//Change CSS display setting
if (xdisplay == none) {
xdisplay = "block"
}
else {
xdisplay = "none"
}
-->
</script>
</head>
<body>
<button onclick="toggle(l1)" id="lyric1">Click Here for Lyrics</button><br>
<button onclick="toggle(l2)" id="lyric2">Click Here for Lyrics</button><br>
<button onclick="toggle(l3)" id="lyric3">Click Here for Lyrics</button><br>
<p class=lyric id=l1> Lyrics 1 </p>
<p class=lyric id=l2> Lyrics 2 </p>
<p class=lyric id=l3> Lyrics 3 </p>
</body>
</html>
CSS:
.lyric {
display: none;
}
You're missing quotations all around your code.
You're not passing valid id's, you're passing variable names instead of strings.
To get a css rule that was set in css, use getComputedStyle instead of style.
To change the style, don't use the string that holds the current one, instead use the style attribute.
function toggle(ID) {
var x = document.getElementById(ID); //get lyrics element
var xdisplay = getComputedStyle(x, null).display; // get CSS display settings
//Change CSS display setting
//Change x.style.display, not xdisplay
if (xdisplay == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.lyric {
display: none;
}
<button onclick="toggle('l1')" id="lyric1">Click Here for Lyrics</button><br> <!-- changed l1 to 'l1' -->
<button onclick="toggle('l2')" id="lyric2">Click Here for Lyrics</button><br> <!-- changed l2 to 'l2' -->
<button onclick="toggle('l3')" id="lyric3">Click Here for Lyrics</button><br> <!-- changed l3 to 'l3' -->
<p class="lyric" id="l1"> Lyrics 1 </p> <!-- changed l1 to "l1" and lyric to "lyric" -->
<p class="lyric" id="l2"> Lyrics 2 </p> <!-- changed l2 to "l2" and lyric to "lyric" -->
<p class="lyric" id="l3"> Lyrics 3 </p> <!-- changed l3 to "l3" and lyric to "lyric" -->
You are copying the value of x.style.display to xdisplay, and then setting xdisplay to other values. Instead, try:
if (xdisplay == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
You are using wrong codes, as you missed some quotation marks and a curly bracket ,
First solve your syntax errors then , try this js code it works fine:
function toggle(ID) {
var x = document.getElementById(ID);
var xdisplay = x.getAttribute("class");
if (xdisplay) {
x.removeAttribute("class");
}
else {
x.setAttribute("class", "lyric");
}
}
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
When I click on the div, it should open. When I click again, it should close the div. Please help me on this.
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById(show).style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById(show).style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You're missing the quotes for the id argument for getElementById()
document.getElementById('show').style.visibility = "hidden";
Also the id attribute name is missing on the <div>
<div="show">
Should be this:
<div id="show">
jsFiddle
Try this:
HTML
<button id="myButton">Show DIV</button>
<div id="show" class="hidden">
<p>it is okay </p>
</div>
CSS
.hidden
{
display:none;
}
JS
$('#myButton').click(function () {
$("#show").slideToggle();
$(this).text($(this).text() == 'Show DIV' ? 'Hide DIV' : 'Show DIV');
return false;
});
Here's the jsfiddle: http://jsfiddle.net/mgrcic/RbjLJ/
When you are referring to
document.getElementById(show).style.visibility
The show refers to a variable, but you are trying to get it as a string, so you should get it quoted
document.getElementById('show').style.visibility
You are writing the div wrong. You should put "show" as the value of your Id attribute:
<div id="show"> </div>
If you use jQuery (you tagged it), why not use jQuery to get things done more cleanly, in an unobtrusive way ?
$(function(){
var bool = 0;
$("input[type='button']").click(function(){
if(bool ==0)
{
bool =1
$("#show").hide();
}
else
{
bool =0
$("#show").show();
}
});
});
Here is the sample: http://jsfiddle.net/sHsuh/10/
Note that this script will bind the function to all button elements in your page. So I would be more specific by adding an Id to my Button and bind with that:
$("#myButtonId").click(function(){
//code goes here
});
Here is the solution, you couldn't get your element without specifying div id="theid":
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
var elem = document.getElementById('show');
console.log(elem);
if(bool==1){
bool=0;
elem.style.visibility = "hidden";
}else if(bool==0){
bool=1;
elem.style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You have made some mistakes:
<div="show"> is wrong. The correct way is <div id="show">.
If you want show and hide means, first set your div's CSS to visibility:hidden;.
You are missing an apostrophe in document.getElementById('show');.
Try this:
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById('show').style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById('show').style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show" style=" visibility:hidden;">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>