Accueil
Créer un forumBarre 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
par *angiesworld* 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!^_^
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Psychotik. 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,
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
par *angiesworld* 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..
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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.
Si c'est le cas ajouter ceci dans votre Css, et bien-sur dans la partie concerner.
- Code:
overflow:scroll
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* Mer 11 Jan 2012 - 19:27
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)..
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* 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?!
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure Mer 11 Jan 2012 - 20:19
Je regarderais ça, cela doit être possible. 
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* Mer 11 Jan 2012 - 20:22
Merci Sincèrement à vous de l'aide apportée! 
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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
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>
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par Lou. 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 
Lou.- *
-
Messages : 38
Inscrit(e) le : 28/10/2011 -
Re: Barre de Défilement
par Censure Jeu 12 Jan 2012 - 19:20
Bizarre, sur une page Html et chez moi c'est impec !
- Spoiler:
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Lou.- *
-
Messages : 38
Inscrit(e) le : 28/10/2011 -
Re: Barre de Défilement
par *angiesworld* 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?!
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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 ! 
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* 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 :
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!
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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:
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;
}
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par Automne Ven 20 Jan 2012 - 15:59
 | Bonjour, Où en-est votre problème ? Deux solutions :
A bientôt sur ForumActif |
en éditant votre premier message,
Automne- Membre actif
- Messages : 8431
Inscrit(e) le : 22/03/2010 -
Re: Barre de Défilement
par *angiesworld* 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
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure Sam 21 Jan 2012 - 18:23
Excusez moi: c'est "Gestion des codes Javascript"
(JS=JavaScript)
(JS=JavaScript)
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* 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/
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*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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.
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- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* 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?!
Comme si on mettait d'abord le cadre puis par dessus l'image de la P.A, vous voyez?!
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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?
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- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Re: Barre de Défilement
par *angiesworld* 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 »
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 ♥
*angiesworld*- *****
-
Messages : 758
Inscrit(e) le : 16/11/2009 -
Re: Barre de Défilement
par Censure 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 !
Censure- ****
-
Messages : 218
Inscrit(e) le : 21/12/2010 -
Page 1 sur 2 • 1, 2
Sujets similaires» Barre de defilement
» Barre de défilement
» 2ème barre de défilement
» Barre de défilement
» Barre de défilement modifiable
» Barre de défilement
» 2ème barre de défilement
» Barre de défilement
» Barre de défilement modifiable
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