a developer's notes – a semi-technical web development BLOG

May 30, 2015

Example Slide Menu using Slidebars

Filed under: CSS / Styling,HTML — Duy Nguyen @ 12:50 pm
Tags: , , , ,

I’ve been looking for an easy way to implement a side menu that works with Bootstra’s navbar. Here is a great plugin to use!


To use this, you just need to add in the Slidebar css and javascript file to your page.  You can also use a cdn:



The Javascript

The trick is to disable Bootstrap’s mobile menu click. You can achieve this by removing the attribute, data-toggle=”collapse” from your button. (I just added a ~tilde to the value like this, data-toggle=”~collapse”, so that I can disable it.) At full view, the Bootstrap navbar drop down menus still work. But the mobile menu will slide out a new menu similar to how a mobile app works.


When the view port is small enough, the Bootstrap mobile menu will appear. And when you click on this, your side menu will appear!


I also added a second button to show how I would toggle another side menu.


Here is a live demo.

Static / Sticky Footer

Filed under: CSS / Styling,HTML — Duy Nguyen @ 9:38 am
Tags: , , ,

This is the best solution I found so far.


The CSS.

html {
    position: relative;
    min-height: 100%;
body {
    margin: 0 0 100px; /* bottom = footer height */
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;

Here is how you would use it.

<!DOCTYPE html>
    <article>Lorem ipsum...</article>

May 15, 2015

Have Visual Studio build your MVC Views to check for errors.

Filed under: ASP.NET MVC — Duy Nguyen @ 5:41 pm
Tags: , , , ,

Step 1

Unload Project – Right click on project in solution explorer, select Unload Project.
Step 2

Edit Project – Right click and select ‘Edit Project and project XML will load in the editor window.
Step 3

Find false in Project XML file and change this to true.
Step 4

Save the Project XML file.
Step 5

Reload Project – Right click on the project and select ‘Reload Project’.

Now when Project compiles, views will also be compiled.

May 13, 2015

Javascript Namespace Function Expression Sample

Filed under: Javascript / JQuery — Duy Nguyen @ 12:05 pm
Tags: , ,

A sample of how to structure your JS file per page. This works good for organizational purposes and it will avoid name clashing.

var PageName = {

// define your functions as variables.
    bindCheckBox: function () {
        $("#mycheckbox").on("click", function () {

    enableConfirmButton: function (bool) {
        if (bool)
            $("#mybutton").attr("disabled", "disabled");

    checkboxClick: function () {
        if ($("#mycheckbox").is(":checked"))

// Start of document.ready in jquery
$(function () {
    // calling the global variable you created.

If you want to use an Immediately Invoked Function Expression (IIFE)

(function() {
     // This creates a function that invokes itself with NO GLOBAL FUNCTIONS.

Create a free website or blog at WordPress.com.