The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

JQuery Help

3 posters

Go down

JQuery Help Empty JQuery Help

Post by Glazella April 17th 2012, 06:51

I was able to put a table at the header that serves as the announcement and content container.

JQuery Help Untitl14

The function will be it contains links that will direct you to the latest announcements, news, photos, vids, subbed vids & translations. However, I was only able to succeed in linking for the first tab (announcements) because when I put links for the other tabs, everything disappears.

What should I do? (The codes below)

Code:
$(document).ready(function() {
$('#logo').after('<div class="TabbedPanels" id="TabbedPanels1"><ul class="TabbedPanelsTabGroup"><li class="TabbedPanelsTab">ANNOUNCEMENTS</li><li class="TabbedPanelsTab">NEWS</li><li class="TabbedPanelsTab">PHOTOS</li><li class="TabbedPanelsTab">VIDEOS</li><li class="TabbedPanelsTab">JWSUBS</li><li class="TabbedPanelsTab">TRANSLATIONS</li></ul>

<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t155-hiring-jiyeon-worldwide-staff#164"> Jiyeon Worldwide Staff</a></p>
<p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t454-hiring-jwsubs-staff#733"> JWSubs Staff</a></p>
<p style="text-align: left; ">[SUPPORT] <a href="http://www.jiyeonworldwide.com/t764-petition-verify-jiyeon-s-twitter-account#1774"> Verify @pjy1234 Account</a></p>
<p style="text-align: left; ">[DONATE] <a href="http://www.jiyeonworldwide.com/t204-forum-operation-and-donations"> Forum Operations </a></p></span></span></span></div>

<div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[04.10] <a href="http://www.jiyeonworldwide.com/t751-t-ara-jiyeon-s-bare-face-even-the-eyeliner-s-gone"> Jiyeon's Bare Face  - "Even Eyeliner's Gone" </a></p>
<p style="text-align: left; ">[04.09] <a href="http://www.jiyeonworldwide.com/t744-jiyeon-s-love-to-fans-a-beautiful-face-and-mind"> Jiyeon's Love To Fans - "Beautiful Face and Mind" </a></p>
<p style="text-align: left; ">[04.01] <a href="http://www.jiyeonworldwide.com/t697-t-ara-s-jiyeon-cute-expression-with-a-cape-strangely-sexy"> Jiyeon's Cute Expression With A Cape - "Strangely Sexy"</a>
<p style="text-align: left; ">[03.29] <a href="http://www.jiyeonworldwide.com/t677-jiyeon-s-selcas-getting-prettier-each-day">Jiyeon's Selcas Getting Prettier Each Day </a></p></p></span></span></span>
</div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t772-scan-jiyeon-for-sparkle-updated">Jiyeon For Sparkle </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t771-cytw-bae-yun-jeong-twitter-update-ft-jiyeon-at-milan">Bae Yun Jung Twitter Update ft. Jiyeon </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t768-fantaken-jiyeon-with-fans-at-milan">Jiyeon With Fans At Milan </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t770-official-ads-jiyeon-for-g-market">Jiyeon For G-Market </a></p></span></span></span>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t733-bts-t-ara-for-wild-roses-endorsement"> T-ara Wild Roses CF</a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t699-mv-roly-poly-japanese-mv-jiyeon-s-version"> Roly Poly Japanese MV - Jiyeon's Version </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t694-ranks-haru-haru-ranks-31-on-billboard-korea"> Haru Haru Ranks 31 On Billboard Korea </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t688-bts-jiyeon-tony-moly-cf-bts">Jiyeon Tony Moly CF </a></p></span></span></span></div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t758-drama-dream-high-2-episode-16eng-subbed"> Dream High 2 - Ep 16</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t757-drama-dream-high-2-episode-15-eng-subbed"> Dream High 2 - Ep 15</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t756-drama-dream-high-2-episode-14-eng-subbed"> Dream High 2 - Ep 14</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t754-drama-dream-high-2-episode-13-eng-subbed"> Dream High 2 - Ep 13</a></p></span></span></span></div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[2012.04.13]<a href="http://www.jiyeonworldwide.com/t773-trans-2012-04-13">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.12]<a href="http://www.jiyeonworldwide.com/t767-trans-2012-04-12">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.11]<a href="http://www.jiyeonworldwide.com/t760-trans-2012-04-11">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.09]<a href="http://www.jiyeonworldwide.com/t743-trans-2012-04-09">Jiyeon Twitter Update </a></p></span></span></span></div></div></div>');
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
});

Is there something wrong with my codes or the jquery itself?

Forum add: http://www.jiyeonworldwide.com/
Version: Invision
avatar
Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Mati April 17th 2012, 10:14

Idk how to help you with that but you can use this one http://css-tricks.com/organic-tabs/ is what i use on my forum and is easy to use it.
Mati
Mati
Hyperactive

Posts : 2004
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by LGforum April 17th 2012, 16:12

The HTML should be all one long string and have no line breaks in.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Glazella April 18th 2012, 07:53

@Matti How should I do it? Because the tabs should be in my banner ^^ Thanks Smile

@LGForum Ah.. what should I erase on my codes? Thanks Smile
avatar
Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Mati April 18th 2012, 11:06

Glazella wrote:@Matti How should I do it? Because the tabs should be in my banner ^^ Thanks Smile

You mean the Homepage message?
Mati
Mati
Hyperactive

Posts : 2004
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Glazella April 18th 2012, 13:58

Ah no~ It's not a homepage message Smile Visit my forum so you can see where it is positioned: http://jiyeonworldwide.com
avatar
Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by LGforum April 19th 2012, 06:13

All the line breaks need to be taken out so the HTML is all on one string.

Its not necessary to insert the HTML with Javascript though.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Glazella April 19th 2012, 07:43

LGforum wrote:All the line breaks need to be taken out so the HTML is all on one string.

Its not necessary to insert the HTML with Javascript though.

So how should the codes go? Smile
avatar
Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

JQuery Help Empty Re: JQuery Help

Post by Glazella April 24th 2012, 14:14

bump ^^
avatar
Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum