Quick CSS trick for drop down menus

Let's assume that you didn't want to use one of the many pre made solutions for creating a drop down menu. And let's assume that you wanted it to be completely CSS (ie no javascript). Well, it's possible and here's how you accomplish it:


<div class="Menu"><ul>
<li class="Header">Head item</li> 
<li class="DropDownItem">Item 1</li>
<li class="DropDownItem">Item 2</li>
</ul></div>

Now we set up our CSS:


.Menu ul .DropDownItem
{
display:none;
}


.Menu ul:hover .DropDownItem
{
display:block;
}


.Menu
{
position: absolute;
}

That's all there is to it. All that you end up having is a couple of lists and whenever the mouse hovers over the list, it makes the hidden items visible. Also we need to make sure to make the menu positioned absolutely. Otherwise we screw up the positioning of all of the other items. But that's all there is to it. No javascript, nothing special, just a drop down menu with minimal work, although to be honest I'm lazy and would just use the pre made solutions... Anyway, use the code, leave feedback, and happy coding.

kick it on DotNetKicks.com   Shout it
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkListEmail

Posted by: James Craig
Posted on: 6/16/2008 at 2:21 PM
Tags: ,
Categories: Web Design
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed

FCKEditor issue with .Net and fix

I've been going through various WYSIWYG editors lately. At work we use KTML (which no longer exists, so no point in looking for it). It use to be a Dreamweaver extension created by InterAKT. To be honest, I have no idea why it was picked over the multitude of other options. And I can say without a shadow of a doubt, that I hate it. It never quite outputs the correct mark up (or at least not what you'd expect), has issues with tables, etc. So I've been looking for other items out there to replace it.

The two items I ended up looking at were TinyMCE and FCKEditor. I currently use TinyMCE on the site here, so I wanted to get a bit more experience with FCKEditor so I could make a decision. Downloaded the code, the .Net adapter, etc. and tried it out. Instantly I was struck with issues when it came to uploading files (and I had set up the config correctly). There is a small issue that you will run into with the connector.aspx file if you're using themes. Specifically, it doesn't have a header. You have to have a header if you're going to use themes. So all you need to do is go into the file and switch


<FCKeditor:Config id="Config" runat="server"></FCKeditor:Config>

to


<FCKeditor:Config id="Config" runat="server"></FCKeditor:Config>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
</head>
</html>

This annoyed me to no end as I wasn't even getting an error message... Anyway, hopefully this helps you out and you don't have to deal with the same issues that I did...

kick it on DotNetKicks.com   Shout it
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkListEmail

Posted by: James Craig
Posted on: 6/12/2008 at 1:05 PM
Tags: ,
Categories: ASP.Net | Web Design
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed

Preventing inadvertent loss of information in ASP.Net

One of the more annoying things with the web is that doing pretty much anything in between when you first start filling out a form and submitting it causes you to lose everything. At least most of the time. And I've known many, many people that have hit the back button only to lose whatever they were working on. So how can we help stop this inadvertent loss of information? Simple, we give them a second chance.

Using javascript (or the confirmbuttonextender in the AJAX Toolkit) we can simply have a confirm box pop up if they hit a button, link, etc. that is going to take them away from the page. But what about instances where they accidentally close the browser? That's where this little extender comes into play:

ChangeConfirmerExtender.zip (1.66 kb)

If you can't tell by now, I'm terrible at naming stuff... And this extender is really basic at that, so you'll have to go in and edit it yourself. But it does give you a good basis for building something more substantial. At present it just attaches itself to a textbox and a submit button. When the textbox's contents are changed, it registers the change. If the person tries to navigate away from the page, close the browser, etc. without hitting the submit button, it asks if the person wants to actually move away from the current page. Pretty basic really. And it wouldn't be that difficult to attach it to a set of inputs. Just switch the target to a div or form or something, find all inputs within said item, attach the _onchange function to each one and that would be it. The rest of the code wouldn't need to change. However, if you wanted to change the text in the popup, you'll have to rewrite the _onunload function. It simply uses the event's preventDefault function to stop the unloading of the page. Anyway, it should give you a good basis upon which to create your own control, so use the code, leave feedback, and happy coding.

kick it on DotNetKicks.com   Shout it
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkListEmail

Posted by: James Craig
Posted on: 6/11/2008 at 1:40 PM
Tags: , ,
Categories: AJAX | ASP.Net | Web Design
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed