Fuck toolbars

[chalkey]

Disregard this post. I'm just saving html practice here so I can keep working on it some other day. For anyone who is wondering, this is the toolbar I want at the top of the page. Well, with practice, of course.

<table border="0"><tr>
<td><a href="http://theanalyticalcouchpotato.com."><img src="http://3.bp.blogspot.com/_1op9qHhf_ys/TMmnChmXhXI/AAAAAAAAAC4/2Ah_GQzb2fo/s1600/home.jpg"></a></td>
<td><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games"><img src="http://1.bp.blogspot.com/_1op9qHhf_ys/TMmnFBPdT9I/AAAAAAAAADI/DgzOmudE_7Q/s1600/video+games.jpg"></a></td>
<td><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/movies"><img src="http://1.bp.blogspot.com/_1op9qHhf_ys/TMmnDV93BhI/AAAAAAAAAC8/h0S51dGf-pY/s1600/movies.jpg"></a></td>
<td><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/television"><img src="http://2.bp.blogspot.com/_1op9qHhf_ys/TMmnEtE6_yI/AAAAAAAAADE/_bI0TAwyiWw/s1600/television.jpg"></td>
<td><a href="http://www.theanalyticalcouchpotato.com/p/our-mission-statement.html"><img src="http://3.bp.blogspot.com/_1op9qHhf_ys/TMmnCexN77I/AAAAAAAAAC0/-BOsrqogtRI/s1600/about+ACP.jpg"></a></td>
</tr>
</table>

[chalkey]

(This is what it looks like. I want to move it up higher and get rid of space, but I'm still learning how to do that.)

Attachments:

[chalkey]

And here's me fucking up the website with no real evidence of intelligent reasoning behind my changes.

Attachments:

[chalkey]

Some more html dump:



<div id="menu_div">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><div align="center">Sort by Author</div></dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20chalkey%20wrote" class="underline">Articles by Chalkey Horenstein</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20nathan%20wrote" class="underline">Articles by Nathan Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20justin%20wrote" class="underline">Articles by Gillian Daniels</a></li>
</div>
</ul>

</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">Sort by Genre</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games" class="underline" target="_blank">Video Games</a></li>
</div>

</ul>
</dd>
</dl>

[chalkey]

This is what comes from that last dump. I'm getting everything except for the actual drop down...

Attachments:

[chalkey]

More practice. This is javascript if anyone cares.








var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d)
{
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1)
{
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight)
{
return
}
else if(!c.maxh)
{
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
else
{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c)
{
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id)
{
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh)
{
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d)
{
var currh = c.offsetHeight;
var dist;
if(d == 1)
{
dist = (Math.round((c.maxh - currh) / DDSPEED));
}
else
{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1)
{
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1))
{
clearInterval(c.timer);
}
}

[chalkey]

PROGRESS YES YES YES

[chalkey]

Getting closer. If you copy and paste this into www.practiceboard.com, you get something!


<script type="text/JavaScript">
var screenwidth = screen.width;

if (screenwidth <= 1024) {
document.write('<link rel="stylesheet" href="1024x768styles.css" type="text/css" media="screen" />');
}
else {
document.write('<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />');
}
</script>
<script type="text/javascript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js"></script>

<div id="menu_div">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><div align="center">Sort by Author</div></dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20chalkey%20wrote" class="underline">Articles by Chalkey Horenstein</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20nathan%20wrote" class="underline">Articles by Nathan Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20justin%20wrote" class="underline">Articles by Gillian Daniels</a></li>
</div>
</ul>

</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">Sort by Genre</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games" class="underline" target="_blank">Video Games</a></li>
</div>

</ul>
</dd>
</dl>

[chalkey]

Well, okay. It worked for like two seconds, and then petered out.

[chalkey]

Slightly revised draft of the previous one. This seems to work for a little while too, but then stop inexplicably.

<script type="text/JavaScript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js">
var screenwidth = screen.width;

if (screenwidth <= 1024) {
document.write('<link rel="stylesheet" href="1024x768styles.css" type="text/css" media="screen" />');
}
else {
document.write('<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />');
}
</script>
<script type="text/javascript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js"></script>

<div id="menu_div">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><div align="center">Sort by Author</div></dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20chalkey%20wrote" class="underline">Articles by Chalkey Horenstein</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20nathan%20wrote" class="underline">Articles by Nathan Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20justin%20wrote" class="underline">Articles by Gillian Daniels</a></li>
</div>
</ul>

</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">Sort by Genre</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games" class="underline" target="_blank">Video Games</a></li>
</div>

</ul>
</dd>
</dl>

[chalkey]

<script type="text/JavaScript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js">
var screenwidth = screen.width;

if (screenwidth <= 1024) {
document.write('<link rel="stylesheet" href="1024x768styles.css" type="text/css" media="screen" />');
}
else {
document.write('<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />');
}
</script>
<script type="text/javascript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js"></script>

<div id="menu_div">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><div align="center">Sort by Author</div></dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20chalkey%20wrote" class="underline">Articles by Chalkey Horenstein</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20nathan%20wrote" class="underline">Articles by Nathan Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20marten%20wrote" class="underline">Articles by Marten Dollinger</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20justin%20wrote" class="underline">Articles by Justin Tokarski</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20jonah%20wrote" class="underline">Articles by JoNAH Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20Gillian%20wrote" class="underline">Articles by Gillian Daniels</a></li>
</div>
</ul>

</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">Sort by Genre</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games" class="underline" target="_blank">Video Games</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/television" class="underline">Television</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/movies" class="underline">Movies</a></li>
</div>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">About Us</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://www.theanalyticalcouchpotato.com/p/acp-staff.html" class="underline" target="_blank">The ACP Staff</a></li>
<li><a href="http://www.theanalyticalcouchpotato.com/p/our-mission-statement.html" class="underline" target="_blank">Our Mission Statement</a></li>
<li><a href="http://www.theanalyticalcouchpotato.com/p/legal-mumbo-jumbo.html" class="underline" target="_blank">Legal Notices</a></li>


</ul>
</dd>
</dl>

[chalkey]

sdfdflksdjflksdjfs Why no work ?!

[chalkey]

More slight revisions.

<script type="text/JavaScript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js">
var screenwidth = screen.width;

if (screenwidth <= 1024) {
document.write('<link rel="stylesheet" href="1024x768styles.css" type="text/css" media="screen" />');
}
else {
document.write('<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />');
}
</script>
<script type="text/javascript" src="https://sites.google.com/site/ddroyshtmlpractice/menu_script.js"></script>

<div id="menu_div">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><div align="center">Sort by Author</div></dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20chalkey%20wrote" class="underline">Articles by Chalkey Horenstein</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20nathan%20wrote" class="underline">Articles by Nathan Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20marten%20wrote" class="underline">Articles by Marten Dollinger</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20justin%20wrote" class="underline">Articles by Justin Tokarski</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20jonah%20wrote" class="underline">Articles by JoNAH Comstock</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/stuff%20Gillian%20wrote" class="underline">Articles by Gillian Daniels</a></li>
</div>
</ul>

</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><div align="center">Sort by Genre</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul><div align="center">
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/video%20games" class="underline" target="_blank">Video Games</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/television" class="underline">Television</a></li>
<li><a href="http://theanalyticalcouchpotato.blogspot.com/search/label/movies" class="underline">Movies</a></li>
</div>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div align="center">About Us</div></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><div align="center">
<li><a href="http://www.theanalyticalcouchpotato.com/p/acp-staff.html" class="underline" target="_blank">The ACP Staff</a></li>
<li><a href="http://www.theanalyticalcouchpotato.com/p/our-mission-statement.html" class="underline" target="_blank">Our Mission Statement</a></li>
<li><a href="http://www.theanalyticalcouchpotato.com/p/legal-mumbo-jumbo.html" class="underline" target="_blank">Legal Notices</a></li>


</ul>
</dd>
</dl>

Read more: acpedboard.proboards.com/index.cgi?board=cas&action=display&thread=24#ixzz1BQzFWvE0

[chalkey]

hijacking thread to post a link to the solution:
hyperjadulz.blogspot.com/2009/05/how-to-create-drop-down-navigation-menu.html

eventually i'll get around to fixing the css, but for now it's good enough.