Hamburger Menu using Weld.io Tutorial

Tutorial on how to create a Hamburger Menu using Weld.io online tool

CodeProject

LocalStorage v/s SessionStorage v/s Cookie

Comparison of different options to save data locally on browser

	Local Storage  (WebStorage)	SqlLite DB deprecated	FileSystem Not checked yet	Session Storage	Cookie (No expiration set)
SCOPE	Domain (no expiry)			Domain and window	Domain and expiry
Max Payload Size (per domain) #	Ch-2.5MB FF-5MB IE10 - 4.7MB	25MB		Ch-2.5MB FF-Unlimited IE10 - 4.7MB	4KB
Available across tabs (same domain)?	Yes			No	Yes
Available on Page Refresh?	Yes			Yes	Yes
Across windows (same domain)	Yes			No	Yes
New Incognito Window (same domain)	No			No	No
Available on close/open same browser?	Yes			No	No (if no expiry)
Goes to server on every request?	No			No	Yes
Compatible on mobile browser?	Yes			??	iOS, Android - Yes Windows - Max 20 BB - Per user
Browser compatibility	Most modern browsers			Most modern browsers	Almost all support
Accessible across site?	No			No	No
Can expiry be set?	No. Doesn't expire auto			No. Auto expire on window close	Yes

CodeProject

JQuery Bind v/s Live v/s Delegate v/s On comparison matrix

	Bind	Live	Delegate	On
Min version required	1.0	1.3	1.4.2	1.5
Recommended	No	Absolute No	Yes	Of course Yes!
DOM changes considertion	No	Yes	Yes	Yes
Custom Events	Yes	Yes	Yes	Yes
Readability	Good	Good	V. Good	V. Good
Cross-Browser	Yes	Yes	Yes	Yes
Revert	Unbind()	Die()	Undelegate()	Off()
Cancel Event Propagation	Yes	No	Yes	Yes
Shortcuts	Yes	No	No	No

Meaning of Labels
- Min Version: Minimum JQuery version that supports this event binder
- Recommended: Recommendation by JQuery site and other prominent community members
- Dom Change Consideration: Does this event binder respects elements  dynamically added later (More on this below)
- Custom Events: Does it allows to trigger custom events (other than standard ones like click etc.)

CodeProject

In which browsers can I use this tag??

If you're like many front end developers who love to use new tags of HTML5, CSS or SVG but unsure of their compatibility in different browsers and platforms, www.caniuse.com is at your rescue (besides W3C schools).

You can search virtually any tag here and it presents a great compatibility matrix. For example, I searched for "article" and it presented me with following:

CodeProject

Talking Smiley with SVG, CSS and JQuery

Intent of this article is to show a simple SVG demo that has CSS and JQuery as icing on the cake

.

SVG = Scalable Vector Graphics

SVG provides a means to create vector graphics using markup language that is almost supported by all major modern web browsers including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari. With giving a touch of scripting language, you can create cool graphics for web. Folowing is the code I wrote for creating SVG & JQuery Smiley . CodeProject

Two column div using simple CSS

This is a fairly simple post on how to align 2 <Div> in parallel to form a 2 column structure.
Imagine, I wish to create a blog system where on left should be an avtar pic while right part contains comment text. Keep it simple, imagine following HTML block:
<div style="float:left; padding-right:20px;">
                <div style="height:30px; width:50px; background-color:Red">avatar</div>
</div>
<div >     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
</div>
This HTML block renders as following:

This looks good. Watch for 3rd line of Lorum ipsum which wraps automatically below avatar pic. This might be an ideal design for many but some may like to see avatar and comment text in their own space (similar to  <TR><TD>avatar</TD><TD>Comment</TD></TR>). In context of above example, something like:

To achieve this, there is a very simple change we need. Just add “padding-bottom:100%” to first div:
<div style="float:left; padding-right:20px;padding-bottom:100%">
That’s it! It might be very useful when you are creating left navigation menu or anything where you wish to have 2 column structure.

CodeProject

Handling CSS with JQuery

1. Modify class at runtime

1.1. If an element has multiple classes attached and you need to remove one of class (say 'oldclass') $(selector).removeClass("oldclass")

1.2. If you want to add a new class to an element (say 'newclass')
$(selector).addClass('newclass')

1.3. If you want to replace one of the class associated with element (say replace 'oldclass' with 'newclass') $(selector).removeClass('oldclass').addclass('newclass')

1.4. If you want to replace all classes with a different class
$(selector).attr('class','newclass') // with this one

2. Notes on using multiple classes.

2.1. If you want to specify multiple classes to an element, separate them with space.
<div class="class1 class2 class3"></div>
OR $('div').addClass('classA classB')
OR $('div').addClass('classA').addClass('classB')

2.2. More than the sequence in which classes are specified in an element, priority is more driven by class appearance in css. For example, consider following:

<style>
.fancy2 {
color:'#ffffff';
background-color:'black';
text-decoration:underline;
}
.fancy {
font-size:19px;
color:orange;
background-color:'blue';
}

</style> <div class="fancy fancy2">Lorem Ipsum</div>
<div class="fancy2 fancy">Lorem Ipsum</div>

For either div, settings will be applied by merging fancy and fancy2 while picking values appearing later in css for common properties. Therefore, both div will have following properties when rendered:
font-size:19px //picked from fancy
color:orange //picked from fancy as it appears after fancy2 in css
background-color:blue //picked from fancy as it appears after fancy2 in css
text-decoration:underline //picked from fancy

3. Using functions to set class If you need to specify class based on some logic, the same can directly be wired while setting css. For example, if(i=1) set 'Class1' otherwise 'Class0' then:
$('div').addClass(function(){return (i==1)? 'class1':'class2'})

4. Alter css property using JQuery - ummm U Can't!
Quiz:
Let's say there is a class 'abc'
.abc { color : 'red' }
and an element with that class
<div id='div1' class='abc'>Lorum Ipsum</div>
Now, what if following is executed in $(document).Ready():
$('.abc').css('color':'yellow')
What color will be displayed for text eventually?
You said "Yellow"? Correct!
Now, What if following line is executed?
$('#div1').removeClass('abc') ??
You said, "No color will be applied"?? ahm!
This time you are likely wrong. You would still see yellow color.
Reason:
When $('abc').css('color','yellow') was applied, an inline property of color=yellow was applied to all elements. when you remove css, that inline property was still there. Hence, yellow!

5. toggleClass('classname') - A sweet shortcut
Everytime ToggleClass('classname') is called on an element, it adds specified class to it (if specified class is not set for element) or otherwise remove that clas (if already set). Hence every alternate call toggles the class.
e.g. css: <style>.abc {color:'red')</style>
element: <div>abc</abc>
jquery: $('div').click(function() {$(this).toggleClass('abc'));
Everytime div is clicked, its class toggles.

6. properties with hyphens like background-color OR text-decoration can be set through .css() function only if they are in quotes. You can also have them as camelcased.
$('div').css(background-color,'yellow') //won't work
$('div').css('background-color','yellow') //works
$('div').css(backgroundColor,'yellow') //works

CodeProject