[jQuery] Update - Plugin - Tabs
I've updated the Tabs plugin with rounding and nicer looking tabs in general.
I wasn't able to get IE to display the tabs with a variable width, so I'd appreciate any efforts in that vein. Also, I only tested in IE6 and Firefox (all I got on my machine).
The demo itself is still basically identical with only a few modifications. Please take a look.
<div><span class="gmail_quote">On 6/7/06, <b class="gmail_sendername">Christian Bach</b> <<a href="mailto:christian.bach@polyester.se">
christian.bach@polyester.se</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Hi Sam,
now it works and the innerhtml attribute is removed, enjoy!
$.fn.wrapInside = function(e) {
return this.each(function(){
var o = $(this);
var c = o.html();
o.empty().append(e).find(e).append(c).end();
});
};
Best regards
Christian
Sam Collett wrote:
> Beat me to it! However, the output code isn't quite right (is it a bug
> with 'html()'?)
>
> Why does:
>
>
> become:
>
>
>
> When using:
> $("p").wrap("<strong></strong>");
>
> On 07/06/06, Christian Bach <<a href="mailto:christian.bach@polyester.se">christian.bach@polyester.se</a>> wrote:
>
>> $.fn.wrapInside = function(e) {
>> return this.each
(function(){
>> var o = $(this);
>> var c = o.html();
>> o.empty().append(e).find(e).html(c);
>> });
>> };
>>
>> Works like a charm!
>>
>> $('p.hello').wrapInside('<h1></h1>');
>>
>>
>> Best regards
>> Christian Bach
>>
>>
>> Christian Bach wrote:
>>
>>> Hi!
>>>
>>> I wrote a simple function that does the trick, try this.
>>>
>>> <p class="hello">Hello
>>>
>>> <script>
>>> function wrapInside(selector,e) {
>>> var el = $(selector);
>>> var c = el.html();
>>> el.empty().append(e).find(e).html(c);
>>> }
>>> </script>
>>> wrapInside("p.hello",'<span></span>');
>>>
>>>
>>> /christian
>>>
>>>
>>> Yehuda Katz wrote:
>>>
>>>> It seems to result in <span>
>>>>
>>>> Am I doing something wrong?
>>>>
>>>> On 6/7/06, *John Resig* < <a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>
>>>> <mailto:<a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>>> wrote:
>>>>
>>>> Yehuda,
>>>>
>>>> That's what the wrap() function does.
>>>>
>>>> $("p").wrap("<span></span>");
>>>>
>>>> results in:
>>>>
>>>>
>>>>
>>>> --John
>>>>
>>>> On 6/7/06, Yehuda Katz < <a href="mailto:wycats@gmail.com">wycats@gmail.com</a>
>>>> <mailto:<a href="mailto:wycats@gmail.com">wycats@gmail.com</a>>> wrote:
>>>> > The thing is that I'm trying to wrap the INSIDE of the p, not
>>>> the actual p.
>>>> >
>>>> >
>>>> > On 6/7/06, DaveG <<a href="mailto:jquery@solidgone.com">jquery@solidgone.com</a>
>>>> <mailto:
<a href="mailto:jquery@solidgone.com">jquery@solidgone.com</a>> > wrote:
>>>> > >
>>>> > > I thought wrapping around the html() of the element, but my
>>>> quick tests
>>>> > didn't turn up much. Might be worth following that line though:
>>>> > > $("p").html().wrap("<p class='ohmy'>");
>>>> > >
>>>> > > ~ ~ Dave
>>>> > >
>>>> > > On Wed, 7 Jun 2006 10:21:56 -0400, "Yehuda Katz"
>>>> <<a href="mailto:wycats@gmail.com">
wycats@gmail.com</a> <mailto:<a href="mailto:wycats@gmail.com">wycats@gmail.com</a>> >
>>>> > wrote:
>>>> > > > I'm looking for a way to use "wrap" to wrap around the TEXT
>>>> inside an
>>>> > > > element.
>>>> > > >
>>>> > > > Say I have <p class="hello">Hello
>>>> > > >
>>>> > > > I want to be able to do something that'll give me <p
>>>> > > > class="hello"><span>Hello</span>
>>>> > > >
>>>> > > > Ideas?
>>>> > > >
>>>> > > >
>>>> > >
>>>> > >
>>>> > > _______________________________________________
>>>> > > jQuery mailing list
>>>> > > <a href="mailto:discuss@jquery.com">discuss@jquery.com
</a> <mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> > > <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>> > >
>>>> >
>>>> >
>>>> >
>>>> > --
>>>> > Yehuda Katz
>>>> > Web Developer
>>>> > (ph) 718.877.1325
>>>> > (fax) 718.686.4288
>>>> > _______________________________________________
>>>> > jQuery mailing list
>>>> > <a href="mailto:discuss@jquery.com">
discuss@jquery.com</a> <mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> > <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a> <<a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>>
>>>> >
>>>> >
>>>> >
>>>>
>>>>
>>>> --
>>>> John Resig
>>>> <a href="http://ejohn.org/">http://ejohn.org/</a>
>>>> <a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a> <mailto:<a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>
>
>>>>
>>>> _______________________________________________
>>>> jQuery mailing list
>>>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Yehuda Katz
>>>> Web Developer
>>>> (ph) 718.877.1325
>>>> (fax) 718.686.4288
>>>> ------------------------------------------------------------------------
>>>>
>>>> _______________________________________________
>>>> jQuery mailing list
>>>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>>>>
<a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>>
>>>>
>>> _______________________________________________
>>> jQuery mailing list
>>>
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>
>>>
>> _______________________________________________
>> jQuery mailing list
>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>
>>
>>
>>
>>
>
> _______________________________________________
> jQuery mailing list
> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
> <a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>
>
>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>
</blockquote></div>
<br clear="all">
--
Yehuda Katz
Web Developer
(ph) 718.877.1325
(fax) 718.686.4288
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
I wasn't able to get IE to display the tabs with a variable width, so I'd appreciate any efforts in that vein. Also, I only tested in IE6 and Firefox (all I got on my machine).
The demo itself is still basically identical with only a few modifications. Please take a look.
<div><span class="gmail_quote">On 6/7/06, <b class="gmail_sendername">Christian Bach</b> <<a href="mailto:christian.bach@polyester.se">
christian.bach@polyester.se</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Hi Sam,
now it works and the innerhtml attribute is removed, enjoy!
$.fn.wrapInside = function(e) {
return this.each(function(){
var o = $(this);
var c = o.html();
o.empty().append(e).find(e).append(c).end();
});
};
Best regards
Christian
Sam Collett wrote:
> Beat me to it! However, the output code isn't quite right (is it a bug
> with 'html()'?)
>
> Why does:
>
Lorem ipsum dolor sit amet
>
> become:
>
>
<strong innerhtml="Lorem ipsum dolor sit amet">Lorem ipsum dolor
> sit amet</strong>
>
> When using:
> $("p").wrap("<strong></strong>");
>
> On 07/06/06, Christian Bach <<a href="mailto:christian.bach@polyester.se">christian.bach@polyester.se</a>> wrote:
>
>> $.fn.wrapInside = function(e) {
>> return this.each
(function(){
>> var o = $(this);
>> var c = o.html();
>> o.empty().append(e).find(e).html(c);
>> });
>> };
>>
>> Works like a charm!
>>
>> $('p.hello').wrapInside('<h1></h1>');
>>
>>
>> Best regards
>> Christian Bach
>>
>>
>> Christian Bach wrote:
>>
>>> Hi!
>>>
>>> I wrote a simple function that does the trick, try this.
>>>
>>> <p class="hello">Hello
>>>
>>> <script>
>>> function wrapInside(selector,e) {
>>> var el = $(selector);
>>> var c = el.html();
>>> el.empty().append(e).find(e).html(c);
>>> }
>>> </script>
>>> wrapInside("p.hello",'<span></span>');
>>>
>>>
>>> /christian
>>>
>>>
>>> Yehuda Katz wrote:
>>>
>>>> It seems to result in <span>
...
</span>>>>>
>>>> Am I doing something wrong?
>>>>
>>>> On 6/7/06, *John Resig* < <a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>
>>>> <mailto:<a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>>> wrote:
>>>>
>>>> Yehuda,
>>>>
>>>> That's what the wrap() function does.
>>>>
>>>> $("p").wrap("<span></span>");
>>>>
>>>> results in:
>>>>
>>>>
<span>...</span>
>>>>
>>>> --John
>>>>
>>>> On 6/7/06, Yehuda Katz < <a href="mailto:wycats@gmail.com">wycats@gmail.com</a>
>>>> <mailto:<a href="mailto:wycats@gmail.com">wycats@gmail.com</a>>> wrote:
>>>> > The thing is that I'm trying to wrap the INSIDE of the p, not
>>>> the actual p.
>>>> >
>>>> >
>>>> > On 6/7/06, DaveG <<a href="mailto:jquery@solidgone.com">jquery@solidgone.com</a>
>>>> <mailto:
<a href="mailto:jquery@solidgone.com">jquery@solidgone.com</a>> > wrote:
>>>> > >
>>>> > > I thought wrapping around the html() of the element, but my
>>>> quick tests
>>>> > didn't turn up much. Might be worth following that line though:
>>>> > > $("p").html().wrap("<p class='ohmy'>");
>>>> > >
>>>> > > ~ ~ Dave
>>>> > >
>>>> > > On Wed, 7 Jun 2006 10:21:56 -0400, "Yehuda Katz"
>>>> <<a href="mailto:wycats@gmail.com">
wycats@gmail.com</a> <mailto:<a href="mailto:wycats@gmail.com">wycats@gmail.com</a>> >
>>>> > wrote:
>>>> > > > I'm looking for a way to use "wrap" to wrap around the TEXT
>>>> inside an
>>>> > > > element.
>>>> > > >
>>>> > > > Say I have <p class="hello">Hello
>>>> > > >
>>>> > > > I want to be able to do something that'll give me <p
>>>> > > > class="hello"><span>Hello</span>
>>>> > > >
>>>> > > > Ideas?
>>>> > > >
>>>> > > >
>>>> > >
>>>> > >
>>>> > > _______________________________________________
>>>> > > jQuery mailing list
>>>> > > <a href="mailto:discuss@jquery.com">discuss@jquery.com
</a> <mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> > > <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>> > >
>>>> >
>>>> >
>>>> >
>>>> > --
>>>> > Yehuda Katz
>>>> > Web Developer
>>>> > (ph) 718.877.1325
>>>> > (fax) 718.686.4288
>>>> > _______________________________________________
>>>> > jQuery mailing list
>>>> > <a href="mailto:discuss@jquery.com">
discuss@jquery.com</a> <mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> > <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a> <<a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>>
>>>> >
>>>> >
>>>> >
>>>>
>>>>
>>>> --
>>>> John Resig
>>>> <a href="http://ejohn.org/">http://ejohn.org/</a>
>>>> <a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a> <mailto:<a href="mailto:jeresig@gmail.com">jeresig@gmail.com</a>
>
>>>>
>>>> _______________________________________________
>>>> jQuery mailing list
>>>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<mailto:<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>>
>>>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Yehuda Katz
>>>> Web Developer
>>>> (ph) 718.877.1325
>>>> (fax) 718.686.4288
>>>> ------------------------------------------------------------------------
>>>>
>>>> _______________________________________________
>>>> jQuery mailing list
>>>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>>>>
<a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>>
>>>>
>>> _______________________________________________
>>> jQuery mailing list
>>>
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>>
>>>
>> _______________________________________________
>> jQuery mailing list
>> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
>> <a href="http://jquery.com/discuss/">http://jquery.com/discuss/</a>
>>
>>
>>
>>
>>
>
> _______________________________________________
> jQuery mailing list
> <a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
> <a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>
>
>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/">
http://jquery.com/discuss/</a>
</blockquote></div>
<br clear="all">
--
Yehuda Katz
Web Developer
(ph) 718.877.1325
(fax) 718.686.4288
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Topic Participants
wycats
sam.collett
John Resig
public