Le Zbire
Messages postés49Date d'inscriptionmercredi 29 juin 2005StatutMembreDernière intervention21 novembre 2007
-
20 sept. 2005 à 23:10
Le Zbire
Messages postés49Date d'inscriptionmercredi 29 juin 2005StatutMembreDernière intervention21 novembre 2007
-
21 sept. 2005 à 21:32
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 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) }
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;
}
// 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.
// 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;
}
