Barre de Défilement
5 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Barre de Défilement
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!^_^
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!^_^
Re: Barre de Défilement
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,
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
-
Messages : 26
Inscrit(e) le : 31/12/2011
Re: Barre de Défilement
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..
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..
Re: Barre de Défilement
Remontée de Sujet les Choupinets..
Re: Barre de Défilement
Upounet les Gros Minets..
Re: Barre de Défilement
Personne pour m'aider?!
Re: Barre de Défilement
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.
Si c'est le cas ajouter ceci dans votre Css, et bien-sur dans la partie concerner.
- Code:
overflow:scroll
Re: Barre de Défilement
Euh.. Non je en crois pas que ce soit ça.
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)..
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)..
Re: Barre de Défilement
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>
Re: Barre de Défilement
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?!
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?!
Re: Barre de Défilement
Je regarderais ça, cela doit être possible.
Re: Barre de Défilement
Merci Sincèrement à vous de l'aide apportée!
Re: Barre de Défilement
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
340 lignes contres 38 pour le 1ére script
- 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>
Re: Barre de Défilement
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
Re: Barre de Défilement
Bizarre, sur une page Html et chez moi c'est impec !
- Spoiler:
Re: Barre de Défilement
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?!
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?!
Re: Barre de Défilement
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 !
Re: Barre de Défilement
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 :
Puis dans le CSS: (Qui servira donc à personnaliser la barre)
Voyez vous, à peu prés, où je veux en venir?!
Si ca n'est pas le cas je le comprendrai ma foi!
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!
Re: Barre de Défilement
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:
Il faut heberger les script Js.
-> Modules
-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index
-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index
-> Gestions des script Js
-> Nouveau
-> Placement: Sur l'index
-> Gestions des script Js
Récupérer l'adresse html des code JS
-->Page d’accueil (Généralité)
Modifications de l'emplacement de la zone de texte emplacement) (le div qui contient le texte)
Top = Réglages de l'emplacement en hauteur
Left: Réglage de l’emplacement sur le coté
Emplacement de la scrollbar:
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)
Réglages de la taille de la scrollbar
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;
}
Re: Barre de Défilement
Bonjour, Où en-est votre problème ? Deux solutions :
A bientôt sur ForumActif |
Re: Barre de Défilement
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
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
Re: Barre de Défilement
Excusez moi: c'est "Gestion des codes Javascript"
(JS=JavaScript)
(JS=JavaScript)
Re: Barre de Défilement
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/
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/
Re: Barre de Défilement
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.
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.
Re: Barre de Défilement
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?!
Comme si on mettait d'abord le cadre puis par dessus l'image de la P.A, vous voyez?!
Re: Barre de Défilement
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?
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;
}
Re: Barre de Défilement
Le CSS de l’image est celui que vous m’avait précédemment donné.
Y figure donc bien un « position:absolute »
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 ♥
Y figure donc bien un « position:absolute »
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 ♥
Re: Barre de Défilement
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 !
Page 1 sur 2 • 1, 2
Sujets similaires
» Barre de défilement
» Barre de défilement
» Barre de défilement
» Mettre une barre de défilement
» Barre de defilement
» Barre de défilement
» Barre de défilement
» Mettre une barre de défilement
» Barre de defilement
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum