Scrollbar spécial possible? [Résolu]

Signaler
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007
-
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour à tous.

Voilà je me suis penché sur la création de mon site perso à moitié en flash, moitié en PHP.
Mais j'ai envie d'inclure une scrollbar autrement qu'en flash et c'est pourquoi j'ai pensé au javascript (peut être aussi possible en CSS...)

Bref voici un screen :
Voila la scrollbar est représentée par les deux petites flèches.

J'aimerais que soit en cliquant dessus soit en passant la souris dessus (cela ne doit pas trop être différent) que la zone contenant mon texte défile. Sur ce screen ce n'est pas nécessaire car le texte ne prend pas toute la place mais cela risque d'arriver et je prévois :)

Donc voila j'espère avoir été assez clair dans l'explication de mon problème et vous remercie à l'avance pour vos réponses ^^

   Cordialement

14 réponses

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Ayant déjà rencontré ce problème je pense ( donc je suis ou l'inverse bref ) que tu n'as pas retransmis la valeur de la hauteur dans le setTimeOut de la méthode DEC_scroll
 il faudrait que tu ais :
    ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "', "+hauteur_div+")", 1); // attention pas d'espace entre les guillemets

Me trompe-je ?
Sinon, tu viens de soulever un lièvre

[o-_-o]
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
12
B
onjour...
Il est vrai que le problème n'est pas un problème...
...il est nécéssaire de savoir quand même quelle est la solution retenue pour afficher la zone de texte, DIV IFRAME...

dans le principe avec un






cela devrait te ravir, reste que suivant la solution retenue les fonctions INC_Scroll et DEC_Scroll seront différentes, la fonctions STOP_Scroll sera du type
//-------------------
function Stop_Scroll(){
  clearTimeout( ScrollTimer);
}






;0)
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007

Bonjour

Merci de ta réponse après une courte recherche j'ai vu que tu avais longuement débattu de cette question avec quelqu'un. Je me suis donc servi de l'ancien topic et en faisant le tri j'ai réussi a faire en sorte que la scrollbar marche.

Cependant, le fond destiné à recevoir cette zone "scrollable" (ça se dit? :)) comporte un dégradé et non une couleur unie. Le fait que le fond d'une iframe ne peut être transparent me pose donc problème.

C'est pourquoi j'aimerais adapter ton code avec un DIV.
J'ai déja essayé mais un problème me reste dans les mains qui est le suivant :

Même en définissant la taille de mon DIV ses proportions se fixent en fonction de son contenu...

Donc voici le code que j'ai dans ma page de test : (je précise que c'est une page de TEST et que le code insérer n'est nullement valide W3C et le positionnement est plus que basique ^^)

<head>
<style type="text/css">
body{
 background-image:url('images/background.jpg');
 background-reapeat:no-repeat;
 margin-top:130px;
 font-family:Verdana, Arial;
 font-size:11px;
}
</style>
<script type="text/javascript">
var ScrollTimer = null;
var PasY = 2;
function INC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, PasY);
  ScrollTimer = setTimeout( "INC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}
//----------------------
function DEC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, -PasY);
  ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}
//-------------------
function Stop_Scroll(){
  clearTimeout( ScrollTimer);
}
</script>
</head>







<center>

<!-- Contenu du DIV destiné à être scrollé -->
Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

<!-- Fin du contenu -->

[javascript:void(0); ]

[javascript:void(0); ]
</center>









Désolé pour les lignes contenu
inutiles mais c'est pour remplir (inutilement ^^) mon DIV :)

   Merci ;)
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Bien le bonjour, je me permet d'intervenir...
Il faut que tu fixe le style overflow:hidden sur ta div :

overflow:hidden;" id="test" name="test">
Le plus propre étant de faire une classe de style.
La du coup ton div ne s'agrandira pas en fonction du contenu.

[o-_-o]
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007

Bonjour

Oui pour les classes de style elles seront effectuées par la suite comme je l'ai précisé c'est une page de test ^^
Cette propriété marche très bien le problème reste encore d'adapter le javascript au DIV et non a l'IFRAME.
En cherchant bêtement sur Google j'ai vu plusieurs messages comme quoi il était impossible de réaliser ce script avec un div...

Autre solution possible, rendre le fond de l'iframe transparent ce qu'en recherchant j'ai aussi vu impossible...

Help ! 

   Merci
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Bah, je crois qu'en fait, c'est tout à fait faisable avec un DIV.....
( roulement de tambour )
Il faut que tu adaptes ton script et ton jeux d'essais :
nouvelles fonctions :

function INC_Scroll( id_){
  var Obj = document.getElementById(id_).getElementsByTagName("div")[0];
  Obj.style.top= Obj.offsetTop +PasY;
  ScrollTimer = setTimeout( "INC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}
//----------------------
function DEC_Scroll( id_){
  var Obj = document.getElementById(id_).getElementsByTagName("div")[0]
  Obj.style.top= Obj.offsetTop -PasY;
  ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}

et ensuite tu remplaces ton div par :

   

<!-- Contenu du DIV destiné à être scrollé -->
Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

<!-- Fin du contenu -->

et ça doit fonctionner...
Le truc est de savoir comment tu remplies ta div !
Car il faut calculer sa taille pour bloquer le défilement en haut et en bas !

[o-_-o]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Et bien entendu, comme tu l'auras constaté, il faut corriger la petite erreur que j'ai perfidement glissée à l'insue de mon plein gré à savoir:

   
top:0px; left:0px;"    >
<!-- Contenu du DIV destiné à être scrollé -->
Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

Contenu

<!-- Fin du contenu -->

oups

[o-_-o]
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007

Merci pour cette réponse le scroll marche parfaitement :)

En effet comme tu l'a dit il faut savoir la taille car la ça défile à l'infinie.

Et bien le contenu sera un tableau en php qui liste les données d'une base.
Donc pour solutionné tout ça sachant que je sais que mes news oront une taille précise, je peux faire calcul du genre hauteur_div = nbr_news * hauteur_news

Reste à savoir ou je place le résultat de ce calcul si scientifique :)

   Merci encore ;) on touche au but ^^
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
La aussi c'est assez simple dans un cas et un peu plus complexe dans l'autre.

En admettant que ta variable hauteur_div soit initialisé tes méthodes vont évoluer comme suit :


function INC_Scroll( id_){

  var Obj = document.getElementById(id_).getElementsByTagName("div")[0];

  // calcul de la nouvelle position

  var newPos = Obj.offsetTop +PasY;

  // si la position est inféieur à 0 on peux donc descendre la div

  if ( newPos < 0){

      Obj.style.top= newPos;

    ScrollTimer = setTimeout( "INC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets

  }

}

//----------------------

function DEC_Scroll( id_){

  var Obj = document.getElementById(id_).getElementsByTagName("div")[0]

  // calcul de la nouvelle position

  var newPos = Obj.offsetTop -PasY;

  // on peux bouger uniquement si la position de la div + hauteur sont superieur à 0

  if (newPos  + hauteur_div >0 ){

      Obj.style.top= newPos;

      ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets

  }

}


et voilà !

[o-_-o]
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007

On y est presque :) Merci encore de prendre du temps pour répondre rares sont les forums où une si précieuse et si rapide aide est fournie ^^

La fonction INC_scroll marche parfaitement.
Par contre la fonction DEC_scroll a un problème :

Lorsque le curseur de ma souris reste sur la flèche déscendre, le DIV déscend de une unité (constaté en affichant une alerte, ne marche pas meme sans l'alerte ^^)

Pour hauteur_div je l'ai passé en paramètres de part le lien. Je pense que c'est la meilleure méthode pour pouvoir y intégrer une variable PHP par la suite.

Donc concrètement pour déscendre totalement il faut passer la souris sur la flèche, l'enlever, la repasser etc...

J'ai essayer plusieurs modifications en vain :)

   Merci encore ;)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
12
coucou me revoilou.......
-> GanJaster



il était impossible de réaliser ce script avec un div...




- c'est pourtant la base des messages déroulant ???






-> Zobibol



Bien le bonjour, je me permet d'intervenir...



- c'est le but d'un Forum donc merci à toi d'être intervenu







je vous soumet cette fonction si c'est le dernier point à passer
//----------------------
function DEC_Scroll( id_){
  var Obj  = document.getElementById(id_);
  //-- Hauteur du div
  var Haut = Obj.clientHeight;
  var NewPos = Obj.offsetTop -PasY;
  // on peux bouger uniquement si la position de la div + hauteur sont superieur à 0
  if( NewPos + Haut > 0 ){
    Obj.style.top = NewPos +"px" ;
    ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "')", 1);
  }
  else
    Obj.style.top = "0px";
}

;0)
Messages postés
27
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
31 mai 2007

Merci Petoleteam pour avoir rerépondu à ce problème :)
Le fait est qu'avec ta fonction, le contenu de mon div disparait en bas de l'écran à une vitesse assez spectaculaire :)

Et un grand merci à zobibol pour la dernière réponse qui marche parfaitement :D

Problème résolu :) Merci à tous et je tenais à dire que ce forum sera pour moi la référence en matière de javascript

a +
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
De rien, c'est un réel plaisir que de t'avoir rendu ce service.
A charge de revanche ;o)
Bonne soirée, moi je vais me couler une guinness je l'ai bien mérité
A+

[o-_-o]
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
12
Un impondérable m'a surpris aussi l'envoi de la fonction à été un peu haté...
...l'important reste que tu fais tourner ce que tu voulais...
je te livre quand même tel que le script du scroll d'un DIV...

<script type="text/javascript">
var PasY  = 1;
var Delay = 1;
var IncY  = 0;
var ScrollTimer;
//--------------------
function STOP_Scroll(){
  clearTimeout( ScrollTimer);
}
//-----------------------
function DEC_Scroll( id_){
  var Fen    = document.getElementById(id_);
  var Obj    = Fen.getElementsByTagName("div")[0];
  var F_Haut = Fen.offsetHeight;
  var O_Haut = Obj.offsetHeight;
  var Max    = O_Haut -F_Haut;
  IncY += PasY;
  if( IncY < Max){
    Obj.style.top= -IncY +"px";
    ScrollTimer = setTimeout( "DEC_Scroll('" +id_ + "')", Delay);
  }
  else{
    IncY = Max;
    Obj.style.top = -Max +"px";
  }
}
//-----------------------
function INC_Scroll( id_){
  var Fen = document.getElementById(id_);
  var Obj = Fen.getElementsByTagName("div")[0];
  IncY   -= PasY;
  if( IncY > 0){
    Obj.style.top = -IncY +"px";
    ScrollTimer = setTimeout("INC_Scroll('" +id_ + "')", Delay);
  }
  else{
    IncY = 0;
    Obj.style.top = "0px";
  }
}
</script>

<HUMOUR>
A l'attention de Zobibol, moi c'est de la Brune un sujet pour le BAR Non...
</HUMOUR>

;0)