WebStylePosition

voici un plugin tout simple pour faire apparaitre un tooltip customizable basique

dans le head

<script type=”text/javascript” src=”lib/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”plugin/jquery.tooltip.js”></script>
<link rel=”stylesheet” href=”css/jquery.tooltip.css” type=”text/css” />
<script type=”text/javascript”>
$(function(){
$(’#tooltip1′).tooltip();
});

</script>

dans le body

<div>
<span id=”tooltip1″>Essai sur toolTip</span>
</div>

le plugin est customizable, voici les différentes propriétés (avec leur valeur par défaut)

•  color: ‘#000′
• border: ‘1px solid #ddd’,
• backgroundColor: ‘#f7f7f7′,
• fontFamily: ‘verdana’,
• fontSize:’10px’,
• padding:’5px’

voici les sources et une démo

le css

le plugin

la démo

Share This

voici un plugin que j’ai créé vite fait pour la validation des formats d’email pour un input text

dans le head

<script type=”text/javascript” src=”plugin/jquery.validatorEmail.js”></script>
<link rel=”stylesheet” href=”css/jquery.validatorEmail.css” type=”text/css” />

<script type=”text/javascript”>
$(function(){
$(’#email’).validatorEmail();
});

</script>

et dans le body

<div>
<input type=”text” id=”email” name=”email”/>
</div>

voila

++

le plugin

le css

la démo

Share This

Bonjour a tous,

Je m’intéresse de plus en plus à jQuery et je l’utilise à mon travail ( projet 24/24 actu pour Orange )

Je commence à mettre en place des plugins et je vous en propose un, qui sera je pense, très utile pour les personnes voulant apprendre à créer un plugin sous jQuery et pour les personnes qui souhaiterait un menu à 1 niveau pour leur site.

Son utilisation en est très simple

( j’utilise la version 1.3.1 de jQuery )

dans le head

…
<script type=”text/javascript” src=”lib/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”plugin/jquery.simpleMenu.js”></script>
…

ensuite dans le corps html, mettezun structure ul, li

<ul class=”simpleMenu”>
<li>Allemagne</li>
<li>Belgique</li>
<li>Espagne</li>
<li>France</li>
<li>Italie</li>
<li>Suisse</li>
</ul>

enfin dans le head à nouveau, après la déclaration de l’appel des script, insérez les lignes de codes suivantes

<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu();
});
</script>

Bien sur ce plugin a plusieurs propriétés

<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu({
position : ‘horizontal’,               // alignement vertical ou horizontal
padding : ‘5px 5px 5px 5px’,    // espacement dans l’élément
background : ‘#ddd’,                // couleur arriere plan
backgroundHover : ‘#000′,      // couleur arriere plan sur rollOver
color : ‘#000′,                          // couleur du texte
colorHover : ‘#fff’,                    // couleur du texte sur rollOver
bold : ‘normal’,                        // mise en gras ou nom
boldHover: ‘bold’,                    // mise en gras ou nom sur rollOver
textAlign : ‘center’,                 // alignement du texte
family : ‘verdana’,                   // type de police pour le texte
fontSize: ‘9px’                        // taille de la police
});
});
</script>

librairie jQuery utilisé

plugin simpleMenu

et voici un exemple

A vous de continuer en ajoutant les liens et tout ce qui vous sera utile pour en faire un menu!

++

Share This

a few year ago, i have discovered ( like a lot of people) the power of a new concept : AJAX, which use a particulary object of javascript library, the XMLHttp object.

With that you could easily get a asynchronous request with your server ( for your sql request by exemple).

But the concept is that you don’t need to load any page to get result, it’s really great!

here we will see an example and the entire code of a function which enables you to use Ajax when you want. So let’s go!

here the ajax function code:

function ajaxManager(){
var args = ajaxManager.arguments;
switch (args[0]){
case “load_page”:
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
el = document.getElementById(args[2]);
if (x.readyState == 4 && x.status == 200)
{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
el.innerHTML = x.responseText;
}else{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
}
}
x.open(”GET”, args[1], true);
x.send(null);
}
break;
}
}
</script>

To use this function, it’s very easy:

example on a click
<a href=”#” onclick=”ajaxManager(’load_page’, ’script/myscript.php’, ‘containerWhereIdisplaythe result’)”>
print hello
</a>

here the result:

print hello


You see it works!

to get a better resut, you can use now other javascript function and css tricks to change the display of your result with opacity ( or filter for IE ), or visibility attribute for example!

if you need more tips to use ajaxManager, please contact me or leave a comment

here the source of ajaxManager.js and the image ( to load animation)

Share This

to create some shadows, thers are several alternatives, like images or filter (in IE), but there is another solution. It is very basic but works well.
here an example:

In fact it’s very simple:

here the XHTML code:
There are a lot of tag available to do that…

<dl class="container">
<dd class="shadow"></dd>
<dd class="contentBox"></dd>
</dl>

And here the css:

.container{
position:relative;
width:110px;
height:110px;
}

.shadow{
position:absolute;
top:4px;
left:4px;
background-color: #333333;
width:100px;
height:100px;
}

.contentBox{
position:absolute;
top:0px;
left:0px;
background-color: #ffffff;
border: 1px solid #333333;
width:100px;
height:100px;
}
it’s really basic but it works every time

Share This

    Hi everbody,

This is my real first experience about blogging, and i hope th will be great!

Let me introduce myself:

my surname is dji, i work in a high Tech Company named ENENSYS Technologies, where i am developper in ERP (openSource based) and webDesigner/webMaster.
I love my job! it is the best i have never got!

I have several experience in web language and i am almost a expert in PHP, FLEX, CSS and javascript/ajax.

By blogging i will try to give you lot of tips and examples about web development.

So here we go and enjoy!

Share This