My Programming Tricks

Caveman Blogger

The previous drop down menu was not able to be converted to "drop-right" menu. This is used instead:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<style>
#menu {width: 100px; background: #eee;}
#menu ul {list-style: none; margin: 0; padding: 0;}
#menu li {position: relative;}
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%;}
#menu ul ul {display: none;}
#menu ul li:hover ul {display: block;}
.butlook {display: block; border-width: 1px; border-style: solid; border-color: #ddd; margin: 0; padding: 3px 3px; font-size: 12px; font-family: tahoma;}
</style>

<body>


<div id="menu">

 <ul>
  <li class="butlook">Menu 1
  <ul>
   <li class="butlook">Menu 1 Item 1
   <li class="butlook">Menu 1 Item 2
  </ul>
  </li>
 </ul>
 <ul>
  <li class="butlook">Menu 2
  <ul>
   <li class="butlook">Menu 2 Item A
   <li class="butlook">Menu 2 Item B
  </ul>
  </li>
 </ul>

</div>

</body>

Such method is important as it is widely used nowadays. It's heavily used in facebook if one hasn't noticed it yet. Although it is not exactly the same, but it is all about using the CSS with the <UL>. What's next? Flip left/right image like iphone trick? I have codes with me but I haven't compiled it up yet. Stay tuned?

Caveman Blogger

Here are the sample codes in HTML and CSS (important code shown in red):



<style type="text/css">

#main_menu ul {padding: 0; position: absolute;}

#main_menu li {float: left; position: relative; }

#main_menu a {text-decoration: none;}



.main_item {list-style: none; border: 1px solid black; background-color: #DDEEFF; text-decoration: none;}

.item {list-style: none; border: 1px solid black; background-color: #FFEEDD; width: 100%; text-decoration: none; text-align: center;}



#main_menu li:hover ul, li.over ul {display: block;}

.sub_menu {display: none; left: 0; position: absolute;}



</style>



<body>



<ul id="main_menu">



<li class="main_item">

<a href="">  Main Item 1  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item A</a></li>

 <li class="item"><a href="">Test Item B</a></li>

 <li class="item"><a href="">Test Item C</a></li>

 <li class="item"><a href="">Test Item D</a></li>

</ul>

</li>



<li class="main_item">

<a href="">  Main Item 2  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item E</a></li>

 <li class="item"><a href="">Test Item F</a></li>

 <li class="item"><a href="">Test Item G</a></li>

 <li class="item"><a href="">Test Item H</a></li>

</ul>

</li>



</ul>





</body>

I was always amazed by how people use <UL> with CSS to create drop down menu as I always use layers with visibility in CSS to create menu. After knowing this trick using <UL> with CSS, it's a lot simpler than the method I used formerly.

In fact, <UL> can easily forced to line up items next to each other by using this simple CSS:

float: left;

without this CSS, items will line up vertically downward like traditional bullets (<UL> or <OL>).

After that, how do we control the event without using onmouseover event checker? We use this li:hover ul and li.over ul in CSS.

Basically, very simple. It's just a matter of manipulating the display parameter in CSS. When display: block, it is similar to asking the browser to SHOW; whereas, display: none is to ask the browser to HIDE. It's similar to Javascript's hidden and visible function.

Anyway, another sample is required to make this demo easier to under: making a "drop-right" modified from these codes. Stay tuned! (Update: Cannot be done, need to work around as in the coming example)

Note: Firefox needs this to hide the bullets: list-style: none;
Note2: In order for IE to work properly using these codes, you need to declare the doctype as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Caveman Blogger

user_agent = request.servervariables("HTTP_USER_AGENT")

if InStr(user_agent,"MSIE") > 0 then
position = "absolute"
else
position = "fixed"
end if

These codes above is good to sniff out IE with the rest of the browser in ASP.

Caveman Blogger

It's common to create a "mask" layer on top of the page in order to display photos, pop-up messages, etc.

I used to used the "absolute" positioning to do the job under I lately discovered the so called "masked" will move if there is a scroll bar (when shrinking the window's size).

This problem can be easily solved by just setting the DIV to "fixed" position.

Another problem solved! But wait a minute. This solution doesn't work in IE! Let me see if there is a workaround for this...

After trying setting the DOCTYPE to something else such as

It does work on all browsers but all the positions are not in place as desired. Better use a sniffer to sort IE out of using the "fixed" position.

Caveman Blogger

I've tried %%, it doesn't work.

So after googling around still no result.

After that I thought about printing special character using ASP and look up the ASII code table, I came out with this solution:

MyString = "<td width=100" & chr(37) & ">"
.
.
.
print MyString

Walla! Problem solved!

Caveman Blogger

It's been a while since my last posting. Busy, busy, busy!

Anyway, while installing IIS to my notebook with Windows Vista, I got this Error 500.19. This problem did not pop up during my installation on a Windows 7 PC.

Here's the solution:

I just added a IIS_IUSRS user to the root folder of the IIS, everything is fixed!

Before this, one needs to remember to turn of the Apache if you happen to run it and got a message of access problem to the directory of your web files.

Good luck everyone and I'm glad to be back!!!

Update: Now I get this problem:

Microsoft JET Database Engine error '80004005'

Unspecified error

/Default.asp, line 55

My Programming Tricks

Labels

Saturday, December 11, 2010

Drop "Right" Menu Simple Solution Using UL(Un-numbered List) + CSS

Wednesday, December 8, 2010

Drop Down Menu Simple Solution Using UL(Un-numbered List) + CSS

Monday, December 6, 2010

ASP Sniffer Out IE Sample Codes

DIV mask layer not fully covered on top when there is a scroll bar

Sunday, December 5, 2010

How to Print % (percentage sign/symbol) in ASP?

Wednesday, December 1, 2010

Server Error: HTTP Error 500.19 - Internal Server Error