Need Help with this Dropdown Content

[Maska]

Hi everyone,
I try to use this script for Dropdown Content and i am almost ready except some few errors. I am not an advanced webmaster, so be understanding with me, please...I was try to fix my problem and i work on it about 3 days ago, i make a lot changes on the script with no result...
This is the website where the script is installed : http://www.arcademania.ro and i use Firefox.
If you press the "Test meniu" from the top of the page you will see how it`s work and my problem is evident too: i want to "cut" this grey segment but i don`t know how. If i set the slidedown speed lower(for ex. to 3) this grey portions come out just 1 px height; if i set it to 300, the grey portion come out about 200 px height like right now.
My CSS:

Code: Select all

#dhtmlgoodies_contentBox {
  border:0px solid #317082;
  height:0px;
  visibility:hidden;
  position:relative;
  background-color:#E2EBED;
  overflow:hidden;
  width:960px;
 
}

#dhtmlgoodies_content {
  position:relative;  
  width:100%;
  
}

#dhtmlgoodies_slidedown {
  position:relative;
  width:960px;

My dropDown JS script file:

Code: Select all

var initHeight = 0;
var slidedown_direction = 1;
var slidedownContentBox = false;
var slidedownContent = false;
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3;  // Higher value = faster script
var slidedownTimer = 1; // Lower value = faster script

function slidedown_showHide() {
  if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1;
  if(!slidedownContentBox) {
    slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox');
    slidedownContent = document.getElementById('dhtmlgoodies_content');
    contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight;
  }
  slidedownContentBox.style.visibility='visible';
  slidedownActive = true;
  slidedown_showHide_start();
}

function slidedown_showHide_start() {
  if(!slidedownActive)return;
  initHeight = initHeight/1 + slidedown_direction;
  if(initHeight <= 0) {
    slidedownActive = false; 
    slidedownContentBox.style.visibility='hidden';
    initHeight = 0;
  }
  if(initHeight>contentHeight) {
    slidedownActive = false; 
  }
  slidedownContentBox.style.height = initHeight + 'px';
  slidedownContent.style.top = initHeight - contentHeight + 'px';
  setTimeout('slidedown_showHide_start()',slidedownTimer); 
}

function setslidedownWidth(newWidth) {
  document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px';
  document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';
}

function setSlideDownSpeed(newSpeed) {
  slidedownSpeed = newSpeed;
}

My Header section PHP:

PHP: Select all

<div id="dhtmlgoodies_slidedown">  
  <div id="dhtmlgoodies_contentBox"> 
  <div id="dhtmlgoodies_content"> 
<!-- slide down content goes here --> 
<table cellpadding="0" cellspacing="0" width="960" bgcolor="#FFFFFF" height="100" background="http://www.arcademania.ro/nav_more_bg.gif"> 
    <tr height="100"> 
        <td width="146" align="left"  height="100"> 
<div class='menuzab'>Categoria I</div><br> 
<div class='menuza'> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20SHOOTING/1.html">Jocuri Shooting</a><br> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20DRESS-UP%20VEDETE/1.html">Dress-up Vedete</a><br> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20PUZZLE/1.html">Jocuri Puzzle</a><br> 
</div><br> 
        </td> 
       <td width="185" align="left"  height="100"> 
<div class='menuzab'>Categoria II</div><br> 
<div class='menuza'> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20MASINI/1.html">Jocuri Masini</a><br> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20LOGICA/1.html">Jocuri Logica</a><br> 
<img src="http://arcademania.ro./bullet_blue_right.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/category/JOCURI%20COPII/1.html">Jocuri Copii</a><br> 
</div><br> 
</td> 
<td width="188" height="80" align="left"> 
<div class='menuzab'>Alte Sectiuni</div><br> 
<div class='menuza'> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/page/12.html">Chat Prieteni</a><br> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/users/username/1.html">Membri Nostri</a><br> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/news.html">Stiri-Noutati</a><br> 
</div><br> 
</td> 
<td width="441" height="80" align="left"> 
<div class='menuzab'>Webmasteri</div><br> 
<div class='menuza'> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/links.html">Link Exchange</a><br> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/taf.html">Recomanda Acest Site</a><br> 
<img src="http://arcademania.ro./bullet_orange.gif" align="absmiddle" height="11" width="11"> 
<a href="http://www.arcademania.ro/page/13.html">Reclama pe acest site</a><br> 
</div><br> 
</td> 
    </tr> 
</table> 
                 
  </div> 
  </div> 
</div> 

<script type="text/javascript"> 
setSlideDownSpeed(300); 
</script> 

I put the following code in the Head on Index.php file like Instructions says:

Code: Select all

<script type="text/javascript" src="dropDown.js"></script>

Also, the links from my dropdown content table, dont appear in the I.E.
Finally, the script dont work in other pages, except the home page.
I will be profoundly thankful to any one give me a little sugestion how do i fix my problem!!! Thanks a lot!
P.S. Sorry for my bad english...

[Rakuli]

The reason you are getting such a bit space at the top is because when you are setting the speed

<script type="text/javascript">
setSlideDownSpeed(300);
</script>

this value will be added to the content height each time the function is called.

So it will run only once because it will already be 300 pixels high.

You should change this to something like 10-30px and change

var slidedownTimer = 1; // Lower value = faster script

to something like 10-20.

Cheers..

Absolutely nothing on your page loads in IE Just the starry background.

[Maska]

Originally Posted by Rakuli

The reason you are getting such a bit space at the top is because when you are setting the speed...

Incredible how fast the replays comes from this forum! I wait an answer one week ago from another big forum, but nobody goes to answer me...

Thanks for your sugestion but, i forget to mention my wish: i want to keep this faster speed without the grey space at the top, if this is possible or, if is not, suggest me please another script wich do the same thing, i mean a dropdown content.

Best Regards!

[Rakuli]

You could have the instant opening effect by setting the speed to the height of your content.

In your case, your table is 100px high so set the speed to 100.

The reason for this is that the speed you set is the amount of pixels the box increases each x amount of time.

If this is the only function you want you could have a much simpler script that just changes the display css setting of the box.

Hope that helps.

[Maska]

Originally Posted by Rakuli

If this is the only function you want you could have a much simpler script that just changes the display css setting of the box.
Hope that helps.

You are incredible men! Thanks a lot!!!
It was so simple for you...this is nice....I am very happy and i dont know if a simple "thank you" will be enough...
Please be more exactly , or explain me in other words (becouse of my english) what do you mean with this:"If this is the only function you want you could have a much simpler script that just changes the display css setting of the box."?
This is only function i want, indeed.
Thanks again Rakuli, you do a great job....

[Rakuli]

Okay, what I mean would require you to do the following.

Change the css to something like :

Code: Select all

/* Restore visibility and let the content have natural height */
#dhtmlgoodies_contentBox {
  border:0px solid #317082;
  background-color:#E2EBED;
  overflow:hidden;
  width:960px;
 
}

#dhtmlgoodies_content {
  position:relative;  
  width:100%;
  
}

#dhtmlgoodies_slidedown {
  position:relative;
  width:960px;
  display: none; /* remove the element and its space until changed by javascript */
}

The if you had a simple javascript function:

You can add this to the bottom of your HTML or just add the function to the bottom of that script you have already.

Code: Select all

<script type="text/javascript">

// Send the id of the object you want to toggle
function toggleDisplay(obj)
{
     obj = document.getElementById(obj);
     
// check for current display and adjust accordingly
     if (obj.style.display == 'block')
     
          obj.style.display = 'none';
       else 
          obj.style.display = 'block'; 
}
</script>

Then to the testmeniue link on your page you can add

onclick="toggleDisplay('dhtmlgoodies_slidedown')"

And it should do what you want but with less than half the code.

[Maska]

Originally Posted by Rakuli

Okay, what I mean would require you to do the following...

Like i said, you are incredible!!!
All works PERFECT NOW thanks to you!!!
My links are visible on I.E. and the script work on all of my pages too, not just on the home page
Thanks, thanks, thanks, thanks!!!!

P.S.
I hope you already have a great job with big earnings, becouse you deserve it heartily!

[Rakuli]

Originally Posted by Maska

Like i said, you are incredible!!!

P.S.
I hope you already have a great job with big earnings, becouse you deserve it heartily!

LOL No problems, glad I could help -- the big job with big earnings lies just around the corner......