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!

http://plugins.adchsm.me/slidebars/

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 CSS

https://cdnjs.cloudflare.com/ajax/libs/slidebars/0.10.2/slidebars.css

The Javascript
https://cdnjs.cloudflare.com/ajax/libs/slidebars/0.10.2/slidebars.js

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.

sidemenu3

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

sidemenu1

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

sidemenu2

Here is a live demo.
http://jsfiddle.net/np5y3r0k/1/

Static / Sticky Footer

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

This is the best solution I found so far.

http://mystrd.at/modern-clean-css-sticky-footer/

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>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

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 () {
            PageName.checkboxClick();
        });
    },

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

    checkboxClick: function () {
        if ($("#mycheckbox").is(":checked"))
            this.enableConfirmButton(true);
        else
            this.enableConfirmButton(false);
    }
}

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

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.