Entries Tagged as 'CSS'

Simple Triangles with CSS

CSS No Comments »

Recently, I had to create JavaScript-based replacements for 2 Java applets in an application I inherited.  One of the applets was a collapsible hierarchy tree of organizational units that used the conventional triangle icons (pointing right for closed, pointing down for open) to indicate state.

In past applications, I'd simply created actual triangle icons of the appropriate color for this sort of thing, but this time I decided I wanted to do it in pure CSS.


Simple Technique For Creating Multiple Twitter Bootstrap Popovers

CSS , JavaScript , jQuery , Twitter Bootstrap , Web development 18 Comments »

One of the JavaScript/jQuery plugins that comes with Twitter Bootstrap is the Popover plugin, which lets you create windows of content that appear when you hover over or focus on a DOM element.  They behave like tool tips but are larger and better suited to support styled content.

popover example

As noted in the documentation, the title and content of an individual popover can be coded in one of three ways:  via HTML attributes within the DOM element that triggers the popover, by assiging text values to the title and content properties when applying popover functionality to the DOM element, or by assigning functions that return markup to those title and content properties.  Here's an example of the last of those options:

        title: getPopTitle(),
        content: getPopContent()

function getPopTitle() {
    return "Title 1";
function getPopContent() {
    return "Content 1";

The page I was working on needed to have several popovers, and the popover content included styled text: paragraphs, bolded text, etc. I didn't want to have to put that content into HTML attributes or long string values, nor did I want to code several different invocations of the popover function.

So what I decided to do was to create hidden blocks of HTML to hold the popover content and associate each set of "content" (title and content) with a unique id:

    .popSourceBlock {

<div id="pop1_content" class="popSourceBlock">
    <div class="popTitle">
        Title 1
    <div class="popContent">
        <p>This is the content for the <strong>first</strong> popover.</p>

<div id="pop2_content" class="popSourceBlock">
    <div class="popTitle">
        Title 2
    <div class="popContent">
        <p>This is the content for the <strong>second</strong> popover.</p>

Then I assigned ids to the DOM objects that would trigger the popups when hovered over and gave them a CSS class of "pop". I opted to use one of the icons provide by Bootstrap to trigger the various popovers:

<i id="pop1" class="icon-question-sign pop"></i>
<i id="pop2" class="icon-question-sign pop"></i>

Finally, I used jQuery's each() function to loop through all the DOM elements with a class of "pop", grab the id value and use that to locate the matching content to associate with each popover:

$(".pop").each(function() {
    var $pElem= $(this);
          title: getPopTitle($pElem.attr("id")),
          content: getPopContent($pElem.attr("id"))
function getPopTitle(target) {
    return $("#" + target + "_content > div.popTitle").html();
function getPopContent(target) {
    return $("#" + target + "_content > div.popContent").html();

With this code in place, I can add new popovers by creating additional hidden HTML blocks and DOM elements with the "pop" CSS class and an id that follows the pattern I've established.

Another nice aspect to this is that, down the road, I could put the page with the HTML blocks in a directory where a web designer or even a client with some basic HTML skills could edit the content, and I could call that file into my page programmatically. So long as they didn't add new content blocks, they could tweak the wording of the content without having to call me to do it (assuming I can trust them not to mess up the HTML formatting).

Bootstrap Tip About Using Tabs and Modals Together

CSS , JavaScript , jQuery , Miscellaneous , Twitter Bootstrap , Web development 3 Comments »

I'm using Twitter Bootstrap on my current project at work, and I'm building a page that uses both the modal and tab JavaScript/jQuery plugins.  Both of those plugins working by employing a combination of specific HTML/CSS markup and JavaScript functions that interact with that markup.

I found out today that where you put the HTML for your modals could have an impact on how they function.  Originally, I had the HTML for the modal boxes related to the first tab on my page contained within the content <div> for that first tab, and the HTML for the modal box triggered by a link in the second tab within that tab's content <div>. The modals for the first tab worked fine, but when I triggered the modal for the second tab the page dimming effect occurred but the modal box wouldn't appear.

I did some experimenting and discovered that if I moved the HTML for all of the modals outside of the markup that made up the tab interface, all of the modals would then work correctly.

Given that the modals were triggered by id-based jQuery selectors, I have no idea why having the modal HTML inside of the tab content made a difference. I can only assume it has something to do with how the content related to each tab is affected by the tab plugin.

Mozilla Announces Jetpack, an API For Writing FireFox Adds-On with jQuery, HTML, and CSS

CSS , JavaScript , jQuery , Miscellaneous , RIAs 3 Comments »

I found out about this last night from a tweet sent out by the jQuery Twitter account (which is probably a good indication that they like the idea).

The subject line pretty much says it all: Jetpack is designed to let current web developers use their existing skills with HTML, CSS, JavaScript, and jQuery to build Firefox add-ons/plugins without the need to mess with Firefox's XUL mark-up language. While JavaScript has always been part of the add-on development process, the inclusion of jQuery should make performing certain actions a whole lot easier.

You can learn more about Jetpack via the following URLs:

...the tutorials in the final link give you a good idea of the kinds of things Jetpack will allow you to do: the last example is a Jetpack add-on that will count and display the number of unread e-mails in your Gmail Inbox.

I want to give Jetpack a whirl, but I honestly can't think of any functionality I want to add to Firefox that I can't get from an existing plugin. Anyone have any suggestions for something to try with Jetpack?

It's interesting how web technologies keep being repurposed as a development option in other technologies (Adobe AIR, the upcoming Palm Pre's WebOS, and now Jetpack). Even though I'm not particularly interested in delving into all these different areas, I must say that I like the trend. :)

Changing Individual CSS Styles with jQuery

CSS , JavaScript , jQuery 1 Comment »

Back when I was writing my own custom JavaScript functions, I learned that there wasn't a single, simple way to change the individual style settings (like "font-weight:bold") for an HTML element that worked on every browser. My solution was to change the CSS classes assigned to the element instead: I wrote a library function that would allow me to add, remove, or replace any class assigned to an HTML element and simply created as many class definitions as I needed in order to accommodate the style changes. It was actually a pretty effective workaround because it let me effectively change multiple styles with one function call.

When I started using jQuery, I quickly learned about the "addClass" and "removeClass" core functions, which I could use instead of my library function:


...So I continued with my routine of changing styles by changing classes, even though sometimes I only needed to change or remove a single style setting. No harm, no foul.

But changing classes wouldn't work for the wacky little project I've been working on recently: I needed to be able to change several styles for an HTML element individually, and writing a class to handle every permutation of the possible style combinations was impractical.

So I went to the jQuery web site, hopeful that the brilliant folks at jQuery had something that could help me out.

And they did: the "css" core function allows you to read or set any individual style or styles:

if ($("#missionStatement").css("font-weight")== "400" || $("#missionStatement").css("font-weight")== "normal")
   $("#missionStatement").css({ fontSize:"24px", fontWeight:"bold" });

Have I mentioned that I love jQuery? :)