Archives pour la catégorie Developpement Web

Utiliser scrollTop() avec jQuery

Publié le par
Répondre

Pour cette exemple pensez à implémenter la bibliothèque jQuery Documentation jQuery.

1
2
3
4
<div>
Il fait beau, le soleil brille, je mange du pain, le ciel est bleu, ma voiture est rouge, mon portable est noir.
</div>
<button>Retourne la position verticale en 'pixel' de la scrollbar.</button>
1
2
3
4
5
6
7
$(document).ready(function ()
{
    $("button").click(function ()
    {
        alert("La position verticale de la scrollbar est de : " + $("div").scrollTop() + " px");
    });
});
1
2
3
4
5
6
7
div
{
    border:1px solid black;
    width:100px;
    height:100px;
    overflow:auto;
}

Tableau à taille fixe

Publié le par
Répondre
1
2
3
4
5
6
7
8
9
10
11
<table border="1">
  <tr>
    <td>taille de </td>
    <td class="pers">taille de texte</td>
  </tr>
  <tr>
    <td>taille de texte longue et interminable,taille de texte longue et interminable, taille de texte longue et interminable,  taille de texte longue et interminable, taille de texte longue et interminable
</td>
    <td class="pers">taille de texte</td>
  </tr>
&lt;/table
1
2
3
4
5
6
7
8
table {
  width:900px;
}
.pers{
   background:silver;
   max-width:50px;
   min-width:50px;
}

jQuery : Menu déroulant (accordéon)

Publié le par
Répondre

Menu simple

1
2
3
4
5
<ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>
1
2
li {cursor:pointer;}
.actif {color: red}
1
2
3
4
$('li').click( function(){
    $(this).siblings().removeClass('actif');
    $(this).addClass('actif');    
})

Menu un peu plus élaborer avec une pseudo-classe :

1
2
3
4
5
6
7
8
9
10
11
<ul id="navigation">
    <li>
        <a href=""><h1>Titi</h1></a>
    </li>    
    <li>
        <a href=""><h1>Toto</h1></a>
    </li>    
    <li>
        <a href=""><h1>Tata</h1></a>
    </li>
</ul>
1
2
3
4
5
.selected {  background-color: rgba(233, 147, 26,0.5); }
li {
    border:solid;
    border-color:silver;
}
1
2
3
4
5
$('#navigation li a').click( function(e){
    e.preventDefault();
    $(this).closest('li').siblings().find('h1').removeClass('selected');
    $(this).find('h1').addClass('selected');    
})

CSS : Selecteur : after

Publié le par
Répondre

Utilisation du sélecteur after :

1
2
<div class="field"></div>
<div class="field"></div>
1
2
3
4
.field:after{
  content:"*";
  color:red;
}

Utilisation du sélecteur avec différents types de champs :

1
2
3
4
5
<div class="req"><button>bouton</button></div>
<div class="req"></div>
<div class="req"></div>
<div class="req"></div>
<div class="req"><textarea></textarea></div>
1
2
3
4
.req:after{
    content: "*";
    color: red;
}