jquery - Charms bar using Metro UI CSS -

jquery - Charms bar using Metro UI CSS -

i new web development.........

i have used metro ui css create this

i trying emulate charms bar.

i want when user clicks on theme button bar should displayed on right containing controls etc. bar should hide when loses focus (user clicks outside bar).

the charms bar added using <div class="charms"> have added style="display:none;" bar not visible on start.

then used next code show when user selects theme button or text

$(document).click(function(event) { var $target = $(event.target); var target = event.target; if (!target.id.indexof("theme")) //if target id contains "theme" show charms bar { $("div .charms").fadein(600) } else { if (target.id != "charms") //if charms bar itseff not clicked $("div .charms").fadeout(600) } });

i don't code because when click command in charms bar, hides bar itself.

all need create floating bar, visible when user clicks button, , hides when user clicks else.......

are taking about, :

use event mousemove : populate charms bar see below :

see demo

move mouse window right.

jquery html css microsoft-metro