I have some html like this:
<html>
<body>
<div>
<p>Something</p>
</div>
<div class="hide" id="show">Protected</div>
</body>
</html>
I need to display or hide/show an element via JavaScipt if html has "Something" in its text. How can I do that? I need this for my Wordpress page.
Without using jQuery:
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("Something")!==-1;
if (hasText) {
document.getElementById("show").style.display = 'block';
} else {
document.getElementById("show").style.display = 'none';
}
Related
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>
I'm trying to write a form in HTML and JS that shows at the end the completed form uneditable for confirmation.
I have to replace the contents of the page without refresh and/or redirection.
My code is:
function F() {
if(...){
//Empty fields [...]
}else{
var el = document.getElementById("formID"); //Form da sostituire
el.innerHTML = "NEW CONTENT";
}
}
The problem is that the "new content" is really long and is very uncomfortable to write it as a string. Are there any alternatives to innerHTML for this situation?
Use the <template> tag. Put the content you want inside a <template> tag, give it an ID, and then in JavaScript simply copy the content of the template inside the form.
HTML:
<template id="form-template">
NEW CONTENT
</template>
JavaScript:
function F() {
if(...){
//Empty fields [...]
}else{
var el = document.getElementById("formID"); //Form da sostituire
el.innerHTML = document.getElementById("form-template").innerHTML;
}
}
See live example in the following snippet:
document.querySelector("button").addEventListener("click", event => {
document.getElementById("content").innerHTML = document.getElementById("my-template").innerHTML
})
<template id="my-template">
<h1>Hello template!</h1>
</template>
<button type="button">Try it!</button>
<div id="content"></div>
For problem of <template> browser support you could use any element as placeholder, like this :
document.querySelector("button").addEventListener("click", event => {
document.getElementById("content").innerHTML = document.getElementById("my-template").innerHTML
})
.template{
display:none;
}
<div id="my-template" class="template">
<h1>Hello template!</h1>
</div>
<button type="button">Try it!</button>
<div id="content"></div>
Or just give display:none to template element :)
this is the javascript code
<script type="text/javascript">
function divHDVisible(){
var div = document.getElementById('linkHD');
div.style.visibility = 'visible';
}
</script>
and this is the jsp code
<font size="-2">
<%=dataJobs.getID_Harware_Use()%>
</font>
<div class="row" id="linkHD" style="visibility: hidden;">Success</div>
what i want is get the value of <%=dataJobs.getID_Harware_Use()%> inside the div(div id=linkHD)
can any one help me?
Try this:
function divHDVisible(elem) {
var div = document.getElementById('linkHD');
div.style.visibility = 'visible';
div.innerHTML = elem.innerHTML;
}
<font size="-2"><%=dataJobs.getID_Harware_Use()%></font>
<div class="row" id="linkHD" style="visibility: hidden;">Success</div>
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>
I am having a table like:
<table id="toc" class="toc" border="1" summary="Contents">
</table>
in many pages .. All these pages are rendered in a single page.
when I apply the Javascript to delete that using on load. Only one table is deleted and not the others.
I am trying to delete the tables in all the rendering pages using Javascript. How to do this?
Edit :
I myself found the solution
<script type='text/javascript'>
window.onLoad = load();
function load(){var tbl = document.getElementById('toc');
if(tbl) tbl.parentNode.removeChild(tbl);}
</script>
Here's a rough sample
<html>
<head>
<script type="text/javascript">
function removeTable(id)
{
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
</script>
</head>
<body>
<table id="toc" class="toc" border="1" summary="Contents">
<tr><td>This table is going</td></tr>
</table>
<input type="button" onclick="removeTable('toc');" value="Remove!" />
</body>
</html>
Really want to delete the table altogether?
var elem = documenet.getElementById('toc');
if (typeof elem != 'undefined')
{
elem.parentNode.removeChild(elem);
}
You could also hide the table rather than deleting it.
var elem = documenet.getElementById('toc');
elem.style.display = 'none';
If you need it later, you could simply do:
var elem = documenet.getElementById('toc');
elem.style.display = 'block';
<script type="text/javascript">
function deleteTable(){
document.getElementById('div_table').innerHTML="TABLE DELETED"
}
</script>
<div id="div_table">
<table id="toc" class="toc" border="1" summary="Contents">
</table>
</div>
<input type="button" onClick="deleteTable()">
var tbl = document.getElementById(id);
tbl.remove();