View Full Version : Slide-In Links:: unwanted space between links

01-31-2009, 04:26 AM
1) Script Title:
::Slide-In Links

2) Script URL (on DD):

3) Describe problem:
I can't get rid of the annoying padded space between items on this dock... i've tried everything i can think of... maybe the script is generating the extra space?

check out the script in use, and to view the code:


thanks baby baby

01-31-2009, 01:19 PM
If you want no spaces between inline items like images or links, place no spaces between them in your source code, ex:

<div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:transparent;padding: 0px; border: 0px;">
<a href="javascript://" onclick="moveMenu()"><img
src="system/dock_left.gif" border="0" width="16" height="24"></a><a href="#"><img
src="system/dock_bulk.gif" width="128" height="24" border="0"></a><a href="#"><img
src="system/dock_snd_white.gif" width="32" height="24" border="0"></a><a
href="javascript://" onclick="moveMenu()"><img src="system/dock_tab.gif" border="0" width="38" height="24"></a>

02-01-2009, 01:35 AM
thanks but can you check it again, there is still a space after the menu when it slides out

02-01-2009, 01:59 AM
Since you are moving the thing 15 pixels at a time:

//How many pixels should it move every step?
var move=15;

and that works out to be an extra 5 pixels when it's done, that's what you are seeing.

If you were to change that to 5:

//How many pixels should it move every step?
var move=5;

It will work out to be flush with the edge, at least in Firefox. But that will slow it down, so you may also want to change this as shown:

//At what speed (in milliseconds, lower value is more speed)

02-01-2009, 02:38 AM
I played around with this a bit more and found that there is no satisfactory cross browser way to tweak this using the methods I've just outlined.

This version will not allow the menu to go beyond the zero edge:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta name="description" content="A DHTML menu bar that slides out from the left edge of the window.">
<meta name="keywords" content="slide in menu, folding menu">
<title>Dynamic Drive DHTML Scripts- Slide-In Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divMenu {
font-family: arial, helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
position: absolute;
top: 350px;
visibility: hidden;
background-color: transparent
#divMenu a img {
border: none;
#divMenu a {
text-decoration: none;
#divMenu a:hover {
color: red;
body {
margin: 0;
padding: 0;
<script type="text/javascript">
Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
Copyright (C) 1999 Thomas Brattli @ www.dhtmlcentral.com
This script is made by and copyrighted to Thomas Brattli
This may be used freely as long as this msg is intact!
This script has been featured on http://www.dynamicdrive.com
var moveMenu;
//These are the variables you have to set:

//How much of the menu do you want to be visible when it's in the out state?
var lshow = 39;

//How many pixels should it move every step?
var move = 15;

//At what speed (in milliseconds, lower value is more speed)
var menuSpeed = 40;

You should't have to change anything below this.
//Defining variables

var ltop, tim = 0, oMenu,

//Object constructor
makeMenu = function(obj){
this.css = document.getElementById(obj).style;
this.state = 1;
this.go = 0;
this.width = document.getElementById(obj).offsetWidth;
this.left = b_getleft;

b_getleft = function(){return parseInt(this.css.left || 0);},

//Menu in
mIn = function(){
if(oMenu.left() > -oMenu.width + lshow){
oMenu.go = 1;
oMenu.css.left = Math.max(oMenu.left() - move, -oMenu.width + lshow) + 'px';
tim = setTimeout(mIn, menuSpeed);
} else {
oMenu.go = 0;
oMenu.state = 1;
//Menu out
mOut = function(){
if(oMenu.left() < 0) {
oMenu.go = 1;
oMenu.css.left = Math.min(oMenu.left() + move, 0) + 'px';
tim = setTimeout(mOut, menuSpeed);
} else oMenu.state = oMenu.go = 0;
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
moveMenu = function(){
oMenu.state? mOut() : mIn();

Inits the page, makes the menu object, moves it to the right place,
show it
var menuInit = function(){
oMenu = new makeMenu('divMenu');
oMenu.css.left = -oMenu.width + lshow + 'px';
ltop = oMenu.css.top;
oMenu.css.visibility = 'visible';

//Initing menu on pageload
if (window.addEventListener)
window.addEventListener('load', menuInit, false);
else if (window.attachEvent)
window.attachEvent('onload', menuInit);
<div id="divMenu"><a href="javascript:moveMenu();" onclick="moveMenu(); return false;"><img
src="system/dock_left.gif" alt="" width="16" height="24"></a><a href="#"><img
src="system/dock_bulk.gif" width="128" height="24" alt=""></a><a href="#"><img
src="system/dock_snd_white.gif" width="32" height="24" alt=""></a><a href="javascript:moveMenu();"
onclick="moveMenu(); return false;"><img src="system/dock_tab.gif" alt="" width="38" height="24"></a></div>

02-01-2009, 07:00 AM
Oh, and now I see you removed the credit from the script:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

02-02-2009, 02:40 AM
these are just my test pages, i always include all the credits to all the scripts