begin process at 2012 05 29 23:42:22
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Scrollbar spécial possible?


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Scrollbar spécial possible?

mercredi 20 décembre 2006 à 19:26:11 | Scrollbar spécial possible?

GanJasTeR

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
mercredi 20 décembre 2006 à 20:10:36 | Re : Scrollbar spécial possible?

PetoleTeam

Membre Club

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
<img src="fleche_bas.gif"  onmouseover="INC_Scroll();" onmouseover="STOP_Scroll();">
<img src="fleche_haut.gif" onmouseover="DEC_Scroll();" onmouseover="STOP_Scroll();">
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)


jeudi 21 décembre 2006 à 12:51:35 | Re : Scrollbar spécial possible?

GanJasTeR

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>

<body>

<center>
<div style="width:100px;height:100px;" id="test" name="test">
<!-- Contenu du DIV destiné à être scrollé -->
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
<!-- Fin du contenu -->
</div>
<a href="javascript:void(0);" onmouseover="DEC_Scroll('test');" onmouseout="Stop_Scroll();"><img src="mail.gif" /></a><br />
<a href="javascript:void(0);" onmouseover="INC_Scroll('test');" onmouseout="Stop_Scroll();"><img src="rapport.gif" /></a>
</center>

</body>


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

   Merci ;)

jeudi 21 décembre 2006 à 15:01:06 | Re : Scrollbar spécial possible?

Zobibol

Membre Club
Bien le bonjour, je me permet d'intervenir...
Il faut que tu fixe le style overflow:hidden sur ta div :
<div style="width:100px;height:100px; 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]
jeudi 21 décembre 2006 à 15:10:50 | Re : Scrollbar spécial possible?

GanJasTeR

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
jeudi 21 décembre 2006 à 15:21:53 | Re : Scrollbar spécial possible?

Zobibol

Membre Club
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 :
<div style="width:100px;height:100px; overflow:hidden; position:relative;" id="test" name="test">
    <div style="position:absolute; to:0px; left:0px;"    >
<!-- Contenu du DIV destiné à être scrollé -->
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
</div>
<!-- Fin du contenu -->
</div>

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]
jeudi 21 décembre 2006 à 15:30:44 | Re : Scrollbar spécial possible?

Zobibol

Membre Club
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:
<div style="width:100px;height:100px; overflow:hidden; position:relative;" id="test" name="test">
    <div style="position:absolute; top:0px; left:0px;"    >
<!-- Contenu du DIV destiné à être scrollé -->
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
Contenu <br />
</div>
<!-- Fin du contenu -->
</div>

oups

[o-_-o]
jeudi 21 décembre 2006 à 15:56:08 | Re : Scrollbar spécial possible?

GanJasTeR

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 ^^
jeudi 21 décembre 2006 à 16:10:17 | Re : Scrollbar spécial possible?

Zobibol

Membre Club
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]
jeudi 21 décembre 2006 à 16:57:28 | Re : Scrollbar spécial possible?

GanJasTeR

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

1 2

Cette discussion est classée dans : possible, flash, scrollbar, spécial, moitié


Répondre à ce message

Sujets en rapport avec ce message

Inhiber la scrollbar pour du flash [ par toojee ] Bonjour, j'ai un petit soucis entre flash et le navigateur (ie ou firefox).J'utilise le clavier pour intéragir entre le clavier et mon site flash. Seu Menu contextuel en flash [ par sbeex ] Bonjour !Je cherche à mettre un menu contextuel en flash pour mon siteweb j'ai vu ça il y a quelque mois sur un site.(ps : mon site est en php et non Probleme d'arret de chargement lors d'un evenement javascript [ par super_mamie ] Bonjour.Je vous expose mon probleme:Je suis en train de faire une gallerie d'images.Dans la galerie, il y a une animation flash qui appelle une foncti Faire passer des variables php à flash par javascript..... [ par jacknikolson ] Salut les javascripteurs.J'ai un problème un peu complèxe (pour moi) à vous soumettre.Vous n'êtes pas sans savoir que depuis la dernière mise à jour d liens vers une autre frame à partir de Flash [ par Deprio ] Bonjour à tousJe viens de me faire un petit menu animé en Flash.Quand je teste l'animation générée .swf, les liens sont bien lancés par le navigateur. est il possible d'effacer un style dans champ definitivement meme apres soumission [ par rachidphp93 ] bonjour tout le monde; en fait j'ai un formulaire où des champs sont cachés; ce que je un simulateur de clic [ par zaord ] Déja tout d'abord bonjour à tous.J aurai un p tit travail a donner a quelqun (si il veu bien m aider bien sur) car j ai pas les connaissance en la mat Est-ce possible [ par sensoide ] bonjour a tous est-ce possible?function Choixpage(numpage){if(numpage==1){window.open(document.monform.action="./NewClient/ModifClient.php";);}if(n Drag de colonne de gridview [ par Oho2 ] Bonjour, je ne sais pas si je pose mes questions sur le bon forum mais j'espère que vous saurez m'aider.Je voudrais savoir s'il est possible de gérer Autoriser contenu actid des CD [ par David78390 ] Salut, je voulais savoir si il était possible de devérouiller cette option de securité sous IE, qui me pourii la vie. Ceci n'est pas dans un but de pi


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,697 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales