SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post i made this from a post i saw on this forum and i need help

    how do i do so is is not a div but links or link classes that activates the anim ation and lets the content slide in when pressed


    <hr>
    Code HTML4Strict:
    <html>
    <head>
     
     
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery.js"></script>
     
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="sprite.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
     
    var stopPosition = 420;
     
    window.onload=function()
    {
      document.getElementById("c1").onclick = slideIt;
      slidingDiv = document.getElementById("c2");
    };
     
    function slideIt()
    {
      if (parseInt(slidingDiv.style.left) < stopPosition )
      {
        slidingDiv.style.left = parseInt(slidingDiv.style.left) + 50 + "px";
        setTimeout(slideIt, 1);
      }
    }
    </script>
    </head>
    <body>
     
      <!-- Logo Start -->
    <img src="images/alex.png">
    <!-- Logo slut -->
     
    <!-- Navbar start -->
    <div id="nav">
    <ul id="navigation">
      <li><a id="c1"></a></li>
      <li><a class="services" href="#"></a></li>
      <li><a class="portfolio" href="#"></a></li>
      <li><a class="about" href="#"></a></li>
        <li><a class="contact" href="#"></a></li>
        <li><a class="home" href="#"></a></li>
      <li><a class="services" href="#"></a></li>
      <li><a class="portfolio" href="#"></a></li>
      <li><a class="about" href="#"></a></li>
        <li><a class="contact" href="#"></a></li>
    </ul>
    </div>
    <br/>
    <!-- Navbar slut -->
     
    <div id="c2" style="position: absolute; left:-794px; top:250px"></div>
     
    </body>
    </html>
    Last edited by TechnoBear; Nov 26, 2012 at 03:54. Reason: Code tags added


Tags for this Thread

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
  •