csergent08

Create a Draggable Floating Sidebar

Blog Post created by csergent08 Champion on Jan 27, 2015

In this post we are going to create a draggable floating sidebar that will display social networking widgets. The sidebar will be collapsible and draggable. The four widgets that we will display on our site are Twitter, Facebook, LinkedIn, and YouTube. So we will start with a basic map application:

<!DOCTYPE html>
<html>
    <head>
        <title>Widgets</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/soria/soria.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">


        <link rel="SHORTCUT ICON" href="images/widget.png" />

        <link rel="apple-touch-icon" href="images/iWidget.png" />

        <link href="css/custom-theme/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />


        <style>
            html, body, #mapSection
            {
                padding:0;
                margin:0;
                height:100%;
                width:100%;
            }
            
            
            
            .fb-like-box
            {
                background-color:Black;
            }
            
   
        </style>
        <script src="http://js.arcgis.com/3.12/"></script>


        <!-- jQuery Library -->
        <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
        <!-- Enables jquery mouse events to work as touch events on mobile devices: https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js -->
        <script src="js/jquery.ui.touch-punch.js" type="text/javascript"></script>


        <script>
            var map;
            require(["esri/map", "esri/config",
                     "esri/geometry/Extent",
                     "esri/layers/ArcGISDynamicMapServiceLayer",
                     "esri/layers/ArcGISTiledMapServiceLayer",
                     "esri/layers/FeatureLayer",
                     "esri/tasks/GeometryService",
                     "dojo/dom",
                     "dojo/on",
                     "dojo/parser",
                     "dojo/domReady!"], function (Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, GeometryService, dom, on, parser
            ) {
                         parser.parse();


                         /* The proxy comes before all references to web services */
                         /* Files required for security are proxy.config, web.config and proxy.ashx 
                         - set security in Manager to Private, available to selected users and select Allow access to all users who are logged in
                         (Roles are not required)
                         /*
                         The proxy section is defined on the ESRI sample. I have included it as
                         part of the documentation reads that the measuring will not work.
                         I thought that might be important.
                         */


                         // Proxy Definition Begin 
                         //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
                         //If this null or not available the project and lengths operation will not work. 
                         // Otherwise it will do a http post to the proxy.
                         esriConfig.defaults.io.proxyUrl = "proxy.ashx";
                         esriConfig.defaults.io.alwaysUseProxy = false;


                         // Proxy Definition End

                         // set custom extent
                         var initialExtent = new Extent({
                             "xmin": 777229.03,
                             "ymin": 1133467.92,
                             "xmax": 848340.14,
                             "ymax": 1185634.58,
                             "spatialReference": {
                                 "wkid": 3435
                             }
                         });


                         // create map and set slider style to small
                         map = new Map("mapSection", {
                             showAttribution: false,
                             sliderStyle: "small",
                             extent: initialExtent,
                             logo: false
                         });


                         // add imagery
                         var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                         map.addLayer(tiled);
                         // set operational layers
                         var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
                         // add operational layers
                         map.addLayer(operationalLayer);


                         // add point feature layer
                         var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");
                         map.addLayer(pointFeatureLayer);


                         // declare geometry service
                         esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");


                     }
            );
        </script>
    </head>
    <body class="soria">

        <!-- Map Section Begin -->
        <section id="mapSection">
        
        </section>
        <!-- Map Section End -->

    </body>
</html>

If you want to follow along, you just need the jQuery files. You can get the files that I am using in this post if you scroll down to the bottom and click on get the code. Just copy the folders, js, images, and css to the same folder as your application. You can get rid of the code for proxy too. You won't need it here. Now we are ready to start creating our sidebar.

 

To begin, let's create a top section, middle for content and bottom. Here is the skeleton sidebar:

<!-- Sidebar Begin -->
        <aside id="sideBar">
            <!-- Sidebar Top Begin -->
            <div id="sideBarTop">
            
            </div>                
            <!-- Sidebar Top End -->


            <!-- Sidebar Top Fill Begin -->
            <div id="sideBarTopFill">
            
            </div>
            <!-- Sidebar Top Fill End -->


            <!-- Sidebar Title Begin -->
            <div id="sideBarTitle">
                <p>Social Networks</p>
                <!-- Sidebar Content Begin -->
                <div id="sideBarContent">
                
                </div>
                <!-- Sidebar Content End -->
            </div>
            <!-- Sidebar Title End -->


            <!-- Sidebar Bottom Fill Begin -->
            <div id="sideBarBottomFill">
            
            </div>
            <!-- Sidebar Bottom Fill End -->


            <!-- Sidebar Bottom Begin -->
            <div id="sideBarBottom">
            
            </div>
            <!-- Sidebar Bottom End -->
        </aside>
        <!-- Sidebar End -->

Now all of our content will be inside the sidebar content. Now, before we add content, let's add a little style. You just need to place this in your head section or your external CSS file:

 #sideBar
            {
                display:block; /* Only for IE8 or less */
                position:absolute;
                width:376px;
                height:auto;
                background-color:transparent;
                border-color:transparent;
                padding:0px;
                left:50px;
                top:50px;
                z-index:200
            }




            #sideBarContent
            {
                width:374px;
                padding:0px
            }
   


            #sideBarTopFill, #sideBarBottomFill
            {
                height:15px;
                background-color:#E1EBFB
            }


            #sideBarTop
            {
                background-color:#E1EBFB;
                height:5px;
                border-top-left-radius:5px;
                border-top-right-radius:5px
            }


            #sideBarBottom
            {
                background-color:#E1EBFB;
                height:5px;
                border-bottom-left-radius:5px;
                border-bottom-right-radius:5px
            }

 

Now it's time to add the content section. So right after the div sideBarContent, we write the following:

<h3>Twitter</h3>
                    <!-- Decatur Twitter Begins -->
                    <div id="decaturTwitter">
                        Tweets
                    </div>
                    <!-- Decatur Twitter Ends -->


                    <h3>Facebook</h3>
                    <!-- Decatur Facebook Begins -->
                    <div id="decaturFacebook">
                        Posts
                    </div>
                    <!-- Decatur Facebook Ends -->


                    <h3>LinkedIn</h3>
                    <!-- Company Profile Begin -->
                    <div id="companyProfile">
                        Jobs
                    </div>
                    <!-- Company Profile End -->


                    <h3>YouTube</h3>
                    <!-- YouTube Channel Begin -->
                    <div id="youTubeChannnel">
                        Video
                    </div>
                    <!-- YouTube Channel End -->

                 

  Now we have the containers for our four widgets. Before we add the widgets, let's make the sidebar draggable and collapsible. I also will set the default so that twitter is open when the app runs. Add this code before the body or inside your external JavaScript file.

<script type="text/javascript">
             /* Enables Sidebar to be draggable */
             jQuery(function () {
                 jQuery("#sideBar").draggable();
             });




             /* The accordion allows sections to expand/collapse which show or hide each section */
             jQuery(function () {
                 jQuery("#sideBarTitle").accordion({
                     collapsible: true,
                     heightStyle: "content"
                 });
             });




             /* Setting an active panel - http://api.jqueryui.com/accordion/#option-active */
             jQuery(function () {
                 jQuery("#sideBarContent").accordion({
                     heightStyle: "content"
                 });
                 jQuery("#sideBarContent").accordion("option", "active", 0);
             });


        </script> 

 

With that, here is what we have built so far:

sidebar.png

In my next post, we will populate each section with a widget directly to specific pages for each site. If you would like to continue to follow along, you can get the code here.

Outcomes