SnippetVamp

Parce que yen a marre de chercher ses bouts de code partout...



TODO 1 ajax 3 astuce 64 auto_ 2 bootstrap 14 conversion 2 crossbrowser 3 css 46 debug 10 dothtaccess 1 effets 1 erreurs 1 evenements 2 fallback 1 fichiers 27 filter 1 fonctions 72 form 1 graphisme 11 html 39 javascript 38 jquery 26 lib 2 mail 1 markdown 2 mobile 2 parser 13 php 88 pluXML 4 python 10 responsive 7 securite 16 social 1 texte 16 vanilla 4

.

Derniers snippets

Bienvenue sur l'espace SnippetVamp de Bronco.
SnippetVamp est une application libre et open-source destinée à conserver, créer, modifier, retrouver, gérer, partager simplement et rapidement des snippets.
Vous pouvez la télécharger sur Github (github.com/broncowdd/SnippetVamp), l'installer sur votre serveur (php 5.2 sans base de données) et en modifier les thèmes et le code comme bon vous semble (en laissant quelque part une référence à la source ;) )

deep_strip_tags - un strip_tags pour arrays

function deep_strip_tags($var){
    if (is_string($var)){return strip_tags($var);}
    if (is_array($var)){return array_map('deep_strip_tags',$var);}
    return $var;
}

fonctions php securite texte

http://warriordudimanche.net

<iframe width="100%" height="272" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=556843e4ee746" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 29/05/2015

savejson-loadjson - sauver/lire des données en une ligne

<?php
function savejson($file,$datas){return file_put_contents($file,'<?php/*'.serialize($datas).'*/?>');}
function loadjson($file){return unserialize(str_replace(array('<?php/*','*/?>'),'',file_get_contents($file)));}


?>

fichiers fonctions php

<iframe width="100%" height="290" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=553b4aadc85f0" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 25/04/2015

Parcourir un tableau d'éléments en partant de la fin en jquery


jQuery.fn.reverse = [].reverse; // on définit la fonction reverse() comme un plugin ^^
$('.SELECTEUR').reverse().each(function () {
    //CODE ...
});

jquery

http://stackoverflow.com/questions/1394020/jquery-each-backwards

<iframe width="100%" height="272" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=552f6dc7d298d" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 16/04/2015

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>

bootstrap css html javascript jquery

http://getbootstrap.com/components/

<iframe width="100%" height="938" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a9f24f242" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html javascript jquery

<iframe width="100%" height="740" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a90fb6677" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="1136" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a8853a986" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="290" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a803e8af6" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="362" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a76a5128b" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="380" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a741b3a2d" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="614" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a6ea12d8c" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

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>

bootstrap css html

http://getbootstrap.com/components/

<iframe width="100%" height="1100" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521a62a08ffd" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

Menu en accordeon

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

bootstrap css javascript jquery

http://getbootstrap.com/javascript/#collapse-example-accordion

<iframe width="100%" height="974" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5521802e35ab0" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

Collapse un div via un bouton

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

bootstrap css javascript jquery

http://getbootstrap.com/javascript/#collapse-example

<iframe width="100%" height="380" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217f5ae2fb0" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

checkbox et radio sous forme de boutons

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

bootstrap css javascript jquery

http://getbootstrap.com/javascript/#buttons-checkbox-radio

<iframe width="100%" height="596" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217f111412a" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

popover

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

bootstrap css jquery

http://getbootstrap.com/javascript/#popovers

<iframe width="100%" height="506" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55217a9aeaca1" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 05/04/2015

1234567891011121314

Flux RSS de cette page


SnippetVamp 1.83 par Bronco - Page générée en 0.105 s