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/

Advertisements

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>

December 7, 2014

Adding Cookies to Response, adds to the Request – Removing cookies from the Request

Filed under: ASP.NET MVC,HTML — Duy Nguyen @ 10:42 am
Tags: , , , ,

I don’t know why but when you add cookies to the RESPONSE, it seems to add the same cookie to the REQUEST. I was able to pin point this because I notice in my request, I had a bunch of cookies that I had previously expired from the response. Typically, when you expire cookies, you set the expire date time and add it back into the response.

Also, make sure you remove a cookie from the request AFTER you expire the cookie from the response. Otherwise, the cookie will still be available in the Request later in the process cycle.

April 10, 2014

Twitter Bootstrap 3 Style DateTime Picker

Filed under: CSS / Styling,HTML — Duy Nguyen @ 9:48 pm
Tags: , , , ,

Here is a working example using eonasdan‘s version.

https://github.com/Eonasdan/bootstrap-datetimepicker

http://jsfiddle.net/QM8eC/7/

February 12, 2014

Check if Browser is IE and Which Version of IE with HTML

Filed under: CSS / Styling,HTML — Duy Nguyen @ 8:16 pm
Tags: , , , , ,

Check if the browser is using IE8

<!--[if IE 8]> 
	<script src="_ie8.js"></script>
<![endif]-->

This stylesheet will only display to IE9 or above, along with every other non-IE browser. Notice opening and closing expressions are wrapped in comments.

<!--[if gt IE 8]><!-->
	<script src="_nonIe8.js"></script>
<!--<![endif]-->

**Make sure the src path reference begins with a slash (/scripts/myscript) and not use the root tilde reference. This (~) doesn’t seem to work within the conditional hthml.

Reference: http://www.impressivewebs.com/conditional-comments/
Reference: http://reference.sitepoint.com/css/conditionalcomments

HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries. This is for Bootstrap 3 support.

<!--[if lt IE 9]>
	<script src="~/../Scripts/html5shiv-3.7.0.js"></script>
	<script src="~/../Scripts/respond.min-1.4.2.js"></script>
	<link href="~/../Content/bootstrap-glyphicons.css" rel="stylesheet" />
<![endif]-->

Create a free website or blog at WordPress.com.