Comments on: Wrap It Up - Lazy Man’s HTML Generation With jQuery http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/ Examples and tutorials to help you learn JQuery Thu, 22 May 2008 19:52:07 +0000 http://wordpress.org/?v=2.1 By: IkoTikashi http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-32 IkoTikashi Fri, 02 Jun 2006 13:48:32 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-32 In the paragraph "The Solution" you write: "And then the images would be styled like so: " Shouldn't you add a 'class="dropshadow"' in the img-tag?! In the paragraph “The Solution” you write:

“And then the images would be styled like so:
”

Shouldn’t you add a ‘class=”dropshadow”‘ in the img-tag?!

]]> By: IkoTikashi http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-33 IkoTikashi Fri, 02 Jun 2006 13:50:01 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-33 Aye, no way to edit comments ... I think you're missing the 'class="dropshadow"' in the img-tag one paragraph above too. Thx ;) Aye, no way to edit comments … I think you’re missing the ‘class=”dropshadow”‘ in the img-tag one paragraph above too. Thx ;)

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-34 Jack Fri, 02 Jun 2006 14:33:53 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-34 Iko, Good catch on your part... stupid oversight on mine. Both fixed. Thanks. Iko,
Good catch on your part… stupid oversight on mine.

Both fixed. Thanks.

]]> By: Jörn http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-40 Jörn Tue, 06 Jun 2006 10:35:18 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-40 Hi Jack, in the "A Closer Look" paragraph you wrote: > you could do something like $(”img#dropshadow”) This is something I see too often. When referencing an ID ("#xyz") with CSS syntax, its always redundant to put selectors in front of the ID. An ID must be unique, so it can not be specified any uniquer. I like your tutorials (as I like JQuery), so please keep them clean ;) Hi Jack,

in the “A Closer Look” paragraph you wrote:

> you could do something like $(”img#dropshadow”)

This is something I see too often. When referencing an ID (”#xyz”) with CSS syntax, its always redundant to put selectors in front of the ID. An ID must be unique, so it can not be specified any uniquer.

I like your tutorials (as I like JQuery), so please keep them clean ;)

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-41 Jack Tue, 06 Jun 2006 12:45:12 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-41 @Jorn, I'm glad you pointed this out. However, I'm going to leave it as is in the tutorial for two reasons: 1- So others can see what to what you are refering 2- Even though your suggestion makes the code more concise, my syntax is not incorrect. As an analogy... I've shown readers how jQuery lets you "chain" methods together and make the javascript very small, clean, and concise. But if you choose not to chain them, and write out each instruction long hand, you don't get negative points... it still works. Just to be clear: I agree with your point but disagree on the importance. @Jorn,
I’m glad you pointed this out. However, I’m going to leave it as is in the tutorial for two reasons:
1- So others can see what to what you are refering
2- Even though your suggestion makes the code more concise, my syntax is not incorrect.

As an analogy… I’ve shown readers how jQuery lets you “chain” methods together and make the javascript very small, clean, and concise. But if you choose not to chain them, and write out each instruction long hand, you don’t get negative points… it still works.

Just to be clear: I agree with your point but disagree on the importance.

]]> By: Mary http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-197 Mary Thu, 13 Jul 2006 06:55:30 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-197 In the demo, the image doesn't show up. In the demo, the image doesn’t show up.

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-198 Jack Thu, 13 Jul 2006 13:25:05 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-198 Mary, Apparently the third party site took the demo down. I'll try to get a new one back up for you. Mary,
Apparently the third party site took the demo down. I’ll try to get a new one back up for you.

]]> By: Thom Parkin http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-284 Thom Parkin Fri, 28 Jul 2006 19:06:21 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-284 Great series. Thanks. Is there any significance to the way you concatenated the strings in .wrap("" etc.? It seems more logical to break them where you separate the opening tag from the closing tag. Great series. Thanks.
Is there any significance to the way you concatenated the strings in
.wrap(”" etc.?
It seems more logical to break them where you separate the opening tag from the closing tag.

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-285 Jack Fri, 28 Jul 2006 19:15:19 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-285 Thom... no significance. Thom… no significance.

]]> By: Chris http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-378 Chris Fri, 25 Aug 2006 17:34:21 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-378 Hi Jack, I know this is probably a silly question, but do you see any reason why this wouldnt work if the image was nested in a link? I've tried implementing this on a gallery i am working on and though its painfully simple it just doesnt seem to want to work. I have assigned a class of dropshadow to all the images, inserted the js as like the examle, checked that the jquery src link is above the js call and still nada. Any ideas would be greatly appreciated! Thanks, Chris Hi Jack,
I know this is probably a silly question, but do you see any reason why this wouldnt work if the image was nested in a link? I’ve tried implementing this on a gallery i am working on and though its painfully simple it just doesnt seem to want to work. I have assigned a class of dropshadow to all the images, inserted the js as like the examle, checked that the jquery src link is above the js call and still nada.
Any ideas would be greatly appreciated!
Thanks,
Chris

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-379 Jack Fri, 25 Aug 2006 17:55:47 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-379 I use Firebug and Web Developer extensions for Firefox to troubleshoot. The first can give me a quick alert to goofs in my code, the second lets me view generated source, not just actual xhtml. In other words, it should show you some of the jQuery generated html. If you're nesting the image inside a link, I would think you'd want to target the link (instead of the image) for wrapping with the divs. Let me know what you find. I use Firebug and Web Developer extensions for Firefox to troubleshoot. The first can give me a quick alert to goofs in my code, the second lets me view generated source, not just actual xhtml. In other words, it should show you some of the jQuery generated html.

If you’re nesting the image inside a link, I would think you’d want to target the link (instead of the image) for wrapping with the divs.

Let me know what you find.

]]> By: toolman http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-412 toolman Tue, 19 Sep 2006 08:39:03 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-412 Just a note re the uniqueness of css hash notation for IDs. If a CSS script is used on multiple pages or a dynamic system, it is possible that an image could share an ID with , for example, a form input ID on a different page. ie input#unique and img#unique Therefore, it is not always redundand if you use CSS on more then one DOM - and you should ;) It is unlikely, but definitely possible for IDs to match across multiple pages, especially if you have dynamic content. Just a note re the uniqueness of css hash notation for IDs. If a CSS script is used on multiple pages or a dynamic system, it is possible that an image could share an ID with , for example, a form input ID on a different page.

ie input#unique and img#unique

Therefore, it is not always redundand if you use CSS on more then one DOM - and you should ;)

It is unlikely, but definitely possible for IDs to match across multiple pages, especially if you have dynamic content.

]]> By: jazzle http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-446 jazzle Sat, 21 Oct 2006 11:37:38 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-446 The demo is 404 :( The demo is 404 :(

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-453 Jack Sun, 22 Oct 2006 15:00:06 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-453 A downside of linking out to other sites for a demo. I'll put one up on this site. A downside of linking out to other sites for a demo. I’ll put one up on this site.

]]> By: ilovejquery http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-668 ilovejquery Wed, 29 Nov 2006 09:29:17 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-668 where is the demo!!!!! where is the demo!!!!!

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-670 Jack Wed, 29 Nov 2006 15:00:24 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-670 Right here: http://15daysofjquery.com/examples/osds/ Right here:
http://15daysofjquery.com/examples/osds/

]]> By: Matthijs http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-672 Matthijs Wed, 29 Nov 2006 17:39:01 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-672 Cool solution. No technique in itself is perfect but I think that if you already use jquery for something else on the same site, it's very easy to use it for fancy dropshadows as well using your technique. Great tutorials, thanks. Cool solution. No technique in itself is perfect but I think that if you already use jquery for something else on the same site, it’s very easy to use it for fancy dropshadows as well using your technique.

Great tutorials, thanks.

]]> By: Alexis Bellido http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-2469 Alexis Bellido Thu, 01 Feb 2007 18:40:27 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-2469 A small detail but important to notice: DOM = Document Object Model, not Method :) A small detail but important to notice: DOM = Document Object Model, not Method :)

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-2470 Jack Thu, 01 Feb 2007 19:01:57 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-2470 @Alexis, Oof... you're right! I'll correct that silly mistake now. @Alexis,
Oof… you’re right! I’ll correct that silly mistake now.

]]> By: Scott Chesnut http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-4500 Scott Chesnut Tue, 10 Apr 2007 16:23:55 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-4500 Hi, What if I wanted to get the width of the image (and the width attribute is not set in the html) and then set the width of my wrapper div accordingly? I'm thinking of a caption type situation. Also, what if my images did not have a class (i'm allowing users to upload images), but I wanted to find all images in a particular div, say a content area which does have an id or class? Thanks, Scott Hi,

What if I wanted to get the width of the image (and the width attribute is not set in the html) and then set the width of my wrapper div accordingly? I’m thinking of a caption type situation. Also, what if my images did not have a class (i’m allowing users to upload images), but I wanted to find all images in a particular div, say a content area which does have an id or class?

Thanks,
Scott

]]> By: Jack http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-4504 Jack Tue, 10 Apr 2007 16:49:02 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-4504 Scott, Getting the width of an image server side with PHP or similar is easy. You can easily pass that info into your html/js. As for the width of the div, you should at least test setting the width of the div to be less than your images, and the div should expand to contain the image, regardless of the width. A bit of a hack, but might work for you. As for images without a class, since you're receiving uploads, you have to be using a server side language to save and process. You could easily add a class using the same server side code. Or, if you knew the parent of the image, or it's order in the document you could use jQuery to target the nth image. Finding all images in a particular div is easy: $('div#foo img').each(function(){ alert('function goes here'); }); Scott,
Getting the width of an image server side with PHP or similar is easy. You can easily pass that info into your html/js.

As for the width of the div, you should at least test setting the width of the div to be less than your images, and the div should expand to contain the image, regardless of the width. A bit of a hack, but might work for you.

As for images without a class, since you’re receiving uploads, you have to be using a server side language to save and process. You could easily add a class using the same server side code. Or, if you knew the parent of the image, or it’s order in the document you could use jQuery to target the nth image.

Finding all images in a particular div is easy:

$(’div#foo img’).each(function(){ alert(’function goes here’); });

]]> By:   CSS & Javascript Image Drop Shadows  by The Big Article http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-9039   CSS & Javascript Image Drop Shadows  by The Big Article Fri, 29 Jun 2007 08:47:57 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-9039 [...] http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/ 1. Insert this code between the html tags in your header or template (header.php in Wordpress).  Note: You may already have jquery installed as part of your template or plugin.  Try looking in /wp-includes/js/jquery/ $(document).ready(function(){ $("img.dropshadow-right") .wrap(" ” + “ [...] […] http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/ 1. Insert this code between the html tags in your header or template (header.php in Wordpress).  Note: You may already have jquery installed as part of your template or plugin.  Try looking in /wp-includes/js/jquery/ $(document).ready(function(){ $(”img.dropshadow-right”) .wrap(” ” + “ […]

]]> By:   CSS & Javascript Image Drop Shadows by The Big Article http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-9044   CSS & Javascript Image Drop Shadows by The Big Article Fri, 29 Jun 2007 10:16:13 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-9044 [...] config and maintenance and I decided to combine Segio’s CSS only solution with a slighly more complex Javascript solution that would in the end be a bit simpler to implement and [...] […] config and maintenance and I decided to combine Segio’s CSS only solution with a slighly more complex Javascript solution that would in the end be a bit simpler to implement and […]

]]> By: Daniel http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-29013 Daniel Tue, 18 Mar 2008 02:58:38 +0000 http://15daysofjquery.com/wrap-it-up-lazy-mans-html-generation-with-jquery/10/#comment-29013 I am sorry but I keep getting this error: $("img.dropshadow") has no properties. Please help, I thought this might be occurring because the element hasn't been created yet. Is that a correct assessment. The code is included in the head of the page and is a callback of the ready method just as you instructed. this is what I have in the head of the code: $(document).ready(function(){ $("img.dropshadow").wrap("" + ""); }); any pointers please? I am sorry but I keep getting this error: $(”img.dropshadow”) has no properties. Please help, I thought this might be occurring because the element hasn’t been created yet. Is that a correct assessment. The code is included in the head of the page and is a callback of the ready method just as you instructed. this is what I have in the head of the code: $(document).ready(function(){

$(”img.dropshadow”).wrap(”" + “”);

}); any pointers please?

]]>