HomeContent from profile tabs overlaps
3 posters
Page 1 of 1
Content from profile tabs overlaps
by Vaida Wed 20 Mar - 6:28
- Technical details:
- Forum version: phpBB3
Position: Guest
Concerned browser(s): Firefox, Chrome
Screenshot of problem: https://i.imgur.com/IqY5yTZ.png
Who the problem concerns: All members
Forum link: http://fantastic-beasts.foroactivo.com/u6
I have a couple of buttons that alternate info in the user profile, but for some reason both tabs overlap before any of the buttons are pressed. After pressing them everything works as it should, each tab alternating accordingly.
However, the second tab should not be visible when the page is just loaded, only after tapping its button. Am I missing something? Any help is appreciated!
My code:
- Javascript:
- Code:
$(function() {
/***/
var campoImagenPerfil = "field_id4";
var campoInventario = "field_id-20";
/***/
$("dl#" + campoImagenPerfil).appendTo($("#imagen-perfil"));
$('dl#' + campoInventario).appendTo($('#p-inventario'));
$('#botones-perfil li').click(function() {
if ($(this).attr('class') != "active") {
$(this).addClass('active');
$(this).siblings().removeClass('active');
}
if ($('#boton-baul.active').length) {
$('#p-datos').show();
$('#p-inventario').hide();
} else {
$('#p-datos').hide();
$('#p-inventario').show();
}
});
$('#tabla-perfil td, #tabla-perfil div').filter(function() { return $(this).html() == '' }).remove();
});
- CSS:
- Code:
.caja-perfil {
background: url(https://i.imgur.com/QqwPWb7.png);
margin-right: -5px;
padding: 10px;
position: relative;
}
.caja-back{
background: rgba(0, 0, 0, 0.54);
position: relative;
height: 424px;
}
#field_id4 {
float: left;
position: absolute;
left: 30px;
top: 15px;
color: #000000;
}
#field_id4 span {
display: none;
}
#field_id-20 {
position: absolute;
top: 28px;
left: 396px;
float: left;
color: #000000;
}
#field_id-20 span {
display: none;
display: inline-block;
background: #f0f0f0;
width: 70px;
color: #000000 !important;
padding: 6px;
font-style: italic;
margin: 2px;
vertical-align: top;
}
#field_id-20 div.cc {
position: relative;
left: -10px;
padding: 10px;
width: 520px;
height: 260px;
overflow-y: scroll;
width: 850px;
}
span.u-link {
display: inline-block;
padding: 10px;
margin: 3.5px;
background: white;
width: 10px;
outline: 1px solid white;
outline-offset: 2px;
}
.p-contacto {
text-align: left;
vertical-align: top;
color: #f0f0f0;
font: 20px georgia;
font-weight: 900;
padding-left: 20px;
display: block;
margin-bottom: 30px;
margin-top: 5px;
}
.p-topics {
position: relative;
top: 310px;
left: 402px;
width: 40px;
height: 40px;
background: #f0f0f0;
outline: 1px solid #f0f0f0;
outline-offset: 2px;
padding: 10px;
text-align: center;
font-size: 30px;
overflow: auto;
}
.p-post {
position: relative;
top: 250px;
left: 474px;
width: 40px;
height: 40px;
padding: 10px;
text-align: center;
font-size: 30px;
background: #f0f0f0;
outline: 1px solid #f0f0f0;
outline-offset: 2px;
}
.p-post a, .p-topics a {
color: #000000;
}
.en-line {
width: 288px;
padding: 10px;
position: absolute;
top: 292px;
color: #f0f0f0;
left: 28px;
height: 10px;
background: #000000;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
.amins {
left: 34px;
padding: 8px;
position: absolute;
top: 390px;
width: 160px;
}
.amins a {
color: #f0f0f0;
font-weight: 900;
letter-spacing: 1px;
font-style: italic;
}
.titulo-perfil {
position: absolute;
top: 295px;
left: 600px;
padding: 10px;
width: 300px;
text-align: right;
color: #f0f0f0;
font: 30px georgia;
font-weight: 900;
font-style: italic;
}
.p-visita {
font: 9px archivo narrow;
letter-spacing: 1px;
margin-top: 10px;
}
.titulo-perfil span {
color: #f0f0f0;
}
#field_id2 span, #field_id1 span, #field_id3 span, #field_id-4 span, #field_id5 span, #field_id6 span, #field_id-6 span, #field_id-8 span, #field_id-9 span, #field_id-12 span {
display: inline-block;
width: 70px;
background: #f0f0f0;
color: #000000 !important;
padding: 6px;
font-style: italic;
margin: 2px;
}
dl#field_id dt {
display: none;
}
.p-datos {
float: right;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 300px;
width: 300px;
height: 220px;
padding: 10px;
}
#p-con .field_uneditable, #p-con a {
display: inline-block;
color: #171715;
}
#p-con .field_uneditable, #p-con:hover a {
display: inline-block;
color: #797980;
}
.p-datos .cc {
display: inline-block;
color: #f0f0f0;
border-bottom: 1px solid #f0f0f0;
padding: 6px;
margin-left: -5px;
position: relative;
top: -1px;
}
#botones-perfil li {
display: inline-block;
list-style-type: none;
width: 80px;
background: #f0f0f0;
font-family: 20px archivo narrow;
font-weight: 900;
color: #171715;
outline: 1px solid #f0f0f0;
outline-offset: 2px;
padding: 8px;
text-align: center;
margin-bottom: 10px;
}
#botones-perfil li.active {
background-color: #d0d0d0;
}
#botones-perfil li:hover {
background-color: #000000;
color: #f0f0f0;
cursor: pointer;
}
#boton-baul {
position: absolute;
top: 345px;
left: 31px;
}
#boton-inv {
position: absolute;
top: 345px;
left: 137px;
}
- profile_view_body:
- Code:
<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<div class="caja-perfil"><div class="caja-back">
<div class="p-topics"><a rel="nofollow" href="/sta/{PUSERNAME}" title="Temas"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></div>
<div class="p-post"><a rel="nofollow" href="/spa/{PUSERNAME}" title="Respuestas"><i class="fa fa-commenting" aria-hidden="true"></i></a></div>
<table id="tabla-perfil">
<tbody>
<tr>
<td id="imagen-perfil"><div id="field_id4"></div>
<div class="en-line"> {USER_ONLINE}</div>
</td>
<td>
<div id="p-datos" style="margin-left: 80px; margin-top: -121px;">
<table>
<tbody>
<tr>
<td id="camposDatos"><div class="p-datos">
<!-- BEGIN profile_field -->
<dl id="field_id{profile_field.ID}" class="left-box details" style="width: 80%;">
{profile_field.LABEL} <div class="cc">{profile_field.CONTENT}</div>
</dl>
<!-- END profile_field -->
</div></td>
<td id="camposContacto" style="margin-top: -121px;"><form action="{S_PROFILE_ACTION}" method="post" name="post">
<div class="p-contacto">Contacto</div>
<!-- BEGIN contact_field -->
<dl id="field_id{contact_field.ID}" class="left-box details" style="width: 80%;">
<div id="p-con">{contact_field.CONTENT}</div>
</dl>
<!-- END contact_field -->
</form></td>
</tr>
</tbody>
</table>
</div>
</td>
<div id="p-inventario"><div id="field_id-20"></div></div>
</tr>
</tbody>
</table>
<div id="botones-perfil">
<ul>
<li id="boton-baul" class="active">Baúl</li>
<li id="boton-inv">Inventario</li>
</ul>
</div>
<div class="titulo-perfil">{USERNAME}
<div class="p-visita">{L_LAST_VISITED}: {LAST_VISIT_TIME}</div></div> <div class="amins">{ADMINISTRATE_USER}{BAN_USER}</div>
</div></div>
<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>
Vaida- New Member
- Posts : 2
Reputation : 2
Language : English
Re: Content from profile tabs overlaps
by TheCrow Wed 20 Mar - 11:09
Hello @Vaida and thank you for providing all the necessary information.
Please try and add this part
in your javascript before the click function so that way it hides the second tab as default. That should fix your issue.
Regards.
Please try and add this part
|
Regards.
 | Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow- Manager
-
Posts : 6916
Reputation : 795
Language : Greek, English -
Re: Content from profile tabs overlaps
by Vaida Wed 20 Mar - 16:35
Of course it had to be a simple fix, Javascript is still so new to me! Thank you @TheCrow, that totally worked. Marking this thread as solved 
Vaida- New Member
- Posts : 2
Reputation : 2
Language : English
Re: Content from profile tabs overlaps
by skouliki Wed 20 Mar - 16:48
Problem solved & topic archived.
|
skouliki- Manager
-
Posts : 15311
Reputation : 1705
Language : English,Greek
Location : Greece -
Similar topics» Pulling content from other tabs via AJAX
» Profile tabs + separated profile fields
» Add .pun-crumbs above profile tabs
» Checkbox + Profile Tabs Style
» Profile Tabs not Appearing in Invision
» Profile tabs + separated profile fields
» Add .pun-crumbs above profile tabs
» Checkbox + Profile Tabs Style
» Profile Tabs not Appearing in Invision
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
