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/

April 2, 2014

Using HTML5 Data Annotations for Zipcode and Telephone Numbers

Filed under: ASP.NET MVC,Javascript / JQuery — Duy Nguyen @ 11:22 am
Tags: , , , , , ,

Setup your view model properties with HTML 5 attributes:

[Required]
[DataType(DataType.PhoneNumber)]
public string Phone { get; set; }

[Required]
[DataType(DataType.PostalCode)]
public string ZipCode { get; set; }

Then in your script file, you can have controls use jquery.MaskedInput and also add the bootstrap css class “form-control”

    setupMaskInputs: function () {
        // Any view model property that has a [DataType(DataType.PhoneNumber)] attribute, renders type=tel
        if ($("input[type='tel']").length > 0) {
            $("input[type='tel']").mask("(999) 999-9999? ext.9999", { placeholder: " " });
        }

        // Any view model property that has a [DataType(DataType.PostalCode)] attribute, renders type=zip
        if ($("input[type='zip']").length > 0) {
            $("input[type='zip']").mask("99999?-9999", { placeholder: " " });
        }

        // @Html.EditorFor is used to render any inputs that need the html 5 type attributes.
        // But @Html.EditorFor, won't allow you to add a css class, so we do it here.
        $('input[type=text],input[type=tel],input[type=datetime],input[type=date],input[type=number],input[type=password],textarea,input[type=email],input[type=url],input[type=zip]').each(function (idx, item) {
            if (!$(item).hasClass('form-control'))
                $(item).addClass('form-control');
        });
    }

Blog at WordPress.com.