[SOLVED] How would I achieve tabbed profile?

Is there anyone who could help me with this? I just really don't even know where to start so I can't even attempt to come up with anything because of that.

Thanks

You'd probably need a combination of javascript and CSS to make that work.

hmmm the worst thing than me trying to write php code is me trying to write javascript. Thanks anyways.

http://www.barelyfitz.com/projects/tabber/ this may be if use to you. FYI I have not tried it.

Thanks itanshi. I'll look into it and see if this would work with template files. 🙂

Doesn't seem to want to work... but thanks for suggesting this.

I came up with a javascript function that uses DIV statments to give the apperance of tabbing by altering the display= style proporty.  You may be able to use this same code to setup a tabbed profile.

http://www.petfinder.com/shelters/CT20.html

The javascript that runs it all is here

<!-- The main javascript.  This controls the panel switching -->
<script language="javascript" type="text/javascript"> 
function panel(about,pets,happy,faq,direction,link,help,aap,sponsor) 
{ 
if (about==1)
{ 
document.getElementById('about').style.display='block'
document.getElementById('image_about').src="' http://members.petfinder.org/~CT20/images/menu/about-h.gif '"
} else {
document.getElementById('about').style.display='none';
document.getElementById('image_about').src="' http://members.petfinder.org/~CT20/images/menu/about.gif '"
}

if (pets==1)
{
document.getElementById('pets').style.display='block';
document.getElementById('image_pets').src="' http://members.petfinder.org/~CT20/images/menu/pets-h.gif '"
} else {
document.getElementById('pets').style.display='none';
document.getElementById('image_pets').src="' http://members.petfinder.org/~CT20/images/menu/pets.gif '"
}


if (happy==1)
{
document.getElementById('happy').style.display='block';
document.getElementById('image_happy').src="' http://members.petfinder.org/~CT20/images/menu/happy-h.gif '"
} else {
document.getElementById('happy').style.display='none';
document.getElementById('image_happy').src="' http://members.petfinder.org/~CT20/images/menu/happy.gif '"
}

if (faq==1)
{
document.getElementById('faq').style.display='block';
document.getElementById('image_faq').src="' http://members.petfinder.org/~CT20/images/menu/faq-h.gif '"
} else {
document.getElementById('faq').style.display='none';
document.getElementById('image_faq').src="' http://members.petfinder.org/~CT20/images/menu/faq.gif '"
}

if (direction==1)
{
document.getElementById('direction').style.display='block';
document.getElementById('image_direction').src="' http://members.petfinder.org/~CT20/images/menu/direction-h.gif '"
} else {
document.getElementById('direction').style.display='none';
document.getElementById('image_direction').src="' http://members.petfinder.org/~CT20/images/menu/direction.gif '"
}

if (link==1)
{
document.getElementById('link').style.display='block';
document.getElementById('image_link').src="' http://members.petfinder.org/~CT20/images/menu/link-h.gif '"
} else {
document.getElementById('link').style.display='none';
document.getElementById('image_link').src="' http://members.petfinder.org/~CT20/images/menu/link.gif '"
}

if (help==1)
{
document.getElementById('help').style.display='block';
document.getElementById('image_help').src="' http://members.petfinder.org/~CT20/images/menu/help-h.gif '"
} else {
document.getElementById('help').style.display='none';
document.getElementById('image_help').src="' http://members.petfinder.org/~CT20/images/menu/help.gif '"
}

if (aap==1)
{
document.getElementById('aap').style.display='block';
document.getElementById('image_aap').src="' http://members.petfinder.org/~CT20/images/menu/aap-h.gif '"
} else {
document.getElementById('aap').style.display='none';
document.getElementById('image_aap').src="' http://members.petfinder.org/~CT20/images/menu/aap.gif '"
}

if (sponsor==1)
{
document.getElementById('sponsor').style.display='block';
document.getElementById('image_sponsor').src="' http://members.petfinder.org/~CT20/images/menu/sponsor-h.gif '"
} else {
document.getElementById('sponsor').style.display='none';
document.getElementById('image_sponsor').src="' http://members.petfinder.org/~CT20/images/menu/sponsor.gif '"
}
return false;
}
</script> 

A bit much, but it could be altered to do the tabbing.

This seems to be a code for an image rollover, not a tabbed profile. I visited the site and didn't see any tabs in there unless they only appear in Mozilla/Firefox. Am at work and they only use IE.

Similar concept but with some additions.  The menu items on the left side, click them and the info on the right hand side changes, while updating the image to the highlighted version.

There is not much functional difference between this type of setup and a tabbed type of setup, just the HTML that shows to the visitor.  The key is changing what you want your user to see to display:block, and hiding what you do not want them to see with display:none

I setup a basic implementation of how this could work on my site.

http://www.necrotania.com/eFiction/viewuser.php?uid=14

Click on "Other" to see the rest of the profile information.

Oh I see. Well that may be a way to go about it. Thanks a lot Calash.

Alright... so I'm SLOWLY getting where I want to go with the tabbed profile (thanks to itanshi for suggesting tabber btw) but I am having a SLIGHT issue with my contact author form - basically because I'm 95% certain I'll need to tinker with user/profile.php in a way it was never meant to be tinkered with.

Here's what I have right now: http://fanfics.suethomasfbeye.net/viewuser.php?uid=1&skin=supernatural

Now, what I want to do is to be able to have the user/contact.php file open in the Contact Info tab and not to have to click a link that will open the contact form below all the tabs. I don't know if I'm clear in my explanation... Basically, I want the contact form to pop up in the tab without having to invoke the viewuser.php?action=contact&uid=1 link.

Is that possible to do and if so, can someone help me achieve that?

Thanks a lot.

P.S.: I tried including the form by using a INCLUDESCRIPT BLOCK but it didn't work - sadly enough for me.

You've got an error in your link.  It should be:

http://fanfics.suethomasfbeye.net/viewuser.php?uid=1&skin=supernatural

I think you can do this by editing user/contact.php.  If you want this behavior on all the skins, you can just change

$tpl->assign( "output", $output );

to

$tpl->assign( "contactform", $output );

Then in the profile.tpl use {contactform} in the contact tab.

If you want it for just this skin, just add the second line below the first.

Hmmmm.. I did exactly what you told me to do and it doesn't show up....

Ah.  You'll also need to edit profile.php and add:

include("user/contact.php");