Results for html : 43

1 - Make a Simple JavaScript Slideshow without jQuery — SitePoint
<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>


/*
essential styles:
these make the slideshow work
*/

#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
}

.slide:nth-of-type(1) {
    background: red;
}
.slide:nth-of-type(2) {
    background: orange;
}
.slide:nth-of-type(3) {
    background: green;
}
.slide:nth-of-type(4) {
    background: blue;
}
.slide:nth-of-type(5) {
    background: purple;
}


var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


			
2 - Liste de couleurs HTML sous forme de tableau PHP
$colors=[ 
	"transparent",    
		"Maroon",
		"DarkRed",
		"FireBrick",
		"Red",
		"Salmon",
		"Tomato",
		"Coral",
		"OrangeRed",
		"Chocolate",
		"SandyBrown",
		"DarkOrange",
		"Orange",
		"DarkGoldenrod",
		"Goldenrod",
		"Gold",
		"Olive",
		"Yellow",
		"YellowGreen",
		"GreenYellow",
		"Chartreuse",
		"LawnGreen",
		"Green",
		"Lime",
		"LimeGreen",
		"SpringGreen",
		"MediumSpringGreen",
		"Turquoise",
		"LightSeaGreen",
		"MediumTurquoise",
		"Teal",
		"DarkCyan",
		"Aqua",
		"Cyan",
		"DarkTurquoise",
		"DeepSkyBlue",
		"DodgerBlue",
		"RoyalBlue",
		"Navy",
		"DarkBlue",
		"MediumBlue",
		"Blue",
		"BlueViolet",
		"DarkOrchid",
		"DarkViolet",
		"Purple",
		"DarkMagenta",
		"Fuchsia",
		"Magenta",
		"MediumVioletRed",
		"DeepPink",
		"HotPink",
		"Crimson",
		"Brown",
		"IndianRed",
		"RosyBrown",
		"LightCoral",
		"Snow",
		"MistyRose",
		"DarkSalmon",
		"LightSalmon",
		"Sienna",
		"SeaShell",
		"SaddleBrown",
		"Peachpuff",
		"Peru",
		"Linen",
		"Bisque",
		"Burlywood",
		"Tan",
		"AntiqueWhite",
		"NavajoWhite",
		"BlanchedAlmond",
		"PapayaWhip",
		"Moccasin",
		"Wheat",
		"Oldlace",
		"FloralWhite",
		"Cornsilk",
		"Khaki",
		"LemonChiffon",
		"PaleGoldenrod",
		"DarkKhaki",
		"Beige",
		"LightGoldenrodYellow",
		"LightYellow",
		"Ivory",
		"OliveDrab",
		"DarkOliveGreen",
		"DarkSeaGreen",
		"DarkGreen",
		"ForestGreen",
		"LightGreen",
		"PaleGreen",
		"Honeydew",
		"SeaGreen",
		"MediumSeaGreen",
		"Mintcream",
		"MediumAquamarine",
		"Aquamarine",
		"DarkSlateGray",
		"PaleTurquoise",
		"LightCyan",
		"Azure",
		"CadetBlue",
		"PowderBlue",
		"LightBlue",
		"SkyBlue",
		"LightskyBlue",
		"SteelBlue",
		"AliceBlue",
		"SlateGray",
		"LightSlateGray",
		"LightsteelBlue",
		"CornflowerBlue",
		"Lavender",
		"GhostWhite",
		"MidnightBlue",
		"SlateBlue",
		"DarkSlateBlue",
		"MediumSlateBlue",
		"MediumPurple",
		"Indigo",
		"MediumOrchid",
		"Plum",
		"Violet",
		"Thistle",
		"Orchid",
		"LavenderBlush",
		"PaleVioletRed",
		"Pink",
		"LightPink",
		"Black",
		"DimGray",
		"Gray",
		"DarkGray",
		"Silver",
		"LightGrey",
		"Gainsboro",
		"WhiteSmoke",
		"White"
	];
			
3 - Drag & drop pour poser un objet où on veut sur la page
//JS 
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData(
    	"text/plain",
    	  (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' 
    	+ (parseInt(style.getPropertyValue("top"),10) - event.clientY)+','
    	+ event.target.id
    );

} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 


on('dragstart','[draggable]',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',function(event){
	var offset = event.dataTransfer.getData("text/plain").split(',');
    
    icon 				=document.getElementById(offset[2]);console.log(icon);
    //icon.style.position ="absolute";
    icon.style.left 	=(event.clientX + parseInt(offset[0],10)) + 'px';
    icon.style.top 		=(event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
},false); 


/*CSS*/

[draggable]{
	width:65px;
	height:65px;
	
	z-index: 999;
	position:relative;
}
			
4 - Common Unicode Icons ✿ dabblet.com
/* Based on email I got from andrea ricci */

a[href^="mailto:"]:before { content: "\2709"; }
.phone:before             { content: "\2706"; }
.important:before         { content: "\27BD"; }
blockquote:before         { content: "\275D"; }
blockquote:after          { content: "\275E"; }
.alert:before             { content: "\26A0"; }

:before, :after { 
  color: purple; 
}

p, blockquote {
  margin: 20px;
}
body, a {
  color: #333;
  text-decoration: none;
  font-size: 21px;
}
			
5 - un switcher d'image à base de target trick
<div id="slider">

  	<!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" alt="img description"/>
  	<img id="slide-2" src="img2.jpg" alt="img description"/>
  	<img id="slide-3" src="img3.jpg" alt="img description"/>
  	<img id="slide-4" src="img4.jpg" alt="img description"/>
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1">1</a></li>
		<li><a href="#slide-2">2</a></li>
		<li><a href="#slide-3">3</a></li>
		<li><a href="#slide-4">4</a></li>
	</ul>
</div>
SCSS
#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}
			
6 - Un site qui prend toute la hauteur disponible avec flexbox
<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.

CSS
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}
			
7 - un sticky footer
<body>
   <header>...</header>
   <section class="main-content">...</section>
   <footer>...</footer>
</body>

header{
  /* We want the header to have a static height, 
  it will always take up just as much space as it needs.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

.main-content{
  /* By setting flex-grow to 1, the main content will take up 
  all of the remaining space on the page. 
  The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer{
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}
			
8 - boutons sociaux simples js pur
<button class="button share_twitter" data-url="http://....">
    Partager sur twitter
</button>
<button class="button share_facebook" data-url="http://....">
    Partager sur facebook
</button>
<button class="button share_gplus" data-url="http://....">
    Partager sur google+
</button>
<button class="button share_linkedin" data-url="http://....">
    Partager sur linkedin
</button>
<script>
(function(){

    var popupCenter = function(url, title, width, height){
        var popupWidth = width || 640;
        var popupHeight = height || 320;
        var windowLeft = window.screenLeft || window.screenX;
        var windowTop = window.screenTop || window.screenY;
        var windowWidth = window.innerWidth || document.documentElement.clientWidth;
        var windowHeight = window.innerHeight || document.documentElement.clientHeight;
        var popupLeft = windowLeft + windowWidth / 2 - popupWidth / 2 ;
        var popupTop = windowTop + windowHeight / 2 - popupHeight / 2;
        var popup = window.open(url, title, 'scrollbars=yes, width=' + popupWidth + ', height=' + popupHeight + ', top=' + popupTop + ', left=' + popupLeft);
        popup.focus();
        return true;
    };

    document.querySelector('.share_twitter').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.title) +
            "&via=Grafikart_fr" +
            "&url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Twitter");
    });

    document.querySelector('.share_facebook').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur facebook");
    });

    document.querySelector('.share_gplus').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://plus.google.com/share?url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Google+");
    });

    document.querySelector('.share_linkedin').addEventListener('click', function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var shareUrl = "https://www.linkedin.com/shareArticle?url=" + encodeURIComponent(url);
        popupCenter(shareUrl, "Partager sur Linkedin");
    });

})();
</script>
			
9 - récupérer le titre d'une page web
$url = "http://example.com/";

$html_source = file_get_contents($url);
$dom_tree = new DOMDocument();
$dom_tree->loadHTML($html_source);
$titles = $dom_tree->getElementsByTagName('title');
$title = trim($titles->item(0)->nodeValue);

return $title;

// pour éviter les erreurs de pages mal foutues
libxml_use_internal_errors(true);
// dom parsing
libxml_clear_errors();

			
10 - Filtrage d'items à base de radiobutton sans js
<!--
  Checkbox Trickery with CSS:
  http://codersblock.com/blog/checkbox-trickery-with-css/ 
-->

<div class="container">
  <h1><span class="marvel">Marvel</span> Mutant Teams</h1>

  <input id="original" type="radio" name="team" checked>
  <label for="original">Original X-Men</label>

  <input id="force" type="radio" name="team">
  <label for="force">X-Force</label>

  <input id="factor" type="radio" name="team">
  <label for="factor">X-Factor</label>

  <input id="hellfire" type="radio" name="team">
  <label for="hellfire">Hellfire Club</label>
  
  <br>
  <ul class="characters">
    <li id="angel" data-teams="original force factor hellfire">
      <h2>Angel</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-angel.png" alt="">
    </li>
    <li id="beast" data-teams="original factor">
      <h2>Beast</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-beast.png" alt="">
    </li>
    <li id="cyclops" data-teams="original force factor">
      <h2>Cyclops</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-cyclops.png" alt="">
    </li>
    <li id="emma-frost" data-teams="hellfire">
      <h2>Emma Frost</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-emma-frost.png" alt="">
    </li>
    <li id="iceman" data-teams="original factor">
      <h2>Iceman</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-iceman.png" alt="">
    </li>
    <li id="jean-grey" data-teams="original factor">
      <h2>Jean Grey</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-jean-grey.png" alt="">
    </li>
    <li id="magneto" data-teams="hellfire">
      <h2>Magneto</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-magneto.png" alt="">
    </li>
    <li id="nightcrawler" data-teams="force">
      <h2>Nightcrawler</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-nightcrawler.png" alt="">
    </li>
    <li id="professor-x" data-teams="original">
      <h2>Professor X</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-professor-x.png" alt="">
    </li>
    <li id="psylocke" data-teams="force hellfire">
      <h2>Psylocke</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-psylocke.png" alt="">
    </li>
    <li id="quicksilver" data-teams="factor">
      <h2>Quicksilver</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-quicksilver.png" alt="">
    </li>
    <li id="rictor" data-teams="force factor">
      <h2>Rictor</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-rictor.png" alt="">
    </li>
    <li id="storm" data-teams="force hellfire">
      <h2>Storm</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-storm.png" alt="">
    </li>
    <li id="sunspot" data-teams="force hellfire">
      <h2>Sunspot</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-sunspot.png" alt="">
    </li>
    <li id="tithe" data-teams="hellfire">
      <h2>Tithe</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-tithe.png" alt="">
    </li>
    <li id="wolverine" data-teams="force">
      <h2>Wolverine</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-wolverine.png" alt="">
    </li>
  </ul>
</div>

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  background-color: #444;
  font: 0/1 'Oswald', sans-serif;
  text-align: center;
}

.container {
  margin: 0 auto;
  padding: 20px 5px;
}

h1 {
  margin: 0 5px 15px;
  font-size: 45px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0 20px #000;
}

.marvel {
  color: #c00;
}

input {
  position: absolute;
  left: -9999px;
}

label {
  display: inline-block;
  position: relative;
  width: 150px;
  margin: 5px;
  padding: 10px 10px 10px 38px;
  background-color: #000;
  font-size: 18px;
  white-space: nowrap;
  cursor: pointer;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  background-color: #444;
}

input:focus + label {
  outline: 1px solid #fff;
}

input:checked + label::before {
  background-color: #c00;
}

/* width is controlled here and in media queries to ensure that there's always an even number of columns (prevents orphans) */
.characters {
  display: inline-block;
  width: 240px;
  list-style-type: none;
  margin: 15px -5px 0;
  padding: 0;
}

.characters li {
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 0;
  width: 100px;
  height: 100px;
}

.characters h2 {
  display: none;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 0px;
  right: 0px;
  margin: 0;
  padding: 4px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #000;
  font-size: 14px;
  font-weight: normal;
}

.characters img {
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px #000;
  opacity: .25;
  transform: scale(.5);
}

#original:checked ~ .characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [data-teams~="factor"] h2,
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
  display: block;
}

#original:checked ~ .characters [data-teams~="original"] img,
#force:checked ~ .characters [data-teams~="force"] img,
#factor:checked ~ .characters [data-teams~="factor"] img,
#hellfire:checked ~ .characters [data-teams~="hellfire"] img {
  animation: avatar .3s forwards;
}

/* fade in and expand image to full size, with a slight bounce */
@keyframes avatar {
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media only screen and (min-width: 500px) {
  .characters {
    width: 480px;
  }
}

@media only screen and (min-width: 740px) {
  .characters {
    width: 720px;
  }

  h1 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 980px) {
  .characters {
    width: 960px;
  }
}
			
11 - Formulaire dont certaines chechboxes-radio révèlent-cachent du contenu
<!--
  Checkbox Trickery with CSS:
  http://codersblock.com/blog/checkbox-trickery-with-css/ 
-->

<div class="container">
  <h1>
    <span>Subscribe to</span><br>
    Celery Facts Weekly!
  </h1>
  <section>
    <label for="email" class="top-label">Email</label>
    <input id="email" type="email" autocomplete="off">
  </section>
  <section>
    <label class="top-label">How did you hear about us?</label>
    
    <input id="how-friend" name="how" type="radio">
    <label for="how-friend" class="side-label">From a friend</label>

    <input id="how-internet" name="how" type="radio">
    <label for="how-internet" class="side-label">Somewhere on the internet</label>

    <input id="how-other" name="how" type="radio">
    <label for="how-other" class="side-label">Other...</label>
    
    <div class="how-other-disclosure">
      <label for="how-other-explain" class="top-label">Please explain</label>
      <textarea id="how-other-explain"></textarea>
    </div>
  </section>
  <section>
    <input id="permitted" type="checkbox">
    <label for="permitted" class="side-label">I am legally permitted to submit forms</label>
    <div class="blocked">(you have to check the checkbox to continue)</div>
    <button>Submit</button>
  </section>
</div>


@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700);

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 20px;
  color: #435757;
  background:
    linear-gradient(40deg, transparent 40%, #9ab593),
    linear-gradient(-40deg, #ba7461 20%, #593e4e 90%);
  font: 1.2em/1 'Noto Sans', sans-serif;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  color: #fff;
  background-color: rgba(0, 0, 0, .6);
}

h1 {
  margin: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #fff;
  line-height: 1.2;
  font-size: 2.2em;
  font-weight: normal;
}

h1 span {
  font-size: .7em;
}

section {
  margin-top: 30px;
}

section::after {
  content: '';
  display: block;
  clear: both;
}

.top-label {
  display: block;
  margin: 10px 0;
}

input[type="email"], textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  border: none;
  color: #593e4e;
  background-color: #fff;
  font-family: inherit;
  font-size: inherit;
  appearance: none;
}

input[type="email"]:focus, textarea:focus, button:focus {
  outline: 2px solid #9ab593;
}

textarea {
  height: 100px;
}

input[type="checkbox"], input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.side-label {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

.side-label::before, .side-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input[type="radio"] + .side-label::before,
input[type="radio"] + .side-label::after {
  border-radius: 50%;
}

.side-label::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;  
}

input:focus + .side-label::before {
  border-color: #9ab593;
}

.side-label::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #9ab593;
}

input:checked + .side-label::after {
  display: block;
}

.how-other-disclosure {
  display: none;
  margin: 10px 0 0 35px;
}

#how-other:checked ~ .how-other-disclosure {
  display: block;
}

.blocked {
  margin-top: 40px;
  color: rgba(255, 255, 255, .3);
  text-align: center;
}

button {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ .blocked {
  display: none;
}

#permitted:checked ~ button {
  display: block;
}
			
12 - Carrousel sans js
<div class="carousel">
   <div class="carousel-inner">
       <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
       </div>
       <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
       </div>
       <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
       </div>
       <label for="carousel-3" class="carousel-control prev control-1">‹</label>
       <label for="carousel-2" class="carousel-control next control-1">›</label>
       <label for="carousel-1" class="carousel-control prev control-2">‹</label>
       <label for="carousel-3" class="carousel-control next control-2">›</label>
       <label for="carousel-2" class="carousel-control prev control-3">‹</label>
       <label for="carousel-1" class="carousel-control next control-3">›</label>
       <ol class="carousel-indicators">
           <li>
               <label for="carousel-1" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-2" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-3" class="carousel-bullet">•</label>
           </li>
       </ol>
   </div>
</div>


<style>html, body {
   margin: 0px;
   padding: 0px;
   background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}

.carousel {
   position: relative;
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
   margin-top: 26px;
}

.carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
}

.carousel-open:checked + .carousel-item {
   position: static;
   opacity: 100;
}

.carousel-item {
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.6s ease-out;
   transition: opacity 0.6s ease-out;
}

.carousel-item img {
   display: block;
   height: auto;
   max-width: 100%;
}

.carousel-control {
   background: rgba(0, 0, 0, 0.28);
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   display: none;
   font-size: 40px;
   height: 40px;
   line-height: 35px;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   cursor: pointer;
   -ms-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;
   width: 40px;
   z-index: 10;
}

.carousel-control.prev {
   left: 2%;
}

.carousel-control.next {
   right: 2%;
}

.carousel-control:hover {
   background: rgba(0, 0, 0, 0.8);
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
   display: block;
}

.carousel-indicators {
   list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
   bottom: 2%;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 10;
}

.carousel-indicators li {
   display: inline-block;
   margin: 0 5px;
}

.carousel-bullet {
   color: #fff;
   cursor: pointer;
   display: block;
   font-size: 35px;
}

.carousel-bullet:hover {
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
   color: #428bca;
}

#title {
   width: 100%;
   position: absolute;
   padding: 0px;
   margin: 0px auto;
   text-align: center;
   font-size: 27px;
   color: rgba(255, 255, 255, 1);
   font-family: 'Open Sans', sans-serif;
   z-index: 9999;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>
			
13 - dropdown - exemples
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>


avec headers
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  ...
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>



avec séparateurs
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

			
14 - button dropdown menus
<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>



<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
			
15 - Nav bar complète - exemple
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
			
16 - labels - exemples (étiquettes)
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
			
17 - Alertes - exmples
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Avec un bouton de fermeture
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
			
19 - Panel - exemples
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>


Avec contextes
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>


Avec un tableau dedans
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>


Avec un liste group dedans
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
			
20 - Listgroups - exemples
<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>


Groupes contextualisés
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
			
21 - Connaitre la position du scroll dans la page

function getScrollPosition()
{
	return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
}
			
23 - menu contextuel html5
<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>
			
26 - Formulaires: noms pour tableaux multidimensionnels
    echo '<input type="hidden" name="devoirs['.$key.'][titre]" value="'.$devoir['titre'].'"/>'.$r;
    echo '<input type="hidden" name="devoirs['.$key.'][date]" value="'.$devoir['date'].'"/>'.$r;
    echo '<input type="hidden" name="devoirs['.$key.'][note_globale]" value="'.$devoir['note_globale'].'"/>'.$r;
			
27 - Lister les articles des catégories actives
<ul>
    <?php ob_start();
	$plxShow->catList('',"
	<li><a id=\"toggler-#cat_id\" href=\"#cat_url\" onclick=\"toggleDiv('cat-#cat_id','toggler-#cat_id','+ #cat_name','- #cat_name');return false;\" title=\"#cat_name\">+ #cat_name</a> (#art_nb)
		<ul id=\"cat-#cat_id\" class=\"hide\">
			[#cat_id]
		</ul>   
	</li>");
	$list = ob_get_clean();
	preg_match_all('!\[([a-zA-Z0-9-_])*\]!',$list,$match);
	$art = array();
	foreach ($match[1] as $key => $value) {
		ob_start();
		$plxShow->lastArtList('<li><a href="#art_url">#art_title</a> (#art_nbcoms)</li>', 5, $value,'');
		$art[$key] = ob_get_clean();
	}
	foreach ($match[0] as $key => $value) {
		$list = str_replace(array('&#039;',$value),array('\'',$art[$key]),$list);
	}
	              echo $list;				
?>

</ul>


			
29 - Image fullscreen en css
sans que l’image ne perde son ratio
dépassement de l’écran (ni verticalement, ni horizontalement), donc s’affichant au maximum à l’écran.
sans sur-zoomer l’image
sans JavaScript

HTML, CSS :
<div id="d1">
  <div>
    <img src="image.jpg"/>
  </div>
</div>
#d1 {/* dans le cas d’une lightbox, j’ai ça pour pas que ça dépasse de l’écran */
   position: fixed;
   top: 5%; right: 5%; bottom: 5%; left: 5%;
}

#d1 div img {
   max-width: 100%; max-height: 100%;
   width: auto;
   height: auto;
}

#d1 div {
   width: 100%; height: 100%;
   display: inline-block; /* lui il est important */
}
			
30 - Calendrier
<?php

function afficher_calendrier() {
    $ce_mois_lettres = date('F');
    $jours_semaine = array('Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su');

    $premier_jour = mktime('0', '0', '0', date('m'), '1', date('Y'));

    // haut du tableau
    $calendar = '<table id="calendrier">'."\n";
    $calendar.= '<caption>'.$ce_mois_lettres.'</caption>'."\n";
    $calendar.= '<tr><th>'.implode('</th><th>', $jours_semaine).'</th></tr><tr>';

    // un nouveau mois ne commence pas forcément le premier jour de la semaine (lundi)
    $decalage_jour = date('w', $premier_jour-'1');
    if ($decalage_jour > 0) {
        for ($i = 0; $i < $decalage_jour; $i++) {
            $calendar.=  '<td></td>';
        }
    }

    // création du tableau
    $date_t = date('t');
    $date_d = date('d');

    for ($jour = 1; $jour <= $date_t; $jour++) {
        $calendar.= '<td';

        // ajoute une classe CSS sur aujourd'hui
        $calendar .= ($jour == $date_d) ? ' class="active"' : '';

        $calendar.= '>';
        $calendar.= $jour;
        $calendar.= '</td>';
        $decalage_jour++;
        if ($decalage_jour == '7') {
            $decalage_jour = '0';
            $calendar.=  '</tr>'."\n";
            $calendar.= ($jour < $date_d) ? '<tr>' : '';
        }
    }

    // complète le tableau HTML avec des cases vides à la fin
    if ($decalage_jour > '0') {
        for ($i = $decalage_jour; $i < '7'; $i++) {
            $calendar.= '<td></td>';
        }
        $calendar.= '</tr>'."\n";
    }
    $calendar.= '</table>'."\n";

    return $calendar;
}

?>



			
31 - Slideshow minimaliste
/* CSS */
<style>
.fadein .carrousel .links{clear:both;width:100%;txtr}
.fadein { position:relative; width:100%; height:300px; } 
.fadein .carrousel { position:absolute; left:0; top:0; }

</style>
/* HTML */
<div class="fadein">
	<div class="carrousel car1">
		
		<div class="content">
			<h1>Titre du premier</h1>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupihref="" datat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

		</div>
		<div class="links">
			<em>1</em>
			<a href="" data="car2">2</a>
			<a href="" data="car3">3</a>
		</div>
	</div>
	<div class="carrousel car2">
		<div class="content">
			Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupit non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<div class="links">
			
			<a href="" data="car1">1</a>
			<em>2</em>
			<a href="" data="car3">3</a>
		</div>
	</div>

	<div class="carrousel car3">
		<div class="content">
		</div>		
		<div class="links">			
			<a href="" data="car1">2</a>			
			<a href="" data="car2">3</a>
			<em>3</em>
		</div>
	</div>

</div>

/* JS/JQuery */
<script>
	$('.fadein .carrousel:gt(0)').hide();compteur=0;
	function slideshow(){
		z=setInterval(
			function(){
				compteur++;
				if (compteur==4){montre=1;cache=3;compteur=1;}
				else if (compteur>1){montre=compteur;cache=compteur-1;}
				else if (compteur==1){montre=1;cache=3;}
				
			  	$('.fadein > .car'+cache).fadeOut(500)
				.parent().find('.car'+montre).fadeIn(500)
				.end();
			}
		,5000);
		return z;
	}
	slide=slideshow();

        // si on survole, pause
	$('.fadein').hover(function(ev){
    	clearInterval(slide);
	}, function(ev){
		  slide = slideshow();
		}
	);
 
        // clic sur un lien pour changer de diapo
        $('.links a').click(function(){
        	car=$(this).attr('data');
        	$('.fadein > .carrousel').fadeOut(500)
		.parent().find('.car'+car).fadeIn(500)
		.end();
		compteur=car;
    	        return false;
        });

</script>
			
32 - A Guide To Designing Touch Keyboards
/* Empêcher l'autocorrection rend le site plus rapide et la saisie plus simple */
<input type="text" autocorrect="off" />

/* mettre le bon type aide à la saisie sur mobile */
/* téléphone*/
<input type="tel" />
/* nombre: on utilise une pattern (regex)*/
<input type="text" pattern="d*" novalidate />
/*email */
<input type="email" />

/* forcer en majuscules ou pas */
<input type="text" autocapitalize="off" />

			
34 - Centering Percentage Width/Height Elements | CSS-Tricks
translate()

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);
  
  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;


position: absolute;
top: 0;
right: 0;
bottom: 0;
left:  0;
margin: auto;
width: 40%;
height: 50%;


position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;



			
35 - get_favicon
function get_favicon($url){ 
	// récupère la favicon du site si possible et la stocke en local 
	// si elle n'est pas déjà sur le serveur, sinon, renvoie le chemin
	// vers la version locale
        $id=sha1($url); // génère un nom de favicon local lié à l'url
	$file='CHEMIN_LOCAL_FAVICON/'.$id.'.png';
	$defaultfavicon='design/img/default_favicon.png';
	if ($url==''){return $defaultfavicon;}
	if (!is_file($file)){
		@$header=file_get_contents($url, NULL, NULL, 0, 3000);
		if ($header){
			if (preg_match('#<link +rel=["'].*icon["'].+href="([^"]+)|<link.+href="([^"]+).+rel=["'].*icon["']#',$header,$r)>0){
				// favicon trouvée > on récupère et on sauve en local
				if ($r[1]==''){$f=$r[2];}else{$f=$r[1];}
				@$img=file_get_contents($f);
				$url=pathinfo($url ,PATHINFO_DIRNAME );
				if(!$img){@$img=file_get_contents($url.'/'.$f);}
				if(!$img){@$img=file_get_contents($url.$f);}
				if ($img){
					file_put_contents($file,$img);
					return $file;
				}
			}
		}
		// impossible de récupérer la favicon > icone par défaut
		return $defaultfavicon;
	}else{
		return $file;
	}
}
			
36 - Colonnes gérées avec Text-align: Justify
<ul id="Grid">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="break"></li>
</ul>

#Grid{
	text-align: justify;
	font-size: 0.1px; /*hide whitespace between elements*/
}

#Grid li{
	display: inline-block;
	width: 23%;
	font-size:20px;
}

#Grid .break{
	width: 100%;
	height: 0;
}

#Grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 800px){
  #Grid li{
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 600px){
  #Grid li{
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 400px){
  #Grid li{
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}


			
37 - datalists en html5
<form action="form.php" method="post">
    <input list="cars" name="cars" >
    <datalist id="cars">
        <option value="Volvo">
        <option value="BMW">
        <option value="Bugatti">
        <option value="Cadillac">
        <option value="Chevrolet">
        <option value="Chrysler">
    </datalist>
    <input type="submit" />
</form>
			
38 - Googol
<?php
	if (isset($_GET['lang'])){$langue=$_GET['lang'];}else{$langue=lang();}
	clear_cache();// vire les thumbs de plus de trois minutes (THUMB_EXPIRE_DELAY)
	define('REGEX_WEB','#(?<=<h3 class="r"><a href="/url?q=)([^&]+).*?>(.*?)</a>.*?(?<=<span class="st">)(.*?)(?=</span>)#');
	define('REGEX_PAGES','#&start=([0-9]+)|&amp;start=([0-9]+)#');
	define('REGEX_IMG','#(?<=imgurl=)(.*?)&amp;imgrefurl=(.*?)&amp;.*?h=([0-9]+)&amp;w=([0-9]+)&amp;sz=([0-9]+)|(?<=imgurl=)(.*?)&imgrefurl=(.*?)&.*?h=([0-9]+)&w=([0-9]+)&sz=([0-9]+)#');
	define('REGEX_THMBS','#<img.*?height="([0-9]+)".*?width="([0-9]+)".*?src="([^"]+)"#');
	define('TPL','<div class="result"><a href="#link"><h3 class="title">#title</h3>#link</a><p class="description">#description</p></div>');
	define('TPLIMG','<div class="image" ><p><a href="#link" title="#link">#thumbs</a></p><p class="description">#W x #H (#SZ ko)<a class="source" href="#site" title="#site"> &#9658;</a></p></div>');
	define('LOGO1','<em class="g">G</em><em class="o1">o</em>');
	define('LOGO2','<em class="o2">o</em><em class="g">g</em><em class="o1">o</em><em class="l">l</em>');
	define('URL','https://www.google.fr/search?q=');
	define('URLIMG','&tbm=isch&biw=1920&bih=1075&sei=v5ecUb6OG-2l0wW554GYBQ');
	define('VERSION','v1.1');
	define('LANGUAGE',$langue);
	define('RACINE','http://'.$_SERVER['SERVER_NAME']);
	define('USE_WEB_OF_TRUST',true);
	define('USE_GOOGLE_THUMBS',false);
	// true = googol utilise les miniatures de google (c'est l'ip du visiteur que google verra mais c'est rapide et sans charge pour le servuer hébergeant googol)
	// false = c'est le serveur googol qui télécharge les miniatures (ip user cachée à google, il ne verra que l'ip du serveur, mais c'est sensiblement plus lent)
	
	if (!USE_GOOGLE_THUMBS){ // on va télécharger temporairement les miniatures pour cacher l'ip du visiteur à google
		session_start();
		if (!isset($_SESSION['ID'])){$_SESSION['ID']=uniqid();}
		define('UNIQUE_THUMBS_PATH','thumbs/'.$_SESSION['ID']);
		if (!is_dir('thumbs')){mkdir('thumbs');}// crée le dossier thumbs si nécessaire
	}
	$lang['fr']=array(
		'previous'=>htmlspecialchars('Page précédente'),
		'next'=>'Page suivante',
		'The thumbnails are temporarly stored in this server to hide your ip from Google...'=>htmlspecialchars('les miniatures sont temporairement récupérées sur ce serveur, google n'a pas votre IP...'),
		'Search anonymously on Google (direct links, fake referer)'=>htmlspecialchars('Rechercher anonymement sur Google (liens directs et referrer caché)'),
		'Free and open source (please keep a link to warriordudimanche.net for the author ^^)'=>htmlspecialchars('Libre et open source, merci de laisser un lien vers warriordudimanche.net pour citer l'auteur ;)'),
		'Googol - google without lies'=>'Googol - google sans mensonge',
		'on GitHub'=>'sur GitHub',
		'no results'=>htmlspecialchars('pas de résultat'),
		'by'=>'par',
		'search '=>'recherche ',
		'Search'=>'Rechercher',
		'Otherwise, use a real Search engine !'=>'Sinon, utilisez un vrai moteur de recherche !',
		);



	function aff($a,$stop=true){echo 'Arret a la ligne '.__LINE__.' du fichier '.__FILE__.'<pre>';var_dump($a);echo '</pre>';if ($stop){exit();}}
	function msg($m){global $lang;if(isset($lang[LANGUAGE][$m])){return $lang[LANGUAGE][$m];}else{return $m;}}
	function lang($default='fr'){if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])){$l=explode(',',$_SERVER['HTTP_ACCEPT_LANGUAGE']);return substr($l[0],0,2);}else{return $default;}}
	function Random_referer(){
		$rr=array(
			'http://oudanstoncul.com.free.fr/‎',
			'http://googlearretedenousfliquer.fr/‎',
			'http://stopspyingme.fr/‎',
			'http://spyyourassfuckinggoogle.fr/‎',
			'http://dontfuckinglookatme.fr/‎',
			'http://matemonculgoogle.fr/‎',
			'http://auxarmescitoyens.fr/‎',
			'http://jetlametsavecdugravier.con/‎',
			'http://lesdeuxpiedsdanstagueule.fr/‎',
			'http://moncoudedanstabouche.con/‎',
			'http://monpieddanston.uk/‎',
			'http://bienfaitpourvosgueul.es/‎',
			'http://pandanstesdents.fr/‎',
			'http://tupuessouslesbras.fr/‎',
		);
		shuffle($rr);
		return $rr[0];
	}
	function file_curl_contents($url){
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_HEADER, 0);
		curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,  FALSE);     
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);     
		curl_setopt($ch, CURLOPT_URL, $url);     
		if (!ini_get("safe_mode") && !ini_get('open_basedir') ) {curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);}    
		curl_setopt($ch, CURLOPT_MAXREDIRS, 10); 
		curl_setopt($ch, CURLOPT_REFERER, random_referer());// notez le referer "custom"
		$data = curl_exec($ch);     
		curl_close($ch);     
		return $data; 
	}  
	function add_search_engine(){
		if(!is_file('googol.xml')){
			file_put_contents('googol.xml', '<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
              xmlns:moz="http://www.mozilla.org/2006/browser/search/">
			  <ShortName>Googole</ShortName>
			  <Description>'.msg('Googol - google without lies').'</Description>
			  <InputEncoding>UTF-8</InputEncoding>
			  <Image width="32" height="32">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABCFJREFUeNrEV21MW2UUfm7v7QcwWqj9YBQyEAdqwBGGY3xkQRlLRjLnsmnUOOOSJYsmxvhDo/7VRH+YaPxhYqLRiAkuccbh5jbFRZgR3IbpwphG0wxaSgOUXgot7W177/V9L/DDrLv3bcK2kzy97e15zz3vOc85573c4bfOY112ruNuyATBKP0iQNVufETwKu6ufElwTFBVtf0ePJzKiwQniQNoLmRVYyUHT5kNT3f7YLbatHtkE4gvr+LsWATT82kEoszm2gVFVZk0K+0qnulwoM7nAG82gxfM2n2OM5HfAjzeYhw76EIuk8HV6zP4engBYoozMmuhKTB8eJ0LeHlvGc74VzHwexyz8f//73NweNBnRU9rJWq3VaBzVwNqKkrwdv9NpHP6Thg6QHfe12TDO6dFiKv5dWaWVIIUhiYDeK4rhid7m+D2utDkm8blKUXXvommQA9HO4rw1Wgai0l9vQ2cGotBSiaQTafwz5xsqC+oOg4+QEIfJrtbTLCTtLyIQyqxjIGLIaZ1gqLcPgVVTko2CxQlxexAx3YbRv4M46cJtjW6HOA4DntaqiApPC5eEzEj6uezs94Kj8OCjy8sMTusG4EbYYlEQMChfU040C1BzmZJzed3wmTiwfE8hq8GYeVFpLKsDuiQIBgDBkcCOLyvEcX2MvC8QMNyW31VUdDbaSNlCbzRH2JMgaJfhv3DIubFcRx5rAZljhItLXkjQJyzFhVrTcphL4aRXaYUbMg5f5Jg0lDv2T0ezdFvfw1CYXaAsRWziN2SwXdDf+FHf2JzSJhPdtaYsbvBjrb6LWuVQsgXislaCn6biOLMeLwge0yzYENe6fPi8UercWUygte+CCK6osBVasKJ/T50tdaiurIcgYifVE+W2aaJMpcFT7U7sL/7ISQlBR9+P4OFeE67T6/vfjONqdA8vF433jvRgupyDqx2TQr5MIKzBDja97A2/3+4NIVEWr5FZ+DnAGQ5h1KnG4c6PGCxS2Gi5WKEtu0lsG0p1UK2nJDy6oz9TQaQlNac7GmrAYtdCiYOVDhthGQ8NnTzrUlKZLqRCNA+QQl5H+FodEVlaUSKoVIimdUeSjshdUZvjSzLWIonCTdkRhISw0b4N5wgRy0JJjIXdjVuzatTZFnrhlkphV/+mAaLXQqmKrgeTCOysKql4f7areh5xH6LTm9zuTaQZkNhnBqZZa4C3U74wfNubKtyacSyWbNYic5rUXj9hRZymhnHkH9t7O7d4cDxJ+oRCUfw5qfXMLcsM/cBrvnIZy+R6yesCw7udqK1wY0ddXbkshJlJObEDM5dmcPg5aVCu/f7AgqcBadHFzVslhTUiu+AZOh54OY9dOAGLcPzBJ+zls0m4izBSXLG0lJwnL4oEnTRxneHdx1bfzUfpD/+E2AAqmeV253DYKAAAAAASUVORK5CYII=</Image>
			  <Url type="text/html" method="get" template="'.RACINE.'">
			  <Param name="q" value="{searchTerms}"/>
			  </Url>
			  <moz:SearchForm>'.RACINE.'</moz:SearchForm> 
			</OpenSearchDescription>');
		}
	}
	function parse_query($query,$start=0,$img=false){
		if (!$img){ // web
			$page=file_curl_contents(URL.str_replace(' ','+',urlencode($query)).'&start='.$start);
			if (!$page){return false;}
			preg_match_all(REGEX_WEB, $page, $r);
			preg_match_all(REGEX_PAGES,$page,$p);
			$p=count($p[2]);
			$retour=array(
				'links'=>$r[1],
				'titles'=>$r[2],
				'descriptions'=>$r[3],
				'nb_pages'=>$p,
				'current_page'=>$start,
				'query'=>$query
				);
			return $retour;
		}else{ //images
			$page=file_curl_contents(URL.str_replace(' ','+',urlencode($query)).URLIMG.'&start='.$start);			
			if (!$page){return false;}
			preg_match_all(REGEX_IMG,$page,$r);
			preg_match_all(REGEX_PAGES,$page,$p);
			preg_match_all(REGEX_THMBS,$page,$t);
			$p=count($p[2]);
			$retour=array(
				'site'=>$r[2],
				'links'=>$r[1],
				'h'=>$r[3],
				'w'=>$r[4],
				'sz'=>$r[5],
				'thumbs'=>$t[3],
				'thumbs_w'=>$t[2],
				'thumbs_h'=>$t[1],
				'nb_pages'=>$p,
				'current_page'=>$start,
				'query'=>$query
				);			
			return $retour;		
		}
	}

	function render_query($array){
		global $start,$langue;
		if (!is_array($array)||count($array)==0){return false;}
		if (!isset($array['sz'][0])){
			foreach ($array['links'] as $nb => $link){
				$r=str_replace('#link',$link,TPL);
				$r=str_replace('#title',$array['titles'][$nb],$r);
				$d=str_replace('<br>','',$array['descriptions'][$nb]);
				$d=str_replace('<br/>','',$d);
				$r=str_replace('#description',$d,$r);
				echo $r;
			}
			$img='';
		}else{
			foreach ($array['links'] as $nb => $link){
				$r=str_replace('#link',$link,TPLIMG);
				$r=str_replace('#SZ',$array['sz'][$nb],$r);
				$r=str_replace('#H',$array['h'][$nb],$r);
				$r=str_replace('#W',$array['w'][$nb],$r);
				$r=str_replace('#site',$array['site'][$nb],$r);
				if (!USE_GOOGLE_THUMBS){
					$repl='<img src="'.grab_google_thumb($array['thumbs'][$nb]).'" width="'.$array['thumbs_w'][$nb].'" height="'.$array['thumbs_h'][$nb].'"/>';
				}else if (USE_GOOGLE_THUMBS){
					$repl='<img src="'.$array['thumbs'][$nb].'" width="'.$array['thumbs_w'][$nb].'" height="'.$array['thumbs_h'][$nb].'"/>';
				}				
				$r=str_replace('#thumbs',$repl,$r);
				$r=str_replace('#thumbs_h',$array['thumbs_h'][$nb],$r);
				$r=str_replace('#thumbs_w',$array['thumbs_w'][$nb],$r);
				echo $r;
			}	
			$img='&img';

		}

		if($array['nb_pages'] != 0){
			echo '<hr/><p class="footerlogo">'.LOGO1.str_repeat('<em class="o2">o</em>', $array['nb_pages']-1).LOGO2.'</p><div class="pagination">';
		}
		else{
			echo '<div class="noresult"> '.msg('no results').' </div>';
		}

		if ($start>0){echo '<a class="previous" title="'.msg('previous').'" href="?q='.urlencode($array['query']).$img.'&start='.($start-10).'&lang='.$langue.'">&#9668;</a>';}
		for ($i=0;$i<$array['nb_pages']-1;$i++){
			if ($i*10==$array['current_page']){echo '<em>'.($i+1).'</em>';}
			else{echo '<a href="?q='.urlencode($array['query']).$img.'&start='.$i.'0&lang='.$langue.'">'.($i+1).'</a>';}
		}
		if ($start<($array['nb_pages']-2)*10){echo '<a class="next" title="'.msg('next').'" href="?q='.urlencode($array['query']).$img.'&start='.($start+10).'&lang='.$langue.'">&#9658;</a>';}
		
		echo  '</div>';
	}
	function grab_google_thumb($link){
		if ($thumb=file_curl_contents($link)){
			$local='thumbs/'.str_replace(array('?','/',':'),'',$link).'.jpg';
			if (!is_file($local)){file_put_contents($local,$thumb);}
			return $local;
		}else{
			return $link;
		}
	}
	function clear_cache($delay=180){$fs=glob('thumbs/*'); if(!empty($fs)){foreach ($fs as $file){if (@date('U')-@date(filemtime($file))>$delay){unlink ($file);}}}}
	function is_active($first,$second){if ($first==$second){echo 'active';}else{echo '';}}


	// Gestion GET
	if (isset($_GET['img'])){$img=true;}else{$img=false;}
	if (isset($_GET['start'])){$start=$_GET['start'];}else{$start='';}
	if (isset($_GET['q'])){$q=$_GET['q'];$title='Googol '.msg('search ').htmlspecialchars($q);}else{$q='';$title=msg('Googol - google without lies');}
?>

<!DOCTYPE html>
<html dir="ltr" lang="fr">
<head>
	<title><?php echo htmlspecialchars($title); ?> </title>
	<style>
		*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		body{padding:0;margin:0;font-family:arial, sans-serif;}
		aside{padding:0 25px 100px;}
		a {text-decoration: none; }
		hr{border:none;border-top:1px solid #aaa;}
		form{margin-bottom:20px;padding:0;line-height:20px;}
		header{text-align:center;width:auto;background-color:#ddd;padding-bottom:20px;padding-top:0;border-bottom:1px solid #ddd;}
		header,footer{
			background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
			background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
			background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
			background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeee), to(#cccccc));
			background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
			background-image: linear-gradient(top, #eeeeee, #cccccc);
		}
		header em{font-family:Georgia, Times, serif;font-size:80px;font-style: normal;text-shadow:0 1px 2px #555;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
		em.g{color:blue;}em.o1{color:red;}em.o2{color:orange;}em.l{color:green;}
		header .mini{font-size:14px;padding:0 0 0 220px;margin:0;margin-top:-15px;text-shadow:0 1px 1px white;}
		header .msg{font-size:16px;color:#444;font-style:italic;text-shadow:0 1px 1px #FFF;}
		header .langue{margin:0;padding:0;padding-right:20px;text-align:right;font-weight: bold}
		header .langue a:hover{color:black;}
		header .langue a{color:#444;}
		nav{padding-left:35px;background-color:white;border-bottom:1px solid #ccc;}
		nav li{border-bottom:4px solid transparent;background-color:white; display:inline-block;list-style:none;width:100px;height:30px;font-size:18px;text-align: center;padding-top:4px;}
		nav li.active,header .langue a.active{color:red;font-weight: bold;border-bottom:4px solid red;}
		nav li a{color:#666;}
		nav li a:hover{color:#111;}
		input[type=text]{font-size:16px;height:30px;width:30%;min-width:200px;border-radius: 3px; padding:3px;border:1px solid #ccc;box-shadow: inset 0 1px 2px #ddd}
		input[type=text]:hover{border-color:#aaa;}
		input[type=submit]{height:30px;width:40px;font-size:14px;background-color:#4a8cf7;border:1px solid #397be6;border-radius: 3px;color:#eee; box-shadow:  0 1px 2px #397be6}
		input[type=submit]:hover{background-color:#397be6;border-color:#286ad5 }
		input[type=submit]:active{background-color:#397be6;border-color:transparent;border-top:2px solid transparent;box-shadow:  0 0px 1px #397be6;}
		.result{padding:0 10px ;margin:0;border-radius:3px;word-wrap:break-word;overflow-wrap: break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;}
		.result:hover,.image:hover{background-color:#EEE;}
		.result a {color:#0B0;}
		.result h3 {text-decoration: underline; color:#00B!important;}
		.result .title{margin-bottom:0;}
		.result .description{margin-top:3px;}
		.image{display:inline-block;padding:5px; margin:5px;text-align: center;border-radius:3px;}
		.image p{margin:0;padding: 0;}
		.image .description{font-size: 12px;}
		.image img{border:1px solid transparent;border-radius: 4px; box-shadow: 0 1px 2px #555}
		.image img:hover{border:1px solid #333;}
		.pagination{font-size:18px!important;text-align:center;width:auto;padding-top:5px;}
		.pagination a{text-decoration: none;padding:5px;border-radius: 4px;display:inline-block;}
		.pagination a:hover{background-color:#DDD;}
		.pagination em{padding:5px;background-color:#CCC;border-radius: 4px;display:inline-block;}
		.pagination .next,.pagination .previous{display:inline-block;width: 50px;}
		.footerlogo{text-align:center;padding:0;margin:0;font-size:22px;font-weight:bold;user-select: none;-webkit-user-select: none;}
		.footerlogo em{font-style: normal;display:inline-block;}
		footer{position:fixed;bottom:0;left:0;right:0;height:auto;min-height:40px;border-top:solid 1px #ddd;margin-top:30px;background-color:#EEE;text-align: right;color:#555;line-height: 30px;padding-right:10px;padding-bottom:5px;}
		footer a{color:#444;font-weight: bold;}
		footer img{vertical-align: middle}
		.noresult{text-align:center;margin-top:5px;}
	</style>
	<?php if (is_file('favicon.png')){echo '<link rel="shortcut icon" href="favicon.png" /> ';}?>
	<link rel="search" type="application/opensearchdescription+xml" title="<?php echo msg('Googol - google without lies'); ?>" href="<?php echo RACINE;?>/googol.xml">
	<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->
</head>
<body>
<header>
	<p class="langue"><a class="<?php is_active(LANGUAGE,'fr'); ?>" href="?lang=fr">FR</a> <a class="<?php is_active(LANGUAGE,'en'); ?>" href="?lang=en">EN</a></p>
	<?php echo LOGO1.LOGO2; ?>
	<p class="mini"><?php echo htmlspecialchars(VERSION); ?></p><p class="msg"><?php echo msg('Search anonymously on Google (direct links, fake referer)'); if ($img){echo '<br/>'.msg('The thumbnails are temporarly stored in this server to hide your ip from Google...');}  ?> </p>
	<form action="" method="get" >
		<input type="hidden" name="lang" value="<?php echo LANGUAGE;?>"/>
	<input type="text" name="q" placeholder="<?php echo msg('Search'); ?>" value="<?php echo htmlspecialchars($q); ?>"/><input type="submit" value="OK"/>
	<?php if ($img){echo '<input type="hidden" name="img"/>';}?>
	</form>

</header>
<nav>
<?php 
	if (!$img){echo '<li class="active">Web</li><li><a href="?q='.htmlspecialchars($q).'&img">Images</a></li>';}
	else{echo '<li><a href="?q='.htmlspecialchars($q).'">Web</a></li><li class="active">Images</li>';}
?>
</nav>
<aside>
	<?php if ($q!=''){render_query(parse_query($q,$start,$img));} ?>
</aside>
<footer><a href="<?php echo RACINE;?>">Googol</a> <?php echo msg('by');?> <a href="http://warriordudimanche.net">Bronco - warriordudimanche.net</a> <a href="#" title="<?php echo msg('Free and open source (please keep a link to warriordudimanche.net for the author ^^)');?>"><em>Licence</em></a>  <a href="https://github.com/broncowdd/googol" title="<?php echo msg('on GitHub');?>"><img width="32" src="github.png" alt="logoGH"/></a> <a href="http://flattr.com/thing/1319925/broncowddSnippetVamp-on-GitHub" target="_blank"><img src="http://images.warriordudimanche.net/flattr.png" alt="Flattr this" title="Flattr this" border="0" /></a><a href="http://duckduckgo.com" title="<?php echo msg('Otherwise, use a real Search engine !');?>"><img src="ddg.png" alt="ddg icon"/></a></footer>
<?php if(USE_WEB_OF_TRUST){echo '<script type="text/javascript" src="http://api.mywot.com/widgets/ratings.js"></script>';}?> 
</body>
</html>
<?php add_search_engine(); ?>

			
39 - Parser le DOM via php (lib)
/*
A HTML DOM parser written in PHP5+ let you manipulate HTML in a very easy way!
Require PHP 5+.
Supports invalid HTML.
Find tags on an HTML page with selectors just like jQuery.
Extract contents from HTML in a single line.
*/

// Create DOM from URL or file
$html = file_get_html('http://www.google.com/');

// Find all images 
foreach($html->find('img') as $element) 
       echo $element->src . '<br>';

// Find all links 
foreach($html->find('a') as $element) 
       echo $element->href . '<br>';
			
40 - Forcer les balises HTML5 sous IE
<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->

			
41 - Mettre le focus sur un élément au chargement de la page
body onload="document.getElementById('nom').focus()">
  <label for="nom">Nom : </label>
  <input type="text" name="nom" id="nom" />
</body>
			
42 - Lightbox CSS
CSS DE LA LIGHTBOX
.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
 
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index:1002;
  overflow: auto;
}



CONTENU DE LA LIGHTBOX
<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>

APPEL DE LA LIGHTBOX
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click me</a>

LIEN POUR FERMER LA LIGHTBOX
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>
			
43 - Eviter l'apparition d'une scroll bar
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
affiche la scroll bar tout le temps et évite le saut
html{ overflow-y:scroll; }