Show-Hide Submenu using CSS and HTML Only

It is common for websites to have submenus under menus. A common behavior for submenus is that it shall only be visible when the main menu is hovered. Below are simple code snippets of doing this with HTML and CSS only (no Javascript). First we'll have the HTML structure. <ul class="menu"> <li><a href="">Menu</a></li> ...

Read more ...

CSS & JavaScript: Modal Dialog

Hi! These are just simple snippets of codes that will allow us to create a modal dialog box. HTML <div id="overlay"> <div> <p>I am a hidden div and will be displayed as a modal!</p> <p>Charlungs!</p> </div> </div> <button onclick='overlay()'>Click</button> CSS #overlay { visibility: hidden; position: absolute; left: 0px; ...

Read more ...

Enable Auto-Complete in Notepad++

I have been using Notepad++ ever since I started working but I have no idea it has an auto-complete feature just like other IDE's. *silly me* So here's how to enable it: Go to Settings. Click on Preferences. Go to Backup/Auto-Completion. Check Enable auto-completion on each input. That's i...

Read more ...

jQuery: Start Date and End Date

We commonly see on websites some input fields that would require us to enter a date range. This means we should be able to select a start date and end date. Of course, start date should always be before the end date and the end date should always be later than the start date. Being a Tech Noob, I have no idea how to do this, especially since web programming isn't really my forte. Fortunately, a lot of helpful tips can...

Read more ...