...

View Full Version : onmouseevent show and hide



armin999
01-11-2012, 11:19 AM
How can i make a function that a div container is hiding when i move with my mose over and it should be showed when i move with my mouse out.

i tried it like that:

<script type = text/javascript>
function show()
{

document.getElementById("sidebar").style.visibility = "hidden";

}
function hide()
{

document.getElementById("sidebar").style.visbility = "visible";
}

</script>


<div id ="sidebar">
<a href ="#"
onmouseover = "show()";
onmouseout = "hide()">
</div>

please tell me how i can solve this problem.
and sorry for my english, i am from austria ;-)
thanks

devnull69
01-11-2012, 01:07 PM
The problem is: When you hover and you then call hide() the element will be hidden and the hover will be over (because the mouse cannot hover a hidden element) so it will automatically show() the element again, by which the hover will immediately start again (the element is there again and the mouse will trigger the hover method). So basically you will get a flicker effect of successive hide()s and show()s

armin999
01-11-2012, 04:32 PM
thanks for your quick reply, but i have still one question, how can i make it that the div container comes back after i moved with my mouse back out?

devnull69
01-12-2012, 07:17 AM
Please explain as detailed as possible what you want to achieve

You have a DIV and an Anchor (<a>) element. Which one do you want to hide() or show()? Which element should trigger the hide() and show()? Do you want to show or hide it by default? Do you want to show() or hide() on hover?

armin999
01-12-2012, 11:49 AM
<div id = "header">
<h1> Überschrift</h1>

</div>

<div id ="sidebar">
<a href ="#"
onmouseover = "hide()";
onmouseout = "show()">

<h3>****</h3>

<embed
width="300" height="100"
src=http://www.youtube.com/
type="application/x-shockwave-flash">
</embed>

<h3> *** </h3>
<embed
width="300" height="100"
src=http://www.youtube.com
type="application/x-shockwave-flash">
</embed>


</a>


</div>
thats my div container


function show()
{
document.getElementById("sidebar").style.visibility = "hidden";
}
function hide()
{
document.getElementById("sidebar").style.visbility = "visibly";
}
and this are my functions...
and i want to hide the div container when i hover with my mouse over it, but it should be there again when i hover with my mouse not over it.

armin999
01-12-2012, 11:52 AM
and i have another problem,

i want that the color changes in my menu when i hover with my mouse over it.

<div id = "menu">
<a href ="#" onmouseover ="mov()" onmouseout ="mot()">
<table class = "tb">
<tr>
<td class = "td1"> <a href ="links/link1.html" style= "color: red;"> Kontakt </a> </td>
<td class = "td2"> <a href ="links/link2.html" style = "color: red;"> Service </a> </td>
<td class = "td3"> <a href ="links/link3.html" style = "color: red;">Kanzlei </a> </td>
<td class = "td4"> <a href ="links/link4.html" style = "color: red;">Mitarbeiter </a> </td>
</tr>
</table>
</a>
</div>

div container

function mov()
{
document.getElementById("td1").style.color = "green";
}
function mot()
{
document.getElementById("td1").style.color = "black";
}

functions

i know, i am a newbe...

devnull69
01-12-2012, 12:40 PM
i want to hide the div container when i hover with my mouse over it, but it should be there again when i hover with my mouse not over it.

So why do you

1. set the div to "visible" (typo in your code!!!) in the hide() function and to "hidden" in your show() function?
2. call the functions when hovering the <a> anchor and not the DIV?
3. put the <a> anchor inside the DIV? This will also hide the anchor when hiding the DIV

And again my question ... this is very important!
What should happen after hiding the DIV? It won't be there any more so physically it CANNOT be hovered any more (even if the user wants to)! From your semantics it should show the DIV again, but this will happen immediately so you might not even see it disappear in the first place

armin999
01-12-2012, 02:10 PM
<div id ="sidebar"
onmouseover = "hide()"
onmouseout = "show()">


<h3>***</h3>

<embed
width="300" height="100"
src=http://www.youtube.com/
type="application/x-shockwave-flash">
</embed>

<h3> *** </h3>
<embed
width="300" height="100"
src=http://www.youtube.com/
type="application/x-shockwave-flash">
</embed>

</div>

i changed it like this, and i want that the div container is just hidden during my mouse hovers over it, if the mouse is somewhere else, it should be shown...
and thanks for your help so far

devnull69
01-12-2012, 05:34 PM
Sorry armin, but you don't get me ... maybe someone else is able to help you here

blaze4218
01-12-2012, 07:45 PM
<script type = text/javascript>
function show()
{

document.getElementById("sidebar").style.visibility = "visible";

}
function hide()
{

document.getElementById("sidebar").style.visibility = "hidden";
}

</script>

<div id="under_sidebar" onmouseout = "show()" style="position:absolute;left:0px;top:0px;width:500px;height:500px;background-color:blue">
</div>

<div id ="sidebar" onmouseover = "hide()" style="position:absolute;left:0px;top:0px;width:500px;height:500px;background-color:green">

<h3>***</h3>

<embed width="300" height="100" src="http://www.youtube.com/" type="application/x-shockwave-flash">
</embed>

<h3> *** </h3>
<embed width="300" height="100" src=http://www.youtube.com/ type="application/x-shockwave-flash">
</embed>
</div>



@armin devnull is telling you that you have your show/hide functions backwards...
also, you cant trigger the show/hide with the element that is hiding... you have to use a separate element. or in my example, you can just move the show function call to a separate element. I stacked them on top of each other so they look like the effect your asking for, and I made the color different to see the effect, but you can remove the color.

I would like to note that if you were trying to prevent the user from accessing the content, you might like this better:


<style type="text/css">

#sidebar{background-color:green}

#sidebar_cover{filter:alpha(opacity=0);opacity:0;background-color:white}

.sidebar_position{position:absolute;left:0px;top:0px;width:500px;height:500px;}

</style>


<div id ="sidebar" class="sidebar_position">
<h3>***</h3>
<embed width="300" height="100" src="http://www.youtube.com/" type="application/x-shockwave-flash">
</embed>
<h3> *** </h3>
<embed width="300" height="100" src=http://www.youtube.com/ type="application/x-shockwave-flash">
</embed>
</div>

<div id="sidebar_cover" class="sidebar_position">
</div>



<script type = text/javascript>
function show(element){
if(element.filters)
element.filters.alpha.opacity=0;
else
element.style.opacity = 0;
}

function hide(element){
if(element.filters)
element.filters.alpha.opacity=100;
else
element.style.opacity = 1;
}

document.getElementById('sidebar_cover').onmouseover = function () {hide(this)};
document.getElementById('sidebar_cover').onmouseout = function () {show(this)};
</script>




Edit:
The reason why is that even if the user doesn't have javascript, they should still be prevented from clicking the div by the CSS positioning of content.
(also I used the wrong word up there, and I fixed that...)

armin999
01-13-2012, 01:19 PM
Thanks for your help, now it works like i want to...

but i have still one question...

i tried to make some diffenrent things like javascript wirtes between 07:00 and 12:00 good morning and so on, but since i wrote your code it doesnt work any more....
and if i write your code in the header it doesnt work at all... for information, i have some codes in the header, and they work like i want to

<div id = "footer">
<h3 id = "U5"> Footer<h3>


<script type = "text/javascript">

function date()
{
var d = new Date();
var time = d.getHours();
if(time <12 &&7 < time)
{
document.getElementById("U5").write("Morgen");
}
else if ( time> 12 && time < 15)
{
document.getElementById("U5").write("Mahlzeit");
}
else if (time> 15 && time< 24)
{
document.getElementById("U5").write("Abend");
}
}

function show(element){
if(element.filters)
element.filters.alpha.opacity=0;
else
element.style.opacity = 0;
}

function hide(element){
if(element.filters)
element.filters.alpha.opacity=100;
else
element.style.opacity = 1;
}

document.getElementById('sidebar_cover').onmouseover = function () {hide(this)};
document.getElementById('sidebar_cover').onmouseout = function () {show(this)};

</script>
</div>


------
Ich bin dicht, aber goethe ist immer noch Dichter

blaze4218
01-13-2012, 06:32 PM
It would be better if you wrapped code with the code tags...

It's usually best to put the javascript after the body. In my code I used js to modify HTML, if you move the js to the head then it tries to modify the HTML before the HTML exists... No Bueno....
Most people prefer their js in either the head or after the body, but I think we can all agree that it doesn't belong mixed in with the HTML

Also, I don't know why you say that time script worked before, that's not even correct js.


<html>

<head>
<style type="text/css">

#sidebar{background-color:green}

#sidebar_cover{filter:alpha(opacity=0);opacity:0;background-color:white}

.sidebar_position{position:absolute;left:0px;top:150px;width:500px;height:500px;}

</style>
</head>

<body>
<div id ="sidebar" class="sidebar_position">
<h3>***</h3>
<embed width="300" height="100" src="http://www.youtube.com/" type="application/x-shockwave-flash">
</embed>
<h3> *** </h3>
<embed width="300" height="100" src=http://www.youtube.com/ type="application/x-shockwave-flash">
</embed>
</div>

<div id="sidebar_cover" class="sidebar_position">
</div>

<div id = "footer">
<h3 id = "U5">Guten <h3>
</div>
</body>


<!--// I put this script here for a reason -->

<script type = text/javascript>

// You can move your functions to the head if you want to
function Gruss() {
var d = new Date() ,
Uhrzeit = '' ,
time = d.getHours();

if ( time<12 && 7<=time ) {
Uhrzeit = "Morgen";
}
else if ( time>=12 && time<= 15) {
Uhrzeit = "Mahlzeit";
}
else if ( time>15 && time<24 ) {
Uhrzeit = "Abend";
}
return Uhrzeit;
}

// You can move your functions to the head if you want to
function show(element){
if(element.filters)
element.filters.alpha.opacity=0;
else
element.style.opacity = 0;
}

// You can move your functions to the head if you want to
function hide(element){
if(element.filters)
element.filters.alpha.opacity=100;
else
element.style.opacity = 1;
}

// This part modifies the HTML and must go after the HTML... Or in an onload function
document.getElementById('U5').innerText += Gruss();
document.getElementById('sidebar_cover').onmouseover = function () {hide(this)};
document.getElementById('sidebar_cover').onmouseout = function () {show(this)};
</script>

devnull69
01-14-2012, 09:32 AM
One correction here


"Allwissend bin ich nicht, doch viel ist mir bewusst"

:-)

Why do you think the time script is incorrect Javascript?

blaze4218
01-14-2012, 07:07 PM
well I suppose if it were supplemented with something not shown here it could work, but when I tried to run the following code document.getElementById("U5").write("Abend"); I was prompted with an error. I don't know which flavor of js has a built in write method for modifying DOM elements....
just to double check I ran the following:

for(var i in document.getElementById('U5')){document.write(i+',')}
and it returned

nextSibling,onresizeend,onrowenter,aria-haspopup,childNodes,ondragleave,oncut,clientHeight,onbeforepaste,ondragover,onbeforecopy,aria-disabled,onpage,recordNumber,previousSibling,nodeName,onbeforeactivate,accessKey,currentStyle,onfocu sin,onbeforeeditfocus,oncontrolselect,aria-hidden,onblur,hideFocus,style,onbeforedeactivate,dir,aria-expanded,onkeydown,nodeType,ondragstart,scrollTop,onscroll,onpropertychange,ondragenter,id,aria-level,onrowsinserted,onmovestart,scopeName,lang,onmouseup,aria-busy,oncontextmenu,language,offsetWidth,onbeforeupdate,onreadystatechange,filters,onresize,isContent Editable,aria-checked,aria-readonly,oncopy,onselectstart,scrollHeight,onmove,ondragend,onrowexit,lastChild,aria-secret,onactivate,canHaveChildren,onfocus,isMultiLine,onmouseover,offsetTop,parentNode,tagName,class Name,canHaveHTML,onmousemove,title,role,behaviorUrns,onfocusout,onfilterchange,disabled,parentTextEd it,ownerDocument,offsetParent,aria-posinset,ondrop,ondblclick,onrowsdelete,tabIndex,onkeypress,aria-relevant,onlosecapture,innerText,aria-live,parentElement,ondeactivate,aria-labelledby,aria-pressed,children,ondatasetchanged,ondataavailable,aria-invalid,onafterupdate,nodeValue,onmousewheel,onkeyup,readyState,aria-valuenow,aria-selected,onmouseout,aria-owns,aria-valuemax,onmoveend,document,firstChild,sourceIndex,outerText,isTextEdit,scrollLeft,isDisabled,oncell change,runtimeStyle,scrollWidth,aria-valuemin,onlayoutcomplete,onhelp,attributes,offsetHeight,onerrorupdate,contentEditable,onmousedown,a ria-setsize,clientWidth,onpaste,tagUrn,onmouseleave,clientLeft,onclick,outerHTML,ondrag,aria-controls,onresizestart,aria-flowto,ondatasetcomplete,aria-required,clientTop,aria-describedby,onmouseenter,all,onbeforecut,innerHTML,aria-activedescendant,aria-multiselectable,offsetLeft,align,dataSrc,dataFld,noWrap,dataFormatAs,
I didn't want to be misleading so I thought I should check it out before posting. I hope I didn't lead anyone astray.

As for my sig...
I figured it was a matter of time before someone pointed that out...
The original quote from A Wrinkle in Time was bewisst, but many people have corrected me on that. So before I put it on my sig i googled the hell out of it, and came up with about 5 variations... I chose bewursst because I saw that more often than the others, and I don't speak german, so I couldn't be sure. If you think about it though, it's somewhat phrophetic that while not knowing what the real spelling was, I still understood the message. And so too did you ;) (and before you correct me I mean to say that I was quoting A Wrinkle in Time, I know that the book was quoting Faust...)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum