problème de placement des boutons haut/bas

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu problème de placement des boutons haut/bas

Message par mario968 Lun 18 Nov 2013 - 14:13

Bonjour,

J'ai mis le code javascript pour obtenir les boutons haut/bas, ils fonctionnent.

Le problème est qu'ils ne se trouvent pas placé sur la page des messages mais complètement dehors de celle ci et restent en bas du forum (le bouton pour descendre ne me sert à rien puisque je ne peux le voir qu'en bas de page et je suis déjà en bas de page Smileà moins que dans mon forum il y à une cave ? :lol!: 

Voici une image écran :

problème de placement des boutons haut/bas Hautba10

Y à t'il une solution pour les placer de façon plus visibles sur les pages du forums comme dans votre tuto :

problème de placement des boutons haut/bas Hautba11

Le top serait qu'ils suivent le scrool de la souris, autrement je ne vois pas trop l’intérêt de ces flèches Rolling Eyes 

Cordialement

Ps : je n'ai pas touché au CSS.


Dernière édition par mario968 le Mar 19 Nov 2013 - 17:26, édité 1 fois
mario968

mario968
****

Masculin
Messages : 285
Inscrit(e) le : 24/05/2010

http://centpourcentpiste.com
mario968 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par mario968 Lun 18 Nov 2013 - 15:44

Bonjour à tous,

J'ai une idée précise de ce que je veux ... Je voudrais quelque chose comme ceci (trouvé sur le net) >>> http://inti.france.free.fr/peuples-indigenes/cine-et-video-indigene.html

Pris ici : http://forums.phpbb-fr.com/modifications-et-recherche-de-styles/sujet184065.html
Mais je ne voudrait pas trop toucher dans le CSS, le javascript ou HTML serait parfait et moins compliqué pour un néophyte comme moi

Observer le mouvement de la petite flèche, en bas à droite ... elle bouge, et reste à chaque instant disponible.

Cordialement
mario968

mario968
****

Masculin
Messages : 285
Inscrit(e) le : 24/05/2010

http://centpourcentpiste.com
mario968 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par Automne Mar 19 Nov 2013 - 14:59

Bonjour,

Quel est le lien du forum ou tu as placés ces flèches.
As tu mis le css avec?
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par mario968 Mar 19 Nov 2013 - 15:38

Automne a écrit:Bonjour,

Quel est le lien du forum ou tu as placés ces flèches.
As tu mis le css avec?
Bonjour,

J'ai supprimé les codes qui étaient placées uniquement dans le javascript.

Le lien du forum est : http://www.centpourcentpiste.com/

De toute façon comme expliqué, j'aurai souhaité la même chose que sur le forum indiqué ou la petite flèche suit le scrool de la souris et reste toujours visible.
Cordialement
mario968

mario968
****

Masculin
Messages : 285
Inscrit(e) le : 24/05/2010

http://centpourcentpiste.com
mario968 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par Automne Mar 19 Nov 2013 - 15:59

Coucou,

Si tu as placé seulement le javascript et pas le css, c'est normal que cela ne fonctionne pas Very Happy https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas

Voici pour deux boutons, haut bas.
Le css
Code:
        .bouhautbas_1 {
            bottom: 80px;
            left: 10px; /* remplacez left par right pour afficher les boutons à droite */
            position: fixed;
            z-index: 100;
        }
 .bouhautbas_2 {
            bottom: 40px;
            left: 10px; /* remplacez left par right pour afficher les boutons à droite */
            position: fixed;
            z-index: 100;
        }


Le javascript

Code:
        $(function(){
                  $("body").append('<div class="bouhautbas_1"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Aller en haut" /></a></div><div class="bouhautbas_2"> <a href="#bottom"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" alt="Aller en bas" /></a></div>');
        });



Si tu en veut qu'un, pour aller en haut
le css
Code:
 .bouhautbas_1 {
            bottom: 40px;
            left: 10px; /* remplacez left par right pour afficher les boutons à droite */
            position: fixed;
            z-index: 100;
        }


Le javascript
Code:
 $(function(){
                  $("body").append('<div class="bouhautbas_1"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Aller en haut" /></a></div>');
        });



A toi de modifier l'image dans le javascript si tu veux


Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par mario968 Mar 19 Nov 2013 - 16:31

Merci, mais je ne suis pas convaincu, je préfère ce type de flèche qui reste toujours visible.

C'est trop difficile de réaliser ce travail ?

Je voudrais quelque chose comme ceci (trouvé sur le net) >>> http://inti.france.free.fr/peuples-indigenes/cine-et-video-indigene.html

Pris ici : http://forums.phpbb-fr.com/modifications-et-recherche-de-styles/sujet184065.html

Observer le mouvement de la petite flèche, en bas à droite ... elle bouge, et reste à chaque instant disponible.

Cordialement
mario968

mario968
****

Masculin
Messages : 285
Inscrit(e) le : 24/05/2010

http://centpourcentpiste.com
mario968 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par Adam_sfp Mar 19 Nov 2013 - 17:14

Bonjour

Ce que vous conseille Automne donne à peu de chose près le même résultat..
A part le mouvement de retard de l'image...

Si vous voulez le rajouter essayer en ajoutant une id au javascript
Code:
$(function(){
                          $("body").append('<div class="bouhautbas_1" id="DIV_MOVE"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Aller en haut" /></a></div>');
                });
puis ce 2ème javascript
Code:
//---------------------------------------------------------
//  Nom Document : gf_scroll_div.js
//  Auteur       : G.Ferraz
//  Objet        : menu flottant
//  Creation     : 01.01.2007
//---------------------------------------------------------
//  Mise à Jour  : 01.11.2007
//---------------------------------------------------------
// OUTILS /////////////////////////////
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//----------------------
function GetScrollPage(){
  var Left;
  var Top;
  var DocRef;

  if( window.innerWidth){
    with( window){
      Left   = pageXOffset;
      Top    = pageYOffset;
    }
  }
  else{ // Cas Explorer a part
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;

    with( DocRef){
      Left   = scrollLeft;
      Top    = scrollTop;
    }
  }
  return({top:Top, left:Left});
}
//---------------------------
function ObjGetPosition(obj_){
  var PosX = 0;
  var PosY = 0;
  //-- suivant type en parametre
  if( typeof(obj_)=='object')
    var Obj  = obj_;
  else
    var Obj  = document.getElementById( obj_);
  //-- Si l'objet existe
  if( Obj){
    //-- Recup. Position Objet
    PosX = Obj.offsetLeft;
    PosY = Obj.offsetTop;
    //-- Si propriete existe
    if( Obj.offsetParent){
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        if( Obj.offsetParent){ // on ne prend pas le BODY
          //-- Ajout position Parent
          PosX += Obj.offsetLeft;
          PosY += Obj.offsetTop;
        }
      }
    }
  }
  //-- Retour des positions
  return({left:PosX, top:PosY});
}
//-------------------------------------
// MENU FLOTTANT //////////////////////
//-------------------------------------
var IdTimer_1;
var IdTimer_2;
var O_DivScroll;
var Rapport = 1.0/20.0;  // On divise par 20
var Mini = 2* Rapport;
//-----------------------
function DIV_Scroll( id_){
  var Obj = document.getElementById( id_);
  this.Obj = Obj;
  if( Obj){
    Obj.style.position = "absolute"; // IMPERATIF
    //-- Recup position de depart
    var Pos   = ObjGetPosition( id_);
    this.PosX = Pos.left;
    this.PosY = Pos.top;
    this.DebX = this.PosX;
    this.DebY = this.PosY;
    this.NewX = 0;
    this.NewY = 0;
    this.Move = DIV_Deplace;
  }
}
//---------------------------
function DIV_Deplace( x_, y_){
  if( arguments[0] != null){
    this.PosX = x_;
    this.Obj.style.left = parseInt(x_) +"px";
  }
  if( arguments[1] != null){
    this.PosY = y_;
    this.Obj.style.top  = parseInt(y_) +"px";
  }
}
//---------------------------
function DIV_Replace( x_, y_){
  //-- Calcul Delta deplacement
  var Delta_X = (x_ -O_DivScroll.PosX) *Rapport;
  var Delta_Y = (y_ -O_DivScroll.PosY) *Rapport;
  //-- Test si fin deplacement
  if((( Delta_Y < Mini)&&( Delta_Y > -Mini))&&
     (( Delta_X < Mini)&&( Delta_X > -Mini))){
    clearInterval( IdTimer_1);
    O_DivScroll.Move( x_, y_);
  }
  else{
    O_DivScroll.Move( O_DivScroll.PosX +Delta_X, O_DivScroll.PosY +Delta_Y);
  }
}
//------------------------
function DIV_CheckScroll(){
  var Scroll  = GetScrollPage();
  //-- New position  du menu
  O_DivScroll.NewX = Scroll.left +O_DivScroll.DebX;
  O_DivScroll.NewY = Scroll.top  +O_DivScroll.DebY;
  //-- Si pas la bonne Position
  if(( O_DivScroll.PosY != O_DivScroll.NewY)||( O_DivScroll.PosX != O_DivScroll.NewX)){
    //-- Clear l'encours
    clearInterval( IdTimer_1);
    IdTimer_1 = setInterval("DIV_Replace(" + O_DivScroll.NewX +"," + O_DivScroll.NewY +")", 10);
  }
  return( true);
}
//-----------------------
function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('DIV_MOVE');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}
//========================================
Add_Event( window, 'load', DIV_InitScroll);
//-- EOF --
Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème de placement des boutons haut/bas

Message par mario968 Mar 19 Nov 2013 - 17:25

Merci à vous deux, mais j'avoue que je ne vais pas me prendre la tête pour ce gadget.

Milles excuses pour vous avoir donné du travail inutile.

Cordialement
mario968

mario968
****

Masculin
Messages : 285
Inscrit(e) le : 24/05/2010

http://centpourcentpiste.com
mario968 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum