CODEWITHSUNDEEP
jqueryhtmlcssmicrosoft-metro
dufferZafar
dufferZafar

Reputation: 81

Charms bar using Metro UI CSS

I am new to web development.........

I have used Metro UI CSS to create this

I am now trying to emulate a Charms Bar.

I want that when the user clicks on theme button a bar should be displayed on the right containing some controls etc. The bar should hide when it loses focus (user clicks outside the bar).

The Charms bar is added using <div class="charms"> I have also added style="display:none;" so that the bar is not visible on start.

Then I used the following code to show it when the user selects the theme button or text 

$(document).click(function(event) 
{
var $target = $(event.target);
var target = event.target;

if (!target.id.indexOf("theme")) //if the target id contains "theme" then show charms bar
{
    $("div .charms").fadeIn(600)
}

else
{
    if (target.id != "charms")  //if the charms bar itseff is NOT clicked
        $("div .charms").fadeOut(600)
}   
});

I don't like this code because when i click a control in the charms bar, it hides the bar itself.

All i need to do is to create a floating bar, that is visible when the user clicks a button, and hides when the user clicks something else.......

Upvotes: 4

Views: 2162

Answers (1)

Ash
Ash

Reputation: 1422

Are you taking about, Something like this : 

Use Event Like mousemove : to populate Charms bar see below :

See DEMO

Move your mouse to window right.

Upvotes: 2

Related Questions