Barre de Défilement

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de Défilement

Message par *angiesworld* le Sam 31 Déc 2011 - 18:48

Bonjour à vous les Ptits Loups,
Avant tout je tiens à vous souhaiter de Bonnes Fêtes de Fin D’année..
En espérant que vos souliers ont été rempli comme il se le devait. Noel

Alors voilà si je vous écrit en cette fraîche nuit c’est parce que j’aurais aimée personnaliser la Barre de Défilement qu’il y a sur ma P.A, en remplacer celle-ci par de simple image de flèche, en haut et en bas,
Un peu comme cette exemple ci :


Croyez vous donc pouvoir m’aider?!
Dans tous les cas, Merci à ceux qui auront essayer!^_^

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Psychotik. le Sam 31 Déc 2011 - 18:55

Bonjour,

Dans l'image que tu nous as fourni, si j'ai bien compris, ce sont deux images de flèches codées de la sorte pour que dès que tu passes ta souris sur l'image, le texte monte ou descend. C'est ce code que tu veux ? Ou pas ?

Cordialement,

Psychotik.
Nouveau membre

Masculin
Messages : 26
Inscrit(e) le : 31/12/2011

Psychotik. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Sam 31 Déc 2011 - 18:58

Bonsoir,
En effet il s’agit bien de cela.
Mais j’aimerai que le texte monte (ou descende) que si on clique sur la flèche comme pour une barre de défilement basique, je voudrais éviter l’effet tactile (ou il suffit d'un simple survole pour que cela bouge) qui n’est pas évident à gérer via un PC.
Bien à vous..

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Dim 1 Jan 2012 - 19:34

Remontée de Sujet les Choupinets..

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Mer 4 Jan 2012 - 17:55

Upounet les Gros Minets..

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Ven 6 Jan 2012 - 21:02

Personne pour m'aider?!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Mer 11 Jan 2012 - 18:57

Up.

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Mer 11 Jan 2012 - 19:00

C'est un effet "srcoll" que vous chercher?
Si c'est le cas ajouter ceci dans votre Css, et bien-sur dans la partie concerner.
Code:
overflow:scroll

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Mer 11 Jan 2012 - 19:27

Euh.. Non je en crois pas que ce soit ça. scratch
Enfaîte je cherche juste à remplacer la barre de défilement basique par deux images (Une image de flèche du haut et une de bas)..

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Mer 11 Jan 2012 - 20:02

J'ai réussi a faire un bidouillage sur page html, c'est du vite fait (Un aperçu !):

Code:
<script type="text/javascript"> 
var timer1;
function scrollDiv(divId, depl) {
    var scroll_container = document.getElementById(divId);
    scroll_container.scrollTop -= depl;
    timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}
</script>
<div class="scroll">
<a href="javascript:void(0)" onmouseover="scrollDiv('MyDiv', 3)" onmouseout="clearTimeout(timer1)"><img src="http://turbocad.telechargement.fr/img/scrollBtnTop.png"/></a>
</div>

<div class="scroll2">
<a href="javascript:void(0)" onmouseover="scrollDiv('MyDiv', -3)" onmouseout="clearTimeout(timer1)"><img src="http://turbocad.telechargement.fr/img/scrollBtnBottom.png"/></a>
</div>

<div id="MyDiv" style="width: 200px; height: 100px; border: 1px solid; overflow: hidden">
    Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here       
</div>

<style type="text/css">
.scroll{
padding-left:202px;
margin-top:70px;
position:absolute;
}

.scroll2{
padding-left:202px;
margin-top:10px;
position:absolute;
}

a img
{
border: none;
}
</style>


Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Mer 11 Jan 2012 - 20:17

WhaaaaooO.. Merci à toi Censure! Et chapeau. ^_^

Le truc enfaîte c'est que, comme je l'ai dit précédemment, j’aimerai que le texte monte (ou descende) que si on clique sur la flèche comme pour une barre de défilement basique, je voudrais éviter l’effet tactile (ou il suffit d'un simple survole pour que cela bouge) qui n’est pas évident à gérer via un PC.
Vous voyez ce que je veux dire?!

Serait il possible de faire défiler le texte mais seulement si on clique sur les flèches, plutôt que lors d'un simple survol?!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Mer 11 Jan 2012 - 20:19

Je regarderais ça, cela doit être possible. Wink

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Mer 11 Jan 2012 - 20:22

Merci Sincèrement à vous de l'aide apportée! Razz

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 12 Jan 2012 - 18:12

Le script est 100 fois plus long, C'est du repris sur Internet et mis dans une page Html. (Aperçu !)
340 lignes contres 38 pour le 1ére script Surprised

Code:
<head>
<title>jsScrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.Container {
  position: absolute;
  top: 50px; left: 100px;
  width: 400px;
  height: 200px;
  background: #FFF url(http://www.n-son.com/scripts/jsScrolling/images/container_background.gif) no-repeat;
}
#Scroller-1 {
  position: absolute;
  overflow: hidden;
  width: 400px;
  height: 200px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
}
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
#Scrollbar-Container {
  position: relative;
  top: 40px; left: 500px;
}
.Scrollbar-Up {
  cursor: pointer;
  position: absolute;
}
.Scrollbar-Track {
  width: 20px; height: 161px;
  position: absolute;
  top: 36px; left: 4px;
  background: transparent url(http://www.n-son.com/scripts/jsScrolling/images/scrollbar_track.gif) no-repeat center center;
}
.Scrollbar-Handle {
  position: absolute;
  width: 20px; height: 22px;
}
.Scrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 187px;
}
</style>
<script type="text/javascript">
function jsScroller (o, w, h) {
   var self = this;
   var list = o.getElementsByTagName("div");
   for (var i = 0; i < list.length; i++) {
      if (list[i].className.indexOf("Scroller-Container") > -1) {
         o = list[i];
      }
   }
   
   //Private methods
   this._setPos = function (x, y) {
      if (x < this.viewableWidth - this.totalWidth)
         x = this.viewableWidth - this.totalWidth;
      if (x > 0) x = 0;
      if (y < this.viewableHeight - this.totalHeight)
         y = this.viewableHeight - this.totalHeight;
      if (y > 0) y = 0;
      this._x = x;
      this._y = y;
      with (o.style) {
         left = this._x +"px";
         top  = this._y +"px";
      }
   };
   
   //Public Methods
   this.reset = function () {
      this.content = o;
      this.totalHeight = o.offsetHeight;
      this.totalWidth    = o.offsetWidth;
      this._x = 0;
      this._y = 0;
      with (o.style) {
         left = "0px";
         top  = "0px";
      }
   };
   this.scrollBy = function (x, y) {
      this._setPos(this._x + x, this._y + y);
   };
   this.scrollTo = function (x, y) {
      this._setPos(-x, -y);
   };
   this.stopScroll = function () {
      if (this.scrollTimer) window.clearInterval(this.scrollTimer);
   };
   this.startScroll = function (x, y) {
      this.stopScroll();
      this.scrollTimer = window.setInterval(
         function(){ self.scrollBy(x, y); }, 40
      );
   };
   this.swapContent = function (c, w, h) {
      o = c;
      var list = o.getElementsByTagName("div");
      for (var i = 0; i < list.length; i++) {
         if (list[i].className.indexOf("Scroller-Container") > -1) {
            o = list[i];
         }
      }
      if (w) this.viewableWidth  = w;
      if (h) this.viewableHeight = h;
      this.reset();
   };
   
   //variables
   this.content = o;
   this.viewableWidth  = w;
   this.viewableHeight = h;
   this.totalWidth    = o.offsetWidth;
   this.totalHeight = o.offsetHeight;
   this.scrollTimer = null;
   this.reset();
};</script>

<script type="text/javascript">
function jsScrollbar (o, s, a, ev) {
   var self = this;
   
   this.reset = function () {
      //Arguments that were passed
      this._parent = o;
      this._src    = s;
      this.auto    = a ? a : false;
      this.eventHandler = ev ? ev : function () {};
      //Component Objects
      this._up  = this._findComponent("Scrollbar-Up", this._parent);
      this._down = this._findComponent("Scrollbar-Down", this._parent);
      this._yTrack  = this._findComponent("Scrollbar-Track", this._parent);
      this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
      //Height and position properties
      this._trackTop = findOffsetTop(this._yTrack);
      this._trackHeight  = this._yTrack.offsetHeight;
      this._handleHeight = this._yHandle.offsetHeight;
      this._x = 0;
      this._y = 0;
      //Misc. variables
      this._scrollDist  = 5;
      this._scrollTimer = null;
      this._selectFunc  = null;
      this._grabPoint  = null;
      this._tempTarget  = null;
      this._tempDistX  = 0;
      this._tempDistY  = 0;
      this._disabled    = false;
      this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
      
      this._yHandle.ondragstart  = function () {return false;};
      this._yHandle.onmousedown = function () {return false;};
      this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
      this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
      this._addEvent(this._parent, "mousedown", this._scrollbarClick);
      
      this._src.reset();
      with (this._yHandle.style) {
         top  = "0px";
         left = "0px";
      }
      this._moveContent();
      
      if (this._src.totalHeight < this._src.viewableHeight) {
         this._disabled = true;
         this._yHandle.style.visibility = "hidden";
         if (this.auto) this._parent.style.visibility = "hidden";
      } else {
         this._disabled = false;
         this._yHandle.style.visibility = "visible";
         this._parent.style.visibility  = "visible";
      }
   };
   this._addEvent = function (o, t, f) {
      if (o.addEventListener) o.addEventListener(t, f, false);
      else if (o.attachEvent) o.attachEvent('on'+ t, f);
      else o['on'+ t] = f;
   };
   this._removeEvent = function (o, t, f) {
      if (o.removeEventListener) o.removeEventListener(t, f, false);
      else if (o.detachEvent) o.detachEvent('on'+ t, f);
      else o['on'+ t] = null;
   };
   this._findComponent = function (c, o) {
      var kids = o.childNodes;
      for (var i = 0; i < kids.length; i++) {
         if (kids[i].className && kids[i].className == c) {
            return kids[i];
         }
      }
   };
   //Thank you, Quirksmode
   function findOffsetTop (o) {
      var t = 0;
      if (o.offsetParent) {
         while (o.offsetParent) {
            t += o.offsetTop;
            o  = o.offsetParent;
         }
      }
      return t;
   };
   this._scrollbarClick = function (e) {
      if (self._disabled) return false;
      
      e = e ? e : event;
      if (!e.target) e.target = e.srcElement;
      
      if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
      else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
      else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
      else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
      
      self._tempTarget = e.target;
      self._selectFunc = document.onselectstart;
      document.onselectstart = function () {return false;};
      
      self.eventHandler(e.target, "mousedown");
      self._addEvent(document, "mouseup", self._stopScroll, false);
      
      return false;
   };
   this._scrollbarDrag = function (e) {
      e = e ? e : event;
      var t = parseInt(self._yHandle.style.top);
      var v = e.clientY + document.body.scrollTop - self._trackTop;
      with (self._yHandle.style) {
         if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
            top = self._trackHeight - self._handleHeight +"px";
         else if (v <= self._grabPoint) top = "0px";
         else top = v - self._grabPoint +"px";
         self._y = parseInt(top);
      }
      
      self._moveContent();
   };
   this._scrollbarWheel = function (e) {
      e = e ? e : event;
      var dir = 0;
      if (e.wheelDelta >= 120) dir = -1;
      if (e.wheelDelta <= -120) dir = 1;
      
      self.scrollBy(0, dir * 20);
      e.returnValue = false;
   };
   this._startScroll = function (x, y) {
      this._tempDistX = x;
      this._tempDistY = y;
      this._scrollTimer = window.setInterval(function () {
         self.scrollBy(self._tempDistX, self._tempDistY);
      }, 40);
   };
   this._stopScroll = function () {
      self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
      self._removeEvent(document, "mouseup", self._stopScroll, false);
      
      if (self._selectFunc) document.onselectstart = self._selectFunc;
      else document.onselectstart = function () { return true; };
      
      if (self._scrollTimer) window.clearInterval(self._scrollTimer);
      self.eventHandler (self._tempTarget, "mouseup");
   };
   this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
   this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
   this._scrollTrack = function (e) {
      var curY = e.clientY + document.body.scrollTop;
      this._scroll(0, curY - this._trackTop - this._handleHeight/2);
   };
   this._scrollHandle = function (e) {
      var curY = e.clientY + document.body.scrollTop;
      this._grabPoint = curY - findOffsetTop(this._yHandle);
      this._addEvent(document, "mousemove", this._scrollbarDrag, false);
   };
   this._scroll = function (x, y) {
      if (y > this._trackHeight - this._handleHeight)
         y = this._trackHeight - this._handleHeight;
      if (y < 0) y = 0;
      
      this._yHandle.style.top = y +"px";
      this._y = y;
      
      this._moveContent();
   };
   this._moveContent = function () {
      this._src.scrollTo(0, Math.round(this._y * this._ratio));
   };
   
   this.scrollBy = function (x, y) {
      this._scroll(0, (-this._src._y + y)/this._ratio);
   };
   this.scrollTo = function (x, y) {
      this._scroll(0, y/this._ratio);
   };
   this.swapContent = function (o, w, h) {
      this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
      this._src.swapContent(o, w, h);
      this.reset();
   };
   
   this.reset();
};</script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>
</head>
<body><div id="Scrollbar-Container">

    <img src="http://www.n-son.com/scripts/jsScrolling/images/up_arrow.gif" class="Scrollbar-Up" />
    <img src="http://www.n-son.com/scripts/jsScrolling/images/down_arrow.gif" class="Scrollbar-Down" />
    <div class="Scrollbar-Track">
      <img src="http://www.n-son.com/scripts/jsScrolling/images/scrollbar_handle.gif" class="Scrollbar-Handle" />
    </div>
  </div><div class="Container">
 
  <div id="Scroller-1">
  <div class="Scroller-Container">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>

    </div>
  </div>
</div>
</body>
</html>

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Lou. le Jeu 12 Jan 2012 - 18:58

Je m'incruste mais Censure, j'ai tester ton code et toutes les images sont décalés ! Le cadre et texte en haut du forum à gauche, les barres en bas a gauche. J'ai tester avec Google Chrome & Mozilla Firefox Smile

Lou.
*

Féminin
Messages : 38
Inscrit(e) le : 28/10/2011

http://sweetdream.1fr1.net
Lou. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 12 Jan 2012 - 19:20

Bizarre, sur une page Html et chez moi c'est impec !
Spoiler:

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Lou. le Ven 13 Jan 2012 - 12:37

Où faut-il mettre le code ?
http://forumtest245.1fr1.net
Regarder mon forum test !

Lou.
*

Féminin
Messages : 38
Inscrit(e) le : 28/10/2011

http://sweetdream.1fr1.net
Lou. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Ven 13 Jan 2012 - 13:35

Ne serait il pas plus simple de le mettre sous forme de balise?!
Comme ça il me suffira de mettre la balise dans le code déjà effectué sur ma Page d’accueil.
Pendant que tout se passera au niveau du CSS.

Je pourrais ainsi mettre la balise à plusieurs endroits à la fois, là ou je voudrais personnaliser ma barre, non?!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Ven 13 Jan 2012 - 15:20

Sous forme de balises?! Je ne sais même pas ou vous le voulez réellement, durs de refaire le script sans savoir ou placer le code. Merci d'éclairer ma lanterne ! Very Happy

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Sam 14 Jan 2012 - 10:36

Enfaîte la barre de défilement sera mise sur ma Page d'Accueil qui est déjà mappée et codée..
Voire le lien dans mon profil.

Par balise j'entends quelque chose sous cette forme là, à ajouter dans le codage de la Page d’Accueil :
Code:
<div class="barredefil"> BLABLABLA</div>

Puis dans le CSS: (Qui servira donc à personnaliser la barre)
Code:
.barredefil {
Bla
Bla
Bla
}

Voyez vous, à peu prés, où je veux en venir?!
Si ca n'est pas le cas je le comprendrai ma foi! Wink

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Sam 14 Jan 2012 - 12:10

Bonjour, c'est faisable par contre -> Optimiser pour Mozilla :s, sur IE la barre est décalé et les Script js Bug aussi sur IE >_<"!

CSS:
Code:
      .Container {
  position: absolute;
  top: 897px; left: 900px;
  width: 400px;
  height: 200px;
  background: #FFF url(http://www.n-son.com/scripts/jsScrolling/images/container_background.gif) no-repeat;
}
#Scroller-1 {
  position: absolute;
  overflow: hidden;
  width: 400px;
  height: 200px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
}
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
#Scrollbar-Container {
  position: relative;
  top: -18px; left: 795px;
}
.Scrollbar-Up {
  cursor: pointer;
  position: absolute;
}
.Scrollbar-Track {
  width: 20px; height: 161px;
  position: absolute;
  top: 36px; left: 4px;
  background: transparent url(http://www.n-son.com/scripts/jsScrolling/images/scrollbar_track.gif) no-repeat center center;
}
.Scrollbar-Handle {
  position: absolute;
  width: 20px; height: 22px;
}
.Scrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 187px;
}

Il faut heberger les script Js.
-> Modules
-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index

Code:
function jsScroller (o, w, h) {
   var self = this;
   var list = o.getElementsByTagName("div");
   for (var i = 0; i < list.length; i++) {
      if (list[i].className.indexOf("Scroller-Container") > -1) {
         o = list[i];
      }
   }
   
   //Private methods
   this._setPos = function (x, y) {
      if (x < this.viewableWidth - this.totalWidth)
         x = this.viewableWidth - this.totalWidth;
      if (x > 0) x = 0;
      if (y < this.viewableHeight - this.totalHeight)
         y = this.viewableHeight - this.totalHeight;
      if (y > 0) y = 0;
      this._x = x;
      this._y = y;
      with (o.style) {
         left = this._x +"px";
         top  = this._y +"px";
      }
   };
   
   //Public Methods
   this.reset = function () {
      this.content = o;
      this.totalHeight = o.offsetHeight;
      this.totalWidth    = o.offsetWidth;
      this._x = 0;
      this._y = 0;
      with (o.style) {
         left = "0px";
         top  = "0px";
      }
   };
   this.scrollBy = function (x, y) {
      this._setPos(this._x + x, this._y + y);
   };
   this.scrollTo = function (x, y) {
      this._setPos(-x, -y);
   };
   this.stopScroll = function () {
      if (this.scrollTimer) window.clearInterval(this.scrollTimer);
   };
   this.startScroll = function (x, y) {
      this.stopScroll();
      this.scrollTimer = window.setInterval(
         function(){ self.scrollBy(x, y); }, 40
      );
   };
   this.swapContent = function (c, w, h) {
      o = c;
      var list = o.getElementsByTagName("div");
      for (var i = 0; i < list.length; i++) {
         if (list[i].className.indexOf("Scroller-Container") > -1) {
            o = list[i];
         }
      }
      if (w) this.viewableWidth  = w;
      if (h) this.viewableHeight = h;
      this.reset();
   };
   
   //variables
   this.content = o;
   this.viewableWidth  = w;
   this.viewableHeight = h;
   this.totalWidth    = o.offsetWidth;
   this.totalHeight = o.offsetHeight;
   this.scrollTimer = null;
   this.reset();
};

-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index

Code:
function jsScrollbar (o, s, a, ev) {
   var self = this;
   
   this.reset = function () {
      //Arguments that were passed
      this._parent = o;
      this._src    = s;
      this.auto    = a ? a : false;
      this.eventHandler = ev ? ev : function () {};
      //Component Objects
      this._up  = this._findComponent("Scrollbar-Up", this._parent);
      this._down = this._findComponent("Scrollbar-Down", this._parent);
      this._yTrack  = this._findComponent("Scrollbar-Track", this._parent);
      this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
      //Height and position properties
      this._trackTop = findOffsetTop(this._yTrack);
      this._trackHeight  = this._yTrack.offsetHeight;
      this._handleHeight = this._yHandle.offsetHeight;
      this._x = 0;
      this._y = 0;
      //Misc. variables
      this._scrollDist  = 5;
      this._scrollTimer = null;
      this._selectFunc  = null;
      this._grabPoint  = null;
      this._tempTarget  = null;
      this._tempDistX  = 0;
      this._tempDistY  = 0;
      this._disabled    = false;
      this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
      
      this._yHandle.ondragstart  = function () {return false;};
      this._yHandle.onmousedown = function () {return false;};
      this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
      this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
      this._addEvent(this._parent, "mousedown", this._scrollbarClick);
      
      this._src.reset();
      with (this._yHandle.style) {
         top  = "0px";
         left = "0px";
      }
      this._moveContent();
      
      if (this._src.totalHeight < this._src.viewableHeight) {
         this._disabled = true;
         this._yHandle.style.visibility = "hidden";
         if (this.auto) this._parent.style.visibility = "hidden";
      } else {
         this._disabled = false;
         this._yHandle.style.visibility = "visible";
         this._parent.style.visibility  = "visible";
      }
   };
   this._addEvent = function (o, t, f) {
      if (o.addEventListener) o.addEventListener(t, f, false);
      else if (o.attachEvent) o.attachEvent('on'+ t, f);
      else o['on'+ t] = f;
   };
   this._removeEvent = function (o, t, f) {
      if (o.removeEventListener) o.removeEventListener(t, f, false);
      else if (o.detachEvent) o.detachEvent('on'+ t, f);
      else o['on'+ t] = null;
   };
   this._findComponent = function (c, o) {
      var kids = o.childNodes;
      for (var i = 0; i < kids.length; i++) {
         if (kids[i].className && kids[i].className == c) {
            return kids[i];
         }
      }
   };
   //Thank you, Quirksmode
   function findOffsetTop (o) {
      var t = 0;
      if (o.offsetParent) {
         while (o.offsetParent) {
            t += o.offsetTop;
            o  = o.offsetParent;
         }
      }
      return t;
   };
   this._scrollbarClick = function (e) {
      if (self._disabled) return false;
      
      e = e ? e : event;
      if (!e.target) e.target = e.srcElement;
      
      if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
      else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
      else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
      else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
      
      self._tempTarget = e.target;
      self._selectFunc = document.onselectstart;
      document.onselectstart = function () {return false;};
      
      self.eventHandler(e.target, "mousedown");
      self._addEvent(document, "mouseup", self._stopScroll, false);
      
      return false;
   };
   this._scrollbarDrag = function (e) {
      e = e ? e : event;
      var t = parseInt(self._yHandle.style.top);
      var v = e.clientY + document.body.scrollTop - self._trackTop;
      with (self._yHandle.style) {
         if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
            top = self._trackHeight - self._handleHeight +"px";
         else if (v <= self._grabPoint) top = "0px";
         else top = v - self._grabPoint +"px";
         self._y = parseInt(top);
      }
      
      self._moveContent();
   };
   this._scrollbarWheel = function (e) {
      e = e ? e : event;
      var dir = 0;
      if (e.wheelDelta >= 120) dir = -1;
      if (e.wheelDelta <= -120) dir = 1;
      
      self.scrollBy(0, dir * 20);
      e.returnValue = false;
   };
   this._startScroll = function (x, y) {
      this._tempDistX = x;
      this._tempDistY = y;
      this._scrollTimer = window.setInterval(function () {
         self.scrollBy(self._tempDistX, self._tempDistY);
      }, 40);
   };
   this._stopScroll = function () {
      self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
      self._removeEvent(document, "mouseup", self._stopScroll, false);
      
      if (self._selectFunc) document.onselectstart = self._selectFunc;
      else document.onselectstart = function () { return true; };
      
      if (self._scrollTimer) window.clearInterval(self._scrollTimer);
      self.eventHandler (self._tempTarget, "mouseup");
   };
   this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
   this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
   this._scrollTrack = function (e) {
      var curY = e.clientY + document.body.scrollTop;
      this._scroll(0, curY - this._trackTop - this._handleHeight/2);
   };
   this._scrollHandle = function (e) {
      var curY = e.clientY + document.body.scrollTop;
      this._grabPoint = curY - findOffsetTop(this._yHandle);
      this._addEvent(document, "mousemove", this._scrollbarDrag, false);
   };
   this._scroll = function (x, y) {
      if (y > this._trackHeight - this._handleHeight)
         y = this._trackHeight - this._handleHeight;
      if (y < 0) y = 0;
      
      this._yHandle.style.top = y +"px";
      this._y = y;
      
      this._moveContent();
   };
   this._moveContent = function () {
      this._src.scrollTo(0, Math.round(this._y * this._ratio));
   };
   
   this.scrollBy = function (x, y) {
      this._scroll(0, (-this._src._y + y)/this._ratio);
   };
   this.scrollTo = function (x, y) {
      this._scroll(0, y/this._ratio);
   };
   this.swapContent = function (o, w, h) {
      this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
      this._src.swapContent(o, w, h);
      this.reset();
   };
   
   this.reset();
};

-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index

Code:
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}

-> Gestions des script Js
Récupérer l'adresse html des code JS

-->Page d’accueil (Généralité)
Code:
<script language="JavaScript" type="text/javascript" src="http du script js1"></script>
<script language="JavaScript" type="text/javascript" src="http du script js2"></script>
<script language="JavaScript" type="text/javascript" src="http du script js3"></script>

<body>
<div id="Scrollbar-Container">
    <img src="http://www.n-son.com/scripts/jsScrolling/images/up_arrow.gif" class="Scrollbar-Up" />
    <img src="http://www.n-son.com/scripts/jsScrolling/images/down_arrow.gif" class="Scrollbar-Down" />
    <div class="Scrollbar-Track">
      <img src="http://www.n-son.com/scripts/jsScrolling/images/scrollbar_handle.gif" class="Scrollbar-Handle" />
    </div>
  </div>

<div class="Container">
  <div id="Scroller-1">
  <div class="Scroller-Container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>

    </div>
  </div>
</div>
</body></div>
        </div></div></ul></div>

Modifications de l'emplacement de la zone de texte emplacement) (le div qui contient le texte)
Code:
      .Container {
  top: 897px; left: 900px;

Top = Réglages de l'emplacement en hauteur
Left: Réglage de l’emplacement sur le coté

Emplacement de la scrollbar:
Code:
#Scrollbar-Container {
  top: -18px; left: 795px;

Top = Réglages de l'emplacement en hauteur
Left: Réglage de l'emplacement sur le coté


Ça c'est le réglages de l'emplacement du texte (les div du texte)
Code:
#Scroller-1 {
  position: absolute;
  overflow: hidden;
  width: 400px;
  height: 200px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;


Réglages de la taille de la scrollbar
Code:
.Scrollbar-Track {
  width: 20px; height: 261px;
  position: absolute;
  top: 36px; left: 4px;
  background: transparent url(http://www.n-son.com/scripts/jsScrolling/images/scrollbar_track.gif) no-repeat center center;
}

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Automne le Ven 20 Jan 2012 - 15:59

Bonjour,

Où en-est votre problème ?

Deux solutions :

  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile

Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Sam 21 Jan 2012 - 17:48

Désolé pour le retard accumulé, Internet m'avait été coupée..
Vive la technologie comme on dit! -_-"

Quoiqu'il en soit.. Merci Censure pour tout ça. ^_^
Seul petite question.. Euh.. Ou se situe les Gestions des script Js?!
Parce que moi j'ai que :
Gestion des pages HTML
Gestion des codes Javascript


*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Sam 21 Jan 2012 - 18:23

Excusez moi: c'est "Gestion des codes Javascript" Very Happy
(JS=JavaScript)

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Sam 21 Jan 2012 - 18:56

J’étais pas sur donc j’préférais demander..
Ceci dit.. Merci!
Après installation des codes j’me suis rendu compte que ça ne le ferait sans doute pas.
L’encadré ou doit de situé le texte et la barre de défilement s’affichant SOUS l’image de la Page d’Accueil.
S’agissant d’une image mappée et codée et non d’un simple tableau basique codé.. Je ne sais pas si cela fonctionnera correctement.
Voyez plutôt : http://becrazy.forumactif.org/

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Sam 21 Jan 2012 - 19:07

Il faut changer les valeurs des" top et left"pour quel cette scrollbar puissent entrer dans votre cadres.
Idem pour la largeur du conteneur.
(Je l'ai fait sur mon forum a un emplacement autres que le votre, ce qui fait qu'il a était régler pour MON forum, et non pour le votre, c'est pour cela qu'il faut s'amuser a changer les valeurs des"top/left/width/..") ^-^

Cordialement.

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Sam 21 Jan 2012 - 19:27

Ce n'est pas un problème de valeur puisque la cadre apparait sous l'image et non sur!
Comme si on mettait d'abord le cadre puis par dessus l'image de la P.A, vous voyez?! Wink

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Sam 21 Jan 2012 - 19:31

Pourtant le "cadre" a une valeur de position:absolute(Essayer en incluant un z-index:xxx;)

Quel est le css de l'image?

Avez vous un "position:absolute" dans le css de l'images?
Code:
.Container {
  position: absolute;
  top: 897px; left: 900px;
  width: 400px;
  height: 200px;
  background: #FFF url(http://www.n-son.com/scripts/jsScrolling/images/container_background.gif) no-repeat;
  z-index:500;
}

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Jeu 26 Jan 2012 - 19:19

Le CSS de l’image est celui que vous m’avait précédemment donné.
Y figure donc bien un « position:absolute » Wink
Mais comme je vous l’ai dit.. Quelque soit la valeur donné.. Le cadre apparaît toujours en dessous de l’image.
Voyez :


Ceci dit je pense que vu les complications je vais laisser tomber.. Ça n’est qu’une barre de défilement donc c’est pas un gros souci en soi. Je voulais juste un peu personnalisé ^_^
Ceci dit.. Merci Censure de m’avoir accordé autant de ton énergie et de ton temps!
Sincèrement

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 26 Jan 2012 - 19:21

Tatatata, Je veux quand même avoir le css et le code html du message d'accueil. (même si c'est seulement une image) Je vais tester de mon coter ! Very Happy

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum