Panneau /fenêtre flottante en bas a droite Javascript JQuery floating/sliding bottom right panel

Publié par | 13:21 | 0 commentaires

Voila un Widget a ceux qui cherche une fenêtre ou un panneau en bas a droite . ce qui ressemble aux notifications de Windows .
Ca consiste en un DIV conteneur positionner en FIXED et la position right a 0 bottom à 0 aussi
pour que ca soit coller en bas a droite dans le conteneur il y a la barre des titre qui se compose d un titre et d'un bouton puis le contenu lui même

Avec JQuery on gère les évènements le clique sur le bouton
on appel la méthode slideToggle pour cacher et afficher le contenu
Et voilà on obtient un widget intéressant
voici le code de la page HTML 

<DOCTYPE html>
<html>

  <head lang="fr-FR">

    <meta charset="utf-8">
    <title>floating/sliding bottom right panel </title>
      <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css"/>
 
  <style>
  
 #container {
  width: 220px;
  position: fixed;
  bottom: 0;
  right:0;
  border:1px solid #AAA;
 }

 .ui-clearfx {
  padding: .1em 1em;
 }

 #content {
  display: none;
  padding: 10px;
 }
 #header{
  margin: 0;
  border-bottom: 0;
  padding: .6em .2em 0.2em .2em;
 }
 #button{
  float:right
 } 
  </style>
  <script>
  $(function() {
   $("#button").click(function(e){
         $("#button>span")
   .toggleClass("ui-icon-circle-triangle-n")
   .toggleClass("ui-icon-circle-triangle-s");
        $("#content").slideToggle("slow");
        e.preventDefault();
  return false;
    });
  });
  </script>
   </head>
  <body>
    <div id="container" class="ui-widget-content ui-corner-top">
            <div id="header" class="ui-widget-content ui-widget-header ui-tabs-nav">
     <span class=" ui-corner-top ui-clearfx">Ici un titre<span>
     <a href="#" id="button" class="ui-button ui-widget ui-state-default ui-corner-all">
        <span class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-n">
    </span>
     </a>  
   </div>
            <div id="content" class="ui-widget-content" >
                <p> 
    ici le texte <br/>
    ici le texte <br/>
    ici le texte <br/>
    ici le texte <br/>
    ici le texte <br/>
    ici le texte <br/>
    ici le texte <br/>
    </p>
            </div>
        </div>
    
    
  </body>
  
</html>

Démo et code source

première lettre en majuscule JQuery - JavaScript uppercase first letter

Publié par | 12:34 | 0 commentaires

Un petit casse tete parfois , lors de l insertion dans un DOM ou simplement pour afficher un texte ou paragraphe :
On a recours a la mise en majuscule automatique de la première lettre .

Bien sure si le texte est sur une page Web on passe directement par la propriété CSS text-transforme
comme cette exemple : 

slector{

  text-transform : capitalize;
}

Dans ce cas l’élément vise par ce style aura la première lettre en majuscule mais a l affichage seulement ,
car si on récupère sa valeur texte et on l affiche ailleurs on verra que le texte n est pas transformé . 

   

  alert($("selector").text() ) 
  // affiche le text non transformé

Enfin voila une fonction javascript qui permet de mettre en majuscule la première lettre 

   

  function capitalize( str){
   return str.replace(/^(.{1})(.*)$/,function(m,c,d){
                                        return c.toUpperCase()+d;
   });