Astuce : Astuces de programmation Le MEMO du Web Développeur

Comment ajouter un favicon sur son site

t@ra — Thu, 16 Nov 2023 17:55:33 +0000

Le favicon d’un site est la petite image qui apparaît à gauche de l’onglet du navigateur correspondant la page du site. C’est une image de format .ico

http://favicon.htmlkit.com/favicon/ permet de générer et de télécharger un favicon, à partir d’une image png ou jpeg .

Il est possible de paramétrer le background, la bordure de l’image favicon etc …

Pour que l’image du favicon apparaisse il vous suffit de placer la ligne suivante à l’intérieur de la balise de votre site :

Etant entendu que votre favicon se nomme favicon.ico, mais vous pouvez le nommer comme vous voulez, l’important étant l’extension .ico

The post Comment ajouter un favicon sur son site first appeared on Le MEMO du Web Développeur.

Propriéte :first-letter Agir sur la première lettre d’un élément en CSS

t@ra — Wed, 15 Apr 2020 08:59:33 +0000

La pseudo élément :first-letter permet d’agir en CSS uniquement sur la première lettre de l’élément visé de la façon suivante :

h3:first-letter {font-size: 4em; color: red;}

Cas où le pseudo élément :first-letter ne fonctionne pas

:first-letter ne va pas fonctionner si :

Le premier élément du bloc sélectionné (dans notre exemple ci dessus un h3) n’est pas une lettre (s’il y a une image, ou une icône avant la première lettre)

Si le bloc sélectionné n’est pas de type block . Par exemple ce pseudo élément ne va pas fonctionner sur un élément span. Dans ce cas, il existe cependant une solution qui est d’assigner la propriété block au span.

Exemple ci dessous pour un span de class « span-block »

span.span-block:first-letter {color:red;}
span.span-block {display: block;}

The post Propriéte :first-letter Agir sur la première lettre d’un élément en CSS first appeared on Le MEMO du Web Développeur.

Garder une variable de session après fermeture du navigateur

t@ra — Tue, 09 Sep 2014 07:21:23 +0000

Il est possible de garder la valeur d’une variable de session même après que l’internaute ait fermé son navigateur.

Il faut comprendre que les sessions utilisent les cookies pour être sauvegardées sur votre machine.

La fonction session_get_cookie_param() vous donne les propriétés du cookie de session :

lifetime : durée de vie de la session en secondes
path : Le chemin à l’intérueyr de votre domaine pour lequel votre cookie sera accessible.
domain : Le domaine du cookie, par exemple http://memo-web.fr
secure : Est un boolean si = true le cookie ne sera envoyé que sur une connexion sécurisée.

La fonction session_set_cookie_param() vous permet de modifier les propriétés du cookie et notamment sa durée de vie.

La valeur contenue dans la variable de session est alors conservée même si l’internaute quitte le navigateur.

Remarques :

Vous devez déclarer session_set_cookie_params() avant l’appel à session_start
L’effet de cette session_set_cookie_params() ne dure que pendant l’exécution du script courant.Vous devez donc faire appel à cette fonction pour chaque script si vous souhaitez modifier la durée d’action de la variable de session.

The post Garder une variable de session après fermeture du navigateur first appeared on Le MEMO du Web Développeur.

Affichage tampon en PHP : Output buffering

t@ra — Fri, 26 Jul 2013 07:29:46 +0000

Il est possible en PHP de placer du contenu dans une mémoire tampon au lieu de l’afficher à l’écran. Cela permet par exemple de traiter des informations complexes et de n’afficher le résultat que si les opérations se sont déroulées correctement.
Pour cela, on se sert des fonctions :

ob_start() : fonction d’initialisation de l’output buffering
ob_get_contents() : récupération du contenu du buffer
ob_end_clean() : arrêt de l’opération d’output buffering et nettoyage du buffer

Exemple :

';
  echo 'Etape 3
';
  $sortie=ob_get_content();
  ob_end_clean();
  echo 'Etape 1
';
  echo $sortie;
?>

Affichera les étapes dans l’ordre, puisque les étapes 2 et 3 ont été affichés dans le buffer qui lui même est affiché après le « echo » de l’Etape 1

Astuce :

L’outup buffering peut être utilisé notamment pour les manipulations de la fonction header () , session_start ou de cookies qui doivent être faites avant tout premier affichage du script. Ceci permet une plus grande liberté dans leur utilisation.

The post Affichage tampon en PHP : Output buffering first appeared on Le MEMO du Web Développeur.

Ajouter un masque de saisie dans un champs input text

t@ra — Thu, 13 Jun 2013 06:18:16 +0000

Il est possible de rajouter un masque de saisie lors de la saisie d’un champs input text d’un formulaire HTML qui empêche l’utilisateur de saisir certains caractères.

Ce masque codé en javascript, se déclanche sur l’événement keyup du champs texte du formulaire.
L’input text doit porter une classe spécifique, ici la classe only_alpha_num qui nous permettra de déclancher l’évenement keyup.

Lorsque l’utilisateur tape un caractère, on analyse ce caractère dans l’événement keyup que l’on fait passer par le filtre d’une expression régulière. Dans notre cas on vérifie que le caractère tapé est un caractère alphanumérique, si la condition est vérifiée, on applique la fonction supprimer_dernier_caractere qui va supprimer du champs text le dernier caractère saisi.
Il devient impossible alors pour l’utilisateur de saisir un autre caractère qu’un caractère alphanumérique.

code HTML :

Code javascript :

function supprimer_dernier_caractere(elm) {
  var val = $(elm).val();
var cursorPos = elm.selectionStart;
$(elm).val(
   val.substr(0,cursorPos-1) + // before cursor - 1
  val.substr(cursorPos,val.length) // after cursor
)
elm.selectionStart = cursorPos-1; // replace the cursor at the right place
elm.selectionEnd = cursorPos-1;
}

$(document).ready( function () {
  // Supprime le dernier caractère s'il n'est pas alphanumérique sur evt keyup
  $('body').delegate('input.only_alpha_num','keyup',function(){
    if(!$(this).val().match(/^[0-9a-z]*$/i)) // a-z et 0-9 uniquement
      supprimer_dernier_caractere(this);
  });


// Annulation du "coller" dans l'input texte auquel on a affecté l'identifiant "no_paste"
document.getElementById('no_paste').addEventListener('keydown', 
  function (foo){
    if (foo.keyCode == 86)
    {
       // alert('Vous avez copié du texte');
foo.preventDefault();
    }
 });


})

The post Ajouter un masque de saisie dans un champs input text first appeared on Le MEMO du Web Développeur.

DatePicker de JQuery : Déployer le calendrier à l’ouverture de la page

t@ra — Tue, 04 Dec 2012 08:14:18 +0000

Le plugin calendrier Datepicker de JQueryUI se déploie par défaut si l’on click sur le champs de date (en fait lorsque le champs prend le focus) ? voir exemple ici sur le champs de la date de naissance.

On peut parfois vouloir déployer le calendrier automatiquement dès l’ouverture de la page, pour ce faire il sufffit, grâce à JQuery de mettre le focus sur l’input du champs de date au chargement de la page

Code HTML :

Code JQuery :

The post DatePicker de JQuery : Déployer le calendrier à l’ouverture de la page first appeared on Le MEMO du Web Développeur.

Apparition d’un élément en fondu avec JQuery sur le survol de souris

t@ra — Tue, 04 Dec 2012 08:11:05 +0000

La fonction suivante permet de faire un fondu entre deux images lors du passage de la souris sur l’élément #monimage

Le principe : Lors du survol de #monimage dont le background est ‘image1.png’ un élément div temporaire (#temp) est créé #temp dont le background est ‘image2.png’. On affiche cet élément en fondu grâce la fonction animate de JQuery. Il est possible d’optimiser le chargement de l’image en utilisant les sprites (inclure image1.ppng et image2.png dans la même image et jouer sur la position du background lors de l’affichage)

Petit exemple ici

Code CSS :

#monimage{
background:url('image1.png') no-repeat top left;
}

Code JQuery :

The post Apparition d’un élément en fondu avec JQuery sur le survol de souris first appeared on Le MEMO du Web Développeur.

Détecter un click à l’extérieur d’un élément avec JQuery

t@ra — Thu, 09 Aug 2012 07:04:51 +0000

Le code suivant permet de repérer si l’utilisateur clique à l’extérieur ou sur un élément d’identifiant ‘id_de_mon_element’.

event.target correspond à l’élément qui a déclenché l’événement, où est est le paramètre passé à la fonction

$('html').click(function(event){
     if(event.target.id == 'id_de_mon_element') {
       alert ("j'ai cliqué sur mon élément");
     } else {
       alert ("j'ai cliqué à l'extérieur de mon élément");
     }
 });

The post Détecter un click à l’extérieur d’un élément avec JQuery first appeared on Le MEMO du Web Développeur.

Afficher une image différente selon la date de l’année en javascript

t@ra — Wed, 08 Aug 2012 07:06:47 +0000

Ce script javascript permet d’afficher une image de background différente selon les saisons à l’élément d’identifiant id= »monimage »

L’idée est d’analyser la date courante afin de déterminer la saison en utilisant l’objet new Date(année, mois, jour)

The post Afficher une image différente selon la date de l’année en javascript first appeared on Le MEMO du Web Développeur.

Atteindre une ancre avec JQuery

t@ra — Sun, 18 Dec 2011 08:20:43 +0000

Une ancre dans une page HTML est un point de repère dans la page vers lequel on va faire un lien afin que le haut de la fenêtre du navigateur se positionne directement sur ce point (au lieu d’avoir à scroller à la main pour y parvenir). Très pratique pour les pages avec beaucoup de contenu.

Pour créer une ancre, on affecte un identifiant quelconque, ici id= »monancre » à l’élément de la page vers lequel on veut diriger notre visiteur, et on rajouter un lien à l’endroit de la page où l’on propose au visiteur d’être redirigé. La page est donc rechargée.

Méthode classique d’ancrage en HTML

 
 
 Ce lien vous redirige vers l'élément #monancre de la page

Ancre JQuery : faire glisser une page vers un point défini de la page

JQuery nous offre une méthode plus élégante visuellement, en utilisant la fonction d’animation animate, utilisée sur memo-web.fr, qui (ici par glissement), déplacera le navigateur vers l’ancre désirée.

Après avoir préalablement déclaré le script jquery, on peut par exemple proposer au visiteur de cliquer sur l’élément d’identifiant #redirection pour amener délicatement l’élément d’identifiant #monancre, en haut de notre page, grâce aux fonctions animate et scrollTop .

Code HTML :


  Cliquez moi pour déplacer la page vers l'élément d'identifiant #monancre

 Mon ancre

Code JQuery :

$(document).ready( function () {
   $('#redirection').click(function() {
     $('html,body').animate({scrollTop: $("#monancre").offset().top}, 'slow'      );
   });  
})

The post Atteindre une ancre avec JQuery first appeared on Le MEMO du Web Développeur.

padding et margin en hauteur ne fonctionnement pas sur éléments inline

t@ra — Wed, 14 Dec 2011 17:27:21 +0000

Tout est dans le titre, sauf erreur de ma part, ne comptez pas sur les margin-top ou padding-bottom pour positionner verticalement vos balises inline comme les span.

Utilisez plutôt la propriété CSS text-height.

The post padding et margin en hauteur ne fonctionnement pas sur éléments inline first appeared on Le MEMO du Web Développeur.

Revenir à la page précédente du navigateur

t@ra — Mon, 12 Dec 2011 17:28:36 +0000

Il existe plusieurs manières de faire un lien de retour à la page précédemment visitéepar l’internaute.

Revenir à la page précédente en utilisant la méthode history.go de Javascript :

Retour

Revenir à la page précédente en utilisant la super globale PHP $_SERVER :

Retour

Revenir à la page précédente en utilisant la fonction header() de PHP :

Avertissement :

Dans ce dernier cas, gardez toujours en tête qu’aucun texte, espace, affichage PHP ne doit précéder l’appel à la fonction header() !!

The post Revenir à la page précédente du navigateur first appeared on Le MEMO du Web Développeur.

Trouver le chemin canonique absolu d’un répertoire

t@ra — Sat, 10 Dec 2011 17:30:38 +0000

La fonction PHP realpath() renvoit le chemin canonique absolu du fichier passé en paramètre de la fonction.
Copiez dans un fichier monfichier.php le code suivant :

Cela vous indiquera le chemin absolu du répertoire dans lequel se situe votre fichier monfichier.php.

Le résultat ne contient ni lien symbolique ni /../

The post Trouver le chemin canonique absolu d’un répertoire first appeared on Le MEMO du Web Développeur.