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

Page 1 of 2 1, 2  Next

Go down

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

Post by Bedlam on Mon Apr 13, 2015 10: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 Wed May 27, 2015 5:26 am; edited 3 times in total
avatar
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 Mon Apr 20, 2015 10:48 pm

Bump
avatar
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 Mon Apr 20, 2015 11:10 pm

@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
avatar
JScript
Forumember

Male Posts : 741
Reputation : 173
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 Tue Apr 21, 2015 5: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.
avatar
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 Tue Apr 21, 2015 6:42 am

Is JavaScript Management on?


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43095
Reputation : 3051
Language : English
Location : United States

https://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 Tue Apr 21, 2015 8:07 am

I assume you mean this?

avatar
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 Thu Apr 23, 2015 8:33 am

bump
avatar
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 Mon Apr 27, 2015 2:23 am

bump
avatar
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 Fri May 01, 2015 8:56 pm

bumps
avatar
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 Fri May 01, 2015 9:07 pm

@Bedlam wrote:I assume you mean this?

Yes thats it Smile.

-Brandon
avatar
brandon_g
Support Moderator
Support Moderator

Male Posts : 6763
Reputation : 617
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 Wed May 06, 2015 6:34 am

Yes it's turned on!!
avatar
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 Thu May 07, 2015 8:59 am

bump
avatar
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 Fri May 08, 2015 9: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??
avatar
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 Sat May 09, 2015 8:12 am

bump
avatar
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 Sun May 10, 2015 7:20 am

bump
avatar
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 Mon May 11, 2015 2:08 am

Is there anyone who know
:/
avatar
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 Mon May 11, 2015 2:42 am

avatar
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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 Mon May 11, 2015 3: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
avatar
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 Tue May 12, 2015 1:11 am

bump
avatar
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 Tue May 12, 2015 7:55 pm

bump
avatar
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 Wed May 13, 2015 9:37 am

nump
avatar
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 Thu May 14, 2015 7:43 am

Bump
TT
avatar
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 Thu May 14, 2015 11:47 pm

bump
avatar
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 Sun May 17, 2015 3:58 am

bump
avatar
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 Wed May 20, 2015 7:23 am

bump
avatar
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 Wed May 27, 2015 5:27 am

Another bump!!
avatar
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 Thu May 28, 2015 10:51 am

5ever bump
avatar
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 Sun Jun 07, 2015 11:30 am

Still bump
TT
avatar
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 Sat Jun 13, 2015 9:14 pm

bump
avatar
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 Sat Jun 13, 2015 9: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.

avatar
SLGray
Administrator
Administrator

Male Posts : 43095
Reputation : 3051
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top


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