GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007
-
20 déc. 2006 à 19:26
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 2011
-
21 déc. 2006 à 20:30
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 ^^
Zobibol
Messages postés469Date d'inscriptionmercredi 9 janvier 2002StatutMembreDernière intervention20 février 20176 21 déc. 2006 à 17:12
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
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 20 déc. 2006 à 20:10
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);
}
GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007 21 déc. 2006 à 12:51
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 :)
Zobibol
Messages postés469Date d'inscriptionmercredi 9 janvier 2002StatutMembreDernière intervention20 février 20176 21 déc. 2006 à 15:01
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]
Vous n’avez pas trouvé la réponse que vous recherchez ?
GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007 21 déc. 2006 à 15:10
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...
Zobibol
Messages postés469Date d'inscriptionmercredi 9 janvier 2002StatutMembreDernière intervention20 février 20176 21 déc. 2006 à 15:21
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 !
GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007 21 déc. 2006 à 15:56
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 :)
GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007 21 déc. 2006 à 16:57
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...
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 21 déc. 2006 à 17:14
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";
}
GanJasTeR
Messages postés27Date d'inscriptionlundi 13 décembre 2004StatutMembreDernière intervention31 mai 2007 21 déc. 2006 à 17:33
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
Zobibol
Messages postés469Date d'inscriptionmercredi 9 janvier 2002StatutMembreDernière intervention20 février 20176 21 déc. 2006 à 17:38
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+
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 21 déc. 2006 à 20:30
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>