I got a Script Which makes me onclick showing all Divs with Specific id
This is the Selector
<a onclick="filterGal('simpleCart_shelfItem item Sonnenbrillen')" href="javascript:void(0);">Sonnenbrillen</a>
this is my Script
function filterGal(foo) {
var toHide = document.getElementsByClassName(foo);
for (i = 0; i < toHide.length; i++) {
toHide[i].style.display = 'block';
}
}
So now my question how can i only show specific div with classname and display none the other div with other classnames?
Try this :
function filterGal(foo) {
var toHide = document.getElementsByTagName('div');
for (i = 0; i < toHide.length; i++) {
toHide[i].style.display = 'none';
}
var toShow = document.getElementsByClassName(foo);
for (i = 0; i < toShow.length; i++) {
toShow[i].style.display = 'block';
}
}
Can be improved by skiping in the first loop div which match your classes.
I just show you add jquery tag so you just need to do this :
function filterGal(foo) {
$( "div:not("+foo+")" ).hide();
}
Exemple : http://jsfiddle.net/ACjeZ/1
This is what I would try:
$("div").Hide();
$("." + foo).Show();
Related
I was actually using a script which allowed me to Show a div onclick and hide others but now I need to do the same with "class" instead of "id".
My current script:
function layout(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
hiddenVal.Value = document.getElementById(divName).getAttribute("class");}
What I tried using getElementsByClassName :
function layoutNEW(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
var tempDiv = document.getElementsByClassName(divName);
for ( var i=0, len=tempDiv.length; i<len; ++i ){
tempDiv[i].style.display = 'block';
}
hiddenVal.Value = document.getElementById(divName).getAttribute("id");}
Any ideas ?
EDIT : A working example of my current script with "id" : JSFiddle
EDIT 2: It works great, but when the div (class) is cloned, only one of them is showing the div. Do you have an idea about this ? Where is a JSFiddle demonstrating the situation: JSFiddle
I think this is what you'd need. The idea is that you can use a data property on your <a> tags that will tell your click handler which classname to look for when showing an element. From there, you just hide the others. Here's a working demo:
var toggleControls = document.querySelectorAll("[data-trigger]");
var contentDivs = document.querySelectorAll(".toggle");
for (var i = 0; i < toggleControls.length; i++) {
toggleControls[i].addEventListener("click", function(event) {
var trigger = event.target;
var selector = "." + trigger.getAttribute("data-trigger");
var divToShow = document.querySelector(selector);
for (j = 0; j < contentDivs.length; j++) {
contentDivs[j].style.display = "none";
}
divToShow.style.display = "block";
});
}
.toggle {
height: 100px;
width: 100px;
display: none;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: purple;
}
.div4 {
background-color: green;
}
Show Div1
<br/>
Show Div2
<br/>
Show Div3
<br/>
Show Div4
<div class="toggle-container">
<div class="toggle div1"></div>
<div class="toggle div2"></div>
<div class="toggle div3"></div>
<div class="toggle div4"></div>
</div>
EDIT - As per updated question
In order to get this to work with dynamically created elements, you will have to put the var contentDivs = ... inside of the click handler, so you get a live version of that array. Also, you will need to change .querySelector to .querySelectorAll as the former only grabs the first matching element, not all as the latter does.
Here's what the code would look like: (note - I also moved the click handler into an outside function so it was not being recreated for every iteration of the loop, as is good practice)
function clickHandler(event) {
var contentDivs = document.getElementsByClassName("toggle"); // get live set of contentDivs in case any were added dynamically
var trigger = event.target;
var selector = "." + trigger.getAttribute("data-trigger");
var divsToShow = document.querySelectorAll(selector); // grab all matching divs
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.display = "none";
}
for (var j = 0; j < divsToShow.length; j++) {
divsToShow[j].style.display = "block";
}
}
var toggleControls = document.querySelectorAll("[data-trigger]");
for (var i = 0; i < toggleControls.length; i++) {
toggleControls[i].addEventListener("click", clickHandler);
}
function cloneDiv() {
var elmnt = document.getElementsByClassName("container");
for ( var i=0; i<elmnt.length; i++ ) {
var cln = elmnt[i].cloneNode(true);
}
document.body.appendChild(cln);
document.getElementById("clone").appendChild(cln);
}
window.onload = cloneDiv();
I need to add Class highpc to each element with the data attribute of procent, which is bigger than 51. I've got a jQuery solution, but I need it in pure JavaScript. Can anyone help me? This is what I got so far:
HTML
<span data-procent="4" class="procent">4%</span>
<span data-procent="59" class="procent">59%</span>
JS
function highpc(){
var procent = this.elem.getAttribute("data-procent");
if (parseInt(procent) > 51) {
procent.className=procent.className+" highpc";
}
}
window.onload = highpc();
http://jsfiddle.net/Zc8vY/1/
You haven't specified what is this.elem, and you haven't loop in your script.
You are also using variable procent for getting the data-attribute from your element. Later, you are trying to use it for linking the element. Try updated code:
function highpc(){
var elements = document.getElementsByClassName('procent');
for(i=0;i<elements.length;i++) {
var procent = elements[i].getAttribute("data-procent");
if (parseInt(procent) > 51) {
elements[i].className=elements[i].className+" highpc";
}
}
}
Updated fiddle http://jsfiddle.net/Zc8vY/4/
This is your fixed function:
function highpc() {
var elements = document.querySelectorAll('.procent');
for (var i = 0; i < elements.length; i++) {
var procent = elements[i].getAttribute("data-procent");
if (parseInt(procent) > 51) {
elements[i].className += " highpc";
}
}
}
window.onload = highpc;
Note the last line: you don't need () after highpc because you want window.onload to be a reference to a function, not a result of execution.
References: querySelectorAll to select elements.
Demo: http://jsfiddle.net/Zc8vY/3/
Using pure javascript and implementing own getElementsByClassName.
function getElementsByClass(className){
var celems = new Array();
var elems = document.getElementsByTagName("*");
for(var i = 0; i < elems.length;i++){
if(elems[i].className.indexOf(className) != -1){
celems.push(elems[i]);
}
}
return celems;
}
function highpc(){
var elems = getElementsByClass("procent");
console.log(elems);
for(var i = 0; i < elems.length; i++){
highpc_ex(elems[i]);
}
}
function highpc_ex(elem){
var procent = elem.getAttribute("data-procent");
if (parseInt(procent) > 51) {
elem.className=elem.className+" highpc";
}
}
window.onload = highpc();
WORKING FIDDLE HERE
function highpc() {
var aSpans = document.getElementsByTagName("span");
for(var i = 0; i < aSpans.length; i++) {
var eSpan = aSpans[i];
var procent = eSpan.getAttribute("data-procent");
if (procent != null && parseInt(procent) > 51) {
eSpan.className += " highpc";
}
}
}
This is a similar variant to what others have already posted. You might find this one to be more performant for larger sets of html.
Ref: Why .getElementsByTagName() is faster than .querySelectorAll()
I have a table and a button.
If i click the button, all <tr> which have an id starting with "tr" (in the example the first 3) should be set to display = "none";
Here is a Fiddle
Has anyone a Idea how i get this to work?
Give all the elements that have id="tr_NNNN" a distinct class, e.g. class="tr tr_NNNN". Then use the following loop:
var hide_trs = document.getElementsByClassName('tr_NNNN');
for (var i = 0; i < hide_trs.length; i++) {
hide_trs[i].style.display = "none";
}
You can simply iterate through your tr elements using the IDs:
function doJS() {
for(var i = 1; i <= 3; i ++) {
document.getElementById("tr_" + i).style.display="none";
}
}
You can't supply a wildcard to gEBI, but you can use the attribute starts with selector in qSA:
document.querySelectorAll("[id^='tr_']")[0].style.display="none";
I agree with using classes instead of IDs for this, but this should satisfy your original question:
function doJS() {
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if(row.getAttribute("id") && /^tr/.test(row.getAttribute("id"))){
row.style.display = 'none';
}
}
}
http://jsfiddle.net/eHSwJ/14/
And while this isn't a jQuery question, I would point out that by leveraging jQuery, this can be reduced to:
$('tr[id^="tr"]').css('display', 'none');
I'm fairly new to javascript and have been unable to get this code to work and I am unsure were and what I'm missing.
So here is what I want it to do. I'm trying to have the script read everything and switch the visibility of the span found in the body
<body>
<span hidden>A</span>
<span>X</span>
<span hidden>B</span>
<span>Y</span>
<span hidden>C</span>
<span>Z</span>
</body>
So instead of reading 'X Y Z' it will display 'A B C'
The code I have so far is..
$(function() {
var elems = document.getElementsByTagName('span');
for (var i = 0; i<elems.length; i++) {
if (elems[i].style.visibility == 'visible') {
elems[i].style.visibility = 'hidden';
}
else {
elems[i].style.visibility = 'visible';
}
}
});
Here is the jsfiddle of my code. I would greatly appropriate some feedback or possible threads that might point me in the right direction.
You're using the HTML5 hidden attribute, so you should just reverse that property.
for (var i = 0; i<elems.length; i++) {
elems[i].hidden = !elems[i].hidden;
}
DEMO: http://jsfiddle.net/TEXJp/
If you were to use the style object, then you need to consider that it will only report styles that were set directly on the element. So your test should be for == "" instead of == "visible", or for == "hidden" if you actually set it on the original elements.
<span style="visibility:hidden;">H</span>
<span>V</span>
<span style="visibility:hidden;">H</span>
<span>V</span>
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
DEMO: http://jsfiddle.net/TEXJp/1/
if fixed your code:
$(function () {
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility == 'hidden') {
elems[i].style.visibility = 'visibile';
} else {
elems[i].style.visibility = 'hidden';
}
}
});
It was just a missing ; and a } too much
I changed your code a little bit and now it seems to work.
<body>
<span style="visibility: hidden;">A</span>
<span>X</span>
<span style="visibility: hidden;">B</span>
<span>Y</span>
<span style="visibility: hidden;">C</span>
<span>Z</span>
</body>
$(function() {
var elems = document.getElementsByTagName('span');
for (var i = 0; i<elems.length; i++) {
if (elems[i].style.visibility == 'hidden') {
elems[i].style.visibility = 'visible';
}
else {
elems[i].style.visibility = 'hidden';
}
}
});
The problem is that you are using the html attribute hidden, but you are modifying the css attribute hidden. I changed your HTML code to set hidden as a css property instead of a HTML property. Also, I switched your if else block and it worked. I think the style.visibility is not initialized until you give it a value. It equals null, not visible.
You have a few syntax errors, including an unmatched curly brace, and a comma in your for loop definition instead of a semi-colon.
Also your html refers to the hidden attribute, yet your javascript is flipping the visibility via styles.
Here is a working fork. http://jsfiddle.net/yPU2T/1/
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
elems[i].hidden = !elems[i].hidden;
}
You are using jquery, so no need to get elements the way you did it
$(document).ready(function () {
var elems = $('span.hidden');
elems.hide();
})
I amd working with hiding and showing divs, which have different contents. When i click on a link, i want a div to be shown. But when i click on another link, i want the new content to replace the previous one. Right now, it falls under it instead of replacing it. Any solution?
Javascript
function show(){
var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};
var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}
function init(){
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for(i = 0; i < a.length; i++){
a[i].onclick = show;
}
}
window.onload = init;
You need to run the block of code that hides them all before showing the one you want, every time.
Make this:
function hideAll() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
Remove this code from init() and replace it with a call to hideAll() and add a call to hideAll() at the beginning of show().