Création DIV + Notification

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 887 fois - Téléchargée 10 fois

Contenu du snippet

Si vous voyez des modifications à faire ou auter n'hésitez pas à me contacter :)

Parti HTML

// Ligne a rajouter en haut du HTML
 // <script type='text/javascript' src='Source_de_votre_JS'></script>

 //Message Perso
  // Exemple : onclick="resultOK('L'action réalisé est OK!', 'div_id');"
  



Parti JS :
//OK_msg => Définition du message que vous souhaiter saisir.
//divid => Id du div présent sur votre page HTML

function resultOK(OK_msg, divid){ 

    var message_OK = OK_msg;

    var newDiv = document.createElement('div'); // Create DIV
    newDiv.setAttribute('id', 'elementResultOK'); // Id DIV
    
    //Parti css du DIV créé
    newDiv.style.border = 'solid 2px #33CC66';
    newDiv.style.background = '#33CC66'; // Color Background
    newDiv.style.right = '0px';
    newDiv.style.width = '200px';
    newDiv.style.height = '75px';
    newDiv.style.top = '0px';
    newDiv.style.position = 'absolute';
    newDiv.style.zindex = '1'; //Affichage en premier Plan
    newDiv.style.borderRadius = '10px'; // Border arrondi
    newDiv.style.color = 'white'; // Color TEXT

    newDiv.innerHTML = '<center></br>'+OK_msg+'</center>'; // Text du DIV créé

    document.getElementById(divid).appendChild(newDiv); // Affichage du DIV
    
    setTimeout(function(){$("#elementResultOK").fadeOut('normal');}, 3000); // délai temporaire du div 

    // délai evenement click sur un bouton(ou autre ) existant
    //Changer #submit par l'id de votre bouton (ou autre).
    //3000 temps avant le click automatique sur le bouton
    setTimeout(function(){$("#submit").click();}, 3000); 

};

Compatibilité : 0.1

A voir également

Ajouter un commentaire

Commentaires

Whismeril
Messages postés
14026
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
5 décembre 2019
322 -
Bonjour, la partie description sert à expliquer à quoi sert la source. Merci donc de la renseigner.
cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
8 -
bonjour,

J'ai à première vue, deux petites remarques:

1. le z-index 1 n'est pas d'office au premier plan, c'est mieux je pense de le passer en paramètre ou de le mettre beaucoup plus grand.

2. Plus embêtant, tu fais un fadeOut mais tu ne supprimes pas la div avec l'id 'elementResultOK'.
Ce qui a pour effet de doubler l'ID si l'on relance la fonction et le fadeOut ne fonctionne plus. Alors soit tu dois tester l'existance de cet id et dans ce cas remplacer son innerHTML ou le supprimer avant de le recréer.


Sinon c'est sympa comme fonction.

Bonne journée.
jordane45
Messages postés
26952
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 décembre 2019
318 -
Bonjour,

En complément des commentaires déjà donnés..... je rajouterai que :
Tu utilises du JQUERY .. hors tu n'a précisé nul-part qu'il fallait le charger pour que ton script fonctionne
Tu utilises du JQUERY ... mais tu pas dans son entièreté .. tu mixes du JS "standard" avec du JQUERY... pourquoi ???

De plus, même si le principe est sympa ... en l'état actuel de cette source... elle n'a pas vraiment sa place ici car ( et la charte du site le dit bien...) elle n'utilise que quelques fonctions "standard" du langage !

Afin de rendre cette source réellement utile... (et intéressante...)
commence par normaliser son code ( en mettant tout en JQUERY ou tout en pure JS .. mais pas en mixant les deux ! )
Ensuite... ajoutes donc quelques options à ta fonction.... ( le temps du settimout, la/les class à utiliser pour les éléments que composes ta div ..., la position : au dessus, en dessous, à droite ou à gauche de l'élément cliqué..., sa hauteur, sa largeur ..etc...

=> Regardes peut être du côté des prototypes en javascript...


Et puis...retires les balises <CENTER> .. qui sont obsolètes en HTML5 et gères le plutôt avec les attributs padding et/ou margin du css ....


Et ...comme te l'a indiqué Whism .. ajoutes une description à ta source !



Conclusion : (désolé d'être si dur....) ... si ces correctifs ne sont pas apportés dans les meilleurs délais.. cette "source" sera supprimée.

PS: Pour rappel: http://codes-sources.commentcamarche.net/contents/11-charte-de-commentcamarche-net-conseils-d-ecriture#regles-pour-poster-une-nouvelle-source-ou-autre-contribution

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.