how have immitate the scrollbar?

[davidklonski]

Hello

I have some html content that is displayed inside an IFrame.
Sometimes the content is larger (vertically) than the height of the IFrame.
I don't want the IFrame to have a scrollbar, because it looks ugly.
Is there a way to add two arrow buttons (one at the top and one at the bottom), so when the user will click the top button, the frame will scroll up and if the user will click the bottom button, the frame will scroll down?

Basically I am trying to immitate the scrolling effect that the scrollbar has, but without the scrollbar.

BTW, the solution should work on IE5.5 and above.

thanks in advance

[ziffgone]

Here you go, copy and paste this into the page being displayed within the iFrame. You can replace the "Up/Down" text, indicated by the code in Dark Red, with Arrow images or the like.


<div id="staticbuttons" style="position:absolute;">
<p align="center"><a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">
<font style="color:#000000;font-weight:bold;font-size:12">Up</font></a><hr color="#000000">
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><font style="color:#000000;font-weight:bold;font-size:12">Down</font></a></p></div>

<script>

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>


Hope that helps.

[stowjam]

Hi I have a similar issue
I am buildng a site with text in a table which i would like to scroll up or down very simply with an arrow up and down image
I am having probs finding code to do this
Help
best regards Jaimie Lisa Stow

[CrazyMerlin]

@stowjam...

is it the entire table you wish to scroll, or just the contents while keeping a header?

if you don't have a header it is much simpler.

[stowjam]

Hi
it is just the info in the cell within the table if i can do it that way
otherwise i dont really have any constraints
thanks in advance
Jaimie

[Dok]

You don't need JavaScript for this. See the CSS overflow property.