Hitskin.com
by Vaida March 20th 2019, 5:28 am- 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>
Facebook
Twitter
Pinterest
Youtube
