The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Toggle issues

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

Toggle issues Empty Toggle issues

Post by Kami-sama Tue Dec 20, 2016 5:58 pm

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 was messing around with the basic profile template. In the end you can find my basic code and JQ.

Selecting ".profilioTab3" the element ".profilioTabContent" disappears as intended and appear again when the element is toggled again. selecting ".profilioTab4" the element ".profilioTabContent" disappears as intended and appear again when the element is toggled again.

ISSUE: selecting ".profilioTab4" after ".profilioTab3" (and vs versa) the element ".profilioTabContent" appears as it was disabled by firstly selected element. Any ideas how to resolve it?

I feel like an IF would resolve it, but I am not sure and dunno how to check for example if .profilioTabContent is visible or not and hide it if needed.....


JQ:
Code:
$(document).ready(function(){
    $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");
    $(".profilioTab1").click(function(){
       $(".profilioTabContent").css("display", "block");
        $(".profilioT1").fadeToggle("slow", "linear");
         $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
    });
});
$(document).ready(function(){
    $(".profilioTab2").click(function(){
       $(".profilioTabContent").css("display", "block");
        $(".profilioT2").fadeToggle("slow", "linear");
         $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
    });
});
$(document).ready(function(){
    $(".profilioTab3").click(function(){
        $(".profilioT3").fadeToggle("slow", "linear");
        $(".profilioTabContent").toggle("slow", "linear");
         $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
    });
});
$(document).ready(function(){
    $(".profilioTab4").click(function(){
        $(".profilioT4").fadeToggle("slow", "linear");
        $(".profilioTabContent").toggle("slow", "linear");
         $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
    });
});

Code:
Code:
<center>
<link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css" />
<img src="http://i.solidfiles.net/e7927d2708.png" style="border-radius: 0px!important;" />
<div class="profilioTitle" id="profilioTitle">{L_VIEWING_PROFILE}</div><script type="text/javascript">document.getElementById('profilioTitle').innerHTML=document.getElementById('profilioTitle').innerHTML.replace(/::/,"<br/>"); </script>                       
<div class="profilioContent profilioText">
   <br/><br/>
   <div class="profilioTab1">Trumpai</div>
   <div class="profilioTab2">Susisiek su manimi</div>
   
   <div class="profilioTabContent">
            
      <div class="profilioT1">
         <div style="float: left; padding-left: 20px; padding-right: 5px;">
            <div style="width: 115px; height: 150px; overflow: hidden; border-radius: 5px; border: 4px double white;">{AVATAR_IMG}</div>
         </div>
         <div style="text-align: left;">
            {POSTER_RANK} Statusas: <b>{USER_ONLINE}</b><br/>
            Paskutinį kartą lankėsi: <b><span class="lastpostText">{LAST_VISIT_TIME}</span></b><br/>
            Gautų pelėdų skaičius: <b>{PRIVATE_MSG}</b><br/>
            Administruoti vartotoją: <b>{ADMINISTRATE_USER} {BAN_USER}</b><br/>
         </div>
      </div>
      
      <div class="profilioT2">
         {contact_field.CONTENT}
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- 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}&nbsp;&nbsp;</span></td>
               <td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
            </tr>
            <!-- END contact_field -->
            <!-- 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 id="profilioRPGimg">{RPG_IMAGE}</div><script type="text/javascript">document.getElementById('profilioRPGimg').innerHTML=document.getElementById('profilioRPGimg').innerHTML.replace(/<br>/," ");</script>
      
   </div>

   <div class="profilioT3 onscr">
      <br/>
      <table border="0" cellspacing="1" cellpadding="0">
         <!-- BEGIN profile_field -->
         <tr id="field_id{profile_field.ID}">
            <td width="150px" align="right" valign="top" nowrap="nowrap">
               <span class="gen">{profile_field.LABEL} &nbsp;&nbsp;</span>
            </td>
            <td width="335px">
               <div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br />
               <!-- 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 />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><br />
               </span>
               <!-- END profil_type_user_posts -->
            </td>
         </tr>
         <!-- END profile_field -->
      </table>
      <br/>
   </div>
   
   <div class="profilioT4 onscr profilioTextField">
      <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="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
         </tr>-->
         <tr>
            <td height="100%" class="row1" align="center" valign="top" height="6">
               <table width="100%" border="0" cellspacing="1" cellpadding="0">
                  <!-- BEGIN rpg_fields_left -->
                  <tr>
                     <td align="right" valign="top" nowrap="nowrap">
                        <span class="gen">{switch_rpg.rpg_fields_left.F_NAME}: &nbsp;&nbsp;</span>
                     </td>
                     <td width="335px" valign="middle" nowrap="nowrap">
                        <span class="gen"><b>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</b></span><br/><br/>
                     </td>
                  </tr>
                  <!-- END rpg_fields_left -->
               </table>
               <table width="100%" border="0" cellspacing="1" cellpadding="0">
                  <!-- BEGIN rpg_fields -->
                  <tr>
                     <td align="right" valign="top" nowrap="nowrap">
                        <span class="gen">{switch_rpg.rpg_fields.F_NAME}: &nbsp;&nbsp;</span>
                     </td>
                     <td width="335px" height="100%" valign="middle" valign="baseline">
                        <span class="gen"><b>{switch_rpg.rpg_fields.F_VALUE_NEW}</b></span><br/><br/>
                     </td>
                  </tr>
                  <!-- END rpg_fields -->
               </table>
            </td>
         </tr>
         <tr>
            <td  colspan="2" align="center" class="row1">
               {U_ADMIN_RPG}
            </td>
         </tr>
         <!-- END switch_rpg -->
         <tr>
            <td  colspan="2" align="center" class="row1">
               <div style="height: 30px;"></div>
            </td>
         </tr>
      </table>
      <br/><br/>
   </div>
               
   <div class="profilioTab3">Personažo aprašymas</div>
   <div class="profilioTab4">Tikrasis veidas</div></div> 
  <img src="http://i.solidfiles.net/9c7af1523d.png" style="border-radius: 0px!important;"/>
  </center>


Last edited by Kami-sama on Thu Dec 22, 2016 5:40 pm; edited 2 times in total
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by skouliki Wed Dec 21, 2016 1:08 am

skouliki
skouliki
Manager
Manager

Female Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Wed Dec 21, 2016 11:29 am

Okey. So I almost resolved it.

The issue now: when button istoggled again to hide it's element, the main element does not appear again -..- HALP Very Happy

BASICALLY - inner IF is not working -..-

The if I added:
Code:
$(document).ready(function(){
    $(".profilioTab3").click(function(){
        $(".profilioT3").fadeToggle("slow", "linear");
        if($('.profilioTabContent').css('display') == 'none') {
         if($('.profilioTab3').css('display') == 'none') {
            $(".profilioTabContent").toggle("slow", "linear");
         }
      }
      else {
         $(".profilioTabContent").toggle("slow", "linear");
      }
         $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
    });
});
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Wed Dec 21, 2016 4:44 pm

Hi there, all you have to do is create the CSS outside of the JavaScript and add to the HTML code.

Code:
<style type="text/css">
.profilioT1,
.profilioT2,
.profilioT3,
.profilioT4 {
  display: none;
}
</style>

And then get rid of this from the JavaScript
Code:
$(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Wed Dec 21, 2016 5:39 pm

But it's the same thing. The line you mentioned from JQ is not activated via click. It is loaded right away when the page loads. Only after that click function takes place.

Code:
$(document).ready(function(){
    $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");
   
$(".profilioTab1").click(function(){ . .......

The issue is with .profilioTabContent element. It appears when clicking from .profilioT3 to .profilioT4 OR from .profilioT4 to .profilioT3.


P.S. Here is the CSS I am using:
Code:
.profilioTitle {
   width:550px;
   margin-top: -60px;
   font-family:allura;
   font-size:40px;
   color:#292929;
   letter-spacing:-1px;
   line-height: 30px;
   text-shadow:white 3px 0px 2px;
   white-space: nowrap;
}
.profilioText {
   font-size: 11px!important;
   color: #292929;
}
.profilioContent {
   width:575px;
   background: #e5e5e5;
}
.profilioContent table img {
   max-width: 310px; 
   max-height: 150px; 
}
.profilioTab1, .profilioTab2, .profilioTab3, .profilioTab4 {
   display: inline-block;
   width: 250px;
   height: 15px;
   vertical-align: top;
   border: 4px double white;
   border-radius: 0 35px 0 35px;
   -moz-radius: 0 35px 0 35px;
   -webkit-radius: 0 35px 0 35px;
   -o-radius: 0 35px 0 35px;
   background-color: #aebbbb;
   background-image: url("http://i.solidfiles.net/7beccc2161.png");
   text-align: center;   
   color: black;
   font-family: tahoma;
   font-size: 9px;
   padding-top: 2px;
   text-transform: uppercase;
   -moz-transition: all .2s linear;
   -webkit-transition: all .2s linear;
   -o-transition: all .2s linear;
}
.profilioTab2 {
   margin-left: 5px;
   background-color: #9f7478;
}
.profilioTab3 {
   background-color: #9f7478;
}
.profilioTab4 {
   margin-left: 5px;
}
.profilioTab1:hover, .profilioTab2:hover, .profilioTab3:hover, .profilioTab4:hover {
   font-style: italic;
   font-size: 10px;
   opacity: 1;
   border-radius: 35px 0 35px 0;
   -moz-radius: 35px 0 35px 0;
   -webkit-radius: 35px 0 35px 0;
   -o-radius: 35px 0 35px 0;
}
.profilioTabContent {
   width: 500px;
   height: 177px;
   overflow: hidden;
   margin: 6px;
   background: #e5e5e5;
   background-image: url("http://wallpaperswa.com/thumbnails/detail/20140409/vintage%20patterns%20textures_wallpaperswa.com_69.jpg");
   background-size: cover;
   border-radius: 35px;
   -moz-radius: 35px;
   -webkit-radius: 35px;
   -o-radius: 35px;
   box-shadow: inset 0px 0px 75px -5px white;
}
.profilioT1 {
   height: 170px;
   padding-top: 10px;
   font-size: 11px;
   color: #3c506f;
   text-align: justify;
   background-color: #e5e5e5;
   background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT2 {
   height: 370px;
   overflow: auto;
   background: #e5e5e5;
   background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT3 {
   width: 500px;
   height: 640px;
   overflow: hidden;
   background: #e5e5e5;
   padding: 6px;
   overflow-y: scroll;
}
.profilioT4 {
   width: 500px;
   height: 650px;
   text-align: justify;
   background: #e5e5e5;
   border-radius: 35px;
   -moz-radius: 35px;
   -webkit-radius: 35px;
   -o-radius: 35px;
   padding: 6px;
   overflow-y: scroll;
}
.profilioTextField textarea.inputbox {
   background: none!important;
   border: none;
   font-weight: bold;
   max-width: 340px;
   font-size: 12px!important;
}
.profilioTextField textarea.post, .textlaukas input.post{
   border: none;
   max-width: 340px;
   width: 335px;
}
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 10:36 am

Here try this.

HTML
Code:
<center>
  <link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css" />
  <img src="http://i.solidfiles.net/e7927d2708.png" style="border-radius: 0px!important;" />
  <div class="profilioTitle" id="profilioTitle">{L_VIEWING_PROFILE}</div>
  <script type="text/javascript">
    document.getElementById('profilioTitle').innerHTML = document.getElementById('profilioTitle').innerHTML.replace(/::/, "<br/>");
  </script>
  <div class="profilioContent profilioText">
    <br/><br/>
    <div class="profilioTab1">Trumpai</div>
    <div class="profilioTab2">Susisiek su manimi</div>

    <div class="profilioTabContent">

      <div class="profilioT1">
        <div style="float: left; padding-left: 20px; padding-right: 5px;">
          <div style="width: 115px; height: 150px; overflow: hidden; border-radius: 5px; border: 4px double white;">{AVATAR_IMG}</div>
        </div>
        <div style="text-align: left;">
          {POSTER_RANK} Statusas: <b>{USER_ONLINE}</b><br/> Paskutinį kartą lankėsi: <b><span class="lastpostText">{LAST_VISIT_TIME}</span></b><br/> Gautų pelėdų skaičius: <b>{PRIVATE_MSG}</b><br/> Administruoti vartotoją: <b>{ADMINISTRATE_USER} {BAN_USER}</b><br/>
        </div>
      </div>

      <div class="profilioT2">
        {contact_field.CONTENT}
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
          <!-- 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}&nbsp;&nbsp;</span></td>
            <td width="60%" valign="middle">
              <div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div>
            </td>
          </tr>
          <!-- END contact_field -->
          <!-- 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 id="profilioRPGimg">{RPG_IMAGE}</div>
      <script type="text/javascript">
        document.getElementById('profilioRPGimg').innerHTML = document.getElementById('profilioRPGimg').innerHTML.replace(/<br>/, " ");
      </script>
      <div class="profilioT3 onscr">
        <br/>
        <table border="0" cellspacing="1" cellpadding="0">
          <!-- BEGIN profile_field -->
          <tr id="field_id{profile_field.ID}">
            <td width="150px" align="right" valign="top" nowrap="nowrap">
              <span class="gen">{profile_field.LABEL} &nbsp;&nbsp;</span>
            </td>
            <td width="335px">
              <div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br />
              <!-- 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 />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><br />
              </span>
              <!-- END profil_type_user_posts -->
            </td>
          </tr>
          <!-- END profile_field -->
        </table>
        <br/>
      </div>
      <div class="profilioT4 onscr profilioTextField">
        <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="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
        </tr>-->
          <tr>
            <td height="100%" class="row1" align="center" valign="top" height="6">
              <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields_left -->
                <tr>
                  <td align="right" valign="top" nowrap="nowrap">
                    <span class="gen">{switch_rpg.rpg_fields_left.F_NAME}: &nbsp;&nbsp;</span>
                  </td>
                  <td width="335px" valign="middle" nowrap="nowrap">
                    <span class="gen"><b>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</b></span><br/><br/>
                  </td>
                </tr>
                <!-- END rpg_fields_left -->
              </table>
              <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields -->
                <tr>
                  <td align="right" valign="top" nowrap="nowrap">
                    <span class="gen">{switch_rpg.rpg_fields.F_NAME}: &nbsp;&nbsp;</span>
                  </td>
                  <td width="335px" height="100%" valign="middle" valign="baseline">
                    <span class="gen"><b>{switch_rpg.rpg_fields.F_VALUE_NEW}</b></span><br/><br/>
                  </td>
                </tr>
                <!-- END rpg_fields -->
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2" align="center" class="row1">
              {U_ADMIN_RPG}
            </td>
          </tr>
          <!-- END switch_rpg -->
          <tr>
            <td colspan="2" align="center" class="row1">
              <div style="height: 30px;"></div>
            </td>
          </tr>
        </table>
        <br/><br/>
      </div>
    </div>

    <div class="profilioTab3">Personažo aprašymas</div>
    <div class="profilioTab4">Tikrasis veidas</div>
  </div>
  <img src="http://i.solidfiles.net/9c7af1523d.png" style="border-radius: 0px!important;" />
</center>

JavaScript
Code:
$(document).ready(function() {
  $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");

  $(".profilioTab1").click(function() {
    displayBlock();
    $(".profilioT1").fadeToggle("slow", "linear");
    $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab2").click(function() {
    displayBlock();
    $(".profilioT2").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab3").click(function() {
    displayBlock();
    $(".profilioT3").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
  });

  $(".profilioTab4").click(function() {
    displayBlock();
    $(".profilioT4").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
  });

  function displayBlock() {
    $(".profilioTabContent").css("display", "block");
  }
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 11:17 am

Hey. Thank you for the reply, but this is not it as well. The thing, that is causing the issue:

There are 4 elements: .profilioT1, .profilioT2, .profilioT3, .profilioT4
.profilioT1, .profilioT2 are 170px height
.profilioT3, .profilioT4 are 640px height

This is why I am using .profilioTabContent. I was thinking, maybe I should set it's height as automatic. But then the RPGimage should be set as background.... ech... complicated. Yet I want just a simple thing it would seam.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 11:22 am

Maybe I am not understanding what you are trying to do exactly. Can you explain what you are trying to accomplish?
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 12:18 pm

Sure! I will explain it in details Very Happy
So we have something like this: 4 buttons and RPG image with 170px height. When no button is toggled this is the view I want.

.profilioTab1.profilioTab2
RPG image
.profilioTab3.profilioTab4

When we toggle .profilioTab1 or .profilioTab2, this is what should happen. Here the .profilioT1 and .profilioT2 height is the same as RPGimage - 170px
.profilioTab1.profilioTab2
.profilioT1 or .profilioT2
.profilioTab3.profilioTab4

All good with the top. But issues happen with last buttons. What I want is when toggled .profilioTab3/.profilioTab4 their content appears .profilioT3/.profilioT4 instead of RPGimage. Their height is 640px
.profilioTab1.profilioTab2
.profilioT3 or .profilioT4



.profilioTab3.profilioTab4


What actually happens: when first time we select .profilioTab3 it shows this:
.profilioTab1.profilioTab2
.profilioT3



.profilioTab3.profilioTab4

Afterwards I do NOT toggle .profilioTab3, but press .profilioTab4 and this is what happens:
.profilioTab1.profilioTab2
RPGimage
.profilioT4



.profilioTab3.profilioTab4
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 3:09 pm

Ohh... okay, now I get it.

Try this.

HTML
Code:
<center>
  <link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css" />
  <img src="http://i.solidfiles.net/e7927d2708.png" style="border-radius: 0px!important;" />
  <div class="profilioTitle" id="profilioTitle">{L_VIEWING_PROFILE}</div>
  <script type="text/javascript">
    document.getElementById('profilioTitle').innerHTML = document.getElementById('profilioTitle').innerHTML.replace(/::/, "<br/>");
  </script>
  <div class="profilioContent profilioText">
    <br/><br/>
    <div class="profilioTab1">Trumpai</div>
    <div class="profilioTab2">Susisiek su manimi</div>

    <div class="profilioTabContent">

      <div class="profilioT1">
        <div style="float: left; padding-left: 20px; padding-right: 5px;">
          <div style="width: 115px; height: 150px; overflow: hidden; border-radius: 5px; border: 4px double white;">{AVATAR_IMG}</div>
        </div>
        <div style="text-align: left;">
          {POSTER_RANK} Statusas: <b>{USER_ONLINE}</b><br/> Paskutinį kartą lankėsi: <b><span class="lastpostText">{LAST_VISIT_TIME}</span></b><br/> Gautų pelėdų skaičius: <b>{PRIVATE_MSG}</b><br/> Administruoti vartotoją: <b>{ADMINISTRATE_USER} {BAN_USER}</b><br/>
        </div>
      </div>

      <div class="profilioT2">
        {contact_field.CONTENT}
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
          <!-- 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}&nbsp;&nbsp;</span></td>
            <td width="60%" valign="middle">
              <div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div>
            </td>
          </tr>
          <!-- END contact_field -->
          <!-- 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="profilioT3 onscr">
        <br/>
        <table border="0" cellspacing="1" cellpadding="0">
          <!-- BEGIN profile_field -->
          <tr id="field_id{profile_field.ID}">
            <td width="150px" align="right" valign="top" nowrap="nowrap">
              <span class="gen">{profile_field.LABEL} &nbsp;&nbsp;</span>
            </td>
            <td width="335px">
              <div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br />
              <!-- 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 />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                  &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><br />
              </span>
              <!-- END profil_type_user_posts -->
            </td>
          </tr>
          <!-- END profile_field -->
        </table>
        <br/>
      </div>
      <div class="profilioT4 onscr profilioTextField">
        <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="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
        </tr>-->
          <tr>
            <td height="100%" class="row1" align="center" valign="top" height="6">
              <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields_left -->
                <tr>
                  <td align="right" valign="top" nowrap="nowrap">
                    <span class="gen">{switch_rpg.rpg_fields_left.F_NAME}: &nbsp;&nbsp;</span>
                  </td>
                  <td width="335px" valign="middle" nowrap="nowrap">
                    <span class="gen"><b>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</b></span><br/><br/>
                  </td>
                </tr>
                <!-- END rpg_fields_left -->
              </table>
              <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN rpg_fields -->
                <tr>
                  <td align="right" valign="top" nowrap="nowrap">
                    <span class="gen">{switch_rpg.rpg_fields.F_NAME}: &nbsp;&nbsp;</span>
                  </td>
                  <td width="335px" height="100%" valign="middle" valign="baseline">
                    <span class="gen"><b>{switch_rpg.rpg_fields.F_VALUE_NEW}</b></span><br/><br/>
                  </td>
                </tr>
                <!-- END rpg_fields -->
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2" align="center" class="row1">
              {U_ADMIN_RPG}
            </td>
          </tr>
          <!-- END switch_rpg -->
          <tr>
            <td colspan="2" align="center" class="row1">
              <div style="height: 30px;"></div>
            </td>
          </tr>
        </table>
        <br/><br/>
      </div>
      <div id="profilioRPGimg">{RPG_IMAGE}</div>
      <script type="text/javascript">
        document.getElementById('profilioRPGimg').innerHTML = document.getElementById('profilioRPGimg').innerHTML.replace(/<br>/, " ");
      </script>
    </div>

    <div class="profilioTab3">Personažo aprašymas</div>
    <div class="profilioTab4">Tikrasis veidas</div>
  </div>
  <img src="http://i.solidfiles.net/9c7af1523d.png" style="border-radius: 0px!important;" />
</center>

CSS
Code:
.profilioTitle {
  width:550px;
  margin-top: -60px;
  font-family:allura;
  font-size:40px;
  color:#292929;
  letter-spacing:-1px;
  line-height: 30px;
  text-shadow:white 3px 0px 2px;
  white-space: nowrap;
}
.profilioText {
  font-size: 11px!important;
  color: #292929;
}
.profilioContent {
  width:575px;
  background: #e5e5e5;
}
.profilioContent table img {
  max-width: 310px;
  max-height: 150px;
}
.profilioTab1, .profilioTab2, .profilioTab3, .profilioTab4 {
  display: inline-block;
  width: 250px;
  height: 15px;
  vertical-align: top;
  border: 4px double white;
  border-radius: 0 35px 0 35px;
  -moz-radius: 0 35px 0 35px;
  -webkit-radius: 0 35px 0 35px;
  -o-radius: 0 35px 0 35px;
  background-color: #aebbbb;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
  text-align: center; 
  color: black;
  font-family: tahoma;
  font-size: 9px;
  padding-top: 2px;
  text-transform: uppercase;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
}
.profilioTab2 {
  margin-left: 5px;
  background-color: #9f7478;
}
.profilioTab3 {
  background-color: #9f7478;
}
.profilioTab4 {
  margin-left: 5px;
}
.profilioTab1:hover, .profilioTab2:hover, .profilioTab3:hover, .profilioTab4:hover {
  font-style: italic;
  font-size: 10px;
  opacity: 1;
  border-radius: 35px 0 35px 0;
  -moz-radius: 35px 0 35px 0;
  -webkit-radius: 35px 0 35px 0;
  -o-radius: 35px 0 35px 0;
}
.profilioTabContent {
  width: 500px;
  height: 177px;
  overflow: hidden;
  margin: 6px;
  background: #e5e5e5;
  background-image: url("http://wallpaperswa.com/thumbnails/detail/20140409/vintage%20patterns%20textures_wallpaperswa.com_69.jpg");
  background-size: cover;
  border-radius: 35px;
  -moz-radius: 35px;
  -webkit-radius: 35px;
  -o-radius: 35px;
  box-shadow: inset 0px 0px 75px -5px white;
}
.profilioT1 {
  height: 100%;
  padding-top: 10px;
  font-size: 11px;
  color: #3c506f;
  text-align: justify;
  background-color: #e5e5e5;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT2 {
  height: 100%;
  overflow: auto;
  background: #e5e5e5;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT3 {
  width: 500px;
  height: 100%;
  overflow: hidden;
  background: #e5e5e5;
  padding: 6px;
  overflow-y: scroll;
}
.profilioT4 {
  width: 500px;
  height: 100%;
  text-align: justify;
  background: #e5e5e5;
  border-radius: 35px;
  -moz-radius: 35px;
  -webkit-radius: 35px;
  -o-radius: 35px;
  padding: 6px;
  overflow-y: scroll;
}
.profilioTextField textarea.inputbox {
  background: none!important;
  border: none;
  font-weight: bold;
  max-width: 340px;
  font-size: 12px!important;
}
.profilioTextField textarea.post, .textlaukas input.post{
  border: none;
  max-width: 340px;
  width: 335px;
}

JavaScript
Code:
$(document).ready(function() {
  $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");
 
  $(".profilioTab1").click(function() {
    displayBlock();
    $(".profilioT1").fadeToggle("slow", "linear");
    $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
  });
 
  $(".profilioTab2").click(function() {
    displayBlock();
    $(".profilioT2").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
  });
 
  $(".profilioTab3").click(function() {
    displayBlock();
    $(".profilioT3").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
  });
 
  $(".profilioTab4").click(function() {
    displayBlock();
    $(".profilioT4").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
  });
 
  function displayBlock() {
    $(".profilioTabContent").css("display", "block");
  }
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 3:22 pm

Well it toggles correctly but the size of the middle element does not change accordingly. That is the main thing that is causing this mess Very Happy

When pressing .profilioTab1, .profilioTab2 middle should be 170px. When pressing .profilioTab3, .profilioTab4 middle should be 640px.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 3:24 pm

Are you talking about this element?
Code:
.profilioTabContent
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 3:33 pm

Yes.

I used this before to toggle top and bottom button elements correctly.
There should be no height on it at all. Instead there should be:

Code:
#profilioRPGimg {
   height: 177px;
}

Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 3:36 pm

Hmm, okay. When you are saying this:
'When pressing .profilioTab1, .profilioTab2 middle should be 170px. When pressing .profilioTab3, .profilioTab4 middle should be 640px.'

Are you referring to height or width?
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 3:40 pm

Height. Sorry. Missed that after repeating myself Very Happy

As a work around, I think I could live with:
Code:
.profilioTabContent {
...
  max-height: 545px;
...}

Then the RPG image overflows. But I hope there is a proper solution for this.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 3:45 pm

What if you added the desired heights to the JavaScript? Like this...

Code:
$(".profilioTabContent").css("height", "170px");

Sorry, I have to head out for a while so I can help you more when I return.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 3:51 pm

But the issue is the same again - how to toggle the hight. Because we are pressing the same button to make the hight from 170 to 545 and then press again to return the hight from 545 to 170 Very Happy
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 5:15 pm

Okay, here you are.

JavaScript
Code:
$(document).ready(function() {
  $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");

  $(".profilioTab1").click(function() {
    displayBlock();
    $(".profilioTabContent").css("height", "170px");
    $(".profilioT1").fadeToggle("slow", "linear");
    $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab2").click(function() {
    displayBlock();
    $(".profilioTabContent").css("height", "170px");
    $(".profilioT2").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab3").click(function() {
    displayBlock();
    if ($(".profilioTabContent").height() == 170) {
      $(".profilioTabContent").animate({
        height: "545px"
      });
    } else if ($(".profilioTabContent").height() == 545) {
      $(".profilioTabContent").animate({
        height: "170px"
      });
    }
    $(".profilioT3").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
  });

  $(".profilioTab4").click(function() {
    displayBlock();
    if ($(".profilioTabContent").height() == 170) {
      $(".profilioTabContent").animate({
        height: "545px"
      });
    } else if ($(".profilioTabContent").height() == 545) {
      $(".profilioTabContent").animate({
        height: "170px"
      });
    }
    $(".profilioT4").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
  });

  function displayBlock() {
    $(".profilioTabContent").css("display", "block");
  }
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 5:22 pm

And again we are with the issue with element 3 and 4 Very Happy
Now clicking from .profilioTab3 to .profilioTab4 the size shortens.
That is why I was thinking about IFception (IF in the IF).
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 5:30 pm

Here you are.

JavaScript
Code:
$(document).ready(function() {
  $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");

  $(".profilioTab1").click(function() {
    displayBlock();
    $(".profilioTabContent").css("height", "170px");
    $(".profilioT1").fadeToggle("slow", "linear");
    $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab2").click(function() {
    displayBlock();
    $(".profilioTabContent").css("height", "170px");
    $(".profilioT2").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
  });

  $(".profilioTab3").click(function() {
    displayBlock();
    if ($(".profilioTabContent").height() == 170) {
      $(".profilioTabContent").animate({
        height: "545px"
      });
    } else if ($(".profilioTabContent").height() == 545 && $(".profilioT4").show() === true) {
      $(".profilioTabContent").animate({
        height: "170px"
      });
    }
    $(".profilioT3").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
  });

  $(".profilioTab4").click(function() {
    displayBlock();
    if ($(".profilioTabContent").height() == 170) {
      $(".profilioTabContent").animate({
        height: "545px"
      });
    } else if ($(".profilioTabContent").height() == 545 && $(".profilioT3").show() === true) {
      $(".profilioTabContent").animate({
        height: "170px"
      });
    }
    $(".profilioT4").fadeToggle("slow", "linear");
    $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
  });

  function displayBlock() {
    $(".profilioTabContent").css("display", "block");
  }
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 5:34 pm

PERFECTION.

This is what I was missing
Code:
&& $(".profilioT3").show() === true)

I tried it before checking visibility or display. Couldn't wrap my head around the logic. Thank you lots! Now this makes sense! You genius. Lots of health and happiness to you, bro.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 5:35 pm

You are very welcome. Glad we were able to work it out. Smile
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 5:41 pm

Oh wait. Maybe spoke too soon Very Happy
Uno momento!
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Draxion Thu Dec 22, 2016 5:42 pm

Ah, I figure it was too good to be true. What is the issue now? lol
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Thu Dec 22, 2016 5:44 pm

I don't know if I changed something or no. BUT when switching from elements - everything is fine. Yet when selecting the same button to close the element - the size does not shorten. I think it is because it still considers that element as true when it does the check.

I think there should be a second ELSE. Hmmm.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Sun Dec 25, 2016 9:02 am

Any ideas?
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Wed Dec 28, 2016 12:22 pm

Kami-sama wrote:Any ideas?
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Toggle issues Empty Re: Toggle issues

Post by Kami-sama Sun Jan 01, 2017 4:06 pm

So here is where I am now.
Any ideas how to properly toggle RPG image?

Code:
Code:
<center>
<link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css" />
<img src="http://i.solidfiles.net/e7927d2708.png" style="border-radius: 0px!important;" />
<div class="profilioTitle" id="profilioTitle">{L_VIEWING_PROFILE}</div><script type="text/javascript">document.getElementById('profilioTitle').innerHTML=document.getElementById('profilioTitle').innerHTML.replace(/::/,"<br/>"); </script>                       
<div class="profilioContent profilioText">
   <br/><br/>
   <div class="profilioTab1">Trumpai</div>
   <div class="profilioTab2">Susisiek su manimi</div>
   
   <div class="profilioTabContent">
            
      <div class="profilioT1">
         <div style="float: left; padding-left: 20px; padding-right: 5px;">
            <div style="width: 115px; height: 150px; overflow: hidden; border-radius: 5px; border: 4px double white;">{AVATAR_IMG}</div>
         </div>
         <div style="text-align: left;">
            {POSTER_RANK} Statusas: <b>{USER_ONLINE}</b><br/>
            Paskutinį kartą lankėsi: <b><span class="lastpostText">{LAST_VISIT_TIME}</span></b><br/>
            Gautų pelėdų skaičius: <b>{PRIVATE_MSG}</b><br/>
            Administruoti vartotoją: <b>{ADMINISTRATE_USER} {BAN_USER}</b><br/>
         </div>
      </div>
      
      <div class="profilioT2">
         {contact_field.CONTENT}
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- 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}&nbsp;&nbsp;</span></td>
               <td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
            </tr>
            <!-- END contact_field -->
            <!-- 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="profilioT3 onscr">
         <br/>
         <table border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN profile_field -->
            <tr id="field_id{profile_field.ID}">
               <td width="150px" align="right" valign="top" nowrap="nowrap">
                  <span class="gen">{profile_field.LABEL} &nbsp;&nbsp;</span>
               </td>
               <td width="335px">
                  <div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br />
                  <!-- 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 />
                     &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                     &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a><br />
                  </span>
                  <!-- END profil_type_user_posts -->
               </td>
            </tr>
            <!-- END profile_field -->
         </table>
         <br/>
      </div>
   
      <div class="profilioT4 onscr profilioTextField">
         <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="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
            </tr>-->
            <tr>
               <td height="100%" class="row1" align="center" valign="top" height="6">
                  <table width="100%" border="0" cellspacing="1" cellpadding="0">
                     <!-- BEGIN rpg_fields_left -->
                     <tr>
                        <td align="right" valign="top" nowrap="nowrap">
                           <span class="gen">{switch_rpg.rpg_fields_left.F_NAME}: &nbsp;&nbsp;</span>
                        </td>
                        <td width="335px" valign="middle" nowrap="nowrap">
                           <span class="gen"><b>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</b></span><br/><br/>
                        </td>
                     </tr>
                     <!-- END rpg_fields_left -->
                  </table>
                  <table width="100%" border="0" cellspacing="1" cellpadding="0">
                     <!-- BEGIN rpg_fields -->
                     <tr>
                        <td align="right" valign="top" nowrap="nowrap">
                           <span class="gen">{switch_rpg.rpg_fields.F_NAME}: &nbsp;&nbsp;</span>
                        </td>
                        <td width="335px" height="100%" valign="middle" valign="baseline">
                           <span class="gen"><b>{switch_rpg.rpg_fields.F_VALUE_NEW}</b></span><br/><br/>
                        </td>
                     </tr>
                     <!-- END rpg_fields -->
                  </table>
               </td>
            </tr>
            <tr>
               <td  colspan="2" align="center" class="row1">
                  {U_ADMIN_RPG}
               </td>
            </tr>
            <!-- END switch_rpg -->
            <tr>
               <td  colspan="2" align="center" class="row1">
                  <div style="height: 30px;"></div>
               </td>
            </tr>
         </table>
         <br/><br/>
      </div>
   
      <div id="profilioRPGimg">{RPG_IMAGE}</div><script type="text/javascript">document.getElementById('profilioRPGimg').innerHTML=document.getElementById('profilioRPGimg').innerHTML.replace(/<br>/," ");</script>
      
   </div>
   
   <div class="profilioTab3">Personažo aprašymas</div>
   <div class="profilioTab4">Tikrasis veidas</div>
</div>
<img src="http://i.solidfiles.net/9c7af1523d.png" style="border-radius: 0px!important;"/>
</center>

CSS:
Code:
.profilioTitle {
  width:550px;
  margin-top: -60px;
  font-family:allura;
  font-size:40px;
  color:#292929;
  letter-spacing:-1px;
  line-height: 30px;
  text-shadow:white 3px 0px 2px;
  white-space: nowrap;
}
.profilioText {
  font-size: 11px!important;
  color: #292929;
}
.profilioContent {
  width:575px;
  background: #e5e5e5;
}
.profilioContent table img {
  max-width: 310px;
  max-height: 150px;
}
.profilioTab1, .profilioTab2, .profilioTab3, .profilioTab4 {
  display: inline-block;
  width: 250px;
  height: 15px;
  vertical-align: top;
  border: 4px double white;
  border-radius: 0 35px 0 35px;
  -moz-radius: 0 35px 0 35px;
  -webkit-radius: 0 35px 0 35px;
  -o-radius: 0 35px 0 35px;
  background-color: #aebbbb;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
  text-align: center;
  color: black;
  font-family: tahoma;
  font-size: 9px;
  padding-top: 2px;
  text-transform: uppercase;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
}
.profilioTab2 {
  margin-left: 5px;
  background-color: #9f7478;
}
.profilioTab3 {
  background-color: #9f7478;
}
.profilioTab4 {
  margin-left: 5px;
}
.profilioTab1:hover, .profilioTab2:hover, .profilioTab3:hover, .profilioTab4:hover {
  font-style: italic;
  font-size: 10px;
  opacity: 1;
  border-radius: 35px 0 35px 0;
  -moz-radius: 35px 0 35px 0;
  -webkit-radius: 35px 0 35px 0;
  -o-radius: 35px 0 35px 0;
}
.profilioTabContent {
  width: 500px;
  max-height: 545px;
  overflow: hidden;
  margin: 6px;
  background-size: cover;
  border-radius: 35px;
  -moz-radius: 35px;
  -webkit-radius: 35px;
  -o-radius: 35px;
  box-shadow: inset 0px 0px 75px -5px white;
}
#profilioRPGimg {
  height: 200px;
  background: #e5e5e5;
  background-image: url("http://wallpaperswa.com/thumbnails/detail/20140409/vintage%20patterns%20textures_wallpaperswa.com_69.jpg");
}
#profilioRPGimg img {
  width: 500px!important;
}
.profilioT1 {
  height: 170px;
  padding-top: 10px;
  font-size: 11px;
  text-align: justify;
  background-color: #e5e5e5;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT2 {
  height: 170px;
  overflow: auto;
  background: #e5e5e5;
  background-image: url("http://i.solidfiles.net/7beccc2161.png");
}
.profilioT3 {
  width: 485px;
  height: 545;
  background: #e5e5e5;
  padding: 6px;
  overflow-y: scroll!important;
}
.profilioT4 {
  width: 485px;
  height: 545;
  text-align: justify;
  background: #e5e5e5;
  border-radius: 35px;
  -moz-radius: 35px;
  -webkit-radius: 35px;
  -o-radius: 35px;
  padding: 6px;
  overflow-y: scroll!important;
}
.profilioTextField textarea.inputbox {
  background: none!important;
  border: none;
  font-weight: bold;
  max-width: 340px;
  font-size: 12px!important;
}
.profilioTextField textarea.post, .textlaukas input.post{
  border: none;
  max-width: 340px;
  width: 335px;
}

JQ:
Code:
$(document).ready(function(){
    $(".profilioT1, .profilioT2, .profilioT3, .profilioT4").css("display", "none");
    $(".profilioTab1").click(function(){
        $(".profilioT1").fadeToggle("slow", "linear");
         $(".profilioT2, .profilioT3, .profilioT4").css("display", "none");
    });

    $(".profilioTab2").click(function(){
        $(".profilioT2").fadeToggle("slow", "linear");
         $(".profilioT1, .profilioT3, .profilioT4").css("display", "none");
    });

    $(".profilioTab3").click(function(){
        $(".profilioT3").fadeToggle("slow", "linear");
         $(".profilioT1, .profilioT2, .profilioT4").css("display", "none");
    });

    $(".profilioTab4").click(function(){
        $(".profilioT4").fadeToggle("slow", "linear");
         $(".profilioT1, .profilioT2, .profilioT3").css("display", "none");
    });
});
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

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