Wednesday, May 18, 2011

jQuery Boxy content will not display / show

Every so often I’ve used the jQuery plugin called “Boxy

Today I ran into an issue: The content I gave boxy would not display / show on the page.

Here was my incorrect code:

   1: new Boxy("Justin Kohnen is the best programmer ever!", 
   2: { 
   3:     closeText: "close"
   4:     , title: "Shout out."
   5:     , unloadOnHide: true
   6: });

After reading the fantastic manual I found: (underline added for emphasis)

The content passed to the constructor can be any valid parameter to jQuery's $() function - a DOM element, an HTML fragment or another jQuery object. Whatever is provided will be set to display: block and have the class boxy-content added prior to its insertion within the dialog.

The key here was raw text is not a “valid parameter to jQuery’s $() function.”

So my fix is simply to wrap my text in a <p> tag. Making it an HTML fragment

Here is the corrected code:

   1: new Boxy("<p>Justin Kohnen is the best programmer ever!</p>", 
   2: { 
   3:     closeText: "close"
   4:     , title: "Shout out."
   5:     , unloadOnHide: true
   6: });

Simple, but silly problem.

I hope this helps someone.

Cheers.