Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    22
    Thanks
    3
    Thanked 1 Time in 1 Post

    Sidepage menu popout?

    I have just finished making the main part of my website but I have been looking around trying to add this thing they have on the side of there page that pops out when ever I hover over it: http://www.golfwrx.com/forums/ . I want something like this but i only want it to stay in one place on my page and I want to click it to make it pop out. Also i wasn't going to turn it into something that shows links, just a facebook like button. Any help?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You can borrow my example
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Andy's Side Panel</title>
        <style type="text/css">
            #sidePanel {
                position: fixed;
                width: 100px;
                height: 97px;
                margin-left: 33px;
                top: 200px;
                background: lightgrey;
                right: -100px;
                z-index: 5; /* just in case.. */
            }
            #sidePanel img {
                cursor: pointer;
                position: absolute;
                left: -33px;
            }
            #sidePanel a {
                display: block;
                width: 100px;
                height: 20px;
                text-decoration: none;
                padding: 2px;
            }
        </style>
        <script type="text/javascript">
            /* cSlidePanel parameters:
              conID : the id for the container element that is to be moved (must be a positioned element)
              clickID: the id for the clickable element that causes the move
              distance : the distance to be moved or, if omitted, the width of the element
              duration : an (optional) duration in milliseconds. 1000 would mean the whole process would
                    take 1 second to complete. If omitted, defaults to 30ms intervals (of 2 pixel movements).
            */
            function cSlidePanel(conID, clickID, distance, duration) {
                this.theContainer = document.getElementById(conID);
                this.rgt = parseInt(this.GetStyle(conID,"right"));
                this.distance = distance || parseInt(this.GetStyle(conID,"width"));
                this.gap = ( duration ) ? ( duration / this.distance ) : 30; // defaults to 30ms intervals
                this.out = false;   // used as a toggle
                var that = this;    // preserve scope
                this.AddEvent(document.getElementById(clickID),'click',function(e) {
                    return that.ToggleMove();
                });
            }
            cSlidePanel.prototype = {
                GetStyle : function (el, strRule) {		// e.g. "font-size" - robertnyman.com
                    var elem = (typeof el === 'string') ? document.getElementById(el) : el;
                    if (document.defaultView && document.defaultView.getComputedStyle ) {
                        return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
                    }
                    else if ( elem.currentStyle ) {
                        strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
                            return p1.toUpperCase();
                        });
                        return elem.currentStyle[strRule];
                    }
                    else
                        return '';
                },
                AddEvent : function (elem, eventType, func) {
                    if ( elem.addEventListener )
                        AddEvent = function (elem, eventType, func) {
                            elem.addEventListener(eventType, func, false);
                        };
                    else if ( elem.attachEvent )
                        AddEvent = function (elem, eventType, func) {
                            elem.attachEvent('on' + eventType, func);
                        };
                    AddEvent(elem, eventType, func);
                },
                MoveIt : function(toLeft) {
                    if ( toLeft && this.rgt <= -2 ) {
                        this.rgt += 2;
                    }
                    else if ( !toLeft && this.rgt >= -this.distance + 2 ) {
                        this.rgt -= 2;
                    }
                    else {
                        return false;
                    }
                    this.theContainer.style.right = this.rgt + 'px';
                    var that = this;
                    this.theTimer = setTimeout(function() { that.MoveIt(toLeft); },that.gap);
                },
                ToggleMove : function () {
                    clearTimeout(this.theTimer);
                    this.out = !this.out;
                    this.MoveIt(this.out);
                }
            };
            function InitPanel() {
                //oPanel = new cSlidePanel('sidePanel','sideImage',100,2000);  // 100px width of element
                oPanel = new cSlidePanel('sidePanel','sideImage',null,1000);  // width will be determined
            }
            window.onload = InitPanel;
        </script>
    </head>
    <body>
        <h1>Andy's Side Panel</h1>
        <div id="sidePanel">
            <img src="images/sidebar.png" id="sideImage">
            <a href="#home">Home</a>  
            <a href="#about">About</a>
            <a href="#further">Further Info</a>
            <a href="#contact">Contact Us</a>
        </div>
    </body>
    </html>
    The image I use it attached.

    Basically, you need a positioned div with an id - I've fixed it to the right-hand side. This div contains an image with an id that you can then click on.

    To modify it you would need your own image (or you could use another div if you can persuade the text to run vertically ) and then amend the css measurements so that it all fits neatly. Andy.
    Attached Images Attached Images  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    22
    Thanks
    3
    Thanked 1 Time in 1 Post
    thank you i will try this when i get the chance


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •