The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toggle issues

View previous topic View next topic Go down

Toggle issues

Post by Kami-sama on December 21st 2016, 12:58 am

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 December 23rd 2016, 12:40 am; edited 2 times in total
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by skouliki on December 21st 2016, 8:08 am

avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3134
Reputation : 491
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 21st 2016, 6:29 pm

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");
    });
});
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 21st 2016, 11: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");


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 12:39 am

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;
}
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 5:36 pm

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");
  }
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 6:17 pm

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.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 6:22 pm

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 7: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
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 10: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");
  }
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 10: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.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 10:24 pm

Are you talking about this element?
Code:
.profilioTabContent


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 10: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;
}

avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 10: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?


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 10: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.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 22nd 2016, 10: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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 22nd 2016, 10: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
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 23rd 2016, 12:15 am

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");
  }
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 23rd 2016, 12:22 am

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).
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 23rd 2016, 12:30 am

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");
  }
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 23rd 2016, 12:34 am

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.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 23rd 2016, 12:35 am

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 23rd 2016, 12:41 am

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

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Draxion on December 23rd 2016, 12:42 am

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 23rd 2016, 12:44 am

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.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 25th 2016, 4:02 pm

Any ideas?
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on December 28th 2016, 7:22 pm

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

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Toggle issues

Post by Kami-sama on January 1st 2017, 11: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");
    });
});
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

View previous topic View next topic Back to top


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