Jump to content

DHTML menu.

Letterbomb05

By Letterbomb05
in HTML Help

 Share

Recommended Posts

Letterbomb05 Member

Letterbomb05

Posted
Posted

Hi,

 

I'm currently trying to make this menu work the way I want it. It's a DHTML goodies menu, I'm just trying to get it to work in a way I want :P. The menu is made up of HTML, CSS and JavaScript.

 

www.team-recoil.com/testing/menu.htm

 

If you take a look at the page (all source code is there) I have the menu, which slides nicely, but the div that is to the right is below it, and moves with the menu. All I want is for that div to be at the same level as the menu, and not move when the menu is used. Basically I'd just like to have the menu work on its own without effecting anything else.

 

Thanks in advance.

 

Link to comment
Share on other sites
dropfaith Advanced Member

dropfaith

Posted
Posted

wierd i dont fully support this option but i added a table to your page to test something and got it working im tweaking it a bit still but this is a temp fix

 

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Sliding Menu</title>

<style type="text/css">
menu{
float:left;
width:218px;
}



.dhtmlgoodies_question{	
color:#FFF;
font-size:0.9em;
background:red;
width:218px;
margin-top:2px;
background-repeat:no-repeat;
background-position:top right;	
height:20px;
overflow:hidden;
cursor:pointer;
}

.dhtmlgoodies_answer{
background:red;
width:218px;
visibility:hidden;
height:0px;
overflow:hidden;

padding:0;
margin:0;
}

.dhtmlgoodies_answer ul {
list-style:none;
}

.dhtmlgoodies_answer_content{	
font-size:0.9em;	

height:70px;
}

.block {
background:red;
width:400px;
height:80px;
float:right;
margin-top:0px;
}
div.contain {width:626px;background:#00f}
</style>
<script type="text/JavaScript">
var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;

function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=='none'){		
	if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
		objectIdToSlideDown = numericId;
		slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
	}else{

		answerDiv.style.display='block';
		answerDiv.style.visibility = 'visible';

		slideContent(numericId,dhtmlgoodies_slideSpeed);
	}
}else{
	slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
	dhtmlgoodies_activeId = false;
}	
}

function slideContent(inputId,direction)
{

var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
	height = contentObj.offsetHeight;
	rerunFunction = false;
}
if(height<=1){
	height = 1;
	rerunFunction = false;
}

obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
	setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
	if(height<=1){
		obj.style.display='none'; 
		if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
			slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
		}else{
			dhtmlgoodies_slideInProgress = false;
		}
	}else{
		dhtmlgoodies_activeId = inputId;
		dhtmlgoodies_slideInProgress = false;
	}
}
}



function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
	if(divs[no].className=='dhtmlgoodies_question'){
		divs[no].onclick = showHideContent;
		divs[no].id = 'dhtmlgoodies_q'+divCounter;
		var answer = divs[no].nextSibling;
		while(answer && answer.tagName!='DIV'){
			answer = answer.nextSibling;
		}
		answer.id = 'dhtmlgoodies_a'+divCounter;	
		contentDiv = answer.getElementsByTagName('DIV')[0];
		contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
		contentDiv.className='dhtmlgoodies_answer_content';
		contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
		answer.style.display='none';
		answer.style.height='1px';
		divCounter++;
	}		
}	
}
window.onload = initShowHideDivs;
</script>
</head><body>
<div class="contain">

<table><tr><td><div id="dhtmlgoodies_q1" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Lumbridge.Net</strong>
	</div>
</div>
<div style="display: block; height: 70px; visibility: visible;" id="dhtmlgoodies_a1" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac1" class="dhtmlgoodies_answer_content" style="top: 0px;">
		<ul>
			<li><a href="http://www.team-recoil.com/testing/forums/">Forums</a></li>
		</ul>
	</div>
</div>




<div id="dhtmlgoodies_q2" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Calcs</strong>
	</div>
</div>
<div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a2" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac2" class="dhtmlgoodies_answer_content" style="top: -69px;">
		<ul>
			<li><a href="">Skill Calculators</a></li>
			<li><a href="">Mini Games</a></li>
		</ul>
	</div>
</div>

<div id="dhtmlgoodies_q3" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Guides</strong>
	</div>
</div>
<div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a3" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac3" class="dhtmlgoodies_answer_content" style="top: -69px;">
		<ul>
			<li><a href="http://www.team-recoil.com/testing/guides/skills/">Skill Guides</a></li>
			<li><a href="http://www.team-recoil.com/testing/guides/mini-games/">Quest Guides</a></li>
		</ul>
	</div>
</div>
</td>

<div class="block">
	Hi #PHP.
</div>
</td></tr></table>
</div>
</body></html>

Link to comment
Share on other sites
dropfaith Advanced Member

dropfaith

Posted
Posted

ignore my table post  below works i tweaked some things but not too much the only real difference is the div.menus div i created which flaots it to the left cuase them to be on the same line

you can ignore of remove the container div but i like using them as it gives me a bit more control over everything meh i had free time so uhm heres a working code

 

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Sliding Menu</title>

<style type="text/css">
div.menus{
float:left;
width:218px;
}



.dhtmlgoodies_question{	
color:#FFF;
font-size:0.9em;
background:red;
width:218px;
margin-top:2px;
background-repeat:no-repeat;
background-position:top right;	
height:20px;
overflow:hidden;
cursor:pointer;
}

.dhtmlgoodies_answer{
background:red;
width:218px;
visibility:hidden;
height:0px;
overflow:hidden;

padding:0;
margin:0;
}

.dhtmlgoodies_answer ul {
list-style:none;
}

.dhtmlgoodies_answer_content{	
font-size:0.9em;	

height:70px;
}

.block {
background:red;
width:400px;
height:80px;
float:right;
margin-top:0px;
}
div.contain {width:626px;background:#00f}
</style>
<script type="text/JavaScript">
var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;

function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=='none'){		
	if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
		objectIdToSlideDown = numericId;
		slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
	}else{

		answerDiv.style.display='block';
		answerDiv.style.visibility = 'visible';

		slideContent(numericId,dhtmlgoodies_slideSpeed);
	}
}else{
	slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
	dhtmlgoodies_activeId = false;
}	
}

function slideContent(inputId,direction)
{

var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
	height = contentObj.offsetHeight;
	rerunFunction = false;
}
if(height<=1){
	height = 1;
	rerunFunction = false;
}

obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
	setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
	if(height<=1){
		obj.style.display='none'; 
		if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
			slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
		}else{
			dhtmlgoodies_slideInProgress = false;
		}
	}else{
		dhtmlgoodies_activeId = inputId;
		dhtmlgoodies_slideInProgress = false;
	}
}
}



function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
	if(divs[no].className=='dhtmlgoodies_question'){
		divs[no].onclick = showHideContent;
		divs[no].id = 'dhtmlgoodies_q'+divCounter;
		var answer = divs[no].nextSibling;
		while(answer && answer.tagName!='DIV'){
			answer = answer.nextSibling;
		}
		answer.id = 'dhtmlgoodies_a'+divCounter;	
		contentDiv = answer.getElementsByTagName('DIV')[0];
		contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
		contentDiv.className='dhtmlgoodies_answer_content';
		contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
		answer.style.display='none';
		answer.style.height='1px';
		divCounter++;
	}		
}	
}
window.onload = initShowHideDivs;
</script>
</head><body>
<div class="contain">
<div class="menus">
<div id="dhtmlgoodies_q1" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Lumbridge.Net</strong>
	</div>
</div>
<div style="display: block; height: 70px; visibility: visible;" id="dhtmlgoodies_a1" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac1" class="dhtmlgoodies_answer_content" style="top: 0px;">
		<ul>
			<li><a href="http://www.team-recoil.com/testing/forums/">Forums</a></li>
		</ul>
	</div>
</div>




<div id="dhtmlgoodies_q2" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Calcs</strong>
	</div>
</div>
<div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a2" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac2" class="dhtmlgoodies_answer_content" style="top: -69px;">
		<ul>
			<li><a href="">Skill Calculators</a></li>
			<li><a href="">Mini Games</a></li>
		</ul>
	</div>
</div>

<div id="dhtmlgoodies_q3" class="dhtmlgoodies_question">
	<div style="margin: 2px;"><strong>Guides</strong>
	</div>
</div>
<div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a3" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac3" class="dhtmlgoodies_answer_content" style="top: -69px;">
		<ul>
			<li><a href="http://www.team-recoil.com/testing/guides/skills/">Skill Guides</a></li>
			<li><a href="http://www.team-recoil.com/testing/guides/mini-games/">Quest Guides</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block">
	Hi #PHP.
</div>

</div>
</body></html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.