Latest topics
» IconSkouliki Graphics
by skouliki Fri 20 Oct 2017, 05:08

» "Edit this page" feature
by skouliki Fri 20 Oct 2017, 01:37

» Dark Mode + Another Question
by Haggis Thu 19 Oct 2017, 10:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

AJAX Profile Tabs

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 26 Jan 2014, 17:22

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello,

This project of mine is for allowing the tabs of the advanced profile load their contents without reloading the entire page. You can see an example by going to my profile and clicking the tabs.
http://fmdesign.forumotion.com/u1



Currently I have it working on phpbb3 and punbb. Please note that on phpbb2 and invision this does not currently work.

To apply and test this :
* the advanced profile must be active
* your forum version must be phpbb3 or punbb

Administration panel > Modules > Javascript codes management > Create a new script

Title : AJAX Profile Tabs
Placement : in all the pages
Paste the code below and save :
Code:
$(function() { 
    var at = 'activetab';
    var ti = '#tabs li';
    var pa = ' #profile-advanced-details';
    var ta = '#tabs a';
    var taa = '#tabs .activetab a';
    var atl = '#ajaxTabLoad';
    var uw = '#userWall';
    var up = '#userProfile';
    var us = '#userStats';
    var ua = '#userAttach';
    var uf = '#userFriends';
    var uc = '#userContact';
    var ur = '#userRPG';

    var L = location.pathname;
    var uid = L.replace(/\/u/,'').replace(/wall/,'').replace(/stats/,'').replace(/friends/,'').replace(/contact/,'').replace(/rpg/,'').replace(/attachments/,'');
    var wall = '/u'+uid+'wall';
    var prof = '/u'+uid;
    var stat = '/u'+uid+'stats';
    var atta = '/u'+uid+'attachments';
    var frnd = '/u'+uid+'friends';
    var cnat = '/u'+uid+'contact';
    var rpg = '/u'+uid+'rpg';

    var load = '<div class="tabLoading panel row3 main-content clearfix" style="font-size:18px;text-align:center;padding:10px;">Loading...</div>';
 
    var notAct = function() { $(ti).removeClass(at) };

    if (document.getElementById('profile-advanced-layout')) {

        if (L == wall) { $(taa).attr('href',wall) }
        if (L == prof) { $(taa).attr('href',prof) }
        if (L == stat) { $(taa).attr('href',stat) }
        if (L == atta) { $(taa).attr('href',atta) }
        if (L == frnd) { $(taa).attr('href',frnd) }
        if (L == cnat) { $(taa).attr('href',cnat) }
        if (L == rpg) { $(taa).attr('href',rpg) }

        $(ta).click(function() { return false });
        $(pa).wrap('<div id="ajaxTabLoad" style="margin-right:4px;"></div>');
        $(ta+'[href="'+wall+'"]').attr('id','userWall');
        $(ta+'[href="'+prof+'"]').attr('id','userProfile');
        $(ta+'[href="'+stat+'"]').attr('id','userStats');
        $(ta+'[href="'+atta+'"]').attr('id','userAttach');
        $(ta+'[href="'+frnd+'"]').attr('id','userFriends');
        $(ta+'[href="'+cnat+'"]').attr('id','userContact');
        $(ta+'[href="'+rpg+'"]').attr('id','userRPG');

    }

    $(uw).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uw+')').addClass(at);
        $(atl).html(load).load(wall + pa);
    });

    $(up).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+up+')').addClass(at);
        $(atl).html(load).load(prof + pa);
    });

    $(us).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+us+')').addClass(at);
        $(atl).html(load).load(stat + pa);
    });
   
    $(ua).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+ua+')').addClass(at);
        $(atl).html(load).load(atta + pa);
    });

    $(uf).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uf+')').addClass(at);
        $(atl).html(load).load(frnd + pa);
    });

    $(uc).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uc+')').addClass(at);
        $(atl).html(load).load(cnat + pa);
    });
 
    $(ur).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+ur+')').addClass(at);
        $(atl).html(load).load(rpg + pa);
    });
});

Once you have it enable you can go to your profile and test the tabs. If you encounter any bugs you may report it to this topic.

Many thanks and happy testing Smile


Last edited by Ange Tuteur on Fri 04 Apr 2014, 13:18; edited 1 time in total
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 08 Feb 2014, 15:02

Hello,

I have made a few updates to the AJAX profile tabs. History pushstate has been removed and replaced with a better method to prevent the tabs from reloading the currently active. The amount of characters used has been reduced some as well. The updated script is above if you want to use it.

For previous version you can copy from this file : http://www.mediafire.com/view/fto2558xrzsflyy/AJAX%20Profile%20Tabs.txt

The new file can also be copied from here : http://www.mediafire.com/view/q88g1xce9znsxm8/AJAX_Profile_Tabs_v2.txt
avatar
Selvester
Member
Title :
Gender : Female
Age : 23
Posts : 19
Points : 1427
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostSelvester on Sun 09 Feb 2014, 09:26

Actually spotted something with this and meant to mention it the other day but forgot. But when you scroll down in one of the tabs the little avatars scroll with it I guess. I don't know if it's suppose to do that but I thought it might be worth mentioning. I have screen shots on my computer but you could probably see for yourself before I get the chance to get on it and post them.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 10 Feb 2014, 01:57

Oh yes, It was designed to float on the right like that. It could be changed if it poses a problem. It also acts as 'view profile' since I have included the user url on it.
avatar
Selvester
Member
Title :
Gender : Female
Age : 23
Posts : 19
Points : 1427
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostSelvester on Mon 17 Feb 2014, 13:58

Alright. Smile I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1880
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Tue 18 Feb 2014, 02:37

nice tutorial! again very helpful! thanx Ange!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 18 Feb 2014, 12:03

Selvester wrote:Alright. :)I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.

That is good then. Wink

I think we mixed the topics,  the question was for the popup, right ? Shocked

Rhino.Freak wrote:nice tutorial! again very helpful! thanx Ange!

You're welcome Very Happy
avatar
Selvester
Member
Title :
Gender : Female
Age : 23
Posts : 19
Points : 1427
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostSelvester on Tue 18 Feb 2014, 14:23

Ange Tuteur wrote:
Selvester wrote:Alright. :)I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.

That is good then. Wink

I think we mixed the topics,  the question was for the popup, right ? Shocked

... Oops... Yeah that should have been for the popup. XD My bad! This one is brilliant too though and hasn't shown any problems. Seems to work perfectly! Smile
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 18 Feb 2014, 19:28

Heehee yes, I didn't notice either though Shocked

Very good Smile

This one is working fine, only recently I noticed a mistake of mine. The new message bouton for the VM does not load, at least on here I think. I will need to fix that.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1880
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Fri 04 Apr 2014, 02:08

hi again! just noticed that it doesn't work when Attachments are enabled .. can you fix it? Smile thanks
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 04 Apr 2014, 13:18

I can't believe I forgot that !! Shocked

Thanks for pointing that out, the code in the first post should now be updated. Very Happy
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1880
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Sat 05 Apr 2014, 04:17

works like a charm ^^
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 05 Apr 2014, 14:19

Good ! Very Happy

Hopefully that's all of them now ! Razz
avatar
Theshaka

Title :
Gender : Male
Age : 22
Posts : 31
Points : 1280
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://seiya.forumotion.com/

PostTheshaka on Sun 25 May 2014, 14:58

Yo, I don't know why but the tabs not work for me :/ any idea why? i do everything what you say in first topic  Sad Sad Sad
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 06 Jun 2014, 00:17

Do you get any errors in your browser console ? Press the F12 key.
avatar
Theshaka

Title :
Gender : Male
Age : 22
Posts : 31
Points : 1280
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://seiya.forumotion.com/

PostTheshaka on Fri 06 Jun 2014, 10:58

I don't know.
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1325
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Fri 06 Jun 2014, 11:08

I just checked your forum and i found a lot of errors

Uncaught SyntaxError: Unexpected identifier 99183.js:1
Uncaught SyntaxError: Unexpected token ILLEGAL 13336.js:1
Failed to load resource http://cdn.viglink.com/api/vglnk.js
Uncaught TypeError: Object [object global] has no method 'updateIframeSize' h1-:107
Failed to load resource http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?_=1402067089198
Uncaught TypeError: Cannot call method 'split' of undefined 0B1KYB697LuNxVUlqTDVLTXNHSkU:441
15
Uncaugh

You need to sort these errors out.

--------

You'll never be alone again
You'll never die again
You'll never be born again
You'll forever be, stuck here in eternity


avatar
Theshaka

Title :
Gender : Male
Age : 22
Posts : 31
Points : 1280
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://seiya.forumotion.com/

PostTheshaka on Sat 07 Jun 2014, 17:47

Ummm i think today you fix my error but the buttons still not work.
avatar
Theshaka

Title :
Gender : Male
Age : 22
Posts : 31
Points : 1280
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://seiya.forumotion.com/

PostTheshaka on Thu 12 Jun 2014, 13:04

bump?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9540
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 19 Jun 2014, 17:41

I would have to look into it since it works fine on default phpBB3

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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