Hmmm... possible misconception wrt wrap()?
I was thinking along these lines for example 3 (version below uses
dimensions, is totally uncommented, and has a few subtle differences!)
var popup = { container : "<div class='simple_popup_div'
stye='display:none;'><div class='simple_popup_inner'></div></div>"
, closer : "<p class='simple_close'>[ x ]
javascript:void(0) Close </p>"
};
$(".simple_popup_info").each(function(){
var jMe = $(this);
jMe.hide().siblings(".simple_popup").click(function(){
$('.simple_close').click();
var jPopup =
$(popup.closer).appendTo('body').wrap(popup.container).after(jMe.html()).one('click',
function(){
$('.simple_popup_div').remove();
return false;
})
.parent().parent()
, jWin = $(window)
, _pcss = { top : Math.floor((jWin.height() - jPopup.height()) /
2)
, left : Math.floor((jWin.width() -
jPopup.width()) / 2)
}
;
jPopup.css(_pcss).show();
return false;
});
});
(Please bear in mind that it's only an alternative, not a correction or
criticism! It's quite probably slower, but it demonstrates wrap, and it
suits my particular preference of trying to keep HTML as distinct and easily
maintainable as possible).
There is no text in the wrapper (popup.container) so no problem. And because
you're doing other stuff to the closer, like adding click functionality,
treating it separately from the wrapper is also not a problem.
The wrap() documentation (I think) is slightly ambiguous in that it's not
clear which elements can't have text in them, although the example provided
does give a clue. It might be clearer if it said that it "...does not work
when the wrapper elements contain text...".
hal10001 wrote:
>
>
> Those were some awesome suggestions Wizzud. Thank you for taking the
> time to comment. Here is what I changed/implemented:
>
> * Removed the word tutorial. It was a little misleading, and I had
> plan on walking through one or two of these examples in a blog post
> anyhow. So for now, it is out.
>
> * I considered using the Dimensions plugin, but for someone unfamiliar
> with the ins/outs of jQuery, I thought maybe it was best if I just
> used JavaScript. I did put a comment in the code though regarding
> using the plugin.
>
> * Everything in your last paragraph I implemented (good stuff), except
> for the wrap() suggestion. I mainly use this method for wrapping
> elements that are not a mixture of dynamic and static elements for the
> reason pointed out in the documentation - "This does not work with
> elements that contain text. Any necessary text must be added after the
> wrapping is done."
>
> Again, thank you for the input - it was very helpful!
>
> Brian
>
>
> On Jul 28, 4:29 am, Wizzud <[EMAIL PROTECTED]> wrote:
>> Neat examples.
>> If I might make a couple of suggestions...?
>>
>> Your page subtitle includes the word 'tutorial'. Personally, if I see
>> that
>> word I expect to be guided through the process of achieving each of the
>> results in the examples. I would therefore suggest that, instead of
>> having
>> to go find the script and interpret it for oneself, it would be far more
>> useful (to visitors) to display the code used for each example on the
>> page
>> itself. And either fully comment the script, or explain it step by step,
>> so
>> that people can understand what each bit does and possibly why. (The
>> mechanism you choose to use to display the script code in itself be a
>> further 'real world' example!)
>>
>> You have some quote Tom Foolery unquote in your script (example 3) for
>> determining how to center a DIV. If the main purpose of the page is to
>> demonstrate the power of jQuery, does that not also include its
>> plugins/extensions, in this case specifically the dimensions plugin
>> (which
>> is an 'official' plugin, after all)?
>>
>> Also - and this is meant in the spirit of pushing jQuery, not as
>> criticism
>> of your code! - you might like to consider demonstrating the use of
>> wrap()
>> in place of some of your html string concatenations (examples 3 and 5)?
>> And
>> maybe make var p=$(this) in example 4, and use parent() and is() in the
>> while loop? Also in example 4, if you use ...each(function(idx){... (as
>> you
>> do in example 1) you don't need to declare var idx or increment yourself.
>> You have chained where possible, with the exception of examples 1 and 2
>> where blur() is not chained after focus() - any particular reason?
>>
>>
>>
>> hal10001 wrote:
>>
>> > Hello Everyone,
>>
>> > I put this together over the last few days. I *might* consider it
>> > advanced, and there is a lot of jQuery meat to it, so I figured I
>> > would post it here first. If you find any bugs in the supported listed
>> > of browsers, please let me know so I can fix them. I really wanted
>> > these to be some "real-world" examples of the power of jQuery. I hope
>> > they are helpful to the community at large.
>>
>> >http://www.reindel.com/five_javascript_tricks_jquery
>>
>> > I just have to also say that I absolutely love jQuery selectors!
>>
>> > Brian
>>
>> --
>> View this message in
>> context:http://www.nabble.com/5-JavaScript-Tricks-Made-Easy-with-jQuery-tf416...
>> Sent from the JQuery mailing list archive at Nabble.com.
>
>
>
--
View this message in context:
http://www.nabble.com/5-JavaScript-Tricks-Made-Easy-with-jQuery-tf4161166s15494.html#a11851405
Sent from the JQuery mailing list archive at Nabble.com.
