The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

JQuery Help

View previous topic View next topic Go down

JQuery Help

Post by Glazella on April 17th 2012, 5:51 am

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


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

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Re: JQuery Help

Post by Mati on April 17th 2012, 9:14 am

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
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: JQuery Help

Post by LGforum on April 17th 2012, 3:12 pm

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

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: JQuery Help

Post by Glazella on April 18th 2012, 6:53 am

@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

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Re: JQuery Help

Post by Mati on April 18th 2012, 10:06 am

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

You mean the Homepage message?

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: JQuery Help

Post by Glazella on April 18th 2012, 12:58 pm

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

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Re: JQuery Help

Post by LGforum on April 19th 2012, 5:13 am

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
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: JQuery Help

Post by Glazella on April 19th 2012, 6:43 am

@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

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Re: JQuery Help

Post by Glazella on April 24th 2012, 1:14 pm

bump ^^

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

View previous topic View next topic Back to top


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