FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

AJAX Profile Tabs

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
https://fmdesign.forumotion.com/u1

AJAX Profile Tabs Captu102

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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Selvester
Selvester
Member
Gender : Female
Age : 29
Posts : 19
Points : 3776
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostSelvester 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Selvester
Selvester
Member
Gender : Female
Age : 29
Posts : 19
Points : 3776
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostSelvester 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.
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4229
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak Tue 18 Feb 2014, 02:37

nice tutorial! again very helpful! thanx Ange!
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Selvester
Selvester
Member
Gender : Female
Age : 29
Posts : 19
Points : 3776
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostSelvester 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4229
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4229
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak Sat 05 Apr 2014, 04:17

works like a charm ^^
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sat 05 Apr 2014, 14:19

Good ! Very Happy

Hopefully that's all of them now ! Razz
Theshaka
Theshaka

Gender : Male
Age : 29
Posts : 31
Points : 3629
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://seiya.forumotion.com/

PostTheshaka 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 06 Jun 2014, 00:17

Do you get any errors in your browser console ? Press the F12 key.
Theshaka
Theshaka

Gender : Male
Age : 29
Posts : 31
Points : 3629
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://seiya.forumotion.com/

PostTheshaka Fri 06 Jun 2014, 10:58

I don't know.
lightningterror
lightningterror
Member
Gender : Unspecified
Posts : 20
Points : 3674
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postlightningterror 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.
Theshaka
Theshaka

Gender : Male
Age : 29
Posts : 31
Points : 3629
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://seiya.forumotion.com/

PostTheshaka Sat 07 Jun 2014, 17:47

Ummm i think today you fix my error but the buttons still not work.
Theshaka
Theshaka

Gender : Male
Age : 29
Posts : 31
Points : 3629
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://seiya.forumotion.com/

PostTheshaka Thu 12 Jun 2014, 13:04

bump?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 19 Jun 2014, 17:41

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

PostSponsored content

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