We help IT Professionals succeed at work.

How to slide a div to the left

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.
Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock this solution and get a sample of our free trial.
(No credit card required)
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.


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?


here is one more way:

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

                        position: absolute;
                        top: auto;
                        left: 250px;
                        border-width: 1px 2px 2px 1px;
                        border-style: solid;
                        border-color: #333;
                        background: #fdcdcd;

            <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;
                    }else if (use_css) {
                    }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;
                    }else {
                         coordinates.x=0; coordinates.y=0; return coordinates;
                    //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){

                                    var xy=getObjPosition(o);

                                    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(){
            <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 id="img" class="img" onclick="showTips(this)">
                  <a href="#" onclick="return false">Imagin this is an image - Click me</a>
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.


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.