working on it ...

Filters

Explore Public Snippets

Sort by

Found 534 snippets

    public by JKCPR modified May 12, 2017  107  0  3  2

    is your DOM classy? Wouldn't your console like to know...

    Intended as Dev Tool to be utilised in the browser console so that refactoring your messy CSS can be less hurty.
    ;( 
      function (){
      "use strict";
    
      //get ALL DOM elements => BODY > *, BODY *
      var elms = document.body.getElementsByTagName("*"),
          i = elms.length,
          arr = [],
          classArray;
      
      //iterate, isolate, finally indicate
      while( i-- ) {
          classArray = elms[i].className.split(/\s+/);
          if (classArray.length > 1) {
              arr.push( classArray[1] );
          }
      }
      
      console.log( arr.join(',') );
      return arr;
      
    })();

    public by jbaro modified Oct 25, 2016  3655  0  4  0

    customize embebed google maps

    /*********
    ******** params:
    ** lat: latitude
    ** lng:longitude
    ** elid: id of container
    ** iconpath: path to marker icon if necesary
    ** style: styles json
    ******** Note:
    ** You need to load google map library
    ** <script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY"><\/script>
    ***********/
    
    
    function initMap(lat,lng,elid,iconpath,style) {
    
    	// Create an array of styles.
    	var styles = style;
    	// Create a new StyledMapType object, passing it the array of styles,
    	// as well as the name to be displayed on the map type control.
    	var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    	// Create a map object, and include the MapTypeId to add
    	// to the map type control.
    	var myLatLng = new google.maps.LatLng(lat,lng);
    	var mapOptions = {
    		zoom: 11,
    		center: myLatLng,
    		disableDefaultUI: true,//avoid controls
    		scrollwheel: false,//avoid scrollwheel zoom
    		//draggable: false,//avoid draggable map
    		mapTypeControlOptions: {
    			mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    		}
    	};
    	var map = new google.maps.Map(document.getElementById(elid),mapOptions);
    	if(iconpath){
    		var marker = new google.maps.Marker({
    		  position: myLatLng,
    		  map: map,
    		  icon: iconpath
    		});
    	}
    	//Associate the styled map with the MapTypeId and set it to display.
    	map.mapTypes.set('map_style', styledMap);
    	map.setMapTypeId('map_style');
    }
    
    //silver styles example
    var mapsbw = [
    		{
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.icon",
    		  "stylers": [
    			{
    			  "visibility": "off"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.stroke",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "administrative.land_parcel",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#bdbdbd"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#ffffff"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.arterial",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#dadada"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.local",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.line",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.station",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#c9c9c9"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		}
    	  ];
    //init example
    initMap(42.8107705, -1.6616108,'map','./img/gm_marker.png',mapsbw);
    
                                  

    public by jbaro modified Oct 25, 2016  332436  8  2  0

    Google maps customized

    Load a google map customized
    /*********
    lat: latitude
    lng:longitude
    elid: id of container
    iconpath: path to marker icon if necesary
    style: styles json
    ***********/
    
    
    function initMap(lat,lng,elid,iconpath,style) {
    
    	// Create an array of styles.
    	var styles = style;
    	// Create a new StyledMapType object, passing it the array of styles,
    	// as well as the name to be displayed on the map type control.
    	var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    	// Create a map object, and include the MapTypeId to add
    	// to the map type control.
    	var myLatLng = new google.maps.LatLng(lat,lng);
    	var mapOptions = {
    		zoom: 11,
    		center: myLatLng,
    		mapTypeControlOptions: {
    			mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    		}
    	};
    	var map = new google.maps.Map(document.getElementById(elid),mapOptions);
    	if(iconpath){
    		var marker = new google.maps.Marker({
    		  position: myLatLng,
    		  map: map,
    		  icon: iconpath
    		});
    	}
    	//Associate the styled map with the MapTypeId and set it to display.
    	map.mapTypes.set('map_style', styledMap);
    	map.setMapTypeId('map_style');
    }
    
    //silver styles example
    var mapsbw = [
    		{
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.icon",
    		  "stylers": [
    			{
    			  "visibility": "off"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.stroke",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "administrative.land_parcel",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#bdbdbd"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#ffffff"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.arterial",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#dadada"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.local",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.line",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.station",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#c9c9c9"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		}
    	  ];
    //init example
    initMap(42.8107705, -1.6616108,'map','./img/gm_marker.png',mapsbw);

    public by jbaro modified Oct 25, 2016  503  8  3  0

    Google maps customized

    Load a google map customized
    /*********
    lat: latitude
    lng:longitude
    elid: id of container
    iconpath: path to marker icon if necesary
    style: styles
    ***********/
    
    
    function initMap(lat,lng,elid,iconpath,style) {
    
    	// Create an array of styles.
    	var styles = style;
    	// Create a new StyledMapType object, passing it the array of styles,
    	// as well as the name to be displayed on the map type control.
    	var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    	// Create a map object, and include the MapTypeId to add
    	// to the map type control.
    	var myLatLng = new google.maps.LatLng(lat,lng);
    	var mapOptions = {
    		zoom: 11,
    		center: myLatLng,
    		mapTypeControlOptions: {
    			mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    		}
    	};
    	var map = new google.maps.Map(document.getElementById(elid),mapOptions);
    	if(iconpath){
    		var marker = new google.maps.Marker({
    		  position: myLatLng,
    		  map: map,
    		  icon: iconpath
    		});
    	}
    	//Associate the styled map with the MapTypeId and set it to display.
    	map.mapTypes.set('map_style', styledMap);
    	map.setMapTypeId('map_style');
    }
    
    //silver styles example
    var mapsbw = [
    		{
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.icon",
    		  "stylers": [
    			{
    			  "visibility": "off"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "elementType": "labels.text.stroke",
    		  "stylers": [
    			{
    			  "color": "#f5f5f5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "administrative.land_parcel",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#bdbdbd"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "poi.park",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#ffffff"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.arterial",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#757575"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#dadada"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.highway",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#616161"
    			}
    		  ]
    		},
    		{
    		  "featureType": "road.local",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.line",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#e5e5e5"
    			}
    		  ]
    		},
    		{
    		  "featureType": "transit.station",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#eeeeee"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "geometry",
    		  "stylers": [
    			{
    			  "color": "#c9c9c9"
    			}
    		  ]
    		},
    		{
    		  "featureType": "water",
    		  "elementType": "labels.text.fill",
    		  "stylers": [
    			{
    			  "color": "#9e9e9e"
    			}
    		  ]
    		}
    	  ];
    //init example
    initMap(42.8107705, -1.6616108,'map','./img/gm_marker.png',mapsbw);

    public by bablefish modified Feb 11, 2016  2178  0  6  0

    Set selected option in a valuelist

    Using a javascript function with the leave code number as a parameter, how do I select the appropriate option in the list?
    function SelectElement(valueToSelect)
    {    
        var element = document.getElementById('leaveCode');
        element.value = valueToSelect;
    }

    external by Boris Doesborg modified 2 hours ago  1  0  1  0

    drupal 8 attached library & js settings to form element

    drupal 8 attached library & js settings to form element: d8-attach-lib-form
        $form['interval'] = [
          '#type' => 'textfield',
          '#title' => $this->t('Reactivation interval'),
          '#description' => $this->t(''),
          '#maxlength' => 64,
          '#size' => 64,
          '#default_value' => $config->get('interval'),
          '#suffix' => "<div class='description' id='human-interval'></div>",
          '#description'=> $this->('Period after which account must be reactivated. Must be entered in days.'),
          '#attached' => [
            'library' => [
              'extraccount/human-interval',
            ],
            'drupalSettings' => [
              'label' => $this->t('Period after which account must be reactivated. Must be entered as seconds. Current value corresponds with @days days, @hours hours, @minutes minutes and @seconds seconds.'),
              'seconds' => $config->get('interval'),
            ],
          ],
        ];
    
    modulename.libraries.yml
    
    human-interval:
      version: 1.x
      js:
        js/human-interval.js: {}
      dependencies:
        - core/jquery
        - core/jquery.once
        - core/drupal
        - core/drupalSettings
        
        
    js:
    
    /**
     * @file
     * Provides a timestamp in human readable format.
     */
    
    (function ($, Drupal) {
      Drupal.behaviors.human_interval = {
        attach: function (context, settings) {
    
    //      console.log('asdsadsa');
    //console.log(drupalSettings.tets);
    //
    //      console.log(document.getElementById('human-interval').value);
    //      var max = 1;
          var label = drupalSettings.label;
          var seconds = drupalSettings.seconds;
    
          var humanInterval = secondsToString(seconds);
    
          console.log(humanInterval);
    
          var displayed_label = label.replace('@days', humanInterval.numdays).replace('@hours', humanInterval.numhours).replace('@minutes', humanInterval.numminutes).replace('@seconds', humanInterval.numseconds);
    
    
          //var label = 'saasd';
          jQuery('#human-interval').html(displayed_label);
          jQuery('#edit-interval').keyup(function () {
            //var len = jQuery(this).val().length;
            //var char = max - len;
    
            seconds = jQuery(this).val();
            humanInterval = secondsToString(seconds);
            console.log(humanInterval);
            //displayed_label = label.replace('@days', humanInterval.numdays);
            displayed_label = label.replace('@days', humanInterval.numdays).replace('@hours', humanInterval.numhours).replace('@minutes', humanInterval.numminutes).replace('@seconds', humanInterval.numseconds);
    
            //days = secondsToString(seconds);
            //
            //var displayed_label = label.replace('@days', days);
            jQuery('#human-interval').html(displayed_label);
          });
    
    
          function secondsToString(seconds) {
    
            var humanInterval = {
              numdays: Math.floor(seconds / 86400),
              numhours: Math.floor((seconds % 86400) / 3600),
              numminutes: Math.floor(((seconds % 86400) % 3600) / 60),
              numseconds: ((seconds % 86400) % 3600) % 60
            };
    
            return humanInterval;
    
            //return numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";
          }
    
    
          //var unixtime = 1301090400;
          //
          //var newDate = new Date();
          //newDate.setTime(unixtime * 1000);
          //dateString = newDate.toUTCString();
          //
          ////document.getElementById("time").innerHTML = dateString;
          //
          //
          //jQuery('#print-link').click(function () {
          //  window.print();
          //});
        }
      }
    })(jQuery, Drupal);
    
    
    
    

    external by Obsidian Age modified yesterday at 1:54:37 AM  1  0  2  0

    Trying to get an if(isset()) function to write an h2 element in echo, but the page doesn't load.

    Here is a very basic html of what I am trying to do. The whole project is more complex, I'm creating a login site with js validation and php to verify username and password, and then submitting to either a guest page or admin page. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Exam | Guest&lt;/title&gt; &lt;meta name="keywo
    /* 
    You are using double-quotes for both your echo and $_REQUEST parameter. You will need to switch to single quotes for one or the other, as using double-quotes for both will cause a syntax error.
    
    Note the syntax highlighting for the following string:
     */
    echo "<h2>$_REQUEST["message"]</h2>";
    
    
    /* 
    When reading your code, it attempts to echo "<h2> $_REQUEST[", and then runs into the m of message, which is unexpected. Also note that quoted keys will only work with the curly brace syntax.
    
    Switching to the following will resolve this issue:
     */
    echo "<h2>" . $_REQUEST['message'] . "</h2>";
    
    
    /* 
    Hope this helps! :)
     */
    

    external by Andrew Fatuk modified Monday at 11:48:36 AM  1  0  1  0

    JS linter config

    JS linter config: .eslintrc
    root: true
    
    env:
      browser: true
      node: true
    
    globals:
      angular: true
      moment: true
      gapi: true
      lightbox: true
      Uint8Array: true
      $: true
      _: true
    
    extends:
      "eslint:recommended"
    
    rules:
      indent: [2, "tab", { "SwitchCase": 1 }]
      block-spacing: 2
      brace-style: [2, "1tbs"]
      camelcase: [2, { properties: "never" }]
      comma-spacing: 2
      comma-style: [2, "last"]
      curly: [2, "all"]
      eol-last: 2
      eqeqeq: 2
      guard-for-in: 2
      key-spacing: [2, { beforeColon: false, afterColon: true }]
      new-cap: 0
      new-parens: 2
      no-alert: 2
      no-array-constructor: 2
      no-caller: 2
      no-console: 1 // should be 1
      no-delete-var: 2
      no-eval: 2
      no-debugger: 1
      no-extend-native: 2
      no-extra-bind: 2
      no-fallthrough: 2
      no-floating-decimal: 2
      no-implied-eval: 2
      no-iterator: 2
      no-label-var: 2
      no-labels: 2
      no-lone-blocks: 2
      no-mixed-spaces-and-tabs: [2, false]
      no-multi-spaces: 2
      no-multi-str: 2
      no-native-reassign: 2
      no-nested-ternary: 2
      no-new: 2
      no-new-func: 2
      no-new-object: 2
      no-new-wrappers: 2
      no-octal: 2
      no-octal-escape: 2
      no-process-exit: 2
      no-proto: 2
      no-redeclare: 2
      no-return-assign: 2
      no-script-url: 2
      no-sequences: 2
      no-shadow: 2
      no-shadow-restricted-names: 2
      no-spaced-func: 2
      no-trailing-spaces: 2
      no-undef: 2
      no-undef-init: 2
      no-undefined: 2
      no-unused-expressions: 2
      no-unused-vars: [1, {vars: "all", args: "after-used"}]
      no-with: 2
      quotes: [2, "single"]
      radix: 2
      semi: 2
      semi-spacing: [2, {before: false, after: true}]
      space-before-blocks: 2
      space-before-function-paren: [2, {
        "anonymous": "always",
        "named": "never"
      }]
      space-infix-ops: 2
      space-unary-ops: [2, {words: true, nonwords: false}]
      strict: [2, "function"]
      yoda: [2, "never"]
    
      # Previously on by default in node environment
      no-catch-shadow: 0
      no-mixed-requires: 2
      no-new-require: 2
      no-path-concat: 2
      global-strict: [0, "always"]
      handle-callback-err: [2, "err"]
    
    

    external by Andy modified Friday at 12:06:58 AM  1  0  1  0

    Click on ArcGIS JS API 4.x webmap and draw a marker graphic if a feature exists

    Click on ArcGIS JS API 4.x webmap and draw a marker graphic if a feature exists: js4-webmap-click
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>Dock Positions with Popup - 4.3</title>
    
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
    
            .docking-control {
                font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
                position: absolute;
                z-index: 10;
                top: 50%;
                left: 50%;
                width: 250px;
                height: 80px;
                padding: 10px;
                box-sizing: border-box;
                margin: -40px 0 0 -125px;
                background-color: #fff;
                color: #323232;
                text-align: center;
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
    
            .docking-control label {
                display: inline-block;
                font-weight: bold;
                margin: 0 0 10px 0;
                padding: 0;
                font-size: 16px;
            }
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.3/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
        <script src="https://js.arcgis.com/4.3/"></script>
    
        <script>
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/WebMap",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/layers/GraphicsLayer",
                "dojo/dom",
                "dojo/on",
                "dojo/domReady!"
            ], function(
                Map, MapView, WebMap,SimpleMarkerSymbol,GraphicsLayer,
                dom, on
            ) {
    
                var _placeHolderGraphic = null;
                var _graphicsLayer = new GraphicsLayer();
    
                var _webmap = new WebMap({
                    portalItem: { // autocasts as new PortalItem()
                        id: "3af548bac6054938b615d08104197ba0"
                    }
                });
    
                var _view = new MapView({
                    map: _webmap,
                    popup: {
                        dockEnabled: true,
                        dockOptions: {
                            // Disables the dock button from the popup
                            buttonEnabled: false,
                            // Ignore the default sizes that trigger responsive docking
                            breakpoint: false,
                        }
                    },
                    container: "viewDiv"
                });
    
                var _popup = _view.popup;
    
                var _symbol = new SimpleMarkerSymbol({
                    style: "square",
                    color: "blue",
                    size: "20px",  // pixels
                    outline: {  // autocasts as esri/symbols/SimpleLineSymbol
                        color: [ 255, 255, 0 ],
                        width: 3  // points
                    }
                });
    
                _view.then(function() {
    
                    _view.map.add(_graphicsLayer);
                    var centerPoint = _view.center.clone();
    
                    _popup.open({
                        title: "Popup dock positions",
                        location: centerPoint,
                        content: "Use the control in the center of the map to change the location where the popup will dock."
                    });
    
                    // Watch currentDockPosition of the popup and open the
                    // popup at the specified position.
                    _popup.watch("currentDockPosition", function(value) {
                        _popup.visible = true;
                    });
    
                    var selectNode = dom.byId("dockPositionControl");
    
                    // Let user change the position dockOptions.position property of the
                    // popup at runtime from the drop-down list.
                    on(selectNode, "change", function(e) {
                        _popup.set("dockOptions", {
                            breakpoint: false,
                            buttonEnabled: false,
                            position: e.target.value
                        });
                    });
    
                    // Listen for click events on the map
                    _view.on("click", function(result){
    
                        // Test to see if a graphic is near the click
                        _view.hitTest({
                            x: result.x,
                            y: result.y
                        })
                        .then(function(value){
    
                            // You can view the value of the hitTest by uncommenting out the console.log below
                            //console.log(value);
    
                            if(value.results[0].hasOwnProperty("graphic")){
    
                                if(_placeHolderGraphic){
                                    // Remove the old placeHolderGraphic if it exists
                                    _graphicsLayer.graphics.remove(_placeHolderGraphic);
                                }
    
                                _placeHolderGraphic =  value.results[0].graphic;
                                _placeHolderGraphic.symbol = _symbol;
                                _placeHolderGraphic.uid = 566868686138900; // A randomly picked UID
    
                                _graphicsLayer.graphics.add(_placeHolderGraphic);
                            }
                        })
                    })
    
                });
            });
        </script>
    </head>
    
    <body>
    <div id="viewDiv">
        <div class="docking-control">
            <label for="dockPositionControl">Popup Dock Position</label>
            <select id="dockPositionControl">
                <option selected value="auto">Auto</option>
                <option value="top-left">Top Left</option>
                <option value="top-center">Top Center</option>
                <option value="top-right">Top Right</option>
                <option value="bottom-left">Bottom Left</option>
                <option value="bottom-center">Bottom Center</option>
                <option value="bottom-right">Bottom Right</option>
            </select>
        </div>
    </div>
    </body>
    
    </html>
    
    

    external by Alex modified Jun 18, 2017  1  0  1  0

    Js libs config

    Js libs config: libs.config.text
    — Easy tabs
    
    $(document).ready(function(){ $('#tab-container')
      .easytabs({
        animate: true,
        animationSpeed: 100,
        updateHash: false
      }); 
    });
    
    
    • Public Snippets
    • Channels Snippets