SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict betrollwin.com's Avatar
    Join Date
    Nov 2005
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide in fixed div from right page margin

    What I want:
    An images of a phone is in a fixed position on the right side of the page. When it is clicked, a div with a phone number slides in from the right (pushing the image of the phone left with it). When the image of the phone is clicked again, it slides to the right and is no longer visible again.

    I've been trying this out with jQuery for a while and cant seem to get anything to work (came close once but it only worked in firefox for some reason =/)

    Can anyone help?

    edit: Good example: http://thedemo.ca/

  2. #2
    SitePoint Addict betrollwin.com's Avatar
    Join Date
    Nov 2005
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update.. getting close. This slides in from the right, but the image of the phone first jumps to the location where it will be pushed to and then waits for the slide to catch up. I need it to move smoothly. Any modifications you can see?

    in head
    [
    Code HTML4Strict:
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <style type="text/css">
      #slidemarginleft { margin: 0px; float:right; padding:5px; position: relative;float:right;background:#fff;text-align:center;border:2px green solid;border-right:0; }
      #holdright{position:fixed;top:150px;right:0;}
    </style>
      <script>
      $(document).ready(function() {
        $("#slidemarginleft").hide();
    $("#holdright img").click(function () {
          $("#slidemarginleft").toggle("slide", { direction: "right"}, 1000);
     
    });
     
      });
      </script>

    in body
    Code HTML4Strict:
    <div id="holdright">
    <img id="calltoggle" src="callus.gif" alt="Call Us" style="padding:2px;background:white;border:2px green solid;border-right:0;border-left:0;" />
    <div id="slidemarginleft" class="slide">
    <p style="font-weight:bold;font-size:16px;">Give Us A Call!<br/><span class="phonenum">555.555.5555</span></p>
    </div>


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
  •