working on it ...

Filters

Explore Public Snippets

Sort by

Found 663 snippets

    public by JKCPR modified May 12, 2017  216  0  5  1

    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  4957  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  332543  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  590  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  2254  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 Eduardo Luz modified 17 hours ago  1  0  1  0

    JS flatt depth arrays

    JS flatt depth arrays: flattner
    export const flattner = array => {
      if (!Array.isArray(array)) {
        throw Error(`${array} is not an Array`)
      }
      for (let i = 0; i < array.length;) {
       let value = array[i]
       if (Array.isArray(value)) {
         if (value.length > 0) {
           value.unshift(i, 1)
           array.splice.apply(array, value)
           value.splice(0, 2)
         } else {
           array.splice(i, 1)
         }
       } else {
         i++
       }
      }
      return array;
    }
    
    if (!flattner([1]) === [1]){
      throw Error(`Failure`)
    }
    
    if (!flattner([[1]]) === [1]){
      throw Error(`Failure`)
    }
    
    if (!flattner([1,[1]]) === [1,1]){
      throw Error(`Failure`)
    }
    
    

    external by Brandon R modified yesterday at 6:15:58 PM  2  0  1  0

    JS Bin// source https://jsbin.com/liboref

    JS Bin// source https://jsbin.com/liboref: Interest Gained Calculator
    const PRINCIPAL = 30000
    const INTEREST_RATE = .0139
    const ADDITIONS_PER_MONTH = 0
    
    const calculateInterest = (principal, interestRate, additionsPerMonth, numMonths) => {
      let accountSum = principal
      let totalInterest = 0
      
      for(let i=0; i<numMonths; i++) {
        const monthInterest = (accountSum * interestRate) * (1/12)
        totalInterest += monthInterest
        accountSum += monthInterest + additionsPerMonth
      }
      console.log('Account Sum: ' + accountSum)
      console.log('Interest Gained: ' + totalInterest)
    }
    
    console.log('PRINCIPAL ' + PRINCIPAL + ' Interest rate ' + INTEREST_RATE + ' Additions per month ' + ADDITIONS_PER_MONTH)
    calculateInterest(PRINCIPAL, INTEREST_RATE, ADDITIONS_PER_MONTH, 12)
    
    

    external by S@n1X_D modified Jan 11, 2018  1  0  1  0

    [JS] Allow MIN and MAX

    [JS] Allow MIN and MAX: [JS] Allow MIN and MAX
    <script type="text/javascript">
      function minmax(value, min, max) 
      {
          if(parseInt(value) < min || isNaN(parseInt(value))) 
              return 0; 
          else if(parseInt(value) > max) 
              return 100; 
          else return value;
      }
    </script>
    <input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0, 100)"/>
    
    

    external by Daymon modified Jan 9, 2018  2  0  1  0

    Vanilla JS snippets for traversing the DOM

    Vanilla JS snippets for traversing the DOM: vJS-T-DOM
    // Traversing the DOM with vanilla JavaScript //
    /*=============================================
    \\\\\\\\\\\===   Daymon Allen  ===\\\\\\\\\\\*/
    
    
    

    external by jonasalbert modified Jan 9, 2018  4  0  1  0

    Sample Dust dot js

    Sample Dust dot js: Sample Dust dot js
    https://github.com/ericktai/dust-js-browser
    
    dust-js-browser
    A sample of using DustJS in the browser. (non-NodeJS example)
    
    View the example at http://ericktai.github.io/dust-js-browser/
    
    I created this repo as a reference point on using the DustJS templating library without NodeJS. The Dust and LinkedIn tutorials didn't really quite describe how to get things running in a regular HTML/JS/Browser app, so this was an exercise in doing so.
    
    Getting Started
    The pre-compiled JS is ready to go - just open index.html in the browser and find the template at src/dusts/todos.dust to see how DustJS works.
    
    Making changes? Run node duster.js in your root folder on the command line first. It watches and compiles your templates to JS as needed. You'll need duster.js. See duster.js for more info.
    
    How It Works
    DustJS templates should be saved to src/dusts as *.dust files. DustJS templates are compiled into *.js files - use duster.js to auto compile your templates to templates/compiled/*.js. I've configured the source and compiled paths via my duster.json file.
    
    You can use your template in index.html. In this example, my template is todos.dust, and it was compiled into todos.js. Let's include the template in the page.
    
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="dust-core-2.0.3.js"></script>
    <script type="text/javascript" src="templates/compiled/todos.js"></script>
    As my example dust template is todos.js, dust will give it a name of todos. The following binds a given JSON (details not shown) to the todos template.
    
    dust.render("todos", {
      //This 2nd parameter is the JSON data you want to bind with the template
    }, function(err, out) {
      //when done binding the template, the HTML will be represented by the "out" variable
    });
    The template runs against JSON that you pass in. Here's my JSON data with two todo objects:
    
    {
      listname: 'My Todos',
      todos: [
        {
          action: 'learn some dust!',
          duedate: 'today'
        },
        {
          action: 'visit the south bay',
          duedate: 'tomorrow'
        }
      ]
    }
    Combined:
    
    dust.render("todos", {
    	listname: 'My Todos',
    	todos: [
    		{
    			action: 'learn some dust!',
    			duedate: 'today'
    		},
    		{
    			action: 'visit the south bay',
    			duedate: 'tomorrow'
    		}
    	]
    }, function(err, out) {
      //when done binding the template, the HTML will be represented by the "out" variable
    });
    Finally, the output is handled by the function in the 3rd parameter: dust.render(..., ..., function(err, out) {}). out represents the processed HTML result. To set that to a div, simply use something like jQuery to do so:
    
    dust.render("todos", {
    	//JSON data...
    }, function(err, out) {
      $('#content').html(out);
    });
    Here's the *.dust template so you can see how the JSON binds to it:
    
    <h1>{listname}</h1>
    <ul>
    {#todos}
    	<li>{action} - {duedate}</li>{~n}
    {/todos}
    </ul>
    And the resulting HTML:
    
    <h1>My Todos</h1>
    <ul>
      <li>learn some dust! - today</li>
      <li>visit the south bay - tomorrow</li>
    </ul>
    More Information
    Read more about DustJS at the LinkedIn Dust Tutorial: https://github.com/linkedin/dustjs/wiki/Dust-Tutorial
    
    
    • Public Snippets
    • Channels Snippets