Hiding DIV tags based on id or title?

[Kourosh]

I have a lot of DIV tags on an HTML page. I want to group some of them
so that I can hide them all together at once if needed. What's a good
way to do this? I want this to be compatible with at least IE 5. Would
it be a good idea to assign all DIV tags in the same group the same
"title" attribute?
This is what I want to do, but I'm not sure if it's the correct
approach, and I'm not sure how to set the style with javascript either:


<div title="groupA">hello world</div>
<div title="groupB">from group b</div>

then with javascript set this style:
div[title='groupA']
{
display:none
}



If this is the right approach, and is compatible with say IE 5 or 6,
would someone tell me how to do it in javascript?

 

[Kourosh]

thanks a lot for the info I'll search/work on this later and post
back if there are any problems

cheers

 

[Randy Webb]

altheim said the following on 5/14/2006 5:57 AM:

Sanctimonious prick!

I can now add "Sanctimonious prick" to the phrases I have had attributed
to me.

If you are not prepared to help the guy, why did you trouble to respond?

I could ask you the same question, but I won't, as I don't think you
would understand the intents of the question. But, I will answer you.

Give a man a fish, he eats a meal.
Teach him how to catch his fish, he eats for life.

Giving a single code doesn't teach, it promotes laziness. Teach them how
to research and find the answers, they can code for life.

 

[Randy Webb]

altheim said the following on 5/14/2006 3:47 PM:

Well let's pretend you did: the reason I responded is
because I too would have liked to learn from your answer.

Fair enough. Did you search the archives?

Fair enough, but then tell me what else is going on in these
newsgroups if not an exchange of information from which even
the most advanced expect to learn.

Most of the long-winded threads in this group have nothing to do with
practical Javascript. They are typically debates about the FAQ, what
some standard says, or what the wording of that standard really means or
doesn't mean. Very little is discussed with regards to advanced
techniques in Javascript itself.

What was so different about Kourosh's request?

To me? The lack of effort.

Now, to be fair, I will answer the question. Fair enough? You hide an
element one of two ways. You change it's visibility property or you
change it's display property. Which one you use depends on the effect
you want.

<script type="text/javascript">
function changeDisplay(elem,displayMode){
document.getElementById(elem).style.display = displayMode;
}
function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}
</script>


HTML:

<div id="div1" style="display: visible">Div 1</div>
<div id="div2" style="visibility: visible">Div 2</div>

<button onclick="changeDisplay('div1','block')">
Make Div1 Visible</button>
<button onclick="changeDisplay('div1','none')">
Make Div1 Hidden</button>

<button onclick="changeVisibility('div2','hidden')">
Make Div2 Hidden</button>
<button onclick="changeVisibility('div2','visible')">
Make Div2 Visible</button>

Now, to be fair back to me, test that code and come back and explain
what you learned

 

[Randy Webb]

altheim said the following on 5/15/2006 4:35 AM:

OK, I won't belabour the point any longer, safe to say that I
believe your approach, however well intentioned, may scare
newcomers to javascript away from this group altogether.

That is possible. But after you read about the 10,000th post from people
wanting you to write a free script without them making any effort at all
- other than asking - you become jaded about it and you start seeing
replies like my initial one.

I don't have a specific need for object hiding but it is good
to know it is available. But for Kourosh's question I might
never have gone looking for it, and that is the point I am
trying to make: W3C archives are fine if you know what
you want and what to look for but for ideas and inspiration
CLJ is a gold mine - or should be.

W3C documents are a nightmare to try to find anything you want to know.
Same goes for the ECMA documentation. They suck.

Thank you for posting the above script. I pasted it into my
editor and it works fine, of course - both methods. What
I'm now faced with is the challenge of finding out the difference
between 'Display' and 'Visibility' and for that I shall have to
play with it a bit more.

If you test the full code I posted, pay attention to the flow of the
page. When you change the visibility, nothing moves. When you change the
display property, the elements below it move up the page.

 

[Kourosh]

hehe funny
thanks for the help. I'm having a problem though:
I'm trying to set the visibility based on the value of a checkbox. It
seems pretty simple but for some reason I can't get it to work
the checkbox looks something like this (NOT in a form):
<input name="chkTest" onclick="foo('chkTest')" ........
then in the function foo, I try to check for its check state. For some
reason I never get that alert to run.

function foo (checkName)
{
elem = document.getElementByName (checkName);
if (elem.checked) alert ("hello!");
}

can you help me fix that?

 

[Kourosh]

hmm okay it works if I use ID instead of NAME thanks

 

[Randy Webb]

Kourosh said the following on 5/15/2006 4:18 PM:

hehe funny
thanks for the help. I'm having a problem though:
I'm trying to set the visibility based on the value of a checkbox. It
seems pretty simple but for some reason I can't get it to work
the checkbox looks something like this (NOT in a form):
<input name="chkTest" onclick="foo('chkTest')" ........
onclick="foo(this.checked)"

then in the function foo, I try to check for its check state. For some
reason I never get that alert to run.

function foo (checkName)

function foo(checkedState){
alert(checkedState)
}

can you help me fix that?

Pass what you want, and you don't have to worry with it.

 

[Randy Webb]

Kourosh said the following on 5/15/2006 4:24 PM:

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

hmm okay it works if I use ID instead of NAME thanks

Imagine that. But perhaps that is why it is named getElementById and not
getElementByName?

 

[Evertjan.]

Randy Webb wrote on 15 mei 2006 in comp.lang.javascript:

Imagine that. But perhaps that is why it is named getElementById and not
getElementByName?

If you make sure you have only one element with a specific name

document.getElementsByName('myName')[0]

[...Element_s_...]

and

document.getElementById('myId')

are practically equivalent.

 

[Kourosh]

Kourosh said the following on 5/15/2006 4:24 PM:

Please quote what you are replying to.

okay thanks

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.



Imagine that. But perhaps that is why it is named getElementById and not
getElementByName?

yup

thanks a lot for the help

 

[Randy Webb]

Evertjan. said the following on 5/15/2006 5:12 PM:

Randy Webb wrote on 15 mei 2006 in comp.lang.javascript:

Imagine that. But perhaps that is why it is named getElementById and not
getElementByName?

If you make sure you have only one element with a specific name

document.getElementsByName('myName')[0]

[...Element_s_...]

and

document.getElementById('myId')

are practically equivalent.

Perhaps, and I said no differently. But to me, they are as practically
equivalent as document.getElementById and document.all are - they aren't.

Besides, IE doesn't know the difference between a name and an ID.

 

[John Fullmer]

I wouldn't use the title property. Most current browsers will display
it. Just stick a property on there, call it whatever you want, and
then loop through all of the divs on the page looking for those that
match the property you've created.

ex.
<div id="myDiv1" group="groupA">some stuff</div>
<div id="myDiv2" group="groupB">more stuff</div>
<div id="myDiv3" group="groupA">another bunch of stuff</div>

Then just loop using javascript to do whatever you need to do to them.

~ John Fullmer

 

[Randy Webb]

John Fullmer said the following on 5/16/2006 11:08 AM:

Answer: They don't quote.

I would give you the question but I would have to quote it.

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

I wouldn't use the title property. Most current browsers will display
it. Just stick a property on there, call it whatever you want, and
then loop through all of the divs on the page looking for those that
match the property you've created.

Name that property "class" and you lose all that other crap to have to
do. You assign it a CSS class, and then change that .class, easy to do
without have to loop through all of the divs on the page - the browser
will do it for you.

 

[Richard Cornford]

John Fullmer said the following on 5/16/2006 11:08 AM:

Name that property "class" and you lose all that other crap to
have to do. You assign it a CSS class, and then change that
.class, easy to do without have to loop through all of the
divs on the page - the browser will do it for you.

Having assigned a CLASS attribute in the HTML it would be more
successful to access it in the DOM under the name 'className'. The word
'class' is a (future) reserved word and so should not be expected to be
usable as an Identifier in a dot-notation property accessor.

Richard.

 

[RobG]

John Fullmer said the following on 5/16/2006 11:08 AM: [...]

I wouldn't use the title property. Most current browsers will display
it. Just stick a property on there, call it whatever you want, and
then loop through all of the divs on the page looking for those that
match the property you've created.

Name that property "class" and you lose all that other crap to have to
do. You assign it a CSS class, and then change that .class, easy to do
without have to loop through all of the divs on the page - the browser
will do it for you.

Access to custom HTML attributes requires the use of getAttribute in
some browsers, you can't just use dot property access and expect it to
work everywhere. If validation matters, it should be noted that custom
attributes in HTML 4 will cause validation errors:

<div customAtt="custom attribute"
onclick="alert(this.customAtt);"

dot property access</div>

<div customAtt="custom attribute"
onclick="alert(this.getAttribute('customAtt'));"

getAttribute access</div>

Both the above 'work' in IE, only the second in Firefox.

 

[Kourosh]

so this is a "proper" thing to do? adding custom attributes that is? It
seems quite nice

 

[Kourosh]

I actually tried that but not sure how to do it using javascript
How would I set a style like this using javascript?
<style>
..test
{
background-color:red
}
</style>

given class name "test" I want to be able to set the class style like
above using javascript.... couldn't figure it out

Randy Webb wrote:>

 

[Randy Webb]

Kourosh said the following on 5/17/2006 3:40 PM:

I actually tried that but not sure how to do it using javascript
How would I set a style like this using javascript?
<style>
.test
{
background-color:red
}
</style>

given class name "test" I want to be able to set the class style like
above using javascript.... couldn't figure it out

elemRef.style.className = "test"

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

 

[ASM]

Kourosh a écrit :

I actually tried that but not sure how to do it using javascript
How would I set a style like this using javascript?
<style>
.test
{
background-color:red
}
</style>

given class name "test" I want to be able to set the class style like
above using javascript.... couldn't figure it out

Randy Webb wrote:>

in example bellow,
Divs of id beginning by 'foo' are styled by JS (back color : pink)
Divs and tags P are styled by CSS :
- DIvs and Ps are bordered in black
- excet Ps contained in a DIV whih are bordered in red + yellow back

<html>
<script type="text/javascript">
onload = function() {
var T = document.getElementsByTagName('*');
for(var i=0;i<T.length;i++)
if( T.tagName.toLowerCase()=='div' &&
T.id.substring(0,3) == 'foo')
T.className = 'test';
}
</script>
<style type="text/css">
..test { background: pink }
div, p { margin: 5px; border: 1px solid black; line-height: 2em}
div p { border-color: red; background: #ff9; }
</style>
<div id="foo_1">test 1 : foo_1 div
<p id="foo_2" >test 2 : foo_2 P </p></div>
<div id="foo_3">test 3 : foo_3 div</div>
<p id="foo_4" >test 4 : foo_4 P </p>
<div id="foA_1">test 5 : foA_1 div
<p id="foo_5" >test 4 : foo_5 P </p></div>
</html>