IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 09 Oct 2018, 11:34

» 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

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ange Tuteur
Administrator
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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 : mediafire.com view/fto2558xrzsflyy/AJAX%20Profile%20Tabs.txt

The new file can also be copied from here : mediafire.com view/q88g1xce9znsxm8/AJAX_Profile_Tabs_v2.txt

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Selvester
Member
Gender : Female
Age : 24
Posts : 19
Points : 1839
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Selvester
Member
Gender : Female
Age : 24
Posts : 19
Points : 1839
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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

Gender : Male
Age : 22
Posts : 275
Points : 2292
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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
Gender : Female
Age : 24
Posts : 19
Points : 1839
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Rhino.Freak

Gender : Male
Age : 22
Posts : 275
Points : 2292
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Rhino.Freak

Gender : Male
Age : 22
Posts : 275
Points : 2292
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Theshaka

Gender : Male
Age : 24
Posts : 31
Points : 1692
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

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

PostTheshaka on Fri 06 Jun 2014, 10:58

I don't know.
avatar
lightningterror
Member
Gender : Unspecified
Posts : 20
Points : 1737
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
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

Gender : Male
Age : 24
Posts : 31
Points : 1692
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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

Gender : Male
Age : 24
Posts : 31
Points : 1692
Reputation : 0
Language : Polish,English,French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
View user profile http://seiya.forumotion.com/

PostTheshaka on Thu 12 Jun 2014, 13:04

bump?
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 23
Posts : 4736
Points : 10024
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

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