So, to put this as simply as I can..
I have multiple divs with text in them as shown:
<div id=1 style="position:relative"><font color=color>Hello Hello</font></div>
<div id=2 style="position:relative"><font color=color>Hello Goodbye</font></div>
<div id=3 style="position:relative"><font color=color>Goodbye Goodbye</font></div>
I would like to have a search box somewhere on my page that I can input strings into, for example: "Hello" hides the last div, "Hello Hello" hides the last two divs, "Hello Goodbye" hides the first and last, and "Goodbye Goodbye" hides the first two divs. The input does not have to be case sensative, but I'd prefer the order you input the strings to matter.
Thanks in advance!
-Starletts
PS: I'd prefer to stay out of JQuery if possible.
HTML:
<input type="text" id="my_input">
Javascript:
document.getElementById('my_input').addEventListener('keyup', function () {
var search_for = this.value;
var divs = document.getElementsByTagName('div');
Array.prototype.forEach.call(divs, function (div) {
if (search_for && div.textContent.toLowerCase().indexOf(search_for.toLowerCase()) > -1) {
div.style.display = 'none'; // to hide
}
else {
div.style.display = 'block';
}
});
});
In pure W3C specification:
var forEach = Array.prototype.forEach;
document.getElementById('inputID').addEventListener('keyup', function( event ) {
forEach.call(document.querySelectorAll('div'), function( div ) {
if( div.textContent.split(/\s+/).indexOf( event.target.value ) > -1 ) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
});
}, false);
Demo: http://jsfiddle.net/FA2nj/
Related
I think this is very easy, but I just can't seem to twig it at the moment. I want to use a JavaScript function to set the visibility of an HTML tag.
I realise the below is wrong as hidden doesn't take a boolean. I'm just struggling to click what the easiest way to do it is?
So I have some script like this:
<script>
function evaluateBoolean() {
if (location.hostname.indexOf("someval" > 0) {
return true;
} else {
return false;
}
}
</script>
And I wanted to use it something like this:
<div hidden="evaluateBoolean()">
this will be shown or displayed depending on the JavaScript boolean
</div>
I would recommend doing it by altering the display style in the JavaScript code.
const el = document.getElementById('container');
const btn = document.getElementById('btn');
btn.addEventListener('click', function handleClick() {
if (el.style.display === 'none') {
el.style.display = 'block';
btn.textContent = 'Hide element';
} else {
el.style.display = 'none';
btn.textContent = 'Show element';
}
});
You have a div with id: myDIV
<div id="myDIV" class="card-header">
Hello World
</div>
You then call this Javascript function to show the element:
function showDiv() {
document.getElementById('myDIV').style.display = "block";
}
and this one to hide it:
function hideDiv() {
document.getElementById('myDIV').style.display = "none";
}
Note, that you can hide a div by:
<div id="myDIV" class="card-header" style="display:none">
Hello World
</div>
And then call the function to show it.
You trigger must be outside of the element which you hide. because if hided you cant even clicked. The js function classList toggle would be good.
function evaluateBoolean() {
const d = document.querySelector('.w div');
d.classList.toggle('hide');
}
.w {
height: 40px;
background: yellow;
}
.hide {
display: none;
}
<div class="w" onclick="evaluateBoolean()">
<div> this will be shown or displayed depending on the javascript boolean </div>
</div>
You can't explicitly run js in your html, if you aren't using any framework like angular or react, where property binding is allowed.
For achieving your intentions with js you can use this approch:
Add to your div an id:
<div id="myDiv"> Toggled div </div>
In your js script modify your function evaluateBoleean() to show/hide the element:
function evaluateBoolean() {
const div = document.querySelector("#myDiv");
if (location.hostname.indexOf("someval" > 0) {
div.hidden = true;
} else {
div.hidden = false;
}
There's a very easy option:-->
having a blank text
firsly replace the html code with this:-->
<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>
and put js code:-->
document.getElementById("ThingToBeHidden").innerHTML = "";
So you have assigned the div to have it's special id which none other element has.
So now the js code selects the div with that id and then sets the context of it to blank.
If you want the text to appear again, the js code is:-->
document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";
You can hide an element in several ways (using jQuery):
const o = $(cssSelectorForElementToStyle);
$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');
Here using vanilla JavaScript:
const o = document.querySelector(cssSelectorForElementToStyle);
o.style.display = 'none';
o.classList.add('css_class_for_hiding_stuff');
But your question doesn't point out exactly when you are going to make this check. So let's assume you are going to check the boolean value once when the page is loaded and hide or show a given element according to that value:
$(document).ready(
() => {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
$('#elementWithThisId').css('display', 'none');
}
}
);
Without jQuery:
document.addEventListener("DOMContentLoaded", function() {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
document.querySelector('#elementWithThisId').style.display = 'none';
}
});
I need to delete all children of a div after clicking enter.
There is a div and event listener below.
<div id = "area" contenteditable="true"></div>
document.onreadystatechange = function(){
if(document.readyState == 'complete'){
document.getElementById("area").addEventListener("keypress" , public_mode);
}
function public_mode(){
var key = window.event.keyCode;
if (key == 13) {
sendMessage();
}
}
function sendMessage(){
var area = document.getElementById("area");
while (area.firstChild) {
area.removeChild(area.firstChild);
}
}
As you can see the contenteditable elements is added an element in according with clicking enter - it depends on browser what element will be added.In my case I use chrome and here are inserted div.
So, the result after clicking enter on the area but without removing
<div id = "area" contenteditable = "true">
Sckoriy
<div></div>
</div>
and , with removing
<div id = "area" contenteditable = "true">
<div></div>
<div></div>
</div>
But , the needed result is
<div id = "area" contenteditable = "true">
//Empty
</div>
The code mostly works, however there were two main issues.
keyCode is deprecated. you should be using key which turns the syntax of searching for a key into looking for a string. This means instead of 13 you just check to see if key is Enter.
Secondly you need to pass the event to your public_mode function so that you can read the key that has been pressed when the event occurs. You also need to use preventDefault to prevent it from adding a new line after removing everything from the original contentEditable area when it does detect Enter
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
document.getElementById("area").addEventListener("keypress", public_mode);
}
function public_mode(event) {
var key = event.key;
if (key === "Enter") {
event.preventDefault();
sendMessage();
}
}
function sendMessage() {
var area = document.getElementById("area");
while (area.firstChild) area.removeChild(area.firstChild);
}
}
#area {
min-width: 100vw;
border: 1px solid black;
}
<div id="area" contenteditable="true"></div>
You could just set the innerHTML proprety to an empty string;
area.innerHTML = '';
target the dom by id
var s = document.getElementById("area");
save the number of childrens
var num = s.children.length;
and remove the num of childs of element
for(var i=0;i<num;i++){
s.children[0].remove()
}
and inner for some thext
s.innerHTML = "";
Pass the key event as an argument to your function.
Also, if you do not want the newline entered in your div, you can prevent the event from continuing with event.preventDefault().
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
const area = document.getElementById('area')
area.addEventListener('keypress', public_mode);
area.focus();
}
}
function public_mode(event) {
if (window.event.keyCode == 13) {
sendMessage();
event.preventDefault();
}
}
function sendMessage() {
const area = document.getElementById('area');
while (area.firstChild) {
area.removeChild(area.firstChild);
}
}
<div id="area" contenteditable="true">Press Enter to erase me!</div>
I have this button in html
<tr><td>
<button class="btn cmt_list" name="cmtList" id="cmt-'.$row['uid'].'"value = "hide/show"/>Show</button>
</td></tr>
Upon clicking, I'd like to show/hide the div. I would like the div to be hidden by default.
<div class='commentbox' id='comments-{$row['uid']}'></div>
As of now, my javascript looks like this
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
You don't need to write your own toggle function. You can do it easily with the jQuery toggle function.
Here's the HTML. Setting display: none will make it hidden by default.
<div id="myDiv" style="display: none">
Hello this is my div
</div>
<button id="myBtn">Toggle Div</button>
Here's the jQuery.
$('#myBtn').click(function() {
$('#myDiv').toggle();
});
Working demo: http://jsfiddle.net/eL2AU/
You can also do it with JavaScript alone, like so:
var btn = document.getElementById('myBtn');
btn.onclick = function() {
var d = document.getElementById('myDiv');
if (d.style.display === "none") {
d.style.display = "block";
} else {
d.style.display = "none";
}
};
Demo: http://jsfiddle.net/eL2AU/1/
You are passing the wrong ID to document.getElementById(). Your div has ID comments-{$row['uid']} but you are looking for an element with ID of newpost.
If your issue is hiding the div before it is clicked then put this before your function
$('#myDiv').hide();
I have used a javascript to show div by onclick but when i click outside div i want to hide the div.
after more searches, i have found an function, and it works perfectly
but there is an issue, the code requires double click for first time, to show the dive
my code:
<script>
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}
</script>
<style>#tools{display:none;}</style>
<div id="tools">Hidden div</div>
show/hide
This is my full code, you can test it on your computer.
The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )
Try this - http://jsfiddle.net/JjChY/1/
Change
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
to
el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
Use this:
el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';
It should work.
The problem is that el.style.display only reads from the element's inline styles, not its CSS.
So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.
You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:
function getStyle(x, styleProp) {
if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
return y;
}
// click on the div
function toggle(e, id) {
var el = document.getElementById(id);
var display = el.style.display || getStyle(el, 'display');
el.style.display = (display == 'none') ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if (toggle.el) {
toggle.el.style.display = 'none';
}
}
DEMO: http://jsfiddle.net/JjChY/2/
Your code is a little convoluted. It can be written much simpler:
<script>
var toggle = function(id) {
var element = document.getElementById(id);
element.className = element.className === 'hidden' ? '' : 'hidden';
return false;
};
</script>
<style>
.hidden {
display: none;
}
</style>
<div id="tools" class="hidden">Hidden div</div>
show/hide
If you have jQuery, you could do something like this for the click outside.
First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.
$('#tools').hover( function() {
$('#tools').addClass("inside");
},
function() {
$('#tools').removeClass("inside");
});
Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.
$("html").click( function() {
$("#tools").not(".inside").each( function() {
$("#tools").hide();
});
});
I have a link:
<a id="nextBut" href="somelink" class="button"><span>Next Step</span></a>
And I can control the the <span>Next step</span> part with innerHTML but how could I leave the <span> alone and just change the 'Next step' part?
For example:
var NextButJar = document.getElementById('nextBut');
NextButJar.disabled = true;
NextButJar.style.opacity = .5;
NextButJar.span.innerHTML = 'Read all tabs to continue';
I also have:
NextButJar.onClick = handleClick;
function handleClick(){
if (this.disabled == true) {
alert("Please view all tabs first!");
return;
} else {
alert("allowed to run");
}
};
Which I can't seem to get working either...
UPDATE
NextButJar.addEvent("click", function() {
if (this.disabled == true) {
alert("Please view all tabs first!");
return;
}
});
Works in everything but Explorer...
NextButJar.firstChild.innerHTML = "foo";
Will set the HTML in the first child element. If you might also have other content in the node, do something along the lines of
NextButJar.getElementsByTagName("span")[0].innerHTML = "foo";
To use innerHTML give id to the span and change ite innerHTML
<a id="nextBut" href="somelink" class="button"><span id="nextButSpan">Next Step</span></a>