Accueil > Forum > > > > Scrollbar spécial possible?
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
|
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
|
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
|
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
|
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
|
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 ;)
|
|
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
Livres en rapport
|
Derniers Blogs
POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|