We help IT Professionals succeed at work.

How to slide a div to the left

1,431 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.
Comment
Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
By the way, I tried it with the newest version of jQuery and it didn't seem to work.  just an FYI.
... and i don't know why there are two DOCTYPE declarations in my text.  it's just a junk file i test things with.

Author

Commented:
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

Commented:
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>
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.