Show/Hide div on mouseover

juniper747

I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member.

I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it.

So, how can I make this happen?

Non-working Code:

HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>

Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

johanafm

You can't have the same id appear more than once in a page.

You don't actually store the ids as a comma separated list in the database, do you?

Anyway, you don't even need an id to keep track of what element the action applies to. onmouseover="dostuff(this);" will pass along the element on which the event triggered.

You could of course place information of memberid in an element's id attribute, as long as you are aware that if you need to have several such elements on a page, you can't just put the member's id straight into an element's id, since the same member might appear in more than one place across the page, thus risking to break the constraint about each id attribute in a page having to be unique.

Having the same member id as a function parameter to the event handler is possible though, thus allowing you to use

printf('<element onclick="dostuff(this, %d);">', $memberid);

which allows you to send the proper information to the as well as remove or replace the event handler for this, or simply remove the element according to your needs.

juniper747

Your solution is very interesting... It never occured to me that I could do that. Someone else provided another solution below: which one do you think would be more simpler or efficient to implement? Ie using class instead of id. As you said there may be a problem with your way if that memberID appears more than once on the page.

/////////
you can try the following. I moved your html around a little so that the visiblediv is inside its showhide "container" div - it seemed easier that way and I don't think affects what you are trying to do:

(and you are right, by the way - giving multiple divs the same id will only get you in trouble, whereas you can have as many as you like with the same class name )

<html>
<head>
</head>
<body>
         <div >
                <div class="showhide">
                    Line 1
                <div id="visiblediv1" style="display: none;">
                    Line 2
                </div>
				</div>
            </div>
            <div >
                <div class="showhide">
                    Line 3
                <div id="visiblediv2" style="display: none;">
                    Line 4
                </div>
				</div>
            </div>
            <div >
                <div class="showhide">
                    Line 5
                <div id="visiblediv3" style="display: none;">
                    Line 6
                </div>
				</div>
            </div>

<script type="text/javascript">
var divs=document.getElementsByTagName("div")
for (var j = 0; j < divs.length; j++) {
if (divs[j].className=="showhide"){
divs[j].onmouseover=function(){
this.childNodes[1].style.display="block"
		}
divs[j].onmouseout=function(){
this.childNodes[1].style.display="none"
		}				
	}
}
</script>			
</body>
</html>

bradgrafelman

Personally, I'd vote for johanafm's method above for the reason that, to me, using an counter value in a group of ID values is pure nonsense. You don't need to explicitly label a given element as the nth in the group, because by the pure nature of DOM you should be able to deduce that it's the nth child of something.

Plus, why bother with the extra code needed to generate that counter when it's completely unnecessary in the first place? (In other words, I like to be lazy when it comes to certain aspects of programming. 😉)

johanafm

juniper747;10997252 wrote:
which one do you think would be more simpler or efficient to implement? Ie using class instead of id.

I agree with everything brad said. Use classes only for sttling purposes, that is to actually achieve the hidden/visible/whatever style you want.

juniper747;10997252 wrote:
As you said there may be a problem with your way if that memberID appears more than once on the page.

No. I said there would be a problem if you had the same value in more than one id attribute on the page. You can have the same memberID appear in as many event handler bindings as you want.
This is perfectly valid

<h3>2 is memberID</h3>
<div onmouseover="stuff(this, 2);"></div>
<div onmouseover="stuff(this, 2);"></div>
<div onmouseover="stuff(this, 2);"></div>
<div onmouseover="stuff(this, 2);"></div>
<div onmouseover="stuff(this, 2);"></div>

juniper747;10997252 wrote:

<script type="text/javascript">
var divs=document.getElementsByTagName("div")
for (var j = 0; j < divs.length; j++) {
if (divs[j].className=="showhide"){

I'd not recommend doing this. You are executing a javascript to find all functions with a given classname. But since either all of those elements have that classname every time, or you use server side scripting to decide if they do, at the time the page is generated you will alwasy know if they do or not. Thus, why not simplify things a whole lot, especially for anyone reading your code

<div class="showhide" onmouseover="stuff(this, $memberid);">

and get rid of the javascript. The function stuff() does of course have to be defined as a javascript funciton, preferably in a separate file referenced by

<script type="text/javascript" src="/path/to/file.js">

Use of deprecated mime type is to make several IE versions regard it as javascript.

bradgrafelman

johanafm;10997338 wrote:
Use of deprecated mime type is to make several IE versions regard it as javascript.

I'm curious... why do you call the 'type' attribute "deprecated" ? As far as I know, it's quite the opposite - so much so, in fact, that it's now been given a default value and become optional.

johanafm

Ah, I was not calling the type attribute deprecated, I'm calling the mime type used, deprecated, since it was supposed to be application/javascript, which would not work in IE8-.

But, your reply made me go back to the html 5 spec which once again is using text/javascript rather than application/javascript.

However, the spec also states that if the type attribute is present it must have a valid mime type and a litte bit more research revealed that text/javascript was obsoleted by RFC4329.

So it seems that the only correct way of doing it is not explicitly listing the type attribute which defaults to the obsolete type text/javascript. Excplicitly listing it would not work though since HTML5 says it should be text/javascript which isn't a valid mime type.

Weedpacket

johanafm wrote:
However, the spec also states that if the type attribute is present it must have a valid mime type and a litte bit more research revealed that text/javascript was obsoleted by RFC4329.

It's a little more complicated than that. RFC4329 declares the registration of four MIME types with the IANA: (text|application)/(java|ecma)script, with the two text/* types declared as OBSOLETE:

RFC4288 wrote:
Media type registrations may not be deleted; media types that are no longer believed appropriate for use can be declared OBSOLETE by a change to their "intended use" field; such media types will be clearly marked in the lists published by the IANA.

Presumably because of their use in archival metadata.

So you're not supposed to use text/javascript if you can help it, but if you can't then at least it's still valid.