Technical Details
Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )
Description of problem
Hello!So I have made a custom layout for "profile_view_body" template. Here is the code without style:
- Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
</tr>
</table>
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('[id^=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="{AJAX_EDIT_IMG}" /></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="{AJAX_VALID_IMG}" 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^=field_id]').attr('id');
var id = id_name.substring(8, id_name.length);
$.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=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();
}
});
}
});
});
//]]>
</script>
<link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css" />
<div class="profHeader" id="profHeader">{L_VIEWING_PROFILE}</div><script type="text/javascript">document.getElementById('profHeader').innerHTML=document.getElementById('profHeader').innerHTML.replace(/Aprašymo peržiūra ::/," "); </script>
<div class="profileBG">
<div class="profLeft">
<div class="profPA"><img src="https://i.solidfiles.com/jezDd3kYQ54Ze.png" /></div>
<div class="profTA"><img src="https://i.solidfiles.com/RqGAdY7ZgNqKY.png" /></div>
<br/><br/><br/><br/>
<div class="profRPGimg">{RPG_IMAGE}</div>
<br/>
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="profCont">
<tr>
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">Statusas : </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{USER_ONLINE}</div></td>
</tr>
<tr>
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">Paskutinį kartą lankėsi : </span></td>
<td width="60%" valign="middle"><div class="gen lastpostText" style="font-weight:bold;">{LAST_VISIT_TIME}</div></td>
</tr>
<tr>
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">Gautų pelėdų skaičius : </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{PRIVATE_MSG}</div></td>
</tr>
<tr>
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">Administruoti vartotoją : </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{ADMINISTRATE_USER} {BAN_USER}</div></td>
</tr>
<!-- BEGIN contact_field -->
<tr id="field_id{contact_field.ID}">
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">{contact_field.LABEL} </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
</tr>
<!-- END contact_field -->
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN switch_admin_user_comment_active -->
<tr>
<td align="right" valign="middle" nowrap="nowrap" width="50%">
<span class="gen">c{L_COMMENTS} :</span><br />
<span class="gensmall">{L_MODS_AND_ADMINS}</span>
</td>
<td class="row1" valign="middle">
<table align="center">
<tr>
<td>xxx {ADMIN_USER_COMMENT}</td>
</tr>
</table>
</td>
</tr>
<!-- END switch_admin_user_comment_active -->
</table>
</div>
<div class="profRight">
<br/>
<div class="profPAinfo onscr">
<br/>
<table border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN profile_field -->
<tr id="field_id{profile_field.ID}">
<td width="415px">
<div class="gen" style="font-weight: bold; font-size: 14px;">{profile_field.LABEL}</div>
<div class="gen" style="text-align: justify; padding-bottom: 5px;">{profile_field.CONTENT}</div>
<!-- BEGIN profil_type_user_posts -->
<span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span><br />
<span class="genmed">
<a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><br />
</span>
<!-- END profil_type_user_posts -->
</td>
</tr>
<!-- END profile_field -->
</table>
</div>
<div class="profTAinfo onscr">
<center style="color: black;"><b>IRL {in real life}</b></center>
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<!-- BEGIN switch_rpg -->
<tr>
<td class="row1" align="center" valign="top" height="6">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN rpg_fields_left -->
<tr>
<td width="100%" valign="middle" nowrap="nowrap">
<div class="gen" style="font-weight: bold; font-size: 14px; margin-left: -5px;">{switch_rpg.rpg_fields_left.F_NAME} : </div>
<div class="gen" style="text-align: justify; padding-bottom: 5px;">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</div>
</td>
</tr>
<!-- END rpg_fields_left -->
</table>
</td>
<td class="row1" align="center" valign="top" height="6">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN rpg_fields -->
<tr>
<td width="100%" valign="baseline">
<div class="gen" style="font-weight: bold; font-size: 14px; margin-left: -5px;">{switch_rpg.rpg_fields.F_NAME} : </div>
<div class="gen" style="text-align: justify; padding-bottom: 5px;">{switch_rpg.rpg_fields.F_VALUE_NEW}</div>
</td>
</tr>
<!-- END rpg_fields -->
</table>
</td>
</tr>
<!-- END switch_rpg -->
</table>
</div>
<div class="profB">Keisti</div>
</div>
</div>
<br/>
ISSUE 1:
By default each profile field is created in table layout. I changed it, so each field would be in DIV element instead. But, that removed instant edit option - in table layout, edit button appears, for DIV elements it does not. Is it possible to have such functionality while still using DIV elements?
Main reason, why I switched to DIV elements - I need field name and field content to be on separate lines with separate styles. Maybe this is possible with table layout as well?
EDIT: as you notice, there is script included for the editing function. Yet I am not sure if how to edit it to make it work for my layout.
ISSUE 2: SOLVED
In the end of RPG sheet, I want to add link to RPG style sheet editing. I have tried editing something like: https://help.forumotion.com/rpg_sheet_edit
That is the link displayed in profile editing, but it does not work. Any ideas?
SOLUTION:
- Code:
//Code by KamiSama
var pfedit = window.location.pathname;
$(".profB").on("click", function () {
window.location = pfedit.replace("url/u", "url/rpg_sheet_edit?u=");
});
ISSUE 3: SOLVED
Similar to ISSUE 2, I have added a link to profile details editing. That is more simple - https://help.forumotion.com/profile?mode=editprofile . The issue here is, that this link is visible to anyone who views the profile. It should be visible only to the profiles owner. I believe a Javascript would work here. Something like:
- Code:
$(".edit_element_class").css("display", "none");
if(document.URL.indexOf("URL") = USER_ID_TAG ){
$(".edit_element_class").css("display", "block");
}
My question would be, what to put in place of these tags:
|
SOLUTION:
- Code:
//Code by KamiSama
$(function(){
var userid = "/u" + _userdata["user_id"];
var path = window.location.pathname;
$(".profChangeButton").css("display", "none");
if (path == userid) {
$(".profChangeButton").css("display", "block");
}
});
Do not hesitate to ask if anything is unclear!
Last edited by Kami-sama on December 20th 2017, 7:50 pm; edited 6 times in total