How would you code this: The SO highlighted button outline effect

Answer 1

If the bar you wish to implement is the orange tool bar then you could design the bar in CSS inside of a div, like , and then you can see I have made the display none which will hide the div element. Then, once you have content you want to put inside of this tool bar you can easily use jQuery to say

$('#flash-notice').text("Text to put into the flash notice").show().fadeOut(5000);

This would set the text, set the display to block which will display the flash div and then you can add features like fadeOut to have the tool bar fade out.

Let me know if this was helpful, I can probably provide more details if needed. Tools used: HTML, CSS (any version is fine), and jQuery.

Answer 2

Make a div with the content and have it hidden by default(css). Then when an event fires, you can make it visible.

Have the [x] trigger a click event that hides the div.

jQuery using show() and hide() would work.

Answer 3

Could you use JQuery to implement this easily? GWT?

You can look up the Tab solution of JQuery tools : http://flowplayer.org/tools/demos/tabs/ajax.html

Taken from their website:

html:

<!-- tabs --> 
<ul class="css-tabs"> 
    <li><a href="ajax1.htm">Tab 1</a></li> 
    <li><a href="ajax2.htm">Second tab</a></li> 
    <li><a href="ajax3.htm">An ultra long third tab</a></li> 
</ul> 

<!-- panes --> 
<div class="css-panes"> 
    <div style="display:block"></div> 
    <div></div> 
    <div></div> 
</div>

js:

$(function() { 

    $("ul.css-tabs").tabs("div.css-panes > div", function(i) { 

        // get the pane to be opened 
        var pane = this.getPanes().eq(i); 

        // if it is empty .. 
        if (pane.is(":empty")) { 

            // load it with a page specified in the tab's href attribute 
            pane.load(this.getTabs().eq(i).attr("href")); 
        } 

    }); 

});

Answer 4

If you are talking about how the tabs change when you hover the mouse over them, that is done entirely with CSS. Using the :hover pseudo-class, the site sets the background to white, and changes the border colours to black on the top three sides, and white on the bottom.

How do I know this? The Firebug Firefox plugin. It allows you to easily inspect the DOM, debug javascript, and look at CSS styles for various page elements. If you learn best by example, Firebug will help a lot.

Specifically, the "#tabs a" elements (anchors that are descendants of an element with ID "tabs"), has the following relevant styles:

#tabs a:hover {
    background:#FFFFFF none repeat scroll 0 0;
    border-color:#777777 #777777 #FFFFFF;
    border-style:solid;
    border-width:1px;
}

#tabs a {
    background:#EEEEEE none repeat scroll 0 0;
    border:1px solid #EEEEEE;
}

(I may be missing some of the changes that actually matter, but those are the basics.

Answer 5

You may find the following A List Apart article interesting, which discusses some of the techniques that can be used to create tab effects using HTML and CSS -

Sliding Doors of CSS

Answer 6

jQuery UI Tabs does what you want.