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>

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]-->

September 5, 2013

When needing to override some CSS without using !important

Filed under: CSS / Styling — Duy Nguyen @ 10:15 pm
Tags: ,

Styling that has been applied with global CSS Classes can be overridden if you add an ID attribute to the containing span or div.

April 9, 2013

Vertically Align Checkbox Next to a Div with an Image

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

Check out this fiddle.

http://jsfiddle.net/eBY6Y/4/

March 28, 2013

Padding against an empty div

Filed under: CSS / Styling — Duy Nguyen @ 2:56 pm
Tags: , , , ,

Some times you need to “push” against an empty div, you can use a div with an empty value like this.

<div style="padding-bottom:50px"></div>
<div>&nbsp;</div>

September 5, 2011

CSS Precedence

Filed under: CSS / Styling — Duy Nguyen @ 1:31 pm
Tags: , , ,

From MSDN:

Precedence of CSS Style Rules:

CSS style rules cascade in the sense that global style rules continue to apply to HTML elements unless local style rules supplant them. In general, local style rules take precedence over general style rules. This means, for example, that a style defined in a STYLE block within a Web page can revise for that one page a Web site style defined in an external CSS style sheet. Similarly, an in-line style defined within a single HTML tag on that page can revise for one line any styles defined for that same element elsewhere.
Portions of global style rules not contradicted by local CSS style rules will continue to apply to HTML elements even after local styles are applied. In the example above, the local CSS styles governing text between <H1> tags replace some of the Web browser’s global style rules for <H1> text (center <H1> text and make it red), but they do not change others (display all <H1> text in a larger font and bolded). Both global and local style rules are applied, in that order, making all the <H1> text on this page display in a larger font and bolded, and centered and red.

Here is a great link about weighing CSS specificity.
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

September 2, 2011

Skipping Assembly Strong Name Validation

You can disable strong name valildation on an assembly using the Strong Name tool that comes with Visual Studio.

Open the Visual Studio Command Prompt. This should be available on Start, All Program Files, Visual Studio 200x, Visual Studio Tools.

At the command prompt:
SN -Vr “c:\location of the assembly\myassembly.dll”

To re-enable verification:

SN -Vu “c:\location of the assembly\myassembly.dll”

Create a free website or blog at WordPress.com.