Friday, 30 October 2015

How to bind, unbind and rebind (click) events in JQuery




HTML:
<a id="button" href="#">click</a>
<br><br>
<a id="toggle" href="#">unbind</a>

Script:
$(document).on('click', 'a#button', function(){
    $(this).after('<span> hello</span>');
    $('span').fadeOut(1000);
});

$('a#toggle').toggle(
    function(){
        $(this).text('rebind');
        $('a#button').on('click.disabled', false);
    },
    function(){
        $(this).text('unbind');
        $('a#button').off('click.disabled');
    }
);


Sunday, 18 October 2015

Zen Coding



Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.
Note: For use it; first install “Web Essentials” in Visual Studio.
For example:
div#page>div.logo+ul#navigation>li*5>a
...can be expanded into:
<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Selectors
Shortcut
Description
div#name
<div id="name"></div>
div.name
<div class="name"></div>
div.one.two.
<div class="one two"></div>
div#name.one.two
<div id="name" class="one two"></div>
div>p
<div><p></p></div>
p+p
<p></p><p></p>
p*3
<p></p><p></p><p></p>
p.name-$*2.
<p class="name-1"></p><p class="name-2"></p>
ul
<ul><li></li></ul>
table
<table><tr><td></td></tr></table>
dl
<dl><dt></dt><dd></dd></dl>
p.title|e
&lt;p class="title"&gt;&lt;/p&gt;
p[title]
<p title=""></p>
td[colspan=2]
<td colspan="2"></td>
span[title="Hello" rel]
<span title="Hello" rel=""></span>