Astuce css: avoir une DIV qui occupe 100% du viewport

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

C'est juste... Beau.

(...)

J'adore les selecteurs css

Sur une page HTML, j'avais besoin de filtrer en temps réel un grand nombre de photos... ben c'est vraiment simple.

Tu mets un input texte avec un onkeyup qui récupère sa valeur et tu utilises le sélecteur

"img[src*='"+filter+"']" 
pour récupérer toutes les images qui correspondent (celles qui contiennent le filtre).

c'est tout.

En gros et avec mon VanillaJS:

on("keyup","#filter",function(){
        filter=this.value;
        if (filter){
            hide("#images img");
            show("#images img[src*='"+filter+"']")
        }else{
            show("#images img");
        }       
    })

(...)

PHP: preg_split - Manual

OMAGAD Il existe une fonction comme explode mais qui utilise les regex : preg_split !


// scinde la phrase grâce aux virgules et espacements
// ce qui inclus les " ", \r, \t, \n et \f
$keywords = preg_split("/[\s,]+/", "langage hypertexte, programmation");
print_r($keywords);
// retour:
Array
(
    [0] => langage
    [1] => hypertexte
    [2] => programmation
)

et peut même renvoyer la position de chaque morceau dans la chaîne d'origine:


$str = 'langage hypertexte, programmation';
$chars = preg_split('/ /', $str, -1, PREG_SPLIT_OFFSET_CAPTURE);
// retour:
Array
(
    [0] => Array
        (
            [0] => langage
            [1] => 0
        )
[1] => Array
    (
        [0] => hypertexte,
        [1] => 8
    )

[2] => Array
    (
        [0] => programmation
        [1] => 20
    )

)

... voire même virer automatiquement les chaînes vides avec le flag PREG_SPLIT_NO_EMPTY

Reste plus qu'à benchmarquer pour voir si c'est pas trop gourmand par rapport à explode.

BoZoN 1.6.1 - tout nouveau

Rhaaaa, lala ! Je néglige carrément mon public en ce moment (public au singulier )

Ne m'en veuillez pas trop, mais j'ai du mal à sortir la tête de l'eau entre les projets perso, les projets pour la rentrée prochaine, les projets à finaliser, les idées de projets dans lesquels j'ai hâte de me lancer... du coup, je poste (beaucoup) moins ... voire plus...

 

Mais rassurez-vous, si tant est que l'un d'entre vous ait ressenti un quelconque sentiment d'inquiétude , le blog n'est pas totalement décédé, la preuve: dans la catégorie des mises à jours urgentes depuis des mois, j'ai repris en bloc BoZoN, mon appli minimaliste de partage de fichiers... (dont voici le précédent article)

 

Allez, en piste, c'est parti !

(...)

auto_restrict 3.3 : toujours plus loin, toujours plus haut

Et allllleeeeez... encore une mise à jour pour ce script de sécurisation d'accès à une page php...   *bigfacepalm* 

Ben c'est pas ma faute !   

Comme je l'utilise tout le temps, je le confronte à de nouvelles situations qui me donnent des idées... pis voilà (on n'est jamais à l'abri d'avoir une idée, comme ça, subrepticement  )

 

Enfin, bref, pour les ceusses qui veulent plus se fracturer les rouleaux avec la sécurisation à chaque fois qu'ils veulent se faire un petit espace admin ou une page de config, je pose le bouzin ici

(...)

Fil RSS des articles de cette catégorie