Rectangle 27 3

sidebar.js
content script
iframe

But I would prefer option 2 because :

  • You wont have to bootstrap your angular app every time you inject your frame if you are using angularjs.
  • You can put your entire application code inside iframe and use content script to inject frame and listen for messages only. You code would be easy to maintain and debug.

thanks. Just selected your answer. On the same lines would you know if some sites can give problems injecting this iframe(won't show this iframe) ..... like sites, which are loaded using HTTPS, because my iframe is communicating with a backend.

@ManUnitedFan Some sites could see iframe injection as malicious activity. I have injected iframe in mail.google.com successfully. Though I think its worth a new question.

javascript - What is the best way to show a sidebar/popup window on a ...

javascript angularjs google-chrome google-chrome-extension
Rectangle 27 3

sidebar.js
content script
iframe

But I would prefer option 2 because :

  • You wont have to bootstrap your angular app every time you inject your frame if you are using angularjs.
  • You can put your entire application code inside iframe and use content script to inject frame and listen for messages only. You code would be easy to maintain and debug.

thanks. Just selected your answer. On the same lines would you know if some sites can give problems injecting this iframe(won't show this iframe) ..... like sites, which are loaded using HTTPS, because my iframe is communicating with a backend.

@ManUnitedFan Some sites could see iframe injection as malicious activity. I have injected iframe in mail.google.com successfully. Though I think its worth a new question.

javascript - What is the best way to show a sidebar/popup window on a ...

javascript angularjs google-chrome google-chrome-extension
Rectangle 27 1

I use destroy.owl.carousel to destroy carousel. Carousel reinitialize on click of left navigation menu

var $owl = $('.owl-carousel');
/*inital on load */
$owl.owlCarousel({
  items: 6,
  lazyLoad: true,
  loop: true,
  margin: 10,
});
/*on click of navigation menu */
function resizeCarosel(obj) {
  if (obj.classList.contains('is-open')) {
    $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
    $owl.owlCarousel({ /*reinitialize Carousel*/
      items: 6,
      lazyLoad: true,
      loop: true,
      margin: 10,
    });
  }
  if (obj.classList.contains('is-closed')) {
    $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
    $owl.owlCarousel({ /*reinitialize Carousel*/
      items: 2,
      lazyLoad: true,
      loop: true,
      margin: 10,
      /*for responsive 
        items: 4,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          600: {
            items: 3,
            nav: false
          },
          1000: {
            items: 5,
            nav: true,
            loop: false
          }
        }
      */
    });
  }

}
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script type="text/javascript" src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>

<div id="wrapper" class="">
  <div class="overlay" style="display: none;"></div>
  <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
      <li class="sidebar-brand">
        <a href="#"> BLESM </a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-camera"></i> Photo</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-facetime-video"></i> Video</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-headphones"></i> Music</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-cloud"></i> Cloud</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-th"></i> Apps</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a>
      </li>
    </ul>
  </nav>
  <div id="page-content-wrapper">
    <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas" onclick="resizeCarosel(this)">
      <span class="hamb-top"></span>
      <span class="hamb-middle"></span>
      <span class="hamb-bottom"></span>
    </button>
    <div class="container">
      <div class="owl-carousel owl-theme">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
      </div>

    </div>
  </div>
</div>

The issue I see with your solution, is the issue I am running into, the animation is resizing the body, so while it does shrink or go down from 6 to 2, the second block is still half rendered.

I don't think so in OwlCarousel2 they change the container for responsive . you can see full screen vs edit view of responsive OwlCarousel2 example

So in essence, there is no way to deal with this. I've tried your code, then modifying it to reinit the container when the navigation opens, but to no avail.

javascript - Reload Owl Carousel 2 when side navigation opens or close...

javascript jquery owl-carousel-2
Rectangle 27 1

Change the showInfoWindow function in the example to check to see if the infowindow is open and the same infowindow, then just close it, otherwise do the required processing to get the contents. Need to add a property to the marker so you can tell whether it is the same one or not.

function showInfoWindow(i) {
    return function(place, status) {
      if (!!iw && iw._iwId == i) {
        iw.close();
        iw = null;
      } else {
        if (iw) {
          iw.close();
          iw = null;
        }
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          iw = new google.maps.InfoWindow({
            content: getIWContent(place),
            _iwId:i
          });
          iw.open(map, markers[i]);        
        }
      }
    }
  }

javascript - How to close infoWindow from sidebar in the second click ...

javascript google-maps-api-3
Rectangle 27 1

I have seen some problems in the code.

var place = window.getSelection().toString() should not be placed here. You can't have selected text in the background page. You can remove this line.

chrome.tabs.getSelected
chrome.tabs.query({active: true}, callback);

The smelling code is the handleRequest function. You have made to condition, the first doing nothing, and the second, if I have well understood, displaying the sidebar.

So I think the problem is here. You should move the place = window.getSelection().toString(); statement to the first condition and then call sendResponse({data : place}). This way, you should send back the text selected in the page to the background script.

function handleRequest(request, sender, sendResponse)
{
    if (request.method == "getSelection")
    {
       place = window.getSelection().toString();
       console.log("sending to background : " + place);
       sendResponse({data: place});
    }

    if (request.callFunction == "toggleSidebar")
    {
       toggleSidebar();
       console.log("adasda");
    }
}

You should do a clean up. There is lot of not usefull comment that you should remove. It will improve the readability of your code for a better debuging.

javascript - adding the selected text on the webpage inside a field in...

javascript html google-chrome google-chrome-extension
Rectangle 27 1

Alright, first of all, I'm assuming that this application is an add-on, since it's in your spreadsheet. That means you don't need that pesky doGet(). The doGet is only necessary on standalone script.

Luckily, what you are trying to achieve is very easy in a GAS add-on. All you need to do is call a .run() function to your .gs to handle it. So, your HTML should look like this.

<button onclick='doMyStuff()'>button</button>
<script>
  function doMyStuff() {
    google.script.run.setUpNewSidebar();
  }
</script>
function setUpNewSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('newSidebar')
           .setTitle('Report Builder')
           .setSandboxMode(HtmlService.SandboxMode.IFRAME);
         SpreadsheetApp.getUi().showSidebar(ui);
}

If this IS a standalone script, heavily consider changing this to be an add-on. They are much easier to use and they will most likely work better.

javascript - Sidebar functionality in google sheets: clicking a button...

javascript html css google-apps-script sidebar
Rectangle 27 3

Your problem was that you forgot to add () after your function name.

Beyond that, there are a few other things to correct:

onclick
onmouseover
  • Create "spaghetti code" that is difficult to read and debug.
  • Don't follow the separation of concerns development methodology.
  • Create anonymous global wrapper functions around your attribute values that alter the this binding in your callback functions.
  • Don't follow the W3C Event Standard.
  • Can cause memory leaks in IE.

Instead, do all your work in JavaScript and use .addEventListener() to set up event handlers.

Don't use a hyperlink when a button (or some other element) will do. If you do use a hyperlink, you need to disable its native desire to navigate, which is done by setting the href attribute to #, not "".

// Place this code into a <script> element that goes just before the closing body tag (</body>).

// Get a reference to the button and the iframe
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");

// Set up a click event handler for the button
btn.addEventListener("click", getContent);

function getContent() {
  console.log("Old source was: " +  iFrame.src);
  iFrame.src="LoremIpsum.html";  
  console.log("New source is: " +  iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
    <li>Configuration Guides</li>
    <li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>

</div>

<iframe class="content" id="contentFrame" src="dummy.html"></iframe>

html - javascript function doesn't work when link is clicked - Stack O...

javascript html iframe
Rectangle 27 1

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

that did it just fine thank you

javascript - jQuery alert does not work - Stack Overflow

javascript jquery html5
Rectangle 27 1

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

that did it just fine thank you

javascript - jQuery alert does not work - Stack Overflow

javascript jquery html5
Rectangle 27 2

<style type="text/css">
    html, body, #map_canvas {
        width:   750px;
        height:  600px;
        margin:  0;
        padding: 0;
    }
        .infowindow * {font-size: 90%; margin: 0}
    </style>

            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 

    <script type="text/javascript">
                var geoXml = null;
                var geoXmlDoc = null;
                var map = null;
                var myLatLng = null;
                var myGeoXml3Zoom = true;
                var sidebarHtml = "";
                var infowindow = null;
                var kmlLayer = null;
                var filename = "test.kmz";      //kml or kmz file                   
                function MapTypeId2UrlValue(maptype) {
                    var urlValue = 'm';
                    switch (maptype) {
                        case google.maps.MapTypeId.HYBRID: urlValue = 'h';
                            break;
                        case google.maps.MapTypeId.SATELLITE: urlValue = 'k';
                            break;
                        case google.maps.MapTypeId.TERRAIN: urlValue = 't';
                            break;
                        default:
                        case google.maps.MapTypeId.ROADMAP: urlValue = 'm';
                            break;
                    }
                    return urlValue;
                }


                function initialize() {
                    myLatLng = new google.maps.LatLng(39.8000959563484, -89.549560546875);
                    // these set the initial center, zoom and maptype for the map 
                    // if it is not specified in the query string
                    var lat = 37.422104808;
                    var lng = -122.0838851;
                    var zoom = 18;
                    var maptype = google.maps.MapTypeId.ROADMAP;

                    // If there are any parameters at eh end of the URL, they will be in  location.search
                    // looking something like  "?marker=3"

                    // skip the first character, we are not interested in the "?"
                    var query = location.search.substring(1);

                    // split the rest at each "&" character to give a list of  "argname=value"  pairs
                    var pairs = query.split("&");
                    for (var i = 0; i < pairs.length; i++) {
                        // break each pair at the first "=" to obtain the argname and value
                        var pos = pairs[i].indexOf("=");
                        var argname = pairs[i].substring(0, pos).toLowerCase();
                        var value = pairs[i].substring(pos + 1).toLowerCase();

                        // process each possible argname  -  use unescape() if theres any chance of spaces
                        if (argname == "id") { id = unescape(value); }
                        if (argname == "filename") { filename = unescape(value); }
                        if (argname == "marker") { index = parseFloat(value); }
                        if (argname == "lat") { lat = parseFloat(value); }
                        if (argname == "lng") { lng = parseFloat(value); }
                        if (argname == "zoom") {
                            zoom = parseInt(value);
                            myGeoXml3Zoom = false;
                        }
                        if (argname == "type") {
                            // from the v3 documentation 8/24/2010
                            // HYBRID This map type displays a transparent layer of major streets on satellite images. 
                            // ROADMAP This map type displays a normal street map. 
                            // SATELLITE This map type displays satellite images. 
                            // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
                            if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; }
                            if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; }
                            if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; }
                            if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; }

                        }
                    }
                    if (!isNaN(lat) && !isNaN(lng)) {
                        myLatLng = new google.maps.LatLng(lat, lng);
                    }
                    var myOptions = {
                        zoom: zoom,
                        center: myLatLng,
                        // zoom: 5,
                        // center: myLatlng,
                        mapTypeId: maptype
                    };
                    map = new google.maps.Map(document.getElementById("map_canvas"),
                          myOptions);
                    infowindow = new google.maps.InfoWindow({});

                    geoXml = new geoXML3.parser({
                        map: map,
                        infoWindow: infowindow,
                        singleInfoWindow: true,
                        zoom: myGeoXml3Zoom,
                        markerOptions: { optimized: false },
                        afterParse: useTheData
                    });
                    geoXml.parse(filename);

                };

                //            function kmlPgClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polygon.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polygon.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                }
                //            }
                //            function kmlPlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polyline.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polyline.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                }
                //            }
                //            function kmlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
                //                    google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].marker.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker, "click");
                //                }
                //            }

                function kmlColor(kmlIn) {
                    var kmlColor = {};
                    if (kmlIn) {
                        aa = kmlIn.substr(0, 2);
                        bb = kmlIn.substr(2, 2);
                        gg = kmlIn.substr(4, 2);
                        rr = kmlIn.substr(6, 2);
                        kmlColor.color = "#" + rr + gg + bb;
                        kmlColor.opacity = parseInt(aa, 16) / 256;
                    } else {
                        // defaults
                        kmlColor.color = "red";
                        kmlColor.opacity = 0.45;
                    }
                    return kmlColor;
                }
                var highlightOptions = { fillColor: "red", strokeColor: "#000000", fillOpacity: 0.9, strokeWidth: 10 };
                var highlightLineOptions = { strokeColor: "red", strokeWidth: 10 };
                function kmlHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (i == pm) {
                            if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                            if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
                        } else {
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function kmlUnHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        if (i == pm) {
                            var placemark = geoXmlDoc.placemarks[i];
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function showAll() {
                    map.fitBounds(geoXmlDoc.bounds);
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) placemark.polygon.setMap(map);
                        if (placemark.polyline) placemark.polyline.setMap(map);
                        if (placemark.marker) placemark.marker.setMap(map);
                    }
                }

                function highlightPoly(poly, polynum) {
                    //    poly.setOptions({fillColor: "#0000FF", strokeColor: "#0000FF", fillOpacity: 0.3}) ;
                    google.maps.event.addListener(poly, "mouseover", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        if (poly instanceof google.maps.Polygon) {
                            poly.setOptions(highlightOptions);
                        } else if (poly instanceof google.maps.Polyline) {
                            poly.setOptions(highlightLineOptions);
                        }
                    });
                    google.maps.event.addListener(poly, "mouseout", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        poly.setOptions(poly.normalStyle);
                    });               
                }
                function makeSidebarPolylineEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "polyline #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td onmouseover="kmlHighlightPoly(' + i + ');" onmouseout="kmlUnHighlightPoly(' + i + ');"><a href="javascript:kmlPlClick(' + i + ');">' + name + '</a> - <a href="javascript:kmlShowPlacemark(' + i + ');">show</a></td></tr>';

                }
                function makeSidebarEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "marker #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td><a href="javascript:kmlClick(' + i + ');">' + name + '</a></td></tr>';
                }  
                function useTheData(doc) {
                    var currentBounds = map.getBounds();
                    if (!currentBounds) currentBounds = new google.maps.LatLngBounds();
                    // Geodata handling goes here, using JSON properties of the doc object
                    sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
                    //  var sidebarHtml = '<table>';
                    geoXmlDoc = doc[0];
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        // console.log(doc[0].markers[i].title);
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) {
                            if (currentBounds.intersects(placemark.polygon.bounds)) {
                                //makeSidebarPolygonEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var kmlFillColor = kmlColor(placemark.style.fillcolor);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity,
                                fillColor: kmlFillColor.color,
                                fillOpacity: kmlFillColor.opacity
                            };
                            placemark.polygon.normalStyle = normalStyle;

                            highlightPoly(placemark.polygon, i);
                        }
                        if (placemark.polyline) {
                            if (currentBounds.intersects(placemark.polyline.bounds)) {
                                makeSidebarPolylineEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity
                            };
                            placemark.polyline.normalStyle = normalStyle;

                            highlightPoly(placemark.polyline, i);
                        }
                        if (placemark.marker) {
                            if (currentBounds.contains(placemark.marker.getPosition())) {
                                makeSidebarEntry(i);
                            }
                        }

                        /*    doc[0].markers[i].setVisible(false); */
                    }
                    sidebarHtml += "</table>";
                    document.getElementById("sidebar").innerHTML = sidebarHtml;         //show to all link
                };           

            </script>

I would suggest getting a local copy of geoxml3.js, Zipfile.complete.js and ProjectedOverlay.js, rather than linking to the tip of the SVN tree. Those versions may change at any time.

Tried to use this code and this only highlights the poly from the first KML file when using multiple kml files ... any suggestion?

javascript - Change the KmlLayer colour in the Google Maps - Stack Ove...

javascript google-maps styling
Rectangle 27 2

<style type="text/css">
    html, body, #map_canvas {
        width:   750px;
        height:  600px;
        margin:  0;
        padding: 0;
    }
        .infowindow * {font-size: 90%; margin: 0}
    </style>

            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 

    <script type="text/javascript">
                var geoXml = null;
                var geoXmlDoc = null;
                var map = null;
                var myLatLng = null;
                var myGeoXml3Zoom = true;
                var sidebarHtml = "";
                var infowindow = null;
                var kmlLayer = null;
                var filename = "test.kmz";      //kml or kmz file                   
                function MapTypeId2UrlValue(maptype) {
                    var urlValue = 'm';
                    switch (maptype) {
                        case google.maps.MapTypeId.HYBRID: urlValue = 'h';
                            break;
                        case google.maps.MapTypeId.SATELLITE: urlValue = 'k';
                            break;
                        case google.maps.MapTypeId.TERRAIN: urlValue = 't';
                            break;
                        default:
                        case google.maps.MapTypeId.ROADMAP: urlValue = 'm';
                            break;
                    }
                    return urlValue;
                }


                function initialize() {
                    myLatLng = new google.maps.LatLng(39.8000959563484, -89.549560546875);
                    // these set the initial center, zoom and maptype for the map 
                    // if it is not specified in the query string
                    var lat = 37.422104808;
                    var lng = -122.0838851;
                    var zoom = 18;
                    var maptype = google.maps.MapTypeId.ROADMAP;

                    // If there are any parameters at eh end of the URL, they will be in  location.search
                    // looking something like  "?marker=3"

                    // skip the first character, we are not interested in the "?"
                    var query = location.search.substring(1);

                    // split the rest at each "&" character to give a list of  "argname=value"  pairs
                    var pairs = query.split("&");
                    for (var i = 0; i < pairs.length; i++) {
                        // break each pair at the first "=" to obtain the argname and value
                        var pos = pairs[i].indexOf("=");
                        var argname = pairs[i].substring(0, pos).toLowerCase();
                        var value = pairs[i].substring(pos + 1).toLowerCase();

                        // process each possible argname  -  use unescape() if theres any chance of spaces
                        if (argname == "id") { id = unescape(value); }
                        if (argname == "filename") { filename = unescape(value); }
                        if (argname == "marker") { index = parseFloat(value); }
                        if (argname == "lat") { lat = parseFloat(value); }
                        if (argname == "lng") { lng = parseFloat(value); }
                        if (argname == "zoom") {
                            zoom = parseInt(value);
                            myGeoXml3Zoom = false;
                        }
                        if (argname == "type") {
                            // from the v3 documentation 8/24/2010
                            // HYBRID This map type displays a transparent layer of major streets on satellite images. 
                            // ROADMAP This map type displays a normal street map. 
                            // SATELLITE This map type displays satellite images. 
                            // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
                            if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; }
                            if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; }
                            if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; }
                            if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; }

                        }
                    }
                    if (!isNaN(lat) && !isNaN(lng)) {
                        myLatLng = new google.maps.LatLng(lat, lng);
                    }
                    var myOptions = {
                        zoom: zoom,
                        center: myLatLng,
                        // zoom: 5,
                        // center: myLatlng,
                        mapTypeId: maptype
                    };
                    map = new google.maps.Map(document.getElementById("map_canvas"),
                          myOptions);
                    infowindow = new google.maps.InfoWindow({});

                    geoXml = new geoXML3.parser({
                        map: map,
                        infoWindow: infowindow,
                        singleInfoWindow: true,
                        zoom: myGeoXml3Zoom,
                        markerOptions: { optimized: false },
                        afterParse: useTheData
                    });
                    geoXml.parse(filename);

                };

                //            function kmlPgClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polygon.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polygon.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                }
                //            }
                //            function kmlPlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polyline.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polyline.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                }
                //            }
                //            function kmlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
                //                    google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].marker.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker, "click");
                //                }
                //            }

                function kmlColor(kmlIn) {
                    var kmlColor = {};
                    if (kmlIn) {
                        aa = kmlIn.substr(0, 2);
                        bb = kmlIn.substr(2, 2);
                        gg = kmlIn.substr(4, 2);
                        rr = kmlIn.substr(6, 2);
                        kmlColor.color = "#" + rr + gg + bb;
                        kmlColor.opacity = parseInt(aa, 16) / 256;
                    } else {
                        // defaults
                        kmlColor.color = "red";
                        kmlColor.opacity = 0.45;
                    }
                    return kmlColor;
                }
                var highlightOptions = { fillColor: "red", strokeColor: "#000000", fillOpacity: 0.9, strokeWidth: 10 };
                var highlightLineOptions = { strokeColor: "red", strokeWidth: 10 };
                function kmlHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (i == pm) {
                            if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                            if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
                        } else {
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function kmlUnHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        if (i == pm) {
                            var placemark = geoXmlDoc.placemarks[i];
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function showAll() {
                    map.fitBounds(geoXmlDoc.bounds);
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) placemark.polygon.setMap(map);
                        if (placemark.polyline) placemark.polyline.setMap(map);
                        if (placemark.marker) placemark.marker.setMap(map);
                    }
                }

                function highlightPoly(poly, polynum) {
                    //    poly.setOptions({fillColor: "#0000FF", strokeColor: "#0000FF", fillOpacity: 0.3}) ;
                    google.maps.event.addListener(poly, "mouseover", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        if (poly instanceof google.maps.Polygon) {
                            poly.setOptions(highlightOptions);
                        } else if (poly instanceof google.maps.Polyline) {
                            poly.setOptions(highlightLineOptions);
                        }
                    });
                    google.maps.event.addListener(poly, "mouseout", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        poly.setOptions(poly.normalStyle);
                    });               
                }
                function makeSidebarPolylineEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "polyline #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td onmouseover="kmlHighlightPoly(' + i + ');" onmouseout="kmlUnHighlightPoly(' + i + ');"><a href="javascript:kmlPlClick(' + i + ');">' + name + '</a> - <a href="javascript:kmlShowPlacemark(' + i + ');">show</a></td></tr>';

                }
                function makeSidebarEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "marker #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td><a href="javascript:kmlClick(' + i + ');">' + name + '</a></td></tr>';
                }  
                function useTheData(doc) {
                    var currentBounds = map.getBounds();
                    if (!currentBounds) currentBounds = new google.maps.LatLngBounds();
                    // Geodata handling goes here, using JSON properties of the doc object
                    sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
                    //  var sidebarHtml = '<table>';
                    geoXmlDoc = doc[0];
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        // console.log(doc[0].markers[i].title);
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) {
                            if (currentBounds.intersects(placemark.polygon.bounds)) {
                                //makeSidebarPolygonEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var kmlFillColor = kmlColor(placemark.style.fillcolor);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity,
                                fillColor: kmlFillColor.color,
                                fillOpacity: kmlFillColor.opacity
                            };
                            placemark.polygon.normalStyle = normalStyle;

                            highlightPoly(placemark.polygon, i);
                        }
                        if (placemark.polyline) {
                            if (currentBounds.intersects(placemark.polyline.bounds)) {
                                makeSidebarPolylineEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity
                            };
                            placemark.polyline.normalStyle = normalStyle;

                            highlightPoly(placemark.polyline, i);
                        }
                        if (placemark.marker) {
                            if (currentBounds.contains(placemark.marker.getPosition())) {
                                makeSidebarEntry(i);
                            }
                        }

                        /*    doc[0].markers[i].setVisible(false); */
                    }
                    sidebarHtml += "</table>";
                    document.getElementById("sidebar").innerHTML = sidebarHtml;         //show to all link
                };           

            </script>

I would suggest getting a local copy of geoxml3.js, Zipfile.complete.js and ProjectedOverlay.js, rather than linking to the tip of the SVN tree. Those versions may change at any time.

Tried to use this code and this only highlights the poly from the first KML file when using multiple kml files ... any suggestion?

javascript - Change the KmlLayer colour in the Google Maps - Stack Ove...

javascript google-maps styling
Rectangle 27 0

First, place the onclick event handler on the tree itself, not on the elements. When the user clicks on a cell, because of the event bubbling, the tree will catch it, no matter which cell receives the click:

function clickedOnSomething(event) {
    if(event.originalTarget.localName == "treechildren") {
        //do something here based on who is event.originalTarget
    }
}

Second, to create the content dynamically, you create an empty tree in XUL:

<tree id="myTree" onclick="clickedOnSomething(event)" flex="1" seltype="single">
    <treecols>
        <treecol id="myCol" label="Stuff" primary="true" flex="1" />
    </treecols>
    <treechildren/>
</tree>

Then in JavaScript, you create an object that implements the nsITreeView interface (see link below), and assign it as the view of the tree you created in XUL.

This object will serve as a interface for the Tree widget to the data will allow the tree to update itself automatically if the data changes.

javascript - tree element in firefox sidebar with dynamic elements and...

javascript firefox tree xul firefox-addon
Rectangle 27 0

It really depends on how you have architected everything, but assuming you have the map pushpin's hold a ref to the sidebar in some way or another, just add a quick click handler. I've never done anything with leaflet before, but it looks like they support all of the events you need for the markers: http://leafletjs.com/reference.html#marker.

So when you construct each marker, simply store off its corresponding menu item, and bind the event as show below!

marker.on('mouseover', function () {
    //Write code to adjust the icon
    marker.icon = someNewIcon;

    //Store a ref. to the menu item, and use that ref here to manage the view state
    currentActive.removeClass('active');
    $(this.target).addClass('active');
});

javascript - Make Leaflet sidebar div active on marker click and vice ...

javascript jquery map leaflet
Rectangle 27 0

document.body.style.overflow= is fine as a plain-JS way of doing it, but there's no such value as none. You might mean hidden.

Also, it is not (normally) the <body> element that owns the main browser scrollbar, but <html> (document.documentElement). Except when you're using IE and Quirks Mode. You don't want to use Quirks Mode.

yeha, $('body').css('overflow', 'hidden'); << works for me. Thanks for the kind support guys. Much appreciated (:

javascript - disabling sidebar on click event - Stack Overflow

javascript jquery css
Rectangle 27 0

Change the showInfoWindow function in the example to check to see if the infowindow is open and the same infowindow, then just close it, otherwise do the required processing to get the contents. Need to add a property to the marker so you can tell whether it is the same one or not.

function showInfoWindow(i) {
    return function(place, status) {
      if (!!iw && iw._iwId == i) {
        iw.close();
        iw = null;
      } else {
        if (iw) {
          iw.close();
          iw = null;
        }
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          iw = new google.maps.InfoWindow({
            content: getIWContent(place),
            _iwId:i
          });
          iw.open(map, markers[i]);        
        }
      }
    }
  }

javascript - How to close infoWindow from sidebar in the second click ...

javascript google-maps-api-3
Rectangle 27 0

$(this).css("margin-right")

returns 0 sot it will enter else block in else you will execute the

$('.menucont,#pollSlider-button').animate({
                   "margin-right": '+=' + slider_width

               });

so when click next the menu show up.

you can change the if loop as below

if (($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) || $(this).css("margin-right") == "0px")

ohhhh thats right! fresh pair of eyes that what i needed. thanks

javascript - sidebar double click instead of a single click - Stack Ov...

javascript jquery html css
Rectangle 27 0

The default popup is only shown after the user clicked on the browser action icon.

If you like to use a context menu item you cannot use Chrome's default popup (https://bugs.chromium.org/p/chromium/issues/detail?id=30491). That means you have to come up with another solution to inject HTML code for the user interface in the current web page. One reasonable approach is to inject an iframe. By using an iframe you can recreate an interface like that one you show in the gif.

javascript - What is the best way to show a sidebar/popup window on a ...

javascript angularjs google-chrome google-chrome-extension
Rectangle 27 0

The previous pattern loaded additional JavaScript unconditionally after page load, assuming that the code will likely be needed. But can we do better and load only parts of the code and only the parts that are really needed? Imagine you have a sidebar on the page with different tabs. Clicking on a tab makes an XHR request to get content, updates the tab content, and animates the update fading the color. And what if this is the only place on the page you need your XHR and animation libraries, and what if the user never clicks on a tab? Enter the load-on-demand pattern. You can create a require() function or method that takes a filename of a script to be loaded and a callback function to be executed when the additional script is loaded.

The require() function can be used like so:

require("extra.js", function () {
   functionDefinedInExtraJS();
});

Lets see how you can implement such a function. Requesting the additional script is straightforward. You just follow the dynamic element pattern. Figuring out when the script is loaded is a little trickier due to the browser differences:

function require(file, callback) {
   var script = document.getElementsByTagName('script')[0],
   newjs = document.createElement('script');

  // IE
  newjs.onreadystatechange = function () {
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
        newjs.onreadystatechange = null;
        callback();
     }
  };
  // others
  newjs.onload = function () {
     callback();
  }; 
  newjs.src = file;
  script.parentNode.insertBefore(newjs, script);
}

this is an absolute life-saver when trying to dynamically load local files from a local (file:///) context... thanks a bunch :)

jquery - Load JavaScript dynamically - Stack Overflow

javascript jquery
Rectangle 27 0

I'm well into accessing the Google Maps API v3 with Javascript, and I've experimented successfully with a lot of different sample scripts, but I've come to the conclusion that the best (and quickest) method for producing embedded maps - with sidebars and lots of other options - is to go to http://www.mymapsplus.com/AddMyMap (thanks Chris B), and make a 10 donation to get rid of the adverts in generated maps - see e.g. http://www.hope-projects.org.uk/node/41. Their Edit page allows you to add or change almost any option you could think of with a few clicks.

Is it possible to embed the sidebar with Google Maps? - Stack Overflow

google-maps
Rectangle 27 0

You can try something like this:

<body>
   <div id="content"></div>
   <div id="sidebar"></div>
</body>
$('body').click(function(){
   $('#sidebar').hide(); //hide sidebar when body is clicked
});

$('#sidebar').click(function(e){
   e.stopPropagation(); //this call will cancel the execution bubble
});

Thanks for the quick reply. I'll test it out as soon as I can!

javascript - jQuery – Hide menu/sidebar when click in the body area - ...

javascript jquery menu css-transitions sidebar