?
Solved

How to slide a div to the left

Posted on 2007-10-11
6
Medium Priority
?
1,397 Views
Last Modified: 2013-11-19
I have an image I want that when it's clicked would slide a div to the left of the image and there would be a close button inside of the div to slide it back in & making it unvisible.
I found many scripts for sliding menus but I failed to use any of them to do what I want coz I don't want a menu just one image when clicked would open the div but in a sliding manner.

Thanks in advance.
0
Comment
Question by:JessyEzzy
6 Comments
 
LVL 4

Assisted Solution

by:Russell2566
Russell2566 earned 80 total points
ID: 20058251
Check out Yahoo's YUI http://developer.yahoo.com/yui They have a library for animation thats very easy to use with lots of examples and documentation...
0
 
LVL 6

Accepted Solution

by:
starfailure earned 420 total points
ID: 20058385
Here's a jQuery example:

I used jQuery version 1.1.3.1, obtained here:
http://docs.jquery.com/Downloading_jQuery#Past_Releases
and the Interface FX plugin, obtained here:
http://interface.eyecon.ro/download

Once you have those files in place (your include directory), the code will look something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
      margin:0px;
      padding:0px;
}
#blank {
      background:lightblue;
      height:100px;
      width:100px;
      display:none;
      float:left;
}
#image {
      position:absolute;
      left:100px;
}
</style>
<script type="text/javascript" src="./include/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="./include/interface 1.2/interface.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#image").click(function() {
            $("#blank").SlideInRight(500);
      });
      $("#hideme").click(function() {
            $("#blank").SlideOutRight(500);
      });
  });
</script>
</head>
<body>
<div id="main"><div id="blank">blah blah blah blah<button id="hideme">hide me!</button>
</div><img src="./images/theimage.gif" id="image">
</div>
</body>
</html>

Obviously, you'll have to position all your elements the way you want them.
0
 
LVL 6

Expert Comment

by:starfailure
ID: 20058399
By the way, I tried it with the newest version of jQuery and it didn't seem to work.  just an FYI.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 6

Expert Comment

by:starfailure
ID: 20058442
... and i don't know why there are two DOCTYPE declarations in my text.  it's just a junk file i test things with.
0
 
LVL 3

Author Comment

by:JessyEzzy
ID: 20061547
startfailure I tried the code and it's working as I want except for one thing the location where the div starts to slide in & out is so far away from the image clicked. Is there a way for making it slide in & out relative to the position of the image?

Thanks
0
 
LVL 17

Expert Comment

by:gops1
ID: 20068121
here is one more way:


<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>
                  body, input, div, a{font-family:verdana;font-size:11px;}
                  .tooldiv{
                        position: absolute;
                        top: auto;
                        left: auto;
                        border-width: 1px 2px 2px 1px;
                        border-style: solid;
                        border-color: #333;
                        background: #c6c3c3;
                        height:100px;
                        width:100px;
                        display:none;
                  }

                  .img{
                        position: absolute;
                        top: auto;
                        left: 250px;
                        border-width: 1px 2px 2px 1px;
                        border-style: solid;
                        border-color: #333;
                        background: #fdcdcd;
                        height:60px;
                        width:200px;
                        padding-left:10px;
                        padding-top:20px;
                  }

            </style>
            <script language="javascript">
               var isMozilla = navigator.userAgent.indexOf('Mozilla') != -1 && parseInt(navigator.appVersion.substring(0,1)) >= 5;
               var isIE = navigator.userAgent.indexOf('MSIE') != -1;

               function getObjPosition(obName) {
                    // This function will return an Object with x and y properties
                    var useWindow=false;
                    var coordinates=new Object();
                    var x=0,y=0;
                    // Browser capability sniffing
                    var use_gebi=false, use_css=false, use_layers=false;
                    if (document.getElementById) { use_gebi=true; }
                    else if (document.all) { use_css=true; }
                    else if (document.layers) { use_layers=true; }
                    // Logic to find position

                    if (use_gebi) {
                         var o=obName;
                         x=AnchorPosition_getPageOffsetLeft(o);
                         y=AnchorPosition_getPageOffsetTop(o);
                    }else if (use_css) {
                         x=AnchorPosition_getPageOffsetLeft(obName);
                         y=AnchorPosition_getPageOffsetTop(obName);
                    }else if (use_layers) {
                    var found=0;
                         for (var i=0; i<document.anchors.length; i++) {
                              if (document.anchors[i].name==obName) { found=1; break; }
                         }
                         if (found==0) {
                              coordinates.x=0; coordinates.y=0; return coordinates;
                         }
                         x=document.anchors[i].x;
                         y=document.anchors[i].y;
                    }else {
                         coordinates.x=0; coordinates.y=0; return coordinates;
                    }
                    coordinates.x=x;
                    coordinates.y=y;
                    //alert("X :--> "+coordinates.x +"\n\nY :--> "+coordinates.y);
                    return coordinates;
               }

               function AnchorPosition_getPageOffsetTop (el) {
                    var ot=el.offsetTop;
                    while((el=el.offsetParent) != null) { ot += el.offsetTop; }
                    return ot;
               }

               function AnchorPosition_getPageOffsetLeft (el) {
                    var ol=el.offsetLeft;
                    while ((el=el.offsetParent) != null) { ol += el.offsetLeft;}
                    return ol;
               }

                     var d="";
               function showTips(o){
                           d=document.getElementById('tool')
                           if(d.style.display!="inline"){

                                    var xy=getObjPosition(o);
                                    d.style.left=xy.x+"px";
                                    d.style.top=xy.y+"px";
                                    d.style.display="inline";

                                    m=window.setInterval("var o=document.getElementById('img');var movX=(o.offsetLeft-10)-d.offsetWidth;if(parseInt(d.style.left)>movX){d.style.left=(parseInt(d.style.left)-1);}else window.clearInterval(m);",10);
                              }
               }

               function hideTips(){
                           d.style.display="none";
               }
            </script>
      </head>
      <body>
            <div id="tool" class="tooldiv">
                  <div onclick="hideTips();" style="float:right;padding-left:10px;padding-right:10px;cursor:pointer;cursor:hand;">X</div>
                  This is a tip
            </div>
            <br><br><br><br><br><br><br><br><br>
            <div id="img" class="img" onclick="showTips(this)">
                  <a href="#" onclick="return false">Imagin this is an image - Click me</a>
            </div>
      </body>
</html>
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question