begin process at 2012 05 27 19:43:13
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Frames

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

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


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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 :16 195
Auteur : setasan9

Ecrire un message privé
Site perso
Commentaire sur cette source (16)
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.

 Sources du même auteur

AFFICHER L'HEURE D'UN PAYS SUR SON SITE
Toutes les sources de setasan9

 Sources de la même categorie

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
DYNAMIC CONTENT DANS UNE DIV par duterte
INCLUDE EN JAVASCRIPT par yousfane
Source avec Zip PASSER DE FRAMES A UNE PAGE par David78390
Toutes les sources de la catégorie Frames

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
Source avec Zip Source avec une capture SCROLL BARS EN JAVASCRIPT SUR UNE PAGE HTML par Glennouchet
Source avec Zip Source avec une capture TELECHARGEMENT SANS RECHARGER LA PAGE par zulrigh

Commentaires et avis

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 ?

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

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é

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.

Commentaire de setasan9 le 03/03/2006 15:38:08

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

Commentaire de setasan9 le 04/03/2006 00:11:39

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

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.

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.

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.

Commentaire de toutphp le 14/04/2006 18:47:34

pense à faire pivoter les images aussi !

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 !

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à :)

Commentaire de toftiftof le 05/07/2006 18:05:01

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

Commentaire de layonn le 15/10/2008 14:16:18

ton script est bien expliké car étant débutant en programmation, et n'arrivant pas tjs à suivre les scripts, c'est l'une des premières fois où j'arrive directement à faire fonctionner ce que je veux!!

sauf, que là, je m'attendais à voir autre chose en fait.. tes boutons scroll servent à toute la page du site, moi ça serait juste pour un petit cadre qui est sur chaque page de mon site...
Peux tu me dire cmt je peux faire?? J'ai bien mis mon texte ds contenu.php, je me dis donc ke les boutons ne devraient fonctionner que pour le texte mais ils fonctionnent pour la page entière...

merci de m'aider... :))

Commentaire de setasan9 le 15/10/2008 17:50:48

Salut !
ce bout de code remonte à fort longtemps, je l'avais complètement oublié ^^' .

Si tu veux juste faire scroller un bout de texte dans une page, il faut te tourner vers les <div></div> .

Tu mes ton texte dans un div et tu ajoutes une fonction javascript un peut comme celui-ci.

Mais je ne suis plus capable de te proposer un code adéquat, je ne touche plus au js (ou très très peut).
Essaye une autre recherche ^^' . En tout cas ca s'en rapproche.

> faire scroller un texte dans un div

Bon courage !

Commentaire de layonn le 15/10/2008 18:04:10

merci c'est gentil mais j'ai trouvé avec un div :)

Et j'en suis bien heureuse!!En tout cas merci car ton script m'a aidé à mieux comprendre le système des boutons scroll!!!

A+

 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 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 personaliser un scrollbar (assenseur de l'iframe) [ par maharathi ] Salut a tous.J'appelle a l'aide car après avoir attentivement scruté les codes disponibles j'en ai pas trouvé un seul qui me permettrai de faire ce qu 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 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


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

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 : 0,608 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)