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.

Javascript Code to "re-insert" a profile field in a different spot?

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 13th 2015, 11:35 am

Technical Details

Forum version : phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link :   www.gasrforum.com

Description of problem

Alright I have been searching for a code like this but I have no idea if it's possible or how to go about achieving what I want.

I would like the advanced profiles on forumotion to be a bit better organized? On my forum, we have a lot custom fields which make the profile page cluttered. I was wondering if it would be possible to create additional tabs where the "visitor messages / profile / statics" and somehow add the customizable fields to those pages?



If nothing else, would it be possible to move custom fields to the right side of the page instead of on the left?

UPDATE----

Right so since nobody is answering this, I've started to try and make some sort of code pieced together from other codes I have found.

So here's the first thing I've started doing, using a javascript to add code to the userpage, I have hidden the section I want moved underneath the display picture.



to ----> 




Using this javascript:

Code:
jQuery(document).ready(function(){
         if(window.location.pathname.indexOf("/u68")!==-1){
          jQuery('<style>body{background: url("http://media.tumblr.com/6233adc1e97adcc10105f1988b8a2465/tumblr_inline_mns3reYdBr1qz4rgp.gif") }

dl#field_id20 {  
     visibility: hidden; !important;
}</style>').appendTo(document.head);
         } else return;
        });

Then editing the user stastics code made by @Ange Tuteur (although I don't really understand how javascripts work so I left a lot of unnecessary things in the code so it wouldn't break).

I added the "awards" underneath the display picture.

Code:
window.location.pathname.match(/\/u\d+/) && $(function() {
  var b = document.createElement('DIV'),
  lang = {
    activity : 'Awards'  }, placeholder = '<span class="gen"><dl id="field_id20"><dt><dd></dd></dt></dl></span>';
  

  document.getElementById('wrap') && (b.innerHTML = '<div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">'+lang.activity+'</div>'+placeholder+'<span class="corners-bottom"><span></span></span></div></div>');
  document.getElementById('ipbwrapper') && (b.innerHTML = '<div class="module borderwrap"><div class="maintitle"><h3>'+lang.activity+'</h3></div><div class="box-content profile center">'+placeholder+'</div></div>');
 

 $('.bodylinewidth').length && (b.innerHTML = '<div style="height:3px;"></div><table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><td class="catLeft"><span class="genmed module-title">'+lang.activity+'</span></td></tr><tr><td class="row1 gensmall" align="center">'+placeholder+'</td></tr></tbody></table>', bb2 = true);  

$('#profile-advanced-right .module:first, td[width="300"] .forumline:first').after(b);
  $.get('/viewonline',function(data) {
    var p = b.getElementsByTagName('P')[0], c = 'tr:has(a[href="/u'+window.location.pathname.match(/u(\d+)/)[1]+'"]) td';
    bb2 && (c = '.three-col table:has(.nav) + table ' + c);
    p.innerHTML = $(c+':last',data).html();
    !p.innerHTML.length ? p.innerHTML = '<a href="#" onclick="return false;" class="inactive">'+lang.offline+'</a><div class="lastactive">'+lang.last+' : '+lang.none+'</div>' : p.innerHTML += '<div class="lastactive">'+lang.last+' : ' + $(c+':eq(1)',data).html() + '</div>';
  });
});


Last edited by Bedlam on May 27th 2015, 6:26 am; edited 3 times in total

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 20th 2015, 11:48 pm

Bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by JScript on April 21st 2015, 12:10 am

@Bedlam wrote:Bump
Hello!

This is possible, below you will see the code I use to implement new tabs and various other things:
Code:

if (location.pathname.indexOf('/u') == 0) {
    var _profile = setInterval(function() {
        if (document.getElementById('profile-advanced-right') !== null) {
            var oTarget = jQuery('[id^=field_id]'),
                iLen = oTarget.length,
                index = 0;
            for (; index < iLen; index++) {
                var oThis = jQuery(oTarget[index]);
                oThis.attr('id', 'JS_' + oThis.attr('id'));
            };
            clearInterval(_profile);
            $('[id^=JS_field_id]').each(function() {
                if ($(this).find('.field_editable').is('span, div')) {
                    $(this).hover(function() {
                        if ($(this).find('.field_editable.invisible').is('span, div')) {
                            $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="http://illiweb.com/fa/invision/../edit.png" /></div>');
                            $(this).find('.ajax-profil_edit').attr({
                                alt: "{L_FIELD_EDIT_VALUE}",
                                title: "{L_FIELD_EDIT_VALUE}"
                            }).click(function() {
                                $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="http://illiweb.com/fa/invision/../valid.png" class="ajax-profil_valid" />').find('input,select');
                                $(this).prev().find('.ajax-profil_valid').attr({
                                    alt: "{L_VALIDATE}",
                                    title: "{L_VALIDATE}"
                                }).click(function() {
                                    var content = new Array();
                                    $(this).parent().find('[name]').each(function() {
                                        var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                                        if ((type_special && $(this).is(':checked')) || !type_special) {
                                            content.push(new Array($(this).attr('name'), $(this).attr('value')));
                                        }
                                    });
                                    var id_name = $(this).parents('[id^=JS_field_id]').attr('id');
                                    var id = id_name.substring(11, id_name.length);
                                    console.log('id_name: ' + id_name + '\n' + 'id: ' + id);
                                    $.post(
                                        "{U_AJAX_PROFILE}", {
                                            id: id,
                                            user: "{CUR_USER_ID}",
                                            active: "{CUR_USER_ACTIVE}",
                                            content: $.toJSON(content),
                                            tid: "{TID}"
                                        },
                                        function(data) {
                                            $.each(data, function(i, item) {
                                                $('[id=JS_field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                            });
                                        },
                                        "json"
                                    );
                                });
                                $(this).remove();
                            });
                        }
                    }, function() {
                        if ($(this).find('.field_editable.invisible').is('span, div')) {
                            $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                            $(this).find('.ajax-profil_edit').remove();
                        }
                    });
                }
            });

        };
    }, 50);
}

Give us more details of what you want to implement, because I saw that in addition to new tabs you want to add fields in these tabs, but would be new or existing fields?

So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 21st 2015, 6:59 am

Thank you so much for the reply and the code!
I am quite new to navigating javascript codes so I have no idea what all that does.
I tried implementing the unedited code into my forum and nothing happened.

I would preferably like existing fields on those newly created tabs.

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by SLGray on April 21st 2015, 7:42 am

Is JavaScript Management on?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 21st 2015, 9:07 am

I assume you mean this?


Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 23rd 2015, 9:33 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on April 27th 2015, 3:23 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 1st 2015, 9:56 pm

bumps

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by brandon_g on May 1st 2015, 10:07 pm

@Bedlam wrote:I assume you mean this?

Yes thats it Smile.

-Brandon

brandon_g
Support Moderator
Support Moderator

Male Posts : 5140
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 6th 2015, 7:34 am

Yes it's turned on!!

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 7th 2015, 9:59 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 8th 2015, 10:17 am

Right so since nobody is answering this, I've started to try and make some sort of code pieced together from other codes I have found.

So here's the first thing I've started doing, using a javascript to add code to the userpage, I have hidden the section I want moved underneath the display picture.



to ----> 




Using this javascript:

Code:
jQuery(document).ready(function(){
         if(window.location.pathname.indexOf("/u68")!==-1){
          jQuery('<style>body{background: url("http://media.tumblr.com/6233adc1e97adcc10105f1988b8a2465/tumblr_inline_mns3reYdBr1qz4rgp.gif") }

dl#field_id20 {  
     visibility: hidden; !important;
}</style>').appendTo(document.head);
         } else return;
        });

Then editing the user stastics code made by @Ange Tuteur (although I don't really understand how javascripts work so I left a lot of unnecessary things in the code so it wouldn't break).

I added the "awards" underneath the display picture.

Code:
window.location.pathname.match(/\/u\d+/) && $(function() {
  var b = document.createElement('DIV'),
  lang = {
    activity : 'Awards'  }, placeholder = '<span class="gen"><dl id="field_id20"><dt><dd></dd></dt></dl></span>';
  

  document.getElementById('wrap') && (b.innerHTML = '<div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">'+lang.activity+'</div>'+placeholder+'<span class="corners-bottom"><span></span></span></div></div>');
  document.getElementById('ipbwrapper') && (b.innerHTML = '<div class="module borderwrap"><div class="maintitle"><h3>'+lang.activity+'</h3></div><div class="box-content profile center">'+placeholder+'</div></div>');
 

 $('.bodylinewidth').length && (b.innerHTML = '<div style="height:3px;"></div><table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><td class="catLeft"><span class="genmed module-title">'+lang.activity+'</span></td></tr><tr><td class="row1 gensmall" align="center">'+placeholder+'</td></tr></tbody></table>', bb2 = true);  

$('#profile-advanced-right .module:first, td[width="300"] .forumline:first').after(b);
  $.get('/viewonline',function(data) {
    var p = b.getElementsByTagName('P')[0], c = 'tr:has(a[href="/u'+window.location.pathname.match(/u(\d+)/)[1]+'"]) td';
    bb2 && (c = '.three-col table:has(.nav) + table ' + c);
    p.innerHTML = $(c+':last',data).html();
    !p.innerHTML.length ? p.innerHTML = '<a href="#" onclick="return false;" class="inactive">'+lang.offline+'</a><div class="lastactive">'+lang.last+' : '+lang.none+'</div>' : p.innerHTML += '<div class="lastactive">'+lang.last+' : ' + $(c+':eq(1)',data).html() + '</div>';
  });
});


So my question is how do I insert the content from dl#field_id20 so that it will update itself for every individual??

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 9th 2015, 9:12 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 10th 2015, 8:20 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 11th 2015, 3:08 am

Is there anyone who know
:/

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Sir. Mayo on May 11th 2015, 3:42 am


Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 11th 2015, 4:19 am

Yes I have actually looked at that topic before!
But it didn't work on my forum (I'm using phpBB2)
I'll try the code again since it's been a while since I tested it haha.


EDIT - I tested it again and no it still doesn't work for phpBB2

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 12th 2015, 2:11 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 12th 2015, 8:55 pm

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 13th 2015, 10:37 am

nump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 14th 2015, 8:43 am

Bump
TT

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 15th 2015, 12:47 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 17th 2015, 4:58 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 20th 2015, 8:23 am

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 27th 2015, 6:27 am

Another bump!!

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on May 28th 2015, 11:51 am

5ever bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on June 7th 2015, 12:30 pm

Still bump
TT

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by Bedlam on June 13th 2015, 10:14 pm

bump

Bedlam
Forumember

Female Posts : 62
Reputation : 4
Language : English
Location : Canada

http://www.gasrforum.com/

Back to top Go down

Re: Javascript Code to "re-insert" a profile field in a different spot?

Post by SLGray on June 13th 2015, 10:20 pm

Did @JScript solve some of your issues?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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