Scroll bar dhtml (besoin daide) [Résolu]

Signaler
Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007
-
Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007
-
bon voilà j'ai une scroll bar en dhtml c'étais une barre banale (couleur modifier) mais j'ai réussi à mettre des images le problè me est que il est coller à la frame et moi je ne veut plu de frame mais que ça soit la scroll bar du navigateur.
(page web)



script:

scroller.js


// *** COMMON CROSS-BROWSER COMPATIBILITY CODE ***



// If combining with my other scripts, you might want to edit this section to remove
// duplicate functions to reduce size. It's not totally necessary, though, these functions
// should be clever enough to manage double-ups on their own.


var isDOM= document.getElementById?1:0;
var isIE=document.all?1:0;
var isNS4=navigator.appName=='Netscape'&&!isDOM?1:0;
var isIE4=isIE&&!isDOM?1:0;
var isOp=window.opera?1:0;
var isWin=navigator.platform.indexOf('Win')!=-1?1:0;
var isDyn=isDOM||isIE||isNS4;



function getRef(id, par)
{
par=!par?document:(par.navigator?par.document:par);
return isIE ? par.all[id] :
(isDOM ? (par.getElementById?par:par.ownerDocument).getElementById(id) :
(isNS4 ? par.layers[id] : null));
}


function getSty(id, par)
{
var r=getRef(id, par);
return r?(isNS4?r:r.style):null;
}


if (!window.LayerObj) var LayerObj = new Function('id', 'par',
'this.ref=getRef(id, par); this.sty=getSty(id, par); return this');
function getLyr(id, par) { return new LayerObj(id, par) }


function LyrFn(fn, fc)
{
LayerObj.prototype[fn] = new Function('var a=arguments,p=a[0],px=isNS4||isOp?0:"px"; ' +
'with (this) { '+fc+' }');
}
LyrFn('x','if (!isNaN(p)) sty.left=p+px; else return parseInt(sty.left)');
LyrFn('y','if (!isNaN(p)) sty.top=p+px; else return parseInt(sty.top)');
LyrFn('w','if (p) (isNS4?sty.clip:sty).width=p+px; ' +
'else return (isNS4?ref.document.width:ref.offsetWidth)');
LyrFn('h','if (p) (isNS4?sty.clip:sty).height=p+px; ' +
'else return (isNS4?ref.document.height:ref.offsetHeight)');
LyrFn('vis','sty.visibility=p');
LyrFn('clip','if (isNS4) with(sty.clip){left=a[0];top=a[1];right=a[2];bottom=a[3]} ' +
'else sty.clip="rect("+a[1]+"px "+a[2]+"px "+a[3]+"px "+a[0]+"px)" ');



var CSSmode=document.compatMode;
CSSmode=(CSSmode&&CSSmode.indexOf('CSS')!=-1)||isDOM&&!isIE||isOp?1:0;


if (!window.page) var page = { win: window, minW: 0, minH: 0, MS: isIE&&!isOp,
db: CSSmode?'documentElement':'body' }


page.winW=function()
{ with (this) return Math.max(minW, MS?win.document[db].clientWidth:win.innerWidth) }
page.winH=function()
{ with (this) return Math.max(minH, MS?win.document[db].clientHeight:win.innerHeight) }


page.scrollY=function()
{ with (this) return MS?win.document[db].scrollTop:win.pageYOffset }






// *** LOAD FILES INTO DIV FUNCTIONS ***



function scrLoad(fName) { with (this)
{
if (!fName || !loaded || !isDyn) return;


// Set this as the currently loading file, and fire the 'onbeforeload' event.
loadingFile = fName;
if (onbeforeload) onbeforeload();


// History -- if we're moving to a new location, add it to the history.
if (loadingFile != history[histPos])
{
histPos++;
history[histPos] = loadingFile;
history.length = histPos + 1;
}


// Trigger a file load in IE/NS6, that calls the 'fileLoaded()' function when complete.
if (isIE || isDOM) with (bufRef.document)
{
// Nest an Iframe with an onload handler.
write('' +
' ');
close();
// In early versions of NS6, the nested IFrame is not invoked nor is the onload event fired.
// So we set the regular frame's location and give it 5 secs to load.
// Do the same for IE4 on the Macintosh which is a pathetic excuse for a browser.
if (!bufRef.nestBuf || (isIE4 && !isWin))
{
bufRef.location.href = fName;
setTimeout(myName + '.fileLoaded()', 5000);
}
}
else if (isNS4)
{
// Delay load if another file is loading concurrently...
if (window.ns4LayerLoading)
{
setTimeout(myName + '.load("' + fName + '")', 100);
return;
}
window.ns4LayerLoading = true;


// On load, clear loading flag and scroll to top.
div.ref.onload = new Function(myName + '.fileLoaded()');
// Netscape's load(URL, width) method...
div.ref.load(fName, cWidth);
}
}}



function scrFileLoaded() { with (this)
{
// Stop dragging any scroller while we switch files.
activeScr = null;


// Clear the loading flag for NS4, clear to load another file!
if (isNS4) window.ns4LayerLoading = false;


// In IE or NS6, shift the contents of the IFrame buffer into the DIV.
// Note this is still an extension of the NS6 kludge, not using the nested IFrame.
if ((isDOM || isIE) && loadingFile)
{
var bufDoc = bufRef.nestBuf ? bufRef.nestBuf.document : bufRef.document;
if (bufDoc && bufDoc.body) div.ref.innerHTML = bufDoc.body.innerHTML;
bufRef.location.replace('about:blank');
}


// Set the loaded file as the one we've just loaded.
loadedFile = loadingFile;


// Scroll back to top... the short delay helps IE4, giving it some time to render
// the new document to calculate its height. Also fire the 'onload' event.
setTimeout('with(' + myName + ') { scrollTo(0); if (onload) onload() }', 1);
}}



// History loading function -- cycles through history[] array.
function scrGo(dir) { with (this)
{
histPos += dir;
if (histPos < 0) { histPos = 0; return } if (histPos >history.length) { histPos history.length - 1; return }
load(history[histPos]);
}}





// *** DIV SCROLLING FUNCTIONS ***



function scrScrollTo(pos, isStick) { with (this)
{
if (!isDyn || !loaded) return;


// Record new top value as scroller object property.
cTop = pos;


// If this isn't a sticky scroll, set the target position to the current position.
// Otherwise whenever you click the arrows, the scroller slides back again...
if (!isStick) stickTop = cTop;


// Height of div, plus padding - update here as it may change often.
divHeight = div.h() + padTop + padBot;
// Stops 'divide by zero' if (divHeight 0) divHeight 1;


// Should we check if we're scrolling out of range? If so, return to top/bottom.
if (checkBounds)
{
if (cTop + cHeight > divHeight) cTop = divHeight - cHeight;
if (cTop < 0) cTop = 0;
}


// Move div up/down... 'scrolling' div, and reclip as we do so.
div.y(eval(divs[0].y) - cTop + padTop);
div.clip(0, cTop - padTop, cWidth, cTop - padTop + cHeight);



// Define its height as the percentage of the clipping height vs div height.
// Best to set it here as divHeight may change as images load etc.
thmHeight = Math.ceil(barHeight * (cHeight / divHeight));


// Minimum and maximum heights for thumb...
if (thmHeight < minThmHeight) thmHeight = minThmHeight;
if (thmHeight > barHeight) thmHeight = barHeight;


// Assign the thumb its calculated height if we're not sticky-scrolling.
thm.h(thmHeight);


// Now is a good time to fire the 'onscroll' event if it exists.
if (onscroll) onscroll();


// Adjust scrollbar thumb position only if we're not dragging / sticky-scrolling.
if (activeScr || isStick) return;


// What fraction is the div of its total scrolling range? 0=top, 1=bottom.
var fracDivDown = (cTop / (divHeight - cHeight));
// Now, multiply that by the available space to move and assign its top.
thm.y(bar.y() + fracDivDown * (barHeight - thmHeight));
}}



function scrScrollBy(amount) { with (this)
{
// Scroll to the old location plus however much we're scrolling by.
scrollTo(cTop + amount);
}}



function scrSetScroll(newSpeed, steps) { with (this)
{
if (!loaded) return;


// Alter scroller velocity in steps to the new speed, set timer interval.
stepsLeft = steps;


// Clear the timer here -- so sticky scrolling or another setScroll() stops.
if (timer) clearInterval(timer);
timer = setInterval('with (' + myName + ') { ' +
'if (stepsLeft > 0) { ySpeed += ' + ((newSpeed-ySpeed)/steps) + '; stepsLeft-- } ' +
'else if (parseInt(ySpeed)==0) {clearInterval(timer);timer=null} scrollBy(ySpeed) }', 50);
}}





// *** SCROLL THUMB DRAGGING EVENT HANDLERS ***



function scrThumbDown(evt) { with (this)
{
// Find the correct event object.
var evt = evt?evt:window.event;


// Set the global variable pointing to the active scroller - this scroller object.
activeScr = this;


// Offset of mouse cursor within the scrollbar...
dragOffset = (isNS4 ? evt.layerY : page.scrollY() + evt.clientY - thm.y());


// Fire the 'onthumbdown' event if it exists.
if (onthumbdown) onthumbdown();


// Clear either the sticky scroll or setScroll() interval, to be reset on mousemove.
if (timer) clearInterval(timer);
timer = null;


return false;
}}



function scrThumbMove(evt)
{
var evt = evt?evt:window.event;


// Either return true if no scroller is being dragged (so selections work), or if
// it's NS4 just route the event...
if (!activeScr) return true;
else with (activeScr)
{
// If it's not scrollable, quit.
if ((cTop + cHeight > divHeight) || (thmHeight == barHeight)) return true;


// Calculate the new position of the thumb within the scrollbar (0 = at the top).
var thmTop = (isNS4 ? evt.pageY : page.scrollY() + evt.clientY) - dragOffset - bar.y();

// Test if the thumb is out of range, if so, bring it back, then assign its position.
if (thmTop < 0) thmTop = 0;
if (thmTop + thmHeight > barHeight) thmTop = barHeight - thmHeight;
thm.y(bar.y() + thmTop);


// Set the new position as the target top value for the sticky scroll routine.
stickTop = (divHeight - cHeight) * (thmTop / (barHeight - thmHeight));

// If sticky scrolling is off, scroll now, otherwise set interval as needed.
if (stick == 1) scrollTo(stickTop);
else if (!timer) timer = setInterval(myName + '.stickScroll()', 40);


return false;
}
}



function scrStickScroll() { with (this)
{
// If we're way off, scroll by the stickiness factor in the correct direction.
if (Math.abs(cTop - stickTop) > 1)
{
cTop += (stickTop - cTop) * stick;
scrollTo(cTop, true);
}
else if (cTop != stickTop)
{
// Otherwise if there's only 1px to go, scroll to the exact point, and call it done.
cTop = stickTop;
scrollTo(cTop, true);
}
}}



function scrThumbUp(evt)
{
// Fire the 'onthumbup' event if it exists.
// N.B. Leave the sticky-scroll interval active.
if (activeScr) with (activeScr) if (onthumbup) onthumbup();


// Clear the active scroller global variable.
activeScr = null;
}





// *** SCROLLBAR BACKGROUND CLICK EVENT HANDLER ***



function scrBarClick(evt) { with (this)
{
// Get the correct event object, and retrieve the click position.
var evt = evt?evt:window.event;


clickPos = isNS4 ? evt.pageY : page.scrollY() + evt.clientY;


// Page up, or page down?
if (clickPos < thm.y()) scrollBy(0 - cHeight);
if (clickPos > (thm.y() + thmHeight)) scrollBy(cHeight);


if (isNS4) return document.routeEvent(evt);
}}





// *** LAYOUT HANDLER FOR WINDOW RESIZE ETC ***



function scrLayout() { with (this)
{
if (!isDyn || !loaded) return;


// Loop through divs array, positioning/sizing controls.
for (var i = 0; i < divs.length; i++) with (divs[i].lyr)
{
// Don't let the width and height get below 0.
x(eval(divs[i].x)); w(Math.max(0,eval(divs[i].w)));
// Only set Y and height if it's not the scrolling content div.
if (i) { y(eval(divs[i].y)); h(Math.max(0,eval(divs[i].h))) }
}


// Bar height and clipping dimensions, accessed often so stored as object properties.
barHeight = eval(divs[1].h);
cWidth = eval(divs[0].w);
cHeight = eval(divs[0].h);


// Might as well fire the onlayout event if it exists.
if (onlayout) onlayout();


// Now, display it using updated variables...
scrollBy(0);
}}



// *** ON LOAD: CAPTURE EVENTS & MISC. SETUP ***



function scrSetup(defaultFile) { with (this)
{
if (!isDyn) return;


// Get layer objects for all the divs passed to the function somehow...
for (var i = 0; i < divs.length; i++)
divs[i].lyr = getLyr(divs[i].id, eval(divs[i].par));

// These get accessed so often we might as well get some short references.
div = divs[0].lyr;
bar = divs[1].lyr;
thm = divs[2].lyr;


// Buffer frame for IE/NS6 -- same as scroller name, plus 'Buf'.
// NS6 has troubles with the frames array and iframes, so use a workaround.
if (!isNS4) bufRef = eval('window.' + myName + 'Buf');


// Set up event capturing for NS4.
if (isNS4)
{
bar.ref.captureEvents(Event.CLICK);
thm.ref.captureEvents(Event.MOUSEDOWN);
}


// Pass these events to this scroller.
bar.ref.onclick = new Function('evt', 'return ' + myName + '.barClick(evt)');
thm.ref.onmousedown = new Function('evt', 'return ' + myName + '.thumbDown(evt)');

// For IE4+/NS6, create a new function that stops selections being made when dragging.
var noSel = new Function('if (activeScr) return false');
if (isIE) document.onselectstart = noSel;
else if (isDOM) document.onselect = noSel;



// It's now ready to go, call resize function to set the positions and variables...
loaded = true;
layout();
// Now is a good time to fire the 'onsetup' event, it's ready to load...
if (onsetup) onsetup();


// Get the name of the file to be loaded from a URL query string...
var fileName = ''
// Get the string after the question mark.
var URL = location.search.substring(1);
if (URL)
{
// Split it into an array of scroller/filename pairs.
URL = URL.split('&');
// Search through that array looking for this scroller name.
for (var i = 0; i < URL.length; i++)
if (URL[i].split('=')[0] == myName) fileName = unescape(URL[i].split('=')[1]);
}


// If a filename has been detected, load it.
if (fileName) load(fileName)


// Else load default file (if we're passed one) or scroll existing content without loading.
else if (defaultFile) load(defaultFile);
else fileLoaded();
}}





// *** SCROLLER OBJECT CONSTRUCTOR FUNCTIONS ***



// This takes arrays of data and names and assigns the values to a specified object.
function addProps(obj, data, names, addNull)
{ for (var i 0; i < names.length; i++) if(i < data.length || addNull) obj[names[i]] data[i];
}



// Main object of which instances are created.
function DHTMLScroller()
{
// Only the first is actually passed to the function, the rest are just added as 'undefined'.
var names = ['myName', 'bufRef', 'div', 'bar', 'thm', 'loaded', 'timer',
'divHeight', 'thmHeight', 'barHeight', 'cHeight', 'cWidth', 'dragOffset',
'onbeforeload', 'onload', 'onscroll', 'onsetup', 'onlayout', 'onthumbdown', 'onthumbup'];
addProps(this, arguments, names, true);


// The top clipping position by default is zero -- the top of the file.
this.cTop = 0;


// The file(s) currently loading and displayed in the scroller,
this.loadingFile = '';
this.loadedFile = '';


// Scroller history setup -- an array of data and current position.
this.history = new Array();
this.histPos = -1;


// Array of objects to move when the window is resized (e.g. scrollbar, arrows).
this.divs = new Array();

// Minimum height of scrollbar thumb - defaults to 20, set to something else if you want.
this.minThmHeight = 20;
// Padding at the top and bottom -- set these manually if you want.
this.padTop = 0;
this.padBot = 0;
// Whether or not to allow scrolling out of the normal region.
this.checkBounds = true;


// Current speed of the scroller, and the steps left to reach that speed. this.ySpeed this.stepsLeft 0;


// The 'stickiness' of the scroller, 1 means perfect scrolling, decimals = floating.
this.stick = 1;
// Target point to which we scroll, and a timer variable managing sticky scroll.
this.stickTop = 0;


// Methods - bound to functions above.
this.load = scrLoad;
this.fileLoaded = scrFileLoaded;
this.go = scrGo;
this.scrollTo = scrScrollTo;
this.scrollBy = scrScrollBy;
this.setScroll = scrSetScroll;
this.thumbDown = scrThumbDown;
// The other thumb functions are global, associated with document.onevent.
// They rely on the 'activeScr' global variable to tell them which scroller is being dragged.
this.stickScroll = scrStickScroll;
this.barClick = scrBarClick;
this.setup = scrSetup;
this.layout = scrLayout;
}


// The 'ScrDiv' object contains the data structure for the scroller divs.
function ScrDiv()
{
addProps(this, arguments, ['id','x','y','w','h','par','lyr'], true);
}


// One global variable that points to the scroller currently being dragged.
var activeScr = null;




















// *** SCROLLER OBJECT SETUP -- START EDITING HERE, keep reading until bottom of file ***.


// First, you have to create one or more scroller objects, syntax:
// var name = new DHTMLScroller('name');


var mainDiv = new DHTMLScroller('mainDiv');



// Then, working with its properties, we tell it the names of the relevant divs below we want it
// to use. This is accomplished by the 'divs' array, to which we add new items like so:
//
// divs[number] = new ScrDiv('id of div below', 'x', 'y', 'width', 'height', 'parent');
//
// As you can see, the second through to fourth parameters are the positions and dimensions of the
// divs, declared here rather than as properties to the divs below. They are strings containing
// either plain numbers, or formulae using global variables or functions to calculate
// special positions, e.g. centring or sizing with the window. Pass an empty string '' to tell
// the script not to set that particular parameter.
// The 'parent' parameter is optional. Use it if you're nesting the scroller divs within other
// divs, by passing a string that when evaluated, returns a reference to the parent layer of the
// div, e.g. 'getRef("containerDiv")', which is similar to 'document.all.containerDiv'. If you're
// just editing this template script, don't bother about it.
// The first three divs are special -- divs[0] is the scroller area itself into which files are
// loaded, divs[1] = the scrollbar background area itself, and divs[2] = the scrollbar thumb (the
// draggable bit). Anything after that is positioned and sized by the scroller engine on window
// resize but does not have any special properties.


with (mainDiv)
{
// This example uses my page object, included with this script. It provides two functions,
// page.winW() and page.winH(), which return the current width and height of the window.
// These positioning functions are useful, as although you can't create a scroller within a table
// cell, you can set it to hover over the cell -- be inventive with the formulae you use!

// This scrolls a div with an ID 'mainDivContent', which is positioned at (x=50, y=50) and is
// most of the window wide and high. If you want to centre the div, try something like:
// divs[0] = new ScrDiv('mainDivContent', 'page.winW()/2 - 300', 'page.winH()/2 - 200', '600', '400');
divs[0] = new ScrDiv('mainDivContent', '50', '50', 'page.winW() - 150', 'page.winH() - 100');
// Our scrollbar itself is positioned towards the right edge of the window and takes up most
// of the page height.
divs[1] = new ScrDiv('mainDivBar', 'page.winW() - 95', '90', '15', 'page.winH() - 175');
// Don't pass Y or Height thumb settings, these are set automatically when it's dragged.
divs[2] = new ScrDiv('mainDivThumb', 'page.winW() - 94', '', '13', '');


// These are the up and down arrow divs, positioned on resize accordingly...
divs[3] = new ScrDiv('mainDivUpArrows', 'page.winW() - 95', '50', '', '');
divs[4] = new ScrDiv('mainDivDownArrows', 'page.winW() - 95', 'page.winH() - 85', '', '');
// Add divs[5] onwards the same way, to position/show any other DIVs on load and resize.



// Once you've done that, here's some of extra settings to further customise the script.
// Uncomment them and tweak the numbers to see if any are useful.
//
// You can set scroller padding at the top and bottom of loaded files like this:
//padTop = 100;
//padBot = 50;
// If your web host sticks banner ads at the top of every page you load, you could always
// declare 'padTop' to be slightly negative... don't say you heard it from me... :)
//
// Perhaps try this... set to a decimal between 0 and 1 for 'sticky' scrolling mode.
// You might was to set small values on the padding values above if you do this.
//stick = 0.25;
//
// Another useful optional property is minimum thumb height. The default is:
//minThmHeight = 20;
//
// The page object mentioned above can have minimum sizes set. By default, the winW() and winH()
// functions just return the window area, but you can set minima like so:
page.minW = 400;
page.minH = 300;
// I highly recommend doing this otherwise interesting crashes can result when the window sizes
// too small and objects start to overlap and get negative heights etc.



// Next we can assign scroller events. They are 'onbeforeload', 'onload', 'onscroll', 'onsetup',
// 'onlayout', 'onthumbdown' and 'onthumbup'. The load events fire whenever a file is loaded into
// the scroller, and the thumb events whenever you start or stop dragging the thumb. The scroll
// event fires when you scroll or drag, the setup event fires when the scroller is initialised
// but hasn't loaded its first file, and the layout event fires whenever the layout function is
// called (on load and resize). By default, the only one you need is a function to show the
// scroller once it's finished loading a file, and hide the 'loading' message:

onload = loadFunction;

// I've also set the onlayout event to hide and show the scrollbar thumb as needed.
onlayout = thumbVis;
}


// Here's the example onload function, which gets called every time the scroller loads a file
// and shows/hides the appropriate divs. Note it is a property of the scroller and hence we use
// 'with (this)' to get at its other properties. You can just leave this alone, or you can dig
// into the source code and make other functions to show/hide loading messages, light up the
// scroller thumb as it is being dragged, use the onload to build a browsable history etc...


function loadFunction() { with (this)
{
// Hide loading message...
getSty('loadMessage').visibility = 'hidden';
// And show the rest of the divs apart from the scrollbar thumb (which is divs[2]).
// You could modify this function to do the reverse on the 'onbeforeload' event perhaps...?
for (var i = 0; i < divs.length; i++) if (i != 2) divs[i].lyr.vis('visible');
// Now call the layout function (thumbVis) below to show/hide thumb depending on content size.
onlayout();
}}


function thumbVis() { with (this)
{
// Only show the thumb when the actual content height exceeds the clipping area.
// If you want to, hide divs[3] onwards to hide the scrollbar and arrows as well.
divs[2].lyr.vis(div.h() > cHeight ? 'visible' : 'hidden');
}}






// Capture events -- make sure you combine this with any other scripts which also capture these
// events e.g. Popup Menus. You call the .setup() function onload with the name of a default file,
// in this case its readme, but you'll probably want something like "home.html". Alternatively,
// you can pass a blank string "" to scroll the content already in the div, but you must manually
// specify a width on the div below via style="width: xyz" for Netscape 4.
// Note we also call a small 'bug check' function to stop Netscape 4 dying when you resize the
// window. Use this one in preference to the one in my Popup Menu script if you're combining them.


// window.onevent=function(){....} is essentially the same as
// Make sure you don't assign events either way later in your page, otherwise these get overridden.


window.onload = function()
{
mainDiv.setup('dsreadme.html');
}


window.onresize = function()
{
ns4BugCheck();
mainDiv.layout();
}


// Capture mouse movement for dragging. Combine this with other scripts if needed!
// Make sure to capture and route these events for NS4 as we should.
if (isNS4) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);


document.onmousemove = function(evt)
{
var ret = scrThumbMove(evt);
return (ret ? (isNS4?document.routeEvent(evt):true) : false);
}


document.onmouseup = function(evt)
{
scrThumbUp(evt);
if (isNS4) return document.routeEvent(evt);
}



// Check for NS4 resize, reload if that's the case and pass current loaded file as query.var nsWinW window.innerWidth, nsWinH window.innerHeight;
function ns4BugCheck()
{
if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight))
{
// NS4 cannot handle resizes, so reload -- but use URL query mechanism to keep the loaded file.
var fileName = location.href;


// Trim existing URL query string out of the current location, if any. if (fileName.indexOf('?') !-1) fileName fileName.substring(0, fileName.indexOf('?'));
// If you've got multiple scrollers, add the URLs of each and separate with '&' signs.
location.href = fileName + '?mainDiv=' + mainDiv.loadedFile;
}
}









// *** SCROLLING BY KEYPRESS HANDLER - delete this if you want ***


// You must 'hardcode' a scroller name here, as only one can respond to keys.
function scrKeyDown(evt) { with (mainDiv)
{
if (!loaded) return;


// Find the correct event object and property.
var evt = evt?evt:window.event;
var key = evt.keyCode?evt.keyCode:(evt.charCode?evt.charCode:evt.which);


//alert(key);
// Depending on key press (capital || lowercase || function key), scroll div.
// Uncomment the above 'alert(key)' line to figure out your own keycodes.
if (key==84 || key==116 || key==36) scrollTo(0); // 'T', 't' or 'Home'
if (key==83 || key==115 || key==33) scrollBy(0-cHeight); // 'S', 's' or 'PgUp'
if (key==65 || key==97 || key==38) scrollBy(-10); // 'A', 'a' or 'Up'
if (key==90 || key==122 || key==40) scrollBy(10); // 'Z', 'z' or 'Down'
if (key==88 || key==120 || key==34) scrollBy(cHeight); // 'X', 'x' or 'PgDn'
if (key==66 || key==98 || key==35) scrollTo(divHeight); // 'B', 'b' or 'End'
}}


// Capture key presses.
if (isIE) document.onkeydown = scrKeyDown;
else
{
if (isNS4) document.captureEvents(Event.KEYPRESS);
document.onkeypress = scrKeyDown;
}





// *** SCROLLING BY MOUSEWHEEL IN IE6+ *** delete if this isn't needed.


if (isIE) document.onmousewheel = function()
{
// Just call the scrollBy methods of the appropriate scrollers.
// You may wish to adjust the scrolling amount, just change the number.
mainDiv.scrollBy(event.wheelDelta / -3);
// Disable scrolling in the document, as we're handling this event.
return false;
}



code à inserrer dans la page



































































l























[javascript ]









[javascript:void(0) ]






5 réponses

Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007

sans être dans la position de la scroll bar de IE il y a tu un moyen pour enlever la frame et controler la page?
Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007

désolé pour les faute de frappe ****c'était**** problème****
Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007

fautes*
Messages postés
49
Date d'inscription
mercredi 29 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2007

Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
Salut!

On ne peut pas coller d'image dans la scroll bar du navigateur...

Il faut nécessairement utiliser un div, iframe, frame et générer dynamiquement la bar de défillement.

A+, Ghislain