/    Sign up×
Community /Pin to ProfileBookmark

need to get rid of scrollbar

ive installed a java scroll menu for thumbnails in my gallery here; [url]http://claudiacrobatia.com/portraitscolor.html[/url] but as you can see there is a scrollbar on the bottom of the site which is not supposed to be there. im pretty certain its because of the java menu, like the width of the total thumbnails length is stored there. i hope someone can help me how to get rid of it ? heres the code;

/***********************************************
*
Scrollable Menu Links- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* Visit [url]http://www.dynamicDrive.com[/url] for hundreds of DHTML scripts
*
This notice must stay intact for legal use
**
*********************************************/

//configure path for left and right arrows
var goleftimage=’images/arrowlinks.jpg’
var gorightimage=’images/arrowrechts.jpg’
//configure menu width (in px):
var menuwidth=843
//configure menu height (in px):
var menuheight=75
//Specify scroll buttons directions (“normal” or “reverse”):
var scrolldir=”normal”
//configure scroll speed (1-10), where larger is faster
var scrollspeed=8
//specify menu content
var menucontents='<nobr><a href=”images/portraits/color/1.html” target=”gal”><img src=”images/thumbs/portraitscolor/1.jpg” border=”0″></a> <a href=”images/portraits/color/2.html” target=”gal”><img src=”images/thumbs/portraitscolor/2.jpg” border=”0″></a> <a href=”images/portraits/color/3.html” target=”gal”><img src=”images/thumbs/portraitscolor/3.jpg” border=”0″></a> <a href=”images/portraits/color/4.html” target=”gal”><img src=”images/thumbs/portraitscolor/4.jpg” border=”0″></a> <a href=”images/portraits/color/5.html” target=”gal”><img src=”images/thumbs/portraitscolor/5.jpg”border=”0″></a> <a href=”images/portraits/color/6.html” target=”gal”><img src=”images/thumbs/portraitscolor/6.jpg” border=”0″></a> <a href=”images/portraits/color/7.html” target=”gal”><img src=”images/thumbs/portraitscolor/7.jpg” border=”0″></a> <a href=”images/portraits/color/8.html” target=”gal”><img src=”images/thumbs/portraitscolor/8.jpg” border=”0″></a> <a href=”images/portraits/color/9.html” target=”gal”><img src=”images/thumbs/portraitscolor/9.jpg” border=”0″></a> <a href=”images/portraits/color/10.html” target=”gal”><img src=”images/thumbs/portraitscolor/10.jpg” border=”0″></a> <a href=”images/portraits/color/11.html” target=”gal”><img src=”images/thumbs/portraitscolor/11.jpg” border=”0″></a> <a href=”images/portraits/color/12.html” target=”gal”><img src=”images/thumbs/portraitscolor/12.jpg” border=”0″></a> <a href=”images/portraits/color/13.html” target=”gal”><img src=”images/thumbs/portraitscolor/13.jpg” border=”0″></a> <a href=”images/portraits/color/14.html” target=”gal”><img src=”images/thumbs/portraitscolor/14.jpg” border=”0″></a> <a href=”images/portraits/color/15.html” target=”gal”><img src=”images/thumbs/portraitscolor/15.jpg” border=”0″></a> <a href=”images/portraits/color/16.html” target=”gal”><img src=”images/thumbs/portraitscolor/16.jpg” border=”0″></a> <a href=”images/portraits/color/17.html” target=”gal”><img src=”images/thumbs/portraitscolor/17.jpg” border=”0″></a> <a href=”images/portraits/color/18.html” target=”gal”><img src=”images/thumbs/portraitscolor/18.jpg” border=”0″></a> <a href=”images/portraits/color/19.html” target=”gal”><img src=”images/thumbs/portraitscolor/19.jpg” border=”0″></a> <a href=”images/portraits/color/20.html” target=”gal”><img src=”images/thumbs/portraitscolor/20.jpg” border=”0″></a> <a href=”images/portraits/color/21.html” target=”gal”><img src=”images/thumbs/portraitscolor/21.jpg” border=”0″></a> <a href=”images/portraits/color/22.html” target=”gal”><img src=”images/thumbs/portraitscolor/22.jpg” border=”0″></a> <a href=”images/portraits/color/23.html” target=”gal”><img src=”images/thumbs/portraitscolor/23.jpg” border=”0″></a> <a href=”images/portraits/color/25.html” target=”gal”><img src=”images/thumbs/portraitscolor/25.jpg” border=”0″></a> </nobr>’

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var leftdircode=’onMouseover=”moveright()” onMouseout=”clearTimeout(righttime)”‘
var rightdircode=’onMouseover=”moveleft()” onMouseout=”clearTimeout(lefttime)”‘
if (scrolldir==”reverse”){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write(‘<span id=”temp” style=”visibility:hidden;position:absolute;top:-100;left:-5000″>’+menucontents+'</span>’)
var actualwidth=”
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById(“test2”) : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById(“temp”).offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+”px”
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout(“moveleft()”,50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+”px”
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout(“moveright()”,50)
}

if (iedom||document.layers){
with (document){
write(‘<table border=”0″ cellspacing=”0″ cellpadding=”2″>’)
write(‘<td valign=”middle”><a href=”#” ‘+leftdircode+’><img src=”‘+goleftimage+'”border=0></a> </td>’)
write(‘<td width=”‘+menuwidth+’px” valign=”top”>’)
if (iedom){
write(‘<div style=”position:relative;width:’+menuwidth+’px;height:’+menuheight+’px;overflow:hidden;”>’)
write(‘<div id=”test2″ style=”position:absolute;left:0;top:0″>’)
write(‘</div></div>’)
}
else if (document.layers){
write(‘<ilayer width=’+menuwidth+’ height=’+menuheight+’ name=”ns_scrollmenu”>’)
write(‘<layer name=”ns_scrollmenu2″ left=0 top=0></layer></ilayer>’)
}
write(‘</td>’)
write(‘<td valign=”middle”> <a href=”#” ‘+rightdircode+’>’)
write(‘<img src=”‘+gorightimage+'”border=0></a>’)
write(‘</td></table>’)
}
}

</script>

to post a comment
HTML

9 Comments(s)

Copy linkTweet thisAlerts:
@holyhttpNov 22.2006 — I suspect the H scrollbar is cause by the total width of the thumbnails row which exceed screen width.

the "temp" (span) element could be placed inside a div elemnt with a specified with and height and overflow hidden. Then you can use javascript to create the horizontal scrolling of the thumbnails strip.
Copy linkTweet thisAlerts:
@trickeryauthorFeb 05.2007 — nope, that didn't solve it...

can anybody help me out?
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Feb 05.2007 — Are you getting paid to create this site for someone or is this your own personal site?
Copy linkTweet thisAlerts:
@trickeryauthorFeb 05.2007 — this is my own personal portfolio site ? its the first time ive ever built a website
Copy linkTweet thisAlerts:
@WebJoelFeb 05.2007 — I've installed a java scroll menu for thumbnails in my gallery here;....[/QUOTE]This is "javascript", not "java". -Completely different languages these two.

Now, =having said that ? , -I'll now have a look to see what you are saying...

edit:

What is this?
....<td><img src="spacer.gif" width="1" height="13" /></td>

</tr>

</table>

<table width="787" height="560" border="0" align="center" cellpadding="0" cellspacing="0" background="froeosmm.jpg" style="background-repeat:no-repeat"[B] table[/B]>

<tr>

<td colspan="3"><img src="spacer.gif" width="1" height="46" /></td>

</tr>

<tr>

<td><img src="spacer.gif" width="39" height="0" /></td>

<td align="left" valign="top"><iframe align="top" frameborder="0" height="567" width="700" name="gal" scrolling="no" src="images/portraits/color/28.html" onchange="javascript: function(){l = window.location.href; window.location.replace( l );}"> </iframe></td>

<td>&nbsp;</td>
</tr>

</table>

<p>&nbsp;</p>

</center>

</body>

</html[/QUOTE]
This might be creating another table object. I am showing a mysterious 'outline' on "HTML" that is exactly twice as wide at the opening TABLE...

edit:

I cannot seem to be able to view this 'offline', -the iFRAME calls an image which halts my editor and my browser from loading, -so I am hindered as to assistance for I cannot see what any changes have made. ?
Copy linkTweet thisAlerts:
@WebJoelFeb 05.2007 — Found it:

Add [B]This[/B]:

...var menucontents='<nobr style="[B]overflow:hidden;[/B]"><a href="http://claudiacrobatia.com/images/portraits/color/28.html" target="gal"><img src="http://claudiacrobatia.com/images/thumbs/portraitscolor/28.jpg" border="0"></a> <a href="http://claudiacrobatia.com/images/portraits/color/27.html" target...[/QUOTE]

Seems to work now with IE and Fx. ?

(and upon re-reading this thread, I note that [U]holyhttp[/U] suggested something to this effect...) ?

I might suggest Validation: there are quite a few little things that could be fixed (mostly to do with proper javascript, -instead of hypothetical instance, "document.write</H>" that the 'leftbracket-slash' be 'properly escaped', such as "<[B][/B]/H>", and of course, the usual suspects i.e. proprietary tags.)
Copy linkTweet thisAlerts:
@trickeryauthorFeb 05.2007 — I did as you suggested WebJoel, but it still has the scrollbar; http://claudiacrobatia.com/portraitscolor.html

?

also, what do you mean by validation?

thanks for helping me ?
Copy linkTweet thisAlerts:
@blutterFeb 05.2007 — Validation means you have a little thing look at all the code on your website and make sure you closed all your tags properly and all that. It just checks to make sure your code is perfect, and usually will find quite a few problems your first time doing it. Some are hard to figure out, but usually the errors it returns are pretty helpful. To validate go here:

http://www.w3schools.com/site/site_validate.asp

After you do this and fix all the problems it becomes a whole lot easier to find help. Always do this first, and then seek help, it's the most effective way to get help and sometimes it actually solves your problems.
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Feb 05.2007 — Its actually this part of the script causing the scroll bar. Add the parts in bold.
if (iedom)
document.write('&lt;span id="temp" style="visibility:hidden;position:absolute;top:-100[b]px[/b];left:-5000[b]px[/b]"&gt;'+menucontents+'&lt;/span&gt;')
var actualwidth=''
var cross_scroll, ns_scroll
×

Success!

Help @trickery spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...