Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CREER DES BOUTONS IMAGES À LA PLACE D'UNE BARRE DE DEFILEMENT (D'UNE IFRAME)


Information sur la source

Catégorie :Frames Classé sous : iframe, scrollbar, barrededefilement, boutons, frame Niveau : Débutant Date de création : 27/02/2006 Date de mise à jour : 28/02/2006 00:40:28 Vu : 10 973

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (13)
Ajouter un commentaire et/ou une note

Description

Voici un code pour, comme le titre le dit, mettre des boutons à la place d'une barre de défilement pour une iframe.
Je pense que ce code va plaire à beaucoup de monde qui utilise les iframes et qui ne veulent pas garder cette affreuse scroll bar qui défigure le sites.
 

Source

  • //***************************************************************************
  • //scrollspeed est la vitesse de defilement que vous pouvez changer à votre gout.
  • //Dans la page de l'iframe :
  • <iframe id="datamain" width="640px" height="500px" name="zone1" src="contenu.html" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe></td>
  • <td valign="top">
  • <br />
  • <layer visibility=hide>
  • <a onMouseup="scrollspeed=0" onmousedown="scrollspeed=-8"><img src="images/flechehaut.jpg" border="0px"/></a>
  • <br />
  • <a onMouseup="scrollspeed=0" onmousedown="scrollspeed=8"><img src="images/flecheb.jpg" border="0px"/></a>
  • </layer>
  • //********************************************************************
  • //Maintenant, le code javascript à inserer dans toutes les pages qu'affichera l'iframe
  • //Entre les balises <head></head>
  • <script language="JavaScript1.2">
  • var speed, currentpos=curpos1=0,alt=1,curpos2=-1
  • function initialize(){
  • if (window.parent.scrollspeed!=0){
  • speed=window.parent.scrollspeed
  • scrollwindow()
  • }
  • }
  • function scrollwindow(){
  • temp=(document.all)? document.body.scrollTop : window.pageYOffset
  • alt=(alt==0)? 1 : 0
  • if (alt==0)
  • curpos1=temp
  • else
  • curpos2=temp
  • window.scrollBy(0,speed)
  • }
  • setInterval("initialize()",10)
  • </script>
  • //www.sok.c.la
//***************************************************************************
//scrollspeed est la vitesse de defilement que vous pouvez changer à votre gout.
//Dans la page de l'iframe :

<iframe id="datamain"  width="640px" height="500px"  name="zone1" src="contenu.html" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe></td>
<td  valign="top">
<br />

<layer visibility=hide>

<a  onMouseup="scrollspeed=0" onmousedown="scrollspeed=-8"><img src="images/flechehaut.jpg" border="0px"/></a>
<br />
<a onMouseup="scrollspeed=0" onmousedown="scrollspeed=8"><img src="images/flecheb.jpg" border="0px"/></a>

</layer>



//********************************************************************
//Maintenant, le code javascript à inserer dans toutes les pages qu'affichera l'iframe
//Entre les balises <head></head>

<script language="JavaScript1.2">

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

//www.sok.c.la

Conclusion

Pour les utilisateur de phpbb, le Code javascript est à mettre dans overall_header.tpl de votre template (template/votre_template/overall_header.tpl)
Par contre celui-ci doit etre placé avant tous les autre codes js du fichier (sinon ca ne fonctionne pas et je ne sait pas pourquoi).

Vous pouvez aller regarder le model de boutton que j'ai réqlisé sur l'un de mes sites :
www.sok.c.la (adresse temporaire)
 

Historique

28 février 2006 00:40:28 :
J'ai enlevé la href="" ca rend pas bien.

Commentaires et avis

signaler à un administrateur
Commentaire de toutphp le 28/02/2006 00:19:07

Tu aurais une capture d'écran à mettre afin de visualiser sans ton code et avec ton code stp ?

signaler à un administrateur
Commentaire de setasan9 le 28/02/2006 00:22:01

Non desolé, si tu veux voir comment il marche, regarde sur www.sok.c.la dans la rubrqiue Faq (la page est assez longue pour que ca defile)
Par contre je vien de me rendre compte que pour le forum ca ne fonctionne pas (alors qu'il y a 10 mn si >< )

signaler à un administrateur
Commentaire de toutphp le 28/02/2006 00:25:01

Tu as raison, c'est nickel comme procédé ! Je dois dire que je me suis assez ennervé contre ces ?      #"'{]) de barre à la c.. qui ne me plaisaient pas

Bien pensé

signaler à un administrateur
Commentaire de MaX3315 le 02/03/2006 08:37:15

Sympa comme script mais quetres petites remarques/suggestions:
- si on a le malheur de glisser endehors du boutton avec le boutton presser, ben cela continue a scroller même en lachant la sourie (p'etre ajouter l'action arrete sur le onMouseOut), c'est pas grand chose.
- par contre je trouve dommage que l'utilisateur ne puisse plus utiliser la molette. Je sais pas si c'est possible, mais il existe des actions sur la molette (http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onmousewheel.asp), pour Firefox je ne sais pas.
- le script et vraiment anti accessibilité, mais la aussi, il suffirai simplement de permettre le  focus sur les images de defillement et d'associer l'event du clavier pour contrer cela.
- et enfin, il pourrai etre sympa de masquer les fleches de scroll si elle sont inutles comme sur certaines pages... ou les grisse, enfin quelque chose qui montre mieux quand c'est pas possibe/possible de scroller. (sur mon site j'ai une petite fleche qui devient verte quand elle est utile permettant de remonter en haut... et grisé sinon, je mesure juste la hauteur du cintenu et la hauteur de la fenetre, dans ton cas il s'agirai du meme test.

Dernière remarque concernant plutot le site, partie FAQ, c'est assez troublant d'avoir deux système de scrolling (la barre clasiique qui fait scroller tout le site, et ton système...) Pour des mania de la molette comme moi c'est plutot perturbant.

J'ai pas mis de note pour le moment (je mettrai 7/10)... car j'attends de voir les évolutions du script ;-)
Bon courage.

signaler à un administrateur
Commentaire de setasan9 le 03/03/2006 15:38:08

Et bien apres, je ne sait pas comment faire :s

signaler à un administrateur
Commentaire de setasan9 le 04/03/2006 00:11:39

Pourrait tu me donner l'adresse de ton site stp ?

signaler à un administrateur
Commentaire de MaX3315 le 04/03/2006 09:39:58

C'est par ici :
http://codessources.votre-web.com

Dans la section javascript tu devrais trouver des pages longues. La zone de contenu est simplement un div (le conteneur) possitionné dans un autre div (le parent).  Le parent à une taille fixe (calculé en fonction de la heuteur de la fenetre) et possède la propriété overflow:scroll.  Pour le test de dimension c'est tout bête dans ce cas.

document.getElementById('divConteneur').offsetHeight  comparé à document.getElementById('divParent').offsetHeight.  En fonction du résultat du test je grise/dégrise la petite fleche verte permettant le retour rapide en haut du contenu.

Je n'ai donc utilisé ni frame, ni iframe.  J'ai choisi ce système car je voulais un scrollbar uniquement pour le contenu et donc rattaché à celui-ci tout comme avec ton script.

signaler à un administrateur
Commentaire de toftiftof le 14/04/2006 18:28:16

Bonjour,
Votre programme m'a été fort util mais j'aimerais savoir si l'on peut faire la même chose pour un défilement horizontal, j'ai besoin de remplacer une barre de défilement horizontale, si quelqu'un pouvait me dire comment faire ca serait super sympa. Merci.

signaler à un administrateur
Commentaire de MaX3315 le 14/04/2006 18:43:22

scrollTop devient scrollLeft
Et
pageYOffset devient pageXOffset

Et.. heu ben je pense que c'est tout.

signaler à un administrateur
Commentaire de toutphp le 14/04/2006 18:47:34

pense à faire pivoter les images aussi !

signaler à un administrateur
Commentaire de toftiftof le 15/04/2006 13:45:23

Merci mais êtes-vous sûr de votre coup parceque ma fenetre défile toujours verticalement !

signaler à un administrateur
Commentaire de Warcow le 05/07/2006 10:46:20

Non pour avoir le défilement vertical il faut juste changer window.scrollBy(0,speed) en window.scrollBy(speed,0)
Voilà :)

signaler à un administrateur
Commentaire de toftiftof le 05/07/2006 18:05:01

Merci infiniment, j'attendais çà depuis tellement longtemps ! et ca marche !! Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Quelle est la différence entre Frame, IFrame et Div... [ par rem78 ] Bonjour,J'ai un problème de frame que j'utilise pour mon site et qui provoque dans ma fenêtre popup plein écran l'apparitiond'un barre verticale, hors Faire défiler une frame --> boutons [ par VooDooS ] Bonjour, Voila mon probleme : &nbsp;&nbsp;&nbsp; J'ais une frame que je nomme "contenu", et deux boutons a sa droite. Je voudrais que lorsque l'on cl Redimensionnement auto iframe en largeur - pb sous FireFoX [ par pico_rasta ] J'utilise 2 codes javascript diff&#233;rents pour le redimensionnemenent automatique d'une iframe dans un page :sous IE :document.all[frame].style.hei remplacer la scrollbar par des boutons up et down [ par caloum ] Je recherche une solution pour remplacer la scrollbar de Internet Explorerpar des boutons up et down , pour utiliser un &#233;cran tactile.Je ne peux& Iframe et DOM [ par xordonez ] Bonjour, je rencontre le problème suivant: La page de mon appli est un frameset composé de 3 frames: top, middle et bottom. Le corps de la page est Lien d'une iframe [ par poupoune1974 ] Bonsoir à tousJe ne sais pas si je postes dans la bonne rubrique, sinon merci de me rediriger.Mon souci : J'aimerai inclure dans ma page web une frame Les frames [ par olaaa ] Salut, J'ai une page internet organis&#233;e de la facon suivante: Une page principale qui en haut contient des champs de formulaire avec un bouton, déclencher des fonctions d'alluamge et modification de boutons d'un autre frame [ par BrunoJWest ] le probl&#232;me s'est pos&#233; plusieurs fois et je ne l'ai pas r&#233;solu sans contournement pour l'instant.Sur la plupart de mes sites j'ai deux Affichage barre de defilement [ par Jossdoit ] Bonjour, Je travaille actuellement sur Dreamweaver pour faire une page web. Je voudrais changer l'aspect de ma barre de défilement. Pour cela g utilis IFRAME en premier plan [ par mdelepin ] Bonjour, Je vous explique mon probl&#232;me. J'ai une appli web contenant deux frame (une en haut et une en bas). A l'aide d'une IFRAME, j'affiche un


Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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
Temps d'éxécution de la page : 0,296 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.