Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    onmouseevent show and hide

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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

  • Users who have thanked devnull69 for this post:

    armin999 (01-12-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <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.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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...

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Last edited by devnull69; 01-12-2012 at 01:43 PM.

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <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

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Sorry armin, but you don't get me ... maybe someone else is able to help you here

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Code:
    <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:
    Code:
    <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...)
    Last edited by blaze4218; 01-13-2012 at 12:26 AM.
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • Users who have thanked blaze4218 for this post:

    armin999 (01-13-2012)

  • #11
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #12
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.
    PHP Code:
    <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 
    = 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> 
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    One correction here
    Code:
    "Allwissend bin ich nicht, doch viel ist mir bewusst"
    :-)

    Why do you think the time script is incorrect Javascript?

  • #14
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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:
    Code:
    for(var i in document.getElementById('U5')){document.write(i+',')}
    and it returned
    Code:
    nextSibling,onresizeend,onrowenter,aria-haspopup,childNodes,ondragleave,oncut,clientHeight,onbeforepaste,ondragover,onbeforecopy,aria-disabled,onpage,recordNumber,previousSibling,nodeName,onbeforeactivate,accessKey,currentStyle,onfocusin,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,isContentEditable,aria-checked,aria-readonly,oncopy,onselectstart,scrollHeight,onmove,ondragend,onrowexit,lastChild,aria-secret,onactivate,canHaveChildren,onfocus,isMultiLine,onmouseover,offsetTop,parentNode,tagName,className,canHaveHTML,onmousemove,title,role,behaviorUrns,onfocusout,onfilterchange,disabled,parentTextEdit,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,oncellchange,runtimeStyle,scrollWidth,aria-valuemin,onlayoutcomplete,onhelp,attributes,offsetHeight,onerrorupdate,contentEditable,onmousedown,aria-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...)
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •