Slide-In Links:: unwanted space between links

**moscarda** · 01-31-2009, 04:26 AM

1) Script Title:
::Slide-In Links

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...lideinlink.htm

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:

http://www.haputnam.com/test/dddock.html

thanks baby baby

**jscheuer1** · 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:

Code:

  <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>
</div>

**moscarda** · 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

**jscheuer1** · 02-01-2009, 01:59 AM

Since you are moving the thing 15 pixels at a time:

Code:

//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:

Code:

//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:

Code:

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

**jscheuer1** · 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:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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;
}
</style>
<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;
(function(){
//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(){
	clearTimeout(tim)
	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);
})();
</script>
</head>
<body>
  <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>
</body>
</html>

**jscheuer1** · 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, 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.