Accueil > Forum > > > > Monter et descendre un div
 Monter et descendre un div
samedi 8 mars 2008 à 20:00:43 |
Monter et descendre un div
Also know as
|
Bonjour à tous !
Voilà mon petit problème du jour... : <div>
<hr>
<input id="image_0"name="image_0"type="file">
<br>
<textarea id="etape_0"name="etape_0"></textarea>
<input value="Enlever"type="button">
</div>
<div>
<hr>
<input id="image_1"name="image_1"type="file">
<br>
<textarea id="etape_1"name="etape_1"></textarea>
<input value="Enlever"type="button">
</div>
<div>
<hr>
<input id="image_2"name="image_2"type="file">
<br>
<textarea id="etape_2"name="etape_2"></textarea>
<input value="Enlever"type="button">
</div>
J'aimerais pouvoir avec des boutons supplémentaire dans chaque div,
permettre de monter un des div ou bien de le descendre, mais pas en
PHP, du javascript, histoire d'éviter des appels au serveur pour rien
du tout...
Je suis sur que c'est possible mais je n'arrive pas à voir comment pour le moment.
Auriez-vous une idée ?
Merci par avance |
|
dimanche 9 mars 2008 à 08:56:14 |
Re : Monter et descendre un div
nicomilville
|
Salut, Je crois que si chacun de tes div est su un calque tu peut utiliser la propriétée ou methode : zIndex Si t'a besoin d'aide, MP !!!
 |
|
dimanche 9 mars 2008 à 10:47:03 |
Re : Monter et descendre un div
PetoleTeam
|
Bonjour,
- tout d'abord il faut identifier le DIV à mover grace à une ID
- le DIV doit être en position absolute
- ensuite lire sa position actuelle -> offsetTop ou offsetLeft
- augmenter ou réduire cette valeur
- réaffecter cette valeur à style.left ou style.top sans oublier l'unité px
exemple de code
<html>
<head>
<style type="text/css">
#D_01 {
position : absolute;
left : 100px;
top : 100px;
height :100px;
width : 100px;
border : 1px solid red;
}
</style>
<script type="text/javascript">
//--------------------
function Monter( div_){
var Obj = document.getElementById( div_);
var Pos = Obj.offsetTop;
Obj.style.top = Pos -10 +"px";
}
//-----------------------
function Descendre( div_){
var Obj = document.getElementById( div_);
var Pos = Obj.offsetTop;
Obj.style.top = Pos +10 +"px";
}
</script>
</head>
<body>
<div id="D_01" >Le DIV qui move...</div>
<input type="button" value="Monter" onclick="Monter( 'D_01');"><br>
<input type="button" value="Descendre" onclick="Descendre( 'D_01');">
</body>
</html>
...maintenant à toi de jouer...
;O)
|
|
dimanche 9 mars 2008 à 10:56:22 |
Re : Monter et descendre un div
|
dimanche 9 mars 2008 à 11:05:11 |
Re : Monter et descendre un div
Also know as
|
Mince je peux toujours pas Editer... Pour dire aussi que mon but "premier" étant de pouvoir permutter deux div. Quand je clique sur "monter" je dois monter bien sur le div que j'ai mais aussi descendre le div qui était au dessus de lui. Si tout est en ordre ca va, mais comment faire pour connaitre le div au dessus/dessous si j'ai déjà bougé plusieurs div auparavant  .... ? |
|
dimanche 9 mars 2008 à 11:18:37 |
Re : Monter et descendre un div
PetoleTeam
|
dans ce cas tu crées une fonction de swap
- tu récupères la position des 2 DIVs et tu les réaffectes en inversant
var O_1 = document.getElementById( div1_);
var O_2 = document.getElementById( div2_);
var Pos_1 = O_1.offsetTop;
var Pos_2 = O_2.offsetTop;
je te laisses imaginer la suite...
;O)
|
|
dimanche 9 mars 2008 à 11:33:10 |
Re : Monter et descendre un div
Also know as
|
Merci pour tout ! Mais dans ce que tu viens de dires il y'a un petit problème La fonction swap en fait je suis dessus depuis que j'ai répondu aux message, je me colle sur ce que tu m'a donné. Et je t'avouerais que tu m'as réellement quasiment tout filé pour que je le fasse, mais comment connaitre justement, les deux divs à utiliser. Bon y'en a un qui est facile à trouver c'est le div dans lequel on clique ^^ Mais l'autre  Le seul moyen que j'ai vu pour le moment serait de modifier la valeur du "OnClick" mais là ca devient vite le bordel... Serait-il possible d'obtenir l'id de l'élément qui se trouve au dessus/dessous facilement Si j'ai trois div, et si je veux faire monter tout en haut le troisième, le swap devra s'effectuer, bon ca pas difficile  toujours avec le 3e div, mais comment savoir celui qui se trouve au dessus C'est à dire le 2e, puis le 1er |
|
dimanche 9 mars 2008 à 11:43:59 |
Re : Monter et descendre un div
PetoleTeam
|
il te suffit de lire les positions des tes n DIVs et de comparer leurs positions par rapport aux autres...
;O)
|
|
dimanche 9 mars 2008 à 11:51:52 |
Re : Monter et descendre un div
Also know as
|
Alors là je t'avouerais que j'ai rien compris O_o.... Qu'est-ce que tu veux dire par "lire" ? Une fonction qui test tous mes div jusqu'a ce qu'il trouve le bon ? Je ne vois pas comment je vais pouvoir obtenir son id quand même... Ouais désolé  j'suis un peu paumé là ^^ |
|
dimanche 9 mars 2008 à 12:53:55 |
Re : Monter et descendre un div
Also know as
|
Bon ! J'ai réussi grace à toi Voici une solution qui fonctionne, maitenant j'ai plus qu'a l'adapté avec des ajouts dynamique O_o... <html>
<head>
<style type="text/css">
#D_01 {
position : absolute;
left : 10px;
top : 10px;
height :100px;
width : 100px;
}
#D_02 {
position : absolute;
left : 10px;
top : 175px;
height :100px;
width : 100px;
}
#D_03 {
position : absolute;
left : 10px;
top : 340px;
height :100px;
width : 100px;
}
</style>
<script type="text/javascript">
function swap(div_, position, action)
{
for (i=1; i<=3; i++)
{
if (document.getElementById("D_0"+i).offsetTop == position && div_ != "D_0"+i)
result = "D_0"+i;
}
if (action == 1)
Monter(result);
else
Descendre(result);
}
//--------------------
function Monter(div_, do_swap)
{
var Obj = document.getElementById(div_);
var Pos = Obj.offsetTop;
Obj.style.top = Pos - 165 +"px";
if (do_swap == 1)
swap(div_, Pos - 165, 2);
}
//-----------------------
function Descendre(div_, do_swap)
{
var Obj = document.getElementById(div_);
var Pos = Obj.offsetTop;
Obj.style.top = Pos + 165 +"px";
if (do_swap == 1)
swap(div_, Pos + 165, 1);
}
</script>
</head>
<body>
<div id="D_01">
<hr><input id="image_0" name="image_0" type="file"><br>
<textarea id="etape_0" name="etape_0"></textarea>
<input value="Enlever" type="button">
<input type="button" value="Monter" onclick="Monter('D_01', 1);"><br>
<input type="button" value="Descendre" onclick="Descendre('D_01', 1);">
</div>
<div id="D_02">
<hr><input id="image_1" name="image_1" type="file"><br>
<textarea id="etape_1" name="etape_1"></textarea>
<input value="Enlever" type="button">
<input type="button" value="Monter" id="monter_1" onclick="Monter('D_02', 1);"><br>
<input type="button" value="Descendre" onclick="Descendre('D_02', 1);">
</div>
<div id="D_03">
<hr><input id="image_2" name="image_2" type="file"><br>
<textarea id="etape_2" name="etape_2"></textarea>
<input value="Enlever" type="button">
<input type="button" value="Monter" onclick="Monter('D_03', 1);"><br>
<input type="button" value="Descendre" onclick="Descendre('D_03', 1);">
</div>
</body>
</html>
Merci beaucoup en tout cas !
@+
|
|
Cette discussion est classée dans : type, image, id, name, etape
 Répondre à ce message
 Sujets en rapport avec ce message
Problème avec les caractères spéciaux ! [ par Ruffneck2045 ]
Bonjour, j'ai créer un diaporama à l'aide de php & javascript et j'ai un petit problème.En cliquant sur une image du diaporama, le diaporama nous renv
recuperation coordonnees image pour base de données [ par elodielole ]
Slt à tous j'ai donc un gros pbe ça fait plusieurs jour que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées dans ma table d'une
IFrame [ par SamyAir ]
Bonjour,J'ai un probléme avec mon site.......Voila j'ai créer un site web pour une pizzeria et j'ai un ptit souci avec la vente en ligne.......J'ai c
IFrame [ par SamyAir ]
Bonjour,J'ai un probléme avec mon site.......Voila j'ai créer un site web pour une pizzeria et j'ai un ptit souci avec la vente en ligne.......J'ai c
Formulaire [ par Citymaniak ]
Bonjour.Je recommence, j'ai tout effac¨¦ par m¨¦garde.Bon, je cherchais un fomulaire qui me permet de recevoir un fichier.J'ai cherch¨¦ pour en trouv¨
Accéder aux boutons radio [ par mathieumg ]
Voici le code de mon formulaire Code : Xhtml method="post" <span class
Augmenter ou diminuer le chiffre d'un champ texte [ par Tilix ]
Salut, J'ai un code javascript, avec une boucle qui repete plusieurs fois les champs form : <font color="
Zone reactives [ par missceline33 ]
Bonjout, je travaille actuellement sur une image, sur laquelle je fais apparaitre des objets et je souhaiterais pouvoir afficher des informations quan
Probleme dans une function js [ par destiny ]
Lo all,Voici la function recalcitrante:function action(Id, Type, Name) { //Function des actions tarifs // Id est l'id de la table a traité&
Erreur?? [ par jnbrunet ]
Salut, je ne programme partiquement pas language client, j'ai donc besoin de votre aide... voici mon code, il est erroné, mais je ne trouve pas son er
 Livres en rapport
|
Derniers Blogs
 SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|