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.

tab effects

View previous topic View next topic Go down

tab effects

Post by Photondragon12345 on September 18th 2012, 12:40 am

http://www.newduelacademy.net/

how did they create that tab effect? is it jquery? Question Question Question

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 12:44 am

I believe that is an actual template on hitskins.com phpbb3 it is possible with phpbb2 though. Just simple CSS3 and HTML."

I used a unordered list HTML with inline javascript. Reason because my CSS was quite full, though there is the exact code the CSS in other tutorials.

Code:
i_icon_mini_groups{
background-image:url('source code')
}
i_icon_mini_groups:hover{
background-image:url('source code')
}
or
for cleaner less space do this-

Code:
i_icon_mini_groups{
background-image:url('source code');
background-position: xpos ypos;
background-repeat:no-repeat;
}
i_icon_mini_groups:hover{
background-position:xpos ypos;/*for image files to include both hover and mouse out in one file, use negative integers to go upwards*/
}

I believe all the css are

Code:
i_icon_mini_groups
i_icon_mini_index
i_icon_mini_faq
i_icon_mini_gallery
i_icon_mini_message
i_icon_mini_members
i_icon_mini_logout
i_icon_mini_profile
i_icon_mini_portal
i_icon_mini_login
i_icon_mini_register

this is what I believe




Last edited by nextlevelgaming on September 18th 2012, 12:56 am; edited 1 time in total (Reason for editing : add code)

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by Photondragon12345 on September 18th 2012, 1:01 am

lol no you have the wrong idea i mean the tabs on the widget "announcements"

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 1:09 am

Hahaha I never saw that the first time I loaded the page. Oh boy well that was a wasted time finding the code from my database haha. Alright well give me a minute and i'll look

Code:
<script src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_script.js" type="text/javascript">
<script type="text/javascript">
window.onload = function() {
new Accordian('fond_principal',5,'onglet_actif');
init();
}
</script>
The jQuery that is needed;

now for the html

Code:
<div class="tfa_onglet_container *">
<div id="test1-header" class="tfa_onglet">
<span>Welcome</span>
</div>
<div id="test2-header" class="tfa_onglet">
<span>History</span>
</div>
listed for html nav

Code:
<div id="block_contenu">
<div id="test1-content" style="display: none; overflow: hidden; height: 0px; opacity: 0;">
<div class="contenu_accordeon">
<h1>WELCOME TO NEW DUEL ACADEMY</h1>
<p>
New Duel Academy is a Yu-Gi-Oh! fan site, which is based on Yu-Gi-Oh! GX. NDA's goal is to make you a better duelist. At New Duel Academy, you can learn more about Yu-Gi-Oh!, make new friends, compete in events, enter tournaments, and duel the best. We create a safe environment and provide help. We discuss about
<nobr>
<a id="FALINK_2_0_1" class="FAtxtL" href="#">Decks</a>
</nobr>
, Cards, and Combos. Enjoy your stay and have fun!
</p>
</div>
</div>
content for the nav to open.

If you are having issues with this quick explanation go to http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/ for a full list of amazing accordian jQuery APIs!


Last edited by nextlevelgaming on September 18th 2012, 1:16 am; edited 1 time in total

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by Photondragon12345 on September 18th 2012, 1:13 am

lol ok

(ROFL)

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 1:18 am

No rolling on floor lmao! but added to my post it was a quick explanation. I'd just go to the link i gave you to get yourself a nice accordian. Because that api is very well lets say sloppy. Everytime I reload FF it doesnt work, then it does...back adn forth. there are cleaner and more stable APIs in the link

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by Photondragon12345 on September 18th 2012, 1:32 am

wait wait for each code.... where do i put them?

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 2:21 am

well the jQuery will be in your ACP>DISPLAY>TEMPLATES>GENERAL>OVERALL_HEADER

and for the html you can put it in your sites description or somewhere in there. Look for a better Plugin though i'm tellin ya. I'll help ya if you find the one you want.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by Photondragon12345 on September 18th 2012, 2:36 am

i'll accept the help thank you Very Happy

oh and also are you sure that is the right place if you want the tabs to be in the portal?

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 5:19 am

Well you will probably have to look into portal. I don't use a portal for any of my sites lol. So with that being said i'm sure there is a spot in portal though that you can add the code. Let me know when you get a good plugin, and one of my test sites ill open the portal and check er out for you

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by Photondragon12345 on September 18th 2012, 5:20 am

oh ok dont lock or trash

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 5:26 am

use a new html page to get your code started. All you will need to do is look at the plugins that i sent you in the link, click one, and send me the link and ill get all code for ya

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: tab effects

Post by LGforum on September 18th 2012, 10:08 am

@nextlevelgaming wrote:No rolling on floor lmao! but added to my post it was a quick explanation. I'd just go to the link i gave you to get yourself a nice accordian. Because that api is very well lets say sloppy. Everytime I reload FF it doesnt work, then it does...back adn forth. there are cleaner and more stable APIs in the link

I think your misunderstanding what API means.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: tab effects

Post by nextlevelgaming on September 18th 2012, 9:42 pm

API /Plugin whatever. Like I said before LG I'm usually awake for 24-36 hours straight while doing coding. SO i may mess my words up tongue

What he is needing is a jQuery plugin I know this.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.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