working on it ...

Filters

Explore Public Snippets

Sort by

Found 546 snippets

    public by JKCPR modified May 12, 2017  136  0  4  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  4308  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  332460  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  515  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  2199  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 Hyper modified yesterday at 8:39:34 AM  2  0  1  0

    js dec2bin playground

    js dec2bin playground: js dec2bin playground
    function dec2bin(dec){
        return (dec >>> 0).toString(2); // >>>  zero fill right shift due to signed bit
    }
    
    function bin2exclamation(bin){
        var arr = [];
        for(var i=0; i< bin.length; i++){
            arr.push(parseInt(bin.substr(i, 1)) === 1 ? 0 : 1);
        }
        return arr.join('');
    }
    
    function bin2int(bin){
        return parseInt(bin, 2);
    }
    
    var init = 100;
    init = dec2bin(init);
    console.log(init);
    
    init = bin2exclamation(init);
    console.log(init);
    
    init = bin2int(init);
    console.log(init);
    
    
    

    external by manufosela modified Sunday at 10:10:17 AM  1  0  1  0

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

    JS Bin// source https://jsbin.com/woleduh: Example VueJS from carlosazaustre.es vue first steps
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div id="app"></div>
      <template id="main">
        <div>
          <button @click="toggleMostrar">Mostrar/Ocultar</button>
          <div v-if="mostrar">
            {{ mensaje }}
            <img :src="imagen" />
          </div>
          <ul>
            <li v-for="(curso, index) in cursos" :key="index">
              <a :href="curso.url">{{ curso.name }}</a>
            </li>
          </ul>
        </div>
      </template>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          template:'#main',
          data: {
            mostrar: false,
            mensaje: "Hola Vue!",
            imagen: "http://laravelacademy.org/wp-content/uploads/2016/08/00-featured-vuejs-logo-simple-256x128.jpg",
             cursos: [
              { name: "Fundamentos de React", url: 'http://cursos.carlosazaustre.es/p/react-js' },
              { name: "Redux con React", url: 'http://cursos.carlosazaustre.es/p/curso-profesional-de-redux-y-react' },
              { name: "React Native", url: 'http://cursos.carlosazaustre.es/p/react-native' },
            ]
          },
          methods: {
            toggleMostrar: function () {
              this.mostrar = !this.mostrar
            }
          }
        })
      </script>
    
    
    </body>
    </html>
    
    

    external by DenysMenfredy modified Aug 15, 2017  1  0  1  0

    Form Simples JS

    Form Simples JS: form_simples
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    	<meta charset="utf-8">
    	<title>Teste</title>
    </head>
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		font-family: arial;
    	}
    	html, body{
    		width: 100%;
    		height: 100%;
    		background-color: #eee;
    	}
    	#form{
    		width: 100%;
    		height: auto;
    		background-color: #eee;
    		border-bottom: 1px solid gray;
    	}
    	#form fieldset{
    		width: 300px;
    		margin: auto;
    		max-width: 300px;
    		margin-bottom: 10px;
    
    	}
    	#form label{
    		font-family: arial;
    		color: #129;
    		font-size: 1.3em;
    		float: left;
    		margin:5px 10px 10px 5px;
    
    	}
    	#form input{
    		width: auto;
    		height: auto;
    		margin-bottom: 5px;
    		padding: 7px;
    		text-align: center;
    		display: inline-block;
    		font-size: 1em;
    	}
    	#enviar{
    		background-color: rgba(0,0,0,0.9);
    		color: #fff;
    		box-shadow: 3px 4px 2px rgba(0,0,0,0.5);
    		font-size: 1em;
    
    	}
    </style>
    <body>
    	<form id="form">
    	<fieldset>
    		<label for="nome">Nome:</label>
    		<input type="name" placeholder="Digite seu nome" id="nome" name="nome"><br><br>
    		<label for="idade" >Idade:</label>
    		<input type="number" placeholder="Digite sua idade" id="idade" name="idade"><br><br>
    		<label for="cidade">Cidade:</label>
    		<input type="name" placeholder="Digite sua cidade" id="cidade" name="cidade"><br><br>
    		<input type="submit" id="enviar" value="Enviar" onclick="mostrar()"  name="enviar">
    		</fieldset>
    	</form>
    		<script type="text/javascript">
    		
    
    		function mostrar() {
    			var nome = document.getElementById('nome').value;
    		 var idade = document.getElementById('idade').value;
    		 var cidade = document.getElementById('cidade').value;
    			document.write("Seu nome é " +  nome  +  " você tem " + idade + " anos e mora em " + cidade)	
    				
    			
    		}
    	
    
    		</script>
    </body>
    <html>
    
    

    external by Marius Nicolae modified Aug 14, 2017  2  0  1  0

    JS push and sort

    JS push and sort: JS push and sort
    function getIndexToIns(arr, num) {
      arr.push(num);                    // first we add a number in the array
      arr.sort(function(a, b) {        // then we sort the array in ascending order
        return a-b;
      });
      return arr.indexOf(num);        //then we return the index of the num added to the array
    }
    
    

    external by HeisenbergsCat modified Aug 12, 2017  2  0  1  0

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

    JS Bin// source https://jsbin.com/ruhoxom: FCC "Sum all numbers in a range"
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    
    <script id="jsbin-javascript">
    function sumAll(arr) {
      
      var arrayToSum = [];
      var arr_max = Math.max.apply(null, arr);
      var arr_min = Math.min.apply(null, arr);
    
      var index = 0;
      for(i = arr_min; i <= arr_max; i++) {
        arrayToSum[index] = i;
        index++;
       }
    
      var summedArray = arrayToSum.reduce(
        function(accumulator, currentVal, currentIndex, array) {
            return accumulator + currentVal;
          });
      
      return summedArray;
    }
    
      var arr = [4, 1];
      var sum = sumAll(arr);
    
    console.log(sum);
    </script>
    
    </body>
    </html>
    
    
    • Public Snippets
    • Channels Snippets