Rectangle 27 12

You should look at "ng-show" and "ng-hide". They can be used to conditionally show and hide content on a page quite easily. An example would be:

<div ng-show="myBoolean">Content will show when myBoolean is true</div>

You can replace "myBoolean" with a call to a function in scope that will check the path or do whatever it is that you need to check. I believe this should do more or less what you are looking for! For more documentation on ng-show see here.

In case the documentation or my example are difficult to read I wrote up a plunkr for you quickly (http://plnkr.co/edit/6fUZDzzGsRjowPOJZ6He?p=preview). Basically this just shows how to use the ng-hide/ng-show directive (they are the same, just opposites of each other). The key routine that I wrote is:

$scope.checkToggle = function(){
   // replace "myBoolean" with the logic that checks the path
   return $scope.myBoolean;
 };

Just replace that logic with what you want to check on the location and it should hide/show correctly. The really nice thing about using this particular directive is you can easily support css animations/transitions which will allow you to nicely fade your element in or out of the page as you hide and show it. Hope this all helps. Best of luck!

i prefer this approach instead of if statement

$location
MenuCtrl($rootScope, $scope, $window,  $location)

javascript - AngularJS show div based on url/condition - Stack Overflo...

javascript html css angularjs
Rectangle 27 4

Just quote the string you are comparing your variable to :

<div ng-if="location.path() != '/signup'">
  [Content] 
</div>

As said by drew_w, you should probably try ng-show, since you are using $location, you probably are creating a single-page app, where reloading the DOM would be less efficient than just hiding or showing it.

{{location.path()}}
$scope.location

I tried to put {{location.path()}} in my menu view, but then {{location.path()}} is displayed on the page (Aungular beginner), should I embed it in something else?

Have you surrounded it with ng-app (in html tag) and ng-controller (in any tag) ?

Yes, it is inside a nav class that have my ng-controller in it.

Well, did your console throw errors ? And did your ng-if work ?

$scope.location = $location;
<div ng-if="location.path() === '/signin'">

javascript - AngularJS show div based on url/condition - Stack Overflo...

javascript html css angularjs
Rectangle 27 1

$("#over_left a").click(function(){
    var id = $(this).attr("href");
    $(id).toggleClass("active").next().slideToggle("slow");
});

However I would suggest to narrow down the $("#over_left a") selector so it only works on those specific submenu links.

Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :

<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
  // Display the message
  msg.style.display = "block";
}
</script>

The reason why the above code didn't work, is because it is executed on page load. However, when you click an anchor tag url, the page doesn't reload (it only jumps to the relevant anchor div), so this code is never executed.

Please also be aware that you don't need a complicated search to look for the "#papers" part in your url. You can simply use:

window.location.hash

To find the anchor part at the end of your url.

So combining all of the info from above, you can also create a function that deals with the following example: What if someone shares a link with an anchor url? It should automatically expand already then, right?

// On page load

var anchor = window.location.hash;
// If there is an anchor in the URL, expand the relevant div
if (anchor) {
    $(anchor).toggleClass("active").next().slideToggle("slow");
}

@SeaEdAssociation If I paste the first piece of code in my console on your page, it works. Are you sure you're implementing it correctly? Is the menu generated through Javascript perhaps?

Okay, yes, it was my implementation. The toggle is working. However, what I need is some check to see if the div is already open, so style="display:block;" then don't toggle. That is why I was trying to use .show() instead of toggle.

Trying to get the other function to work, so if someone shares the anchor that it will go to and expand that div. Does this get added to the over_left function or does it become its own function?

@SeaEdAssociation It's its own function, just like your piece of code I quoted. As for the toggle, you could check whether there is a display: block; style, but I would suggest the far more clean approach: using classes. Make a .active class on the div that you usually toggle, and then just .addClass("active"); (it won't add it twice if it's already there). You can add css animations to make it slide smoothly.

javascript - Show toggling div based on URL - Stack Overflow

javascript jquery
Rectangle 27 2

Looks like you may need an ampersand in your url. Everything else looks fine from what the API docs show.

var addthis_config = {
    // I want to share link as this url + my_defined_paramater, how to set?
    url: location.href+'&refer_id=1900'
                     //^^^
};

Basically, it says you can add an attribute called addthis:url to set a custom URL. Since you need the current page, you'll have to update it with JavaScript's setAttribute() method.

<div class="addthis_toolbox addthis_default_style" id="addthis_container">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
    var addThisCont = document.getElementById("addthis_container");
    var curUrl = location.protocol + "//" + location.href;
    var withGetVariable = curUrl + "?refer_id=1900";
    addThisCont.setAttribute("addthis:url", withGetVariable);
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#username=addthis"></script>

Facebook uses OpenGraph metadata in the page btw

javascript - how to share url + parameter using addthis social plugin?...

javascript html addthis
Rectangle 27 28

The workflow I had to deal with was loading content with a url context that could change. So by default setup your modal with javascript or the href for the default context you want to show :

$('#myModal').modal({
        show: false,
        remote: 'some/context'
});

Destroying the modal wouldn't work for me because I wasn't loading from the same remote, thus I had to :

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');
});

This of course was easily refactored into a js library and gives you a lot of flexibility with loading modals

I hope this saves someone 15 minutes of tinkering.

Not 100% sure why - but I had to cleanup my DOM after the data cleanup. Added this line: $('#mymodal .modal-content').html("");

$('#myModal').on('hide.bs.modal', function () {           $('#myModal').removeData('bs.modal');           $('#myModal .modal-content').html('');   });

Bootstrap 3 with remote Modal - Stack Overflow

twitter-bootstrap modal-dialog
Rectangle 27 3

private void startWebView(String url) {

    //Create new webview Client to show progress dialog
    //When opening a url or click on link

    webView.setWebViewClient(new WebViewClient() {      
        ProgressDialog progressDialog;

        //If you will not use this method url links are opeen in new brower not in webview
        public boolean shouldOverrideUrlLoading(WebView view, String url) {              
            view.loadUrl(url);
            return true;
        }

        //Show loader on url load
        public void onLoadResource (final WebView view, String url) {
            if (progressDialog == null) {
                // in standard case YourActivity.this
                progressDialog = new ProgressDialog(view.getContext());
                progressDialog.setMessage("Loading...");
                progressDialog.show();
            }
        }
        public void onPageFinished(WebView view, String url) {
            try{
            if (progressDialog.isShowing()) {
                progressDialog.dismiss();
                progressDialog = null;
            }
            }catch(Exception exception){
                exception.printStackTrace();
            }
        }

    }); 

     // Javascript inabled on webview  
    webView.getSettings().setJavaScriptEnabled(true); 

    // Other webview options
    /*
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    webView.setScrollbarFadingEnabled(false);
    webView.getSettings().setBuiltInZoomControls(true);
    */

    /*
     String summary = "<html><body>You scored <b>192</b> points.</body></html>";
     webview.loadData(summary, "text/html", null); 
     */

    //Load url in webview
    webView.loadUrl(url);
}

Android webview launches browser when calling loadurl - Stack Overflow

android android-webview webviewclient
Rectangle 27 1

If you're trying to do it entirely in JavaScript and the URL that you're pulling it from is under the same domain as your page is being served from, then you can just use an XHR to load the JSON in (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest), but if it's not under the same domain, then the server serving the JSON will need to be setup to allow the cross-domain request (http://www.html5rocks.com/en/tutorials/cors/). If you control the server, then that's easy, but if you don't then you'll have to either use something server-side to fetch it for you (or a simple proxy url on your own server would work), or use something like Flash in the browser to do it, but I can't in any way recommend Flash.

javascript - Use JSON data from a URL to show Google Map Markers - how...

javascript json google-maps google-maps-api-3
Rectangle 27 1

I'm assuming you can use php.

So if you can use php, you can read the content from a URL (the JSON) into a variable.

$json = file_get_contents('http://mappie.com/api/json');
$json_decoded = json_decode($json, true);

Now you can load the JSON data into an array in javascript like this.

var stationList = [
<?php
     echo '{"latlng":[' . $json_decoded["lat"] . ',' . $json_decoded["lon"] . '],name:"' . $json_decoded["name"] . '"}'
?>
];

You can use a foreach loop to loop trought the JSON and echo multiple locations.

javascript - Use JSON data from a URL to show Google Map Markers - how...

javascript json google-maps google-maps-api-3
Rectangle 27 1

Cookies are not shared among different ports of a host (localhost in your case). The browser shows you content from localhost:4200, but the cookies are set to localhost:8000. They are correctly set and used, as can be seen in your second listing titled "Request header". So to see them in the browser, you would have to open a URL from localhost:8000. Even then the sessionid would not be listed in document.cookie(), because it's marked as "HttpOnly" (which means not available to JavaScript).

ok for seesionid, what about csrftoken I need to access it (from :4200) using javascript to include it in the next request header, is this possible ?

Cookies are included in requests automatically, so you don't need to access them in your scripts. See your request log - the csrftoken cookie is included there.

I need to do so to add CSRF token as header of request (not as cookie) this is how csrf prevension works. header key is called "X-CSRFToken" and is empty in my case which causes django to answer with 403 "missing csrf token or incorrect"

Ah, yes, sorry. You cannot get the csrftoken cookie easily. The only way I can think of is probably opening an iframe and sending the token to the application (its parent frame) in an event. But this approach can be quite error prone. I think it's better to be sending CSRF as a cookie. See stackoverflow.com/questions/20504846/

The iframe I mentioned would have to load a page from your backend. The page would contain just a script for sending the token on load and when the token changes.

django - cookies not writtent even when I receive set-cookie response ...

django angular cookies
Rectangle 27 1

Cookies are not shared among different ports of a host (localhost in your case). The browser shows you content from localhost:4200, but the cookies are set to localhost:8000. They are correctly set and used, as can be seen in your second listing titled "Request header". So to see them in the browser, you would have to open a URL from localhost:8000. Even then the sessionid would not be listed in document.cookie(), because it's marked as "HttpOnly" (which means not available to JavaScript).

ok for seesionid, what about csrftoken I need to access it (from :4200) using javascript to include it in the next request header, is this possible ?

Cookies are included in requests automatically, so you don't need to access them in your scripts. See your request log - the csrftoken cookie is included there.

I need to do so to add CSRF token as header of request (not as cookie) this is how csrf prevension works. header key is called "X-CSRFToken" and is empty in my case which causes django to answer with 403 "missing csrf token or incorrect"

Ah, yes, sorry. You cannot get the csrftoken cookie easily. The only way I can think of is probably opening an iframe and sending the token to the application (its parent frame) in an event. But this approach can be quite error prone. I think it's better to be sending CSRF as a cookie. See stackoverflow.com/questions/20504846/

The iframe I mentioned would have to load a page from your backend. The page would contain just a script for sending the token on load and when the token changes.

django - cookies not writtent even when I receive set-cookie response ...

django angular cookies
Rectangle 27 1

you could do this with PHP but since you marked this question jquery, here is a javascript solution. suppose you gave a url parameter and send it using a link like this:

<a href='moreinformations.html?divid=3'>div3</a>

and in moreinformations.html add this js:

var queryParams = location.search.substring(1).split("=");
var divid = queryParams[1];
$('#mydiv' + divid).show();

and your html might look like:

<div id='mydiv1' style='display:none'></div>
<div id='mydiv2' style='display:none'></div>
<div id='mydiv3' style='display:none'></div>

jquery - Change div appearence on another site on link click - Stack O...

jquery html css
Rectangle 27 8

Although you've found out you can circumvent the inline script "issue" (it is a security feature), below is what it would look like if you did not do that. This shows both how to call a notification and a "window"-based dialog.

{
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "notifications",
    "create",
    "tabs"
  ]
}
<!doctype html>
<html>
  <head>
    <title>Dialog Prompt - Chrome</title>
    <style>
    body {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      background: white;
    }
    p {
        text-align: center;
        padding: 20px;
    }
    </style>
  </head>
  <body>
    <p>This is a dialog prompt.</p>
  </body>
</html>
var notifier,
    dialog;

function showNotify() {
    var notify;

    if (window.webkitNotifications.checkPermission() == 0) {
        notify = window.webkitNotifications.createNotification(
            "",
            'Notification Test',
            'This is a test of the Chrome Notification System. This is only a test.'
        );
        notify.show();
    } else {
        window.webkitNotifications.requestPermission();
    }
}    
function showDialog(){
    chrome.windows.create({
        url: 'dialog.html',
        width: 200,
        height: 120,
        type: 'popup'
    });
}    
function init() {
    clicker = document.querySelector('#click');
    dialog = document.querySelector('#dialog');

    clicker.addEventListener('click', showNotify, false);
    dialog.addEventListener('click', showDialog, false);
}    
document.addEventListener('DOMContentLoaded', init);

You can find the files to download here:

So basically, in the newer (more secure version), all the javascript functions must be called as callbacks to event listeners in order to execute?

No. In order to get the event listeners attached for the button click's to fire, you have to wait until the DOM is ready to be accessed. The security model in version two says that inline scripts are not allowed, so there's the added requirement to place them in an in like I've done above. I wouldn't just go around it by removing the manifest number or lowering it; it'll eventually get removed. Just get used to running it from a script file. Also, you were a native method that isn't in Chrome extensions, ie, alert().

I also updated it; I didn't realize I'd left a couple things in. Downloadable files are also updated.

"Uncaught TypeError: Cannot read property 'checkPermission' of undefined" this error shown

Javascript in Google Chrome popup extension not running - Stack Overfl...

javascript google-chrome google-chrome-extension
Rectangle 27 119

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <style>
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    </style>
</head>
<body>
    <a class="ajax" href="http://www.google.com">
      Open as dialog
    </a>

    <script type="text/javascript">
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });
    </script>
</body>
</html>

Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).

@FFish updated answer with a note about cross domain ajax. You cannot just copy'n'paste the source unless you can upload files to google.com ;)

jquery.load does not seem to ejecute the javascript contained in the remote content

regarding embedded <script></script> tags i've never got any problems to get those executed. even multiple occurences worked fine. nevertheless debugging those script chunks is indeed a hazzle, e.g. a syntax error won't show as js error in the browsers console but just avoids the script execution.

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs - Stac...

jquery jquery-ui modal-dialog
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

If you're already relying on javascript for the click, then you can also use javascript to show the url in status area, change the cursor, or do other things so it looks more like a link. Of course, the browser may ignore the code that sets the status area.

This is disabled in most browsers now.

javascript - Making a Table Row clickable - Stack Overflow

javascript html
Rectangle 27 0

You need to request the url used by form to show this result via javascript.

http://www.ncbi.nlm.nih.gov/sviewer/viewer.fcgi?val=24655740&db=nuccore&dopt=fasta&extrafeat=0&fmt_mask=0&maxplex=1&sendto=t&withmarkup=on&log$=seqview&maxdownloadsize=1000000

You can use cURL.

You have trouble to get this content because the text is loaded via javascript (who triggers form submition)

That link is awesome, it worked like magic.... may I know where did you got that link from...?

I used chrome element inspector looking at Network tab you can find requests to the server. Just copy the link :)

If you need others URL's you can easily find it on this way. Open your chrome browser, enter your url. press F12 on keyboard. Then find Network tab on the top of this window. Next, at the bottom look for XHR. Them reload your page to see results on this panel. Please accept my answer if its ok for you. Thanks

bioinformatics - How to copy content from a dynamic page using PHP? - ...

php bioinformatics ncbi
Rectangle 27 0

Basically, you will refer user to the same URL but with anchor in the end (http://localhost/home#somepage?param1=val1) and load the data using AJAX. Javascript will catch anchor change and can show "loading" icon and provide additional stuff like "cancel loading". In this case you will have your browser history in place, so you can say "back" in the browser or history.go(-1) in the javascript.

Switching to AJAX submission is not really an option, it's too much hassle as it's a complex system. But thanks for the idea.

If you want to implement that feature, you have to use javascript anyway. Also, I believe this will not be for every page, so it shouldn't be thta hard. Not GMail, which uses this anchor navigation :) Actually, you can check the following: open GMail, close internet connection and switch between "Inbox" and "Sent" - you will see that "Page is not loading", but not 404 error!

@Vitaly as pointed out by Pekka, anchor navigation means switching from regular form submission (handled by the browser) to AJAX form submission (handled by you, programmatically). Yes, Gmail & other single page apps do cool stuff by programmatically doing some clientside routing, but it is probably NOT something you want to do if you are not building a single page app in the 1st place. see read.humanjavascript.com/ch09-clientside-routing.html

Note that Pekka is looking for a generic solution, so something that'd work on his whole website...

javascript - Detect when user clicks link, but aborts - Stack Overflow

javascript internet-explorer firefox events
Rectangle 27 0

The workflow I had to deal with was loading content with a url context that could change. So by default setup your modal with javascript or the href for the default context you want to show :

$('#myModal').modal({
        show: false,
        remote: 'some/context'
});

Destroying the modal wouldn't work for me because I wasn't loading from the same remote, thus I had to :

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');
});

This of course was easily refactored into a js library and gives you a lot of flexibility with loading modals

I hope this saves someone 15 minutes of tinkering.

Not 100% sure why - but I had to cleanup my DOM after the data cleanup. Added this line: $('#mymodal .modal-content').html("");

$('#myModal').on('hide.bs.modal', function () {           $('#myModal').removeData('bs.modal');           $('#myModal .modal-content').html('');   });

Bootstrap 3 with remote Modal - Stack Overflow

twitter-bootstrap modal-dialog
Rectangle 27 0

JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.

Using this in conjuntion with the link Artsemis provided will do the trick

Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.

javascript - jquery drag image into text and show url of that image - ...

javascript jquery jquery-selectors drag-and-drop