We Keep Coding

<li> tags are not displayed when setting the style.display = none

I'm trying to create a toggle button that can set the tags with class adsetTarget of HTML tags "li" to be hidden or visible on click event.
During page load, the state of "li" tags are hidden. This is the code that is setting the initial page load event to be hidden. This is working correctly.
var appBanners = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < appBanners.length; i ++) {
appBanners[i].style.display = 'none';
}
Below is the code that is trying to set toggle button functionality. On clicking first time, it is displaying the content, but on clicking it again, the content is not hiding, can someone help.
var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < adsetTargets.length; i ++) {
if (adsetTargets[i].style.display = 'none')
adsetTargets[i].style.display = '';
else
adsetTargets[i].style.display = 'none'; //this is not working, I believe
}

You have to change the following line:
if (adsetTargets[i].style.display == 'none')
Notice the double equals?

You can use this to make it senstive to any styling you apply to your elements.
It will remember the elements previous style and re-apply it(in theory heh)
function showhide() {
var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < adsetTargets.length; i ++) {
if (adsetTargets[i].style.display == 'none') {
adsetTargets[i].style.display = adsetTargets[i].getAttribute('data-previous');
}
else {
adsetTargets[i].setAttribute('data-previous',adsetTargets[i].style.display);
adsetTargets[i].style.display = 'none'; //this is not working, I believe
}
}
}
<ul>
<li class="adsetTarget" style="display:table">abc</li>
<li class="adsetTarget" style="display:block">123</li>
<li class="adsetTarget" style="display:inline-block">def</li>
<li class="adsetTarget" style="display:inline-block">456</li>
</ul>
<input type="button" onclick="showhide()" value="click me">

How to show/hide a span using javascript

Can someone show a way to show/hide a span using javascript
document.getElementById("test").style.display= 'visible';
document.getElementById("test").style.display= 'block';
In the HTML Code
<span id='test' ..
How can I overcome this problem. Is there any thing that I should think about?
UPDATE
I have a class like this one, I want to force mouse hovering on it.
<div id="test" class="tooltip effect">
<div id="second" href="#"> .. </div>
On css:
tooltip{..}
effect{..}
effect:hover{..}
Another option I tried besides your code is
document.getElementById("test").onmouseover = test.hover;
Should I re-write the hover class to another name-class, or should I tweak your code?

Use display none/default:
document.getElementById("test").style.display= 'none';
document.getElementById("test").style.display= '';
Below are some types and some easy to remember rules about them:
Default: the elements default property (generally block or inline)
Block: Generally on a line by itself. Has the width and height attributes (among other size/positioning attributes)
inline: on the same line as other elements/text. Does not have height/width attributes
Inherit: Inherits the parent element's display type

visible isn't a value for the display, you want none

I would do something like this to handle it:
function HideAndSeek(selector) {
var elements = undefined;
var displays = [];
if (!!selector.id) {
elements = [document.getElementById(selector.id)];
} else if (!!selector.class) {
elements = document.getElementsByClass(selector.class);
}
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
displays[elementIndex] = elements[elementIndex].style.display;
}
this.hide = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = "none";
}
};
this.show = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = displays[elementIndex];
}
};
}
This function can be used this way:
var hideAndSeek = new HideAndSeek({id: "test"});
and you can hide the element(s) by:
hideAndSeek.hide();
you can show them by:
hideAndSeek.show();

<span class="text-danger" id="spanAddressLine1" runat="server" style="display: none;"> //Here is your message </span>
JQuery code
For show:
$('#<%= spanAddressLine1.ClientID%>').show();
For hide:
$('#<%= spanAddressLine1.ClientID%>').hide();
Here spanAddressLine1 is the id of span

Having issue in changing style through JavaScript

Hi i am trying to change Display property of any HTML Tag with certain attribute..
But after many tries i am unable to change the tag properties.. My code is as below
function getAllElementsWithAttribute(attribute)
{
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].getAttribute(attribute))
{
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}
tags = getAllElementsWithAttribute('data-shares');
for(i=0;i<tags.length;i++)
{
tags[i].style.display = "none";
}
And the HTML has below Tag
<div class="shareTools" data-shares="facebook" data-url="#" data-title="Facebook" data-description="Facebook">
<div class="shareToolsBox">
<ul class="shareToolsList">
<li data-share="facebook">
<span>Facebook</span>
</li>
</ul>
</div>
</div>
Does anyone has any idea how to change Tag Style of any tag which has attribut i-e data-shares...

Change the function call to:
tags = getAllElementsWithAttribute('data-shares');
Here's it working on a JS Bin demo: http://jsbin.com/ufogExo/1/ The <div>s with the data-shares attribute are all hidden.
The problem was indeed the extra commas you had on your function call arguments.

I believe this does what you want:
function getAllElementsWithAttribute(attribute)
{
var items = document.querySelectorAll('['+attribute+']'),
i = items.length;
while ( i-- > 0 && (items[i].style.display = 'none') );
}
getAllElementsWithAttribute('data-shares');
see
http://jsfiddle.net/754zR/

How to change menu li class when div changes

I'm working on a one-page site that has several "articles". Each div has class "article" and id "first", "second", "third", etc. I have a standard menu:
<ul id="nav">
<li id="n1"></li>
<li id="n2"></li>
<li id="n3"></li>
//...etc
</ul>
What I need to do is assign the class "active" to the li tag w/id n1 when the current article has id "first" (and unassign active class from all other li tags); assign active class to li tag w/id n2 when current article has id "second"; etc.
I would appreciate any help... I'm really stuck on this one. TIA for your help.
P.S. I'm using the following code to, in essence, assign an active class to the currently viewed article:
$('#first, #second, #third, ...).bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});

There are more ways to do it. This is one, which may give you ideas:
var navrefs= document.getElementById('nav').getElementsByTagName('a');
for (var i=0, len = navrefs.length;i<len;i++){
if (location.hash == navrefs[i].href){
navrefs[i].parentNode.className = 'active';
} else {
navrefs[i].parentNode.className = '';
}
}

Here's an example of the following →
The following assumes you have the class current on your currently active article page:
var articles = document.getElementsByClassName('article'),
al = articles.length,
which, i;
for (i = 0; i < al; i++) {
if (/current/.test(articles[i].className)) {
which = articles[i].id;
}
}
var atags = document.getElementsByTagName('a'),
al2 = atags.length;
for (i = 0; i < al2; i++) {
if (atags[i].href.search(which) > -1) {
atags[i].parentNode.className = 'active';
} else {
atags[i].parentNode.className = '';
}
}

Since it's to achieve a CSS effect, why not just right CSS like this:
.first #n1,
.second #n2,
.third #n3,
...etc
{
CSS for active article
}
and then just make the JS in charge of setting the appropriate class on the wrapper/body, e.g.
<li id="n1"></li>
etc.
...
function setC(str){
document.getElementById('wrapper').className=str;
}
This would would reduce the demand on the JS engine

Selections and radioing - JavaScript

I have a list like this:
<ul>
<li id="adm-thumb" onclick="javascript:addBanner('bowling.jpg');">
<div class="adm-tick"></div>
<img src="img/banners/bowling.jpg" /></li>
<li id="adm-thumb" onclick="javascript:addBanner('kcc.jpg');">
<div class="adm-tick"></div>
<img src="img/banners/kcc.jpg" /></li>
<li id="adm-thumb" onclick="javascript:addBanner('paintballing.png');">
<div class="adm-tick"></div>
<img src="img/banners/paintballing.png" /></li>
</ul>
<input id="bannername" type="text" />
When one item is clicked, the value inside the addBanner() will be added to the input field, however, I want one list to be selected (which is done by css to make it look like it has) when it is equal to the value of the input value. If the value is equals to the value in the addBanner value then the clicked item should have a red background.
e.g.
function addBanner(label)
{
var Field = document.getElementById('bannername');
Field.value = label;
if(Field.value != label)
{
// I have no idea what to put here
// assign a class to it? prevent others having the same when ONLY one must have the selected state
}
}
Something like a div button that acts like a radio button.

You can modify the addBanner function to include the list item that was clicked. Then inside the function remove the class or style from all list elements first. Then apply the required class to the clicked element.
The list items would become:
<li onclick="javascript:addBanner('bowling.jpg', this);"> .. </li>
The addBanner function now has two parameters, the second one being the list element that was clicked:
/* CSS */
.highlighted {
background-color: red;
}
/* Javascript */
function addBanner(label, clickedItem) {
var listItems = document.getElementsByTagName("li");
// clear all existing classes
for(var i = 0; i < listItems.length; i++) {
listItems[i].className = '';
}
document.getElementById('bannername').value = label;
clickedItem.className = 'highlighted';
}

There are already 2 flaws in your code:
1)
Field.value = label;
if(Field.value != label)
{
// this will never run, because you set the Field.value to the
// label one line above
}
2) when you use an id you can only use it once, else you should use a class in your 'li' elements.
Your question is very vague. You want the clicked 'li' element to have a red background and the rest not red?
You can do this by plain JS:
var lis= document.getElementsByTagName("li");
for (i = 0; i < lis.length; i++) {
var li = lis[i]; if(li.className == "adm-thumb") {
li.backgroundColor = "transparent";
}
}
this.backgroundColor = "red";
or jQuery:
$('adm-thumb').css("backgroundColor", "transparent");
$(this).css("backgroundColor", "red");

The way the question is worded, it's a bit hard to understand exactly what you mean, but the code below should hopefully give you the results you are after:
var liList = document.getElementById('list').childNodes;
for (var i = 0; i < liList.length; i++){
liList[i].addEventListener('click',changeColor,false);
}
function changeColor(e) {
var el = e.target;
var liList = document.getElementById('list').childNodes;
for (var i = 0; i < liList.length; i++){
liList[i].backgroundColor = "black";
}
el.style.backgroundColor = "red";
}
You will need to assign an id to the ul element, and you can remove the onClick calls from the li elements:
<ul id="list">
<li><div class="adm-tick"></div><img src="img/banners/bowling.jpg" /></li>
<li><div class="adm-tick"></div><img src="img/banners/kcc.jpg" /></li>
<li><div class="adm-tick"></div><img src="img/banners/paintballing.png" /></li>
</ul>
You may want to read up on Javascript event handling as well