1 - télécharger la page courante en html - js
<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download</a>
Results for html : 51
2 - Rendre un tableau responsive
<table class=”events-table” >
<thead>
<tr>
<th class=”event-date”>Date</th>
<th class=”event-time”>Horaire</th>
<th class=”event-description”>Evènement</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=”Date”> Le #_EVENTDATES</td>
<td data-label=”Horaire”>#_EVENTTIMES</td>
<td data-label=”Evènement”>#_EVENTLINK</td>
</tr>
</tbody>
</table>
table caption {
display: none;
}
@media all and (max-width:500px){
table{
width:100%;
}
table caption {
display: block;
background-color: #484d55;
color:white;
}
.table thead {
display: none;
}
.table tr{
display: block;
margin-bottom: 40px;
}
.table td {
display: block;
text-align: right;
}
.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
3 - arborescence en css uniquement
.tree {
--spacing: 1.5rem;
--radius: 10px;
--marker-bg-default: #ddd;
--marker-bg-haschild: #6b9abb;
line-height: 2rem;
}
.tree li {
display: block;
position: relative;
padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
margin-left: calc(var(--radius) - var(--spacing));
padding-left: 0;
}
.tree ul li {
border-left: 2px solid #ddd;
}
.tree ul li:last-child {
border-color: transparent;
}
.tree ul li::before {
content: "";
display: block;
position: absolute;
top: calc(var(--spacing) / -2);
left: -2px;
width: calc(var(--spacing) + 2px);
height: calc(var(--spacing) + 1px);
border: solid #ddd;
border-width: 0 0 2px 2px;
}
.tree summary {
display: block;
cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
display: none;
}
.tree summary:focus {
outline: none;
}
.tree summary:focus-visible {
outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
content: "";
display: block;
position: absolute;
top: calc(var(--spacing) / 2 - var(--radius) + 2px);
left: calc(var(--spacing) - var(--radius) - 2px);
width: calc(2 * var(--radius));
height: calc(2 * var(--radius));
border-radius: 50%;
background: var(--marker-bg-default);
}
.tree summary::before {
content: "+";
z-index: 1;
background: var(--marker-bg-haschild);
color: #fff;
line-height: calc(2 * var(--radius));
text-align: center;
}
.tree details[open] > summary::before {
content: "−";
}
<ul class="tree">
<li>
<details open>
<summary>Informatique</summary>
<ul>
<li>
<details>
<summary>Périphériques</summary>
<ul>
<li>Clavier</li>
<li>Souris</li>
<li>Ecran</li>
</ul>
</details>
</li>
<li>
<details open>
<summary>Stockage</summary>
<ul>
<li>Disque dur</li>
<li>SSD</li>
<li>Clé USB</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Composants</summary>
<ul>
<li>Processeur</li>
<li>Carte mère</li>
<li>Mémoire</li>
<li>
</ul>
</details>
</li>
<li>
<details>
<summary>Composants</summary>
<ul>
<li>Processeur</li>
<li>Carte mère</li>
<li>Mémoire</li>
<li>Carte graphique</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</code></pre> codeCarte graphique</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
4 - touche de clavier en CSS
<style type="text/css">
key{
display:inline-block;
padding:0.5em;
border:1px solid rgba(0,0,0,0.5);
border-radius: 3px;
box-shadow: 0 0.2em 0 0.05em #222;
background: linear-gradient(180deg, rgba(150,150,150,1) 0%, rgba(240,240,240,1) 100%);;
}
</style>
<key>Shift</key>+<key>B</key>
5 - Des sous-titres qui fonctionnent avec la balise video
<video controls title="sdfgsdfg" preload="auto" crossorigin>
<source src="Marco_Castelblanco.mp4" type="video/mp4"/>
<!-- kind="captions" ou "subtitles" ATTENTION AU PLURIEL -->
<track kind="captions" srclang="fr" label="sous-titre" src="Marco_Castelblanco.vtt" default="true"/>
Sorry, your browser doesn't support embedded videos.
</video>
6 - Empêcher le submit d'un formulaire par Enter sans bloquer la touche
form.addEventListener("submit", function(event){
if (event.keyCode==13){
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
});
7 - Page HTML5 de base
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
<meta property="og:title" content="TITLE">
<meta property="og:type" content="website">
<meta property="og:url" content="URL">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="favicon.svg">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="styles.css?v=1.0">
</head>
<body>
<!-- your content here... -->
<script src="scripts.js"></script>
</body>
</html>
8 - effet de retournement horizontal d'une animation
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
background-color: transparent;
width: 220px;
height: 300px;
border: 1px solid #eeeeee;
perspective: 1000px;
}
.box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.box:hover .box-inner {
transform: rotateY(180deg);
}
.box-front, .box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.box-front {
background-color: #cccccc;
color: #111111;
}
.box-back {
background-color: #8ebf42;
color: #eeeeee;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h2>Boîte de retournement 3D (Horizontale)</h2>
<p>Placez la souris sur la boîte pour voir l'effet:</p>
<div class="box">
<div class="box-inner">
<div class="box-front">
<h2>Face frontale</h2>
</div>
<div class="box-back">
<h2>Face arrière</h2>
</div>
</div>
</div>
</body>
</html>
9 - Body qui apparait après chargement en 2 lignes
/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}</style>
/* balise body */
<body onload="document.body.style.opacity=1" >
10 - 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';
}
11 - 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"
];
12 - 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;
}
13 - 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;
}
14 - 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;
}
}
}
15 - 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;
}
16 - 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;
}
17 - 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>
18 - 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();
19 - 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;
}
}
20 - 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;
}
21 - 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>
22 - 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>
23 - 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>
24 - 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>
25 - 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>
26 - 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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
27 - Media - exemple
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
28 - 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>
29 - 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>
30 - 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);
}
31 - Strip HTML Tags in JavaScript | CSS-Tricks
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
32 - 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>
33 - HTML5 page de départ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
34 - html - Select removing dropdown arrow - Stack Overflow
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
35 - 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;
36 - 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(''',$value),array('\'',$art[$key]),$list);
}
echo $list;
?>
</ul>
37 - Autoresize vertical d'un textarea
<script>
function redimtextareas(obj){
obj.style.height='500px';
obj.style.height = obj.scrollHeight + 20 + 'px';
}
</script>
html:
<textarea name="nom" onFocus="redimtextarea(this);" onKeydown="redimtextarea(this);"></textarea>
css:
textarea{overflow:hidden; /* éviter les scrollbars*/}
38 - 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 */
}
39 - 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;
}
?>
40 - 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>
41 - 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" />
42 - centrer un élément dont on connait la taille (marges negatives)
.centered {
position: fixed;
top: 50%;
left: 50%;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
* html .centered { position:absolute }
margin: 20px auto;
43 - 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%;
44 - 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;
}
}
45 - 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%;
}
}
46 - 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>
47 - 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>';
48 - Forcer les balises HTML5 sous IE
<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->
49 - 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>
50 - 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>
51 - 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; }