I need to get all div elements with "display: none" style and then remove all of these elements. Also i need to select just that divs which are contained in #somecontainer element. Have to do it in RAW javascript. Any idea?
example html:
<table id="listtabletemp">
<thead>
<tr id="theader">
<td id="theaderleft">loolz</td>
</tr>
</thead>
<tbody>
<tr class="" rel="13117025">
<td><div><style>
.ikthgjyhtr{display:none}
.tVOx{display:inline}
</style>
<div style="display:none">crap here</div>
<div></div>
<div></div>
<div style="display:none">crap here</div>
<div class="230">something good</div>
<div class="ikthgjyhtr">crap here</div>
<div style="display:none">crap here</div>
<div class="ikthgjyhtr">crap here</div>
<div style="display: inline">something good</div>something good
<div style="display: inline">something good</div>
<div class="21">something good</div>
<div style="display:none">crap here</div>
<div style="display:none">crap here</div>
<div style="display:none">crap here</div>
<div class="4">something good</div>
<div class="224">something good</div></div>
</td>
</tr>
</tbody>
</table>
Simple, the DOM is your friend:
function removeDivs() {
var container = document.getElementById("somecontainer");
var divs = container.getElementsByTagName("div");
var empty = [];
var getStyle = function(obj, css){
var style = null;
if(obj.currentStyle) {
style = obj.currentStyle[css];
} else if(window.getComputedStyle) {
style = window.getComputedStyle(obj, null).getPropertyValue(css);
}
return(style);
};
for(var i = 0, len = divs.length; i < len; i++) {
var div = divs[i];
if(div && ((div.style.display && div.style.display == "none") || getStyle(div, "display") == "none")) {
empty.push(div);
}
}
for(var i = 0, len = empty.length; i < len; i++) {
var div = empty[i];
div.parentNode.removeChild(div);
}
}
Quick and dirty, here's something to get you started:
http://jsfiddle.net/kttsJ/
var parent = document.getElementById('parent');
var items = parent.getElementsByTagName('DIV');
var hidden = [];
for (var i in items){
if ((items[i]).getAttribute !== undefined){
if ((items[i]).hasAttribute('style')){
if ((/display\:\s*none/gi).test(items[i].getAttribute('style'))){
hidden.push(items[i]);
}
}
}
}
for (var i in hidden){
hidden[i].parentNode.removeChild(hidden[i]);
}
This removes divs with the "display: none" style. I tested it on the OP's example. Note: I added a "some-container" id when testing.
function removeDivs() {
"use strict";
//Some container.
const someContainer = document.getElementById("some-container");
//Divs inside it.
const divsInside = someContainer.querySelectorAll("div");
//Loop, remove div if "display: none".
divsInside.forEach(function (divInside) {
const style = window.getComputedStyle(divInside);
if (style.display === "none") {
someContainer.removeChild(divInside);
}
});
}
removeDivs();
Related
HTML elements are taken from the container. If the parent node has a child, make a button and insert child.id from child in the button. Everything works in the code, but does not want appendChild (h2);
It should look like:
<button id = "parent2"> <h2> child1 </h2> <h2> child2 </h2> </button>
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
</div>
<p id="demo"></p>
var parent = document.getElementById("container").querySelectorAll("*");
for (let i = 0; i < parent.length; i++) {
if(parent[i].hasChildNodes()){
var btn = document.createElement("BUTTON");
btn.id = parent[i].id;
document.getElementById("demo").appendChild(btn);
}
let children = parent[i].childNodes;
for (let i = 0; i < children.length; i++) {
if(children[i]){
var h2 = document.createElement("H2");
h2.innerHTML = children[i].id;
parent[i].appendChild(h2);
}else{}
}
}
There are many mistakes in your code:
This document.getElementById("container").querySelectorAll("*"); does select all children of a container (nested ones too).
You can not nest two loops that iterate over the same variable i.
childNodes does not return only the 3 divs you want, but also all the nodes that represent the spaces/newlines. You need to filter them out, here few possible solutions.
You require h2 tags to be inserted in the button, but you insert them in parent[i]
This should work:
var parent = document
.querySelectorAll("#container > *");
for (let i = 0; i < parent.length; i++) {
if(parent[i].hasChildNodes()) {
var btn = document.createElement("BUTTON");
btn.id = parent[i].id;
document.getElementById("demo").appendChild(btn);
let children = parent[i].childNodes;
for (let j = 0; j < children.length; j++) {
if (children[j].nodeName !== 'DIV') continue;
var h2 = document.createElement("H2");
h2.innerHTML = children[j].id;
btn.appendChild(h2);
}
}
}
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
</div>
<p id="demo"></p>
I'm making a little html-jquery program that generate dynamically a table where on each cell there are an slideshow. The slideshow get the images that you select from a folder inside your computer.
The problem is that when I select the folder the slideshow gets the height to 100vh for each cell with slideshow. I can't understand how prevent that the slideshow grows more than the containing cell.
HTML
<body style="height:100vh;">
<div class="row">
<div class="container-fluid">
Rows: <input id="sRows" type="number" name="" value="2">
Columns: <input id="sCol" type="number" name="" value="2">
<button id="btnGen" type="button" name="button">Generate!</button>
</div>
</div>
<div id="slideshowContiner" class="w3-table-all" >
</div>
</body>
CSS
#slideshowContiner {
table-layout: fixed;
height: 100%;
}
.slider{
max-width:100%;
max-height: 100%;
}
.mySlide{
width:100%;
height:auto;
}
For Javascript code maybe is too long for read, finally the created structure is, inside the #slideshowContiner is something like that:
<div id="slideshowContiner" class="w3-table-all">
<tr></tr>
<td style="background-color:#6a833c">
<input webkitdirectory="" mozdirectory="" msdirectory="" odirectory="" directory="" multiple="" type="file" name="file">
<div class="w3-content w3-section slider" style="">
<img class="mySlide" style="display: none;" src="blob:null/">
<img class="mySlide" style="display: none;" src="blob:null/">
<img class="mySlide" style="display: none;" src="blob:null/">
</div>
</td>
</div>
Jquery (TL:DR;)
$( document ).ready(function() {
var randomColor = function (){
return '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
}
var sliders = []
var myIndex = 0;
function carousel() {
var i;
var slides = elem.children( ".mySlide" ).css("display", "none")
console.log(slides, this);
}
function createSlider(files){
var slider = $('<div class="w3-content w3-section slider" style=""></div>')
for (var i = 0; i < files.length; i++) {
prev = $('<img class="mySlide" style="">').attr("src", URL.createObjectURL(files[i]))
slider.append(prev)
}
sliders.push(slider)
// slider.data("id", inn++)
var myIndex = 0;
slider.data("slideshow", function(){
console.log(myIndex);
var slides = slider.children( ".mySlide" ).css("display", "none")
myIndex++;
if (myIndex > slides.length) {myIndex = 1}
console.log(slides[myIndex]);
$(slides[myIndex-1]).css("display", "block")
setTimeout(slider.data("slideshow"), 2000)
})
return slider
}
var sContainer = $("#slideshowContiner")
var sRows = $("#sRows")
var sCol = $("#sCol")
var btnGen = $("#btnGen")
function genGrid(){
sContainer.html("")
for (var i = 0; i < sRows.val(); i++) {
var newRow = sContainer.append('<tr></tr>')
// var newRow = sContainer.append('<div class="row flex-fill d-flex " style="border: 1px solid;"></div>')
for (var x = 0; x < sCol.val(); x++) {
var newCol = $('<td style="background-color:'+randomColor()+'"></td>')
newRow.append(newCol);
var input = $('<input webkitdirectory mozdirectory msdirectory odirectory directory multiple/>')
.attr('type', "file")
.attr('name', "file")
.on("change", function() {
cell = $(this).data("cell")
var s = createSlider(this.files)
cell.append(s)
// carousel(s)
var init = s.data("slideshow")();
})
.data("cell", newCol);;
newCol.append($(input))
}
}
}
genGrid()
btnGen.click(genGrid)
JsFiddle.
Note: on this fiddle the style="height:100vh;" are on the root div, on the original code are on the body tag.
You could set each image to a fixed height using a static unit such as px in your class, and use a few media queries to control their dimensions in different resolutions. This way you can expect what they will look like.
Is it possible to return the id of an element which display property attribute is 'block'?
var nodeList = document.querySelectorAll("*"); // use an appropriate filter
var array = Array.prototype.slice.call(nodeList, 0);
var elements = array.filter(function (element) { return window.getComputedStyle(element).display === "block"; });
var ids = elements.map(function (element) { return element.id; });
The solution presented above searches the page for elements and then keeps only the ones which have a computed display of block. Works even if the style is not inline.
You can use:
Javascript
var divs = document.getElementsByTagName("div");
for (var i=0; i < divs.length; i++) {
display = divs[i].style.display;
if(display == 'block' ){
alert(divs[i].getAttribute('id'));
}
}
Html
<div id="1" style="display:block;">this is div 1</div>
<div id="2" style="display:block;">this is div 2</div>
<div id="3" style="display:none;">this is div 3</div>
Please refer to the fiddle: "http://jsfiddle.net/UAYWD/21/"
Pure Javascript:
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++) {
if(divs[i].style.display == 'block'){
alert(divs[i].id);
}
}
.
<div id="div1" style="display:block;">Div 1</div>
<div id="div2" style="display:block;">Div 2</div>
<div id="div3" style="display:none;">Div 3</div>
Output:
div1
div2
Here's an example: http://jsfiddle.net/mhqwaxpw/
$("div").each(function(){
if($(this).css("display")=="block"){
alert($(this).attr('id'));
}
});
How to show div multiple step using javascript ?
i want to create code for
click on CLICK HERE first time it's will show one
click on CLICK HERE second time it's will show two
click on CLICK HERE third time it's will show three
click on CLICK HERE fourth time it's will show four
click on CLICK HERE fifth time it's will show five
http://jsfiddle.net/x53eh96o/
<style type="text/css">
div{
display: none;
}
</style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
function myFunction() {
document.getElementById("1").style.display = "block";
}
</script>
how can i do that ?
THANK YOU
First of all, it would be better to add a common class to your divs, in order to make the selection easier. Then you should select all of needed divs by class name, and pass through each of them, setting needed visibility.
http://jsfiddle.net/x53eh96o/7/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = document.getElementsByClassName("some_class");
var divsLength = divs.length;
for(var j = divsLength; j--;) {
var div = divs[j];
div.style.display = (i == j ? "block" : "none");
}
i++;
if(i > divsLength) {
i = 0; // for a cycle
}
}
</script>
UPDATE
And here is jquery example: http://jsfiddle.net/x53eh96o/8/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = $(".some_class");
divs.hide().eq(i).css({display: 'block'});
i++;
if(i > divs.length) {
i = 0;
}
}
</script>
id values should not start with a number.
div {
display: none;
}
<div id="show_1">one</div>
<div id="show_2">two</div>
<div id="show_3">three</div>
<div id="show_4">four</div>
<div id="show_5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var show = 0;
function myFunction() {
try {
document.getElementById('show_' + ++show).style.display = "block";
} catch (err) {
show--
for (i = show; i > 0; i--) {
document.getElementById('show_' + i).style.display = "none";
show--;
}
}
}
</script>
I organized my tabs this way:
<ul id="tabs">
<li class="selected">DIV1</li>
<li class>DIV2</li>
<li class>DIV3</li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
I would like that when I press one of the link inside the <li> element,
the corrispondend Div become visible with display: block and the others are changed to display: none
Also I would like to do the same with the "selected" class on the clicked <li> element.
Is this possible?
I tried with:
function selectTab(src)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(src).style.display = 'block';
}
It works if I pass the ID by reference with onclick="" but I would like to avoid this.
Solution:
function selectTab(source, parent)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(source).style.display = 'block';
var elements = [].slice.apply(document.getElementsByClassName('selected'));
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
parent.className = 'selected';
}
Possibly this is what you want, cross-browser (IE5.5+)
CSS
.selected {
background-color: green;
}
.hide {
display: none;
}
HTML
<ul id="tabs">
<li class="selected">DIV1
</li>
<li class>DIV2
</li>
<li class>DIV3
</li>
</ul>
<div id="tabs_content">
<div id="div1">
<textarea name="div1" rows="7" cols="108"></textarea>
</div>
<div id="div2" class="hide">
<textarea name="div2" rows="7" cols="108"></textarea>
</div>
<div id="div3" class="hide">
<textarea name="div3" rows="7" cols="108"></textarea>
</div>
</div>
javascript
var tabs = document.getElementById("tabs"),
tabs_content = document.getElementById("tabs_content"),
divs = tabs_content.getElementsByTagName("div"),
divsLength = divs.length,
lis = tabs.getElementsByTagName("li"),
lisLength = lis.length;
tabs.onclick = function (evt) {
var e = evt || window.event,
target = e.target || e.srcElement,
href,
id,
index,
div;
if (target.tagName.toUpperCase() === "A") {
for (index = 0; index < lisLength; index += 1) {
lis[index].className = "";
}
target.parentNode.className = "selected";
href = target.attributes.href.nodeValue;
if (href && href.charAt(0) === "#") {
id = href.slice(1);
for (index = 0; index < divsLength; index += 1) {
div = divs[index];
if (id === div.id) {
div.className = "";
} else {
div.className = "hide";
}
}
}
}
};
jsfiddle
Your selectTab function needs to be necessarily bound to the click event on those list elements. There's no other way you can do it. Your code is good enough. You can simplify things using JQuery as well, as some other answer here points out.
Okay, do this:
In your HTML, add "tab" class to each of the tags.
<li class="selected"><a class="tab" href="#div1">DIV1</a></li>
<li class><a class="tab" href="#div2">DIV2</a></li>
<li class><a class="tab" href="#div3">DIV3</a></li>
In your jquery,
$('.tab').click(function(){
var displaydiv = $(this).attr('href');
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$(this).show();
$('"'+displaydiv+'"').show();
$(this).parent().attr('class','selected');
})
<ul id="tabs">
<li class="selected"><a onclick="showTab(this);" href="#div1">DIV1</a></li>
<li><a onclick="showTab(this);" href="#div2">DIV2</a></li>
<li><a onclick="showTab(this);" href="#div3">DIV3</a></li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
Use the following javascript:
function showTab(a)
{
var id = a.href.replace('#','');
var tabs = document.getElementById('tabs_content').getElementsByTagName('div');
var index = -1;
for(var i=0,n=tabs.length;i<n;i+=1)
{
var t = tabs[i];
if(t.id === id)
{
t.style.display = 'block';
index = i;
}
else
{
t.style.display = 'none';
}
}
var links = document.getElementById('tabs').getElementsByTagName('li');
for(var i=0,n=links.length;i<n;i+=1)
{
links[i].setAttribute('class', index === i ? 'selected' : '');
}
}
Of course you could also first cache your menu and tabs, that way you can keep a variable. This is the proper way:
function Menu()
{
var self = this;
self.links = document.getElementById('tabs').getElementsByTagName('a');
self.tabs = document.getElementById('tabs_content').getElementsByTagName('div');
self.selectedIndex = 0;
self.n = self.links.length;
for(var i=0;i<self.n;i+=1)
{
// Set onclick for every link in the tabs-menu
self.links[i].onclick = function(ind){return function(){self.update(ind);};}(i);
}
self.update = function(ind)
{
// Hide previous tab
self.links[self.selectedIndex].parentNode.setAttribute('class', '');
self.tabs[self.selectedIndex].style.display = 'none';
// Select and show clicked tab
self.selectedIndex = ind;
self.links[self.selectedIndex].parentNode.setAttribute('class', 'selected');
self.tabs[self.selectedIndex].style.display = 'block';
};
}
setTimeout(function(){new Menu();},1);
Check out the jsfiddle for the Menu class in action: http://jsfiddle.net/3vf4A/1/. Note that even if Javascript is disabled, the a-tag will still get you to the correct area by scrolling to it automatically.