Blog de Nicosmash » Developpement Web

Utiliser scrollTop() avec jQuery

nicosmash — Mon, 01 Jul 2013 21:06:00 +0000

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

nicosmash — Thu, 13 Jun 2013 21:10:55 +0000

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>
</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)

nicosmash — Tue, 11 Jun 2013 21:27:04 +0000

Menu simple

1
2
3
4
5

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

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

nicosmash — Tue, 11 Jun 2013 21:08:40 +0000

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;
}