SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem changing onmouseover/out to onclick

    Hi there,

    I'm using a simple script that moves a DIV from one location to another when the user mouses over it. The problem is, I want the user to have to click the div for it to move and then click it agin to move it back. I've been trying to find a simple solution without luck. I'm not very experienced at JavaScript (as you may have guessed) so any help would be greatly appreciated.

    Code being used:

    <head>
    <script type="text/javascript">
    var i=-180
    var intHide
    var speed=10

    function showmenu1()
    {
    clearInterval(intHide)
    intShow=setInterval("show1()",1)
    }

    function hidemenu1()
    {
    clearInterval(intShow)
    intHide=setInterval("hide1()",1)
    }

    function show1()
    {
    if (i<-0)
    {
    i=i+speed
    document.getElementById('menu1').style.top=i+'px';
    }
    }

    function hide1()
    {
    if (i>-180)
    {
    i=i-speed
    document.getElementById('menu1').style.top=i+'px';
    }
    }
    </script>

    <style type="text/css">
    #menu1 {
    position: absolute;
    top: -180px;
    left: 0px;
    width: 100%;
    height: 196px;
    background: #000;
    cursor: pointer;
    }
    </style>
    </head>

    <body>
    <div id="menu1" onmouseover="showmenu1()" onmouseout="hidemenu1()"></div>
    </body>

  2. #2
    SitePoint Member
    Join Date
    Nov 2004
    Location
    compton
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this will achieve what you are after :


    Code:
    <html>
    <head>
    	<title>Toggle</title>
    <script type="text/javascript">
    
    // function to run onload
    function myInitialise()
    {
    // assign common scope to variable to save coding
    d = document.getElementById('menu1').style;
    // set the initial top position of the <div>
    d.top = "-180px";
    }
    
    // function to run onclick
    function myToggle()
    {
    // test for current top position and change accordingly
    d.top = d.top == "-180px" ? "0px" : "-180px";
    }
    </script>
    
    <style type="text/css">
    #menu1 {
    position: absolute;
    top: -180px;
    left: 0px;
    width: 100%;
    height: 196px;
    background: #000;
    cursor: pointer;
    }
    </style>
    </head>
    
    <body onload="myInitialise()">
    <div id="menu1" onclick="myToggle()"></div>
    </body>
    
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for helping me, I really appreciate it. The code you provided has correctly converted the script to work with onclick but it now jumps rather than "glides" into position. I can't seem to be able to combine the two scripts. Any help would be fantastic.


Bookmarks

Posting Permissions

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