Demo Dynamic HTML - Scrollbar e IFrame

Scrollbar e IFrame

Compatibilidad: Ms Internet Explorer, Netscape

Las nuevas recomendaciones de HTML 4.0 prevén la marca <IFrame> para crear ventanas independientes dentro de los documentos HTML. Dynamic HTML nos permite hacer que dichas ventanas sean todavía más bonitas y útiles.
Esta demo muestra una página dentro de la cual hay una ventana. Dentro de dicha ventana se cargan los archivos: "text1.htm", "text2.htm" e "text3.htm", los cuales están presentes en el archivo zipado.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

// Scroll Bar Setup Variables
scrollLeft = 100
scrollTop = 190
scrollNestLeft = 0		// left position of parent layer, 0 if none
scrollNestTop = 0		// top position of parent layer 0 if none
scrollWidth = 400
scrollHeight = 180
scrollBarWidth = 12
scrollBoxHeight = 30
scrollArrowHeight = 12
scrollMarginLeft = 10
scrollMarginRight = 10
scrollMarginTop = 10
scrollMarginBottom = 10
scrollBorder = 1    // width of the border, set to 0 for no border
scrollBorderColor = "#000000"
scrollBarColor = "#B0C1D2"
scrollBoxColor = "#156FAA"   // use "none" for transparent
scrollArrowColor = "#808080"
scrollTextBGColor = "#FFFFFF"
scrollFirstPage = "text1.html"

// Scroll Bar Miscellaneous Variables
scrollLoaded = 0
scrollActive = 0
scrollArrowActive = 0
scrollDownActive = 0
scrollYold = 0
scrollClickY = 0
scrollBarHeight = scrollHeight-2*scrollBorder-scrollBoxHeight-scrollArrowHeight

function init() {
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
	if ((n && e.which == 1) || ie) {
		if (n) {var x=e.pageX; var y=e.pageY}
		if (ie) {var x=event.x; var y=event.y}
		scrollMouseDown(x,y)
	}
}

function mouseMove(e) {
	if (n) {var x=e.pageX; var y=e.pageY}
	if (ie) {var x=event.x; var y=event.y}
	if (scrollLoaded && scrollActive) {
		scrollMouseMove(x,y)
	}
	if (scrollActive || scrollArrowActive) return false
}

function mouseUp(e) {
	scrollActive = 0
	scrollArrowActive = 0
	scrollDownActive = 0
}

function scrollMouseDown(x,y) {
	if (scrollLoaded && scrollFactor<0 && x>=scrollLeft+scrollNestLeft+scrollWidth-scrollBarWidth-scrollBorder && x<(scrollLeft+scrollNestLeft)+scrollWidth-scrollBorder && y>=(scrollTop+scrollNestTop)+scrollBorder && y<(scrollTop+scrollNestTop)+scrollHeight-scrollBorder) {
		if (y>=scrollTop+scrollNestTop+scrollBorder+scrollbox.y && y<(scrollTop+scrollNestTop)+scrollBorder+scrollBoxHeight+scrollbox.y) {  // scrollbox
			scrollClickY = y-scrollbox.y
			scrollYold = y
			scrollActive = 1
		}			
		else if (y<scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight) {  // up arrow
			scrollArrowActive = 1
			scrollArrowDir = 1
			scrollArrowSlide()
		}
		else if (y>=scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight) {  // down arrow
			scrollArrowActive = 1
			scrollArrowDir = -1
			scrollArrowSlide()
		}
		else {
			if (y<=scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight+scrollBoxHeight/2) {  // jump top
				scrollbox.moveTo(0,scrollArrowHeight)
			}
			else if (y>scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight-scrollBoxHeight/2) {  // jump bottom
				scrollbox.moveTo(0,scrollBarHeight)
			}
			else { // jump middle
				scrollbox.moveTo(0,y-scrollTop-scrollNestTop-scrollBorder-scrollBoxHeight/2)
			}
			scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
			scrollClickY = y-scrollbox.y
			scrollYold = y
			scrollActive = 1
		}
	}
}

function scrollMouseMove(x,y) {
	var diff = y-scrollYold
	if ((scrollbox.y>scrollArrowHeight && scrollbox.y<scrollBarHeight) || (scrollbox.y==scrollArrowHeight && diff>=0) || (scrollbox.y==scrollBarHeight && diff<=0)) {
		if ((scrollbox.y>scrollArrowHeight && scrollbox.y+diff<scrollArrowHeight) || (scrollbox.y<scrollBarHeight && scrollbox.y+diff>scrollBarHeight)) {
			if (scrollbox.y+diff<scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight)
			else if (scrollbox.y+diff>scrollBarHeight) scrollbox.moveTo(0,scrollBarHeight)
			scrollYold = scrollbox.y+scrollClickY
		}
		else {
			scrollbox.moveTo(0,y-scrollClickY)
			scrollYold = y
		}
		scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
	}
}

function scrollArrowSlide() {
	if (scrollArrowActive) {
		if ((scrollArrowDir==1 && scrolltext.y<scrollMarginTop-5) || (scrollArrowDir==-1 && scrolltext.y>-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight-5))) {
			scrolltext.moveBy(0,scrollArrowDir*5)
			scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
			setTimeout("scrollArrowSlide()",20)
		}
		else {
			if (scrollArrowDir==1) scrolltext.moveTo(scrolltext.x,scrollMarginTop)
			else if (scrollArrowDir==-1) scrolltext.moveTo(scrolltext.x,-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight))
			scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
		}
	}
}

function loadSource(page) {
	scrollLoaded = 0
	if (n) document.scrollWindow.document.scrollTextWindow.src = page
	if (ie) parent.scrollTextFrame.document.location = page
}

function scrollResize() {
	scrolltext = new dynLayer("scrollTextDiv","scrollWindow.document.scrollTextWindow","scrollTextFrame")
	scrollbox = new dynLayer("scrollBoxDiv","scrollWindow.document.scrollBar")
	scrollFactor = -(scrolltext.height+scrollMarginTop+scrollMarginBottom-scrollHeight+2*scrollBorder)/(scrollBarHeight-scrollArrowHeight)
	scrollbox.moveTo(0,scrollArrowHeight)
	scrollLoaded = 1
}

// Dynamic Layer Object with width and height and frameref (for IE)
function dynLayer(id,nestref,frameref) {
	if (n) {
		if (nestref) {
			this.css = eval("document." + nestref + ".document." + id)
			this.ref = eval("document." + nestref + ".document." + id + ".document")
		}
		else {
			this.css = document.layers[id]
			this.ref = document.layers[id].document
		}
		this.x = this.css.left
		this.y = this.css.top
		this.width = this.ref.width
		this.height = this.ref.height
	}
	else if (ie) {
		if (frameref) {
			this.css = parent.frames[frameref].document.all[id].style
			this.ref = parent.frames[frameref].document
		}
		else {
			this.css = document.all[id].style
			this.ref = document
		}
		this.x = this.css.pixelLeft
		this.y = this.css.pixelTop
		this.width = this.ref.all[id].offsetWidth
		this.height = this.ref.all[id].offsetHeight
	}
	this.obj = id + "Object"
	eval(this.obj + "=this")
	this.moveBy = dynLayerMoveBy
	this.moveTo = dynLayerMoveTo
	this.show = dynLayerShow
	this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
	this.x += x
	this.css.left = this.x
	this.y += y
	this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
	this.x = x
	this.css.left = this.x
	this.y = y
	this.css.top = this.y
}
function dynLayerShow() {
	if (n) this.css.visibility = "show"
	else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
	if (n) this.css.visibility = "hide"
	else if (ie) this.css.visibility = "hidden"
}

//-->
</SCRIPT>

</HEAD>

<A HREF="javascript:loadSource('text1.html')">Primera página</A>
<A HREF="javascript:loadSource('text2.html')">Segunda página</A>
<A HREF="javascript:loadSource('text3.html')">Tercera página</A>

<SCRIPT LANGUAGE="JavaScript">
document.writeln('<STYLE TYPE="text/css">');
document.writeln('<\!--');
document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+'; width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}');
document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+'; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+'; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+'; top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');
document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+'; layer-background-color:'+scrollBarColor+';}');
if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}');
else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+'; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0); background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}');
document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+'; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('-->');
document.writeln('</STYLE>');
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>')
</SCRIPT>

</DIV>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]