Bonjour !
Je suis autodidacte en webdesign mais j'en suis pas à mon premier site mais actuellement je bute sur un problème.
Le site présente un défilement horizontal lors du survol des div "left" et "right" tel que :
Les conteneurs régissent le script suivant :
Or j'aurais voulu que les conteneur "right" et "left" soit en position "fixed" lors du défilement horizontal mais passent en position "absolute" lors du défilement vertical grâce au script suivant : http://jsfiddle.net/F7Bme/ (en inversant horizontal fix/vertical absolute)
Je n'ai pas réussi à intégrer les deux scripts alors si quelqu'un veut bien se donner la peine de m'éclairer, je lui serais très reconnaissant.
Merci, par avance ![/i]
Je suis autodidacte en webdesign mais j'en suis pas à mon premier site mais actuellement je bute sur un problème.
Le site présente un défilement horizontal lors du survol des div "left" et "right" tel que :
<div id="arrows">
<ul>
<li id="left"><a href="javascript://" title="go left">go left</a></li>
<li id="right"><a href="javascript://" title="go right">go right</a></li>
</ul>
</div>
#arrows {
position: fixed;
top: 460px;
left: 70px;
width: 90px;
height: 30px;
cursor: pointer;
}
#arrows ul {
margin: 0;
padding: 0;
list-style:none;
}
#arrows ul li {
margin: 0;
padding: 0;
display:inline;
width: 40px;
height: 30px;
}
#arrows ul li a{
margin-right: 5px;
float: left;
display: block;
width: 40px;
height: 30px;
overflow: hidden;
cursor: pointer;
font-size: 50em;
text-indent: -9000px;
}
#arrows ul #left a {background: transparent url(img/leftbig.png) no-repeat;}
#arrows ul #right a{background: transparent url(img/rightbig.png) no-repeat;}
Les conteneurs régissent le script suivant :
window.onload = function() {
HtinyScrolling.init(); scrollTips.init();
}
var HtinyScrolling = {
speed : 50, //set here the scroll speed: when this value increase, the speed decrease.
maxStep: 150, //set here the "uniform motion" step for long distances
brakeK: 3, //set here the coefficient of slowing down
hash:null,
currentBlock:null,
requestedX:0,
init: function() {
var lnks = document.getElementsByTagName('a');
for(var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
addEvent(lnk,'click',HtinyScrolling.initScroll,false);
lnk.onclick=function(){return false;} // Safari
}
}
},
getTarget: function(target) {
while(target.tagName.toLowerCase() != 'a')
target = target.parentNode;
return target;
},
getElementXpos: function(el){
var x = 0;
while(el.offsetParent){
x += el.offsetLeft;
el = el.offsetParent;
} return x;
},
getScrollLeft: function(){
if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
else return window.pageXOffset;
},
getWindowWidth: function(){
if (window.innerWidth) return window.innerWidth;
if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
},
getDocumentWidth: function(){
if (document.width) return document.width;
if(document.body.offsetWidth) return document.body.offsetWidth;
},
initScroll: function(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
targ = HtinyScrolling.getTarget(targ); //a fix by Skid X
HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
if(!HtinyScrolling.currentBlock) return;
HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
HtinyScrolling.scroll(targ);
return false;
},
scroll: function(targ){
var left = HtinyScrolling.getScrollLeft();
if(HtinyScrolling.requestedX > left) {
var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
var offset = Math.max(2, Math.min(endDistance, HtinyScrolling.maxStep));
} else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
} window.scrollTo(left + offset, 0);
if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
window.scrollTo(HtinyScrolling.requestedX, 0);
if(typeof XULDocument != 'undefined') {
location.hash = HtinyScrolling.hash;
}
//optional instructions: you can add an effect to enlight after the scroll the selected section.
//uncomment this line below if you want to change the opacity:
//mark.change_opacity(HtinyScrolling.hash);
//you can also call the function "mark.change_colors(HtinyScrolling.hash, fps, (duration in sec), #(color in hex), #(color in hex))" to change background color of selected section
HtinyScrolling.hash = null;
} else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
}
}
/* the mouse scrolling doesn't work with Opera, that hasn't a event associated to the mouse wheel */
var scrollTips = {
dx : null,
init : function() {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
} else document.attachEvent("onmousewheel", this.mouseScroll);
var left = document.getElementById('left');
addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
var right = document.getElementById('right');
addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
},
mouseScroll : function(e) {
if (!e) var e = window.event;
if (e.wheelDelta <= 0 || e.detail>=0){
window.scrollBy(80,0);
} else window.scrollBy(-80,0) ;
},
arrowScroll: function(val) {
if(val==1) {
window.scrollBy(70,0);
} else {
window.scrollBy(-70,0)
}
}
}
var mark = { //first four functions are based on The Fade Anything Technique by Adam Michela
valop : 100,
req : 0,
make_hex: function(r,g,b) {
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
change_colors: function(id, fps, duration, from, to) {
var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;
var frame = 0;
if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);
var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);
var r,g,b,h;
while (frame < frames) {
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);
setTimeout("mark.set_img_bgcolor('"+id+"','"+h+"')", delay);
frame++;
delay = interval * frame;
}
setTimeout("mark.set_img_bgcolor('"+id+"','"+to+"')", delay);
},
set_img_bgcolor: function(id, c) {
if(document.getElementById(id).getElementsByTagName('img')[0]) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
o.style.backgroundColor = c;} else return;
},
get_img_bgcolor: function(id) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
while(o) {
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
},
change_opacity: function(el) {
if(!(/^menu/.test(el))) {
var post = document.getElementById(el);
if (mark.valop > 10 && mark.req == 0) {
mark.valop -= 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 10) {mark.req = 1};
} else
if (mark.valop < 100 && mark.req == 1) {
mark.valop += 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 100) {mark.req = 2};
}
if (mark.req != 2){
setTimeout("mark.change_opacity('"+el+"')", 50);
}
else { mark.set_opacity(post,9999); mark.req = 0; return;}
}
},
set_opacity: function(post,val){
post.style.opacity='0.' + val ;
post.style.filter="alpha(opacity=" + val + ")";
}
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}
Or j'aurais voulu que les conteneur "right" et "left" soit en position "fixed" lors du défilement horizontal mais passent en position "absolute" lors du défilement vertical grâce au script suivant : http://jsfiddle.net/F7Bme/ (en inversant horizontal fix/vertical absolute)
Je n'ai pas réussi à intégrer les deux scripts alors si quelqu'un veut bien se donner la peine de m'éclairer, je lui serais très reconnaissant.
Merci, par avance ![/i]