Monter et descendre un div page 1 - CSS / Général, Javascript / Ajax / DHTML

CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 11 23 18:50:10

XBOX 360 : NOUVELLE INTERFACE DE LA XBOX par ROMELARD Fabrice

ADD-IN REFLECTOR : EXCEPTIONFINDER FOR REFLECTOR par coq

TUTORIAUX EF par Matthieu MEZIL

CODEPLEX : SEADRAGON AJAX INTELLISENSE HELPER par nicoboo

VS2008 ET LE MESSAGE "UNABLE TO START DEBUGGING FOR [YOUR EXE]" par jay

RE : PB MENU DYNAMIQUE - AFFICHAGE PAS TERRIBLE par chabgyver

RE : éCHANGE DE DONNéES ENTRE FORMULAIRES par infograph61

RE : TROUVER LA VALEUR MAXI par tonytruand

RE : COMMENT FAIRE D'UNE IMAGE "+" UNE INCRéMENTATION DE QUANTITé DANS UN PANIER? par bwebox

RE : CRéATION D'OBJET par Bul3

+ de logiciels à télécharger

1 294 074 membres
127 nouveaux aujourd'hui
14 529 membres club

Trouver une ressource

Trouvez une ressource parmi 39 014 codes, 1 204 070 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Poser une question

Sujet : Monter et descendre un div [ CSS / Général ] (Also know as)

Informations & options pour cette discussion

Vous êtes ici : Thèmes / Javascript / DHTML / Ajax / CSS / Général / Monter et descendre un div
Ce sujet vous interesse ? Cliquez ici pour être averti quand il y a une nouvelle réponse

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 !!!
	Rép. MP 1246 msg 3349 msg CS

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

Also know as

Merci pour vos réponses !

Et justement j'avais bien peur que cela soit avec les absolute...

Mon problème que je n'ai pas dis dans ma question, c'est que je génère un div "à la volée"

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

Ce code est générer à la volée à la suite avec du Javascript.
Me serait-il donc possible de continuer à générer à la volée tout en utilisant les absolute

Merci

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 .... ?
	Rép. MP 9 msg 216 msg CS

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)
	Rép. MP 1769 msg 1800 msg CS

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)
	Rép. MP 1769 msg 1800 msg CS

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à ^^
	Rép. MP 9 msg 216 msg CS

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é 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