1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

LEs Boxes Agradir/Réduire [Résolu]

Signaler
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
 -
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 -
Mon objectif est de faire exactement pareil que les Boxes qui se trouvent dans la partie de navigation gauche tout en bas du site: Mes RSS, Derniers logiciels, Divers.

J'ai entammé la réalisation de ces boxes depuis 15 jours mais j'ai pas réussi tout seul à faire pareil , j'ai posté beacoup de questions sur le forum mais en vain. Je dois présenter mon site dans pas longtemps , je vous prie de bien vouloir m'aider.

Merci

Info
Afficher la suite

20 réponses

Réponse 1 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
ba voila c'est ok ca fera 1500$

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="gestion_position.js"></SCRIPT>
<script>
var mnhv=''

function mnh(vl,pb){
if(controle==1){
controle=0
bl=vl
pl=pb
if(document.getElementById(vl).offsetTop<=20){
mnhv=1
}
if(document.getElementById(vl).offsetTop>=pl){
mnhv=0
}
}
var Table_haut=document.getElementById(bl)
if(mnhv==0){
Table_haut.style.top=Table_haut.offsetTop-10
if(Table_haut.offsetTop<=20){
return false
}
setTimeout("mnh(bl)",16)
}
if(mnhv==1){
Table_haut.style.top=Table_haut.offsetTop+10
if(Table_haut.offsetTop>=pb){
return false
}
setTimeout("mnh(bl,pl)",16)
}}
</SCRIPT>
</head>

</html>
Réponse 2 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
jour
ton erreur vient du fait que tu interprete mal la definition absolu
(position:absolute )
left  doit etre a zero et tu ne met plus top si j'ai mis dans mon exemple top a 20 c'est parce que l'image ou l'on clique mesure 20 pixels et c'est aussi pour cela que quand les menu son remonte il rest 20 pixel non remonte

pas bon

500px;width:166px; height:300px;'>




bon



0px;top:20;width:166px; height:300px;'>
Réponse 3 / 20
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 32
Re,

Déja la tu es sur de n'avoir aucune aide, c'est pas en postant une autre fois son problème qu'on  plus de réponse, on plus souvent des critiques !

Je t'a déja dit de regarder vers scriptaculous !

Et je te répète que ça m'étonerai que les sources de ces boites ne soit pas postés sur le forum !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 4 / 20
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
Bonjour,

>> j'ai posté beacoup de questions sur le forum mais en vain.
tant qu'on ne verra pas ton code, on ne pourra pas t'aider plus
>>je dois présenter mon site dans pas longtemps
t'es viré sinon ? ce n'est qu'un gadget !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 5 / 20
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 32
Et si tu prenais la peine de regarder les source js de code source avec firebug peut être que tu trouverai le code source de ces fameuses box !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 6 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
jour
je te previent tout de suite c'est une version alarache a toi de voir pour le reste

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script>
var mnhv=0

function mnh(vl){
if(controle==1){
bl=vl
controle=2
}
var Table_haut=document.getElementById(bl)

if(mnhv==0){
Table_haut.style.top=Table_haut.offsetTop-10
if(Table_haut.offsetTop<=20){
Table_haut.style.top=20
mnhv=1
controle=0
bl=''
return false
}
setTimeout("mnh(bl)",16)
}
if(mnhv==1){
Table_haut.style.top=Table_haut.offsetTop+10
if(Table_haut.offsetTop>=(150)){
Table_haut.style.top=150
mnhv=0
controle=0
bl=''
return false
}
setTimeout("mnh(bl)",16)
}}

</SCRIPT>
</head>

</html>
Réponse 7 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Merci beacoup Kazma , je vais essayer d'adapter!!!

Info
Réponse 8 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
j'ai fait quelques modif mais un bug subsiste il faut selon la condition appuyer deux fois sur le bouton j'ai cerne le probleme mais pas resolue quand le probleme sera resolue je pense que je mettrais la source sur le site

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="gestion_position.js"></SCRIPT>
<script>
var mnhv=0

function mnh(vl,pb){
if(controle==1){
bl=vl
pl=pb
controle=0
}
var Table_haut=document.getElementById(bl)

if(mnhv==0){
if(Table_haut.offsetTop<=20){
mnhv=1
bl=''
return false
}
Table_haut.style.top=Table_haut.offsetTop-10
setTimeout("mnh(bl)",16)
}
if(mnhv==1){
if(Table_haut.offsetTop>=pb){
mnhv=0
bl=''
return false
}
Table_haut.style.top=Table_haut.offsetTop+10
setTimeout("mnh(bl,pl)",16)
}}

</SCRIPT>
</head>

</html>
Réponse 9 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Ok , moi aussi j'essaye de voir comment adapter au boites qui existent sur le site(Surtout à changer l'image selon que la boite est ouverte ou fermée + et -). Sinnon j'arrive pas encore à aligner les boites verticalement : j'ai utilisé une table mais ca bug... Bref j'essaye. Bon courage!!!et Merci surtout

Info
Réponse 10 / 20
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 32
@infoplus22, bon courage, les boxs de ce site sont des label asp !

a+

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 11 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Raté alors, sauf si je me convertis en asp, merci quand meme. Je vais essayé avec le script de Kezma , on peut faire pareil. Merci.

a+

Info
Réponse 12 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
J'essaye toujours kezma mais j'ai toujours un bug.. t'as mis la source sur le site?

Info
Réponse 13 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
pas eu le temp de m'en occupe
Réponse 14 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
-J'ai toujours le même bug...
 
-Le fichier : gestion_position.js???

Merci

Info
Réponse 15 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
AH oui désolé j'ai compris le principe , merci beaucoup Kazma.
 
Je voulais te demander si c'était possible d'alligner par exemple deux verticalement et deux horizontalement (car est au centre de ma page,) j'ai essayé mais quand la derniere
 dans la première colonne s'agrandit, la première
 dans la deuxième colonne bouge aussi. Est - ce possible de faire en sorte de les rendre indépendants, et de faire des div alignés horizontalement et verticalement?

Merci beacoup

Info
Réponse 16 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
jour
tu te complique et moi avec

pour  gestion_position.js tu peut le retirer sa ne sert a rien
Réponse 17 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Je reformule ma question, merci de bien vouloir m'aider SVP ,je voudrais faire la même chose mais avec deux liste de
horizontales. C'est à dire, mettre à côté des 4 div (qui s'ouvrent et se referment) 4 autres à droite. J'ai essayé comme ci-dessous mais ca ne marche pas. Merci



Info
Réponse 18 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Ah oui j'ai compruis l'erreu, merci Kazma!

Info
Réponse 19 / 20
Messages postés
44
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008
Je viens de me rendre compte d'une chose kazma dans le code que tu m'as donné. Il m'affiche toujours une bande en dessous de ldes div. C'est du à quoi , comment pourrais je l'enlever? Merci

Info
Réponse 20 / 20
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 115
j'ai fait qq modif sur le script
dans la partie html le changement ce fait la
onclick='controle=1;mnh("mi",150,"m")' il faut rajouter un parametre le "m"qui correspond au nom du premier div
il y a aussi autre chose 
style='overflow:hidden;position:absolute;top:80px;   tu a retire style='overflow je sais pourquoi il faut le laisser
bon courage

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script TYPE="text/javascript">
var mnhv=''

function mnh(vl,pb,dg){
if(controle==1){
controle=0
bl=vl
pl=pb
gd=dg
if(document.getElementById(vl).offsetTop<=20){
mnhv=1
}
if(document.getElementById(vl).offsetTop>=pl){
mnhv=0
}
}
var Table_haut=document.getElementById(bl)
var divgener=document.getElementById(gd)
if(mnhv==0){
Table_haut.style.top=Table_haut.offsetTop-10
divgener.style.height=divgener.offsetHeight-10+'px'
if(Table_haut.offsetTop<=20){
return false
}
setTimeout("mnh(bl,pl,gd)",16)
}
if(mnhv==1){
Table_haut.style.top=Table_haut.offsetTop+10
divgener.style.height=divgener.offsetHeight+10+'px'
if(Table_haut.offsetTop>=pb){
return false
}
setTimeout("mnh(bl,pl,gd)",16)
}}
</SCRIPT>
</head>

dfhfhfgdhghgf, ----
dhfghfghfghfg, ----
dgdrtrtrt

dfhfhfgdhghgf, ----
dhfghfghfghfg, ----
dgdrtrtrt

</html>
Répondre Posez votre question