Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > Mini Profiles and Tabs


Posted by: Aralisse Apr 20 2017, 04:28 PM
So, I've done this. I know it SHOULD work. I have a working code (that won't work where I'm trying to use it crazily enough.) for a tabbed mini on another board, but I blame it on being rusty. I've got a really pretty mini profile coded, except my tabs in my hover on it are acting all kinds of crazy. As in when you hover the first time, the main tab won't show up, you have to click on the button and then it pops up. Then you can do the same for the second tab, that works.

Scroll down, and it won't work at all on the second. I've gone over my previous topic for help with this before, trying to get answers. I've tried two different codes with no success. This is the only one that seems to "like" me, and it is still misbehaving. If anyone can help, I'd GREATLY appreciate it since I've been working on this skin off and on for months now and this is the main thing I'm stuck on before I'm able to actually finish it.

Here's the link to the board:
http://codehaven.jcink.net/index.php

The part of the mini's html template not behaving:
CODE

</div><div class="minipCont"><div class="minipBg">
<div class='cwmini-wrap'><div class='cwmini-hvr' div style='background-image:url(<!-- |avatar_url| -->);'><div class='info' div style='background-color:<!-- |g_icon| -->;' ><div class='cw-miniav'><img src='<!-- |field_18| -->'></div><div class='cwmini-inf'><div class='cwmini-info'><div class="minitabs">

<div class="minitab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">i</label>
<div class="minicontent"><div class='cwmini-ratc' div style='background-color:<!-- |g_icon| -->;'><div class='cwml' title='language'>L</div><div class='cwms' title='sex'>S</div><div class='cwmv' title='violence'>V</div><div class='cwmln'><!-- |field_19| --></div><div class='cwmsn'><!-- |field_20| --></div><div class='cwmvn'><!-- |field_21| --></div></div><div class='cwmini-stf'><span>job</span><!-- |field_9| --></div><div class='cwmini-stf'><span>relationship</span><!-- |field_10| --></div><div class='cwmini-stf'><span>sexuality</span><!-- |field_11| --></div><div class='cwmini-age' div style='background-color:<!-- |g_icon| -->;'><!-- |field_3| --> years old</div><div class='cwmini-stf2'><!-- |field_15| --></div></div></div>



<div class="minitab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-left: 62.5px;">ii</label>
<div class="minicontent"><div id="cwtab2"><div class='cwmini-quote'><b><div style='color:<!-- |g_icon| -->;'>“</div></b><!-- |field_12| --></div><div class='cwmini-awards'><!-- |awards| --></div></div></div></div></div></div>
</div></div></div><div class='cwmini-grp' div style='background-color:<!-- |g_icon| --> !important;'><div class='cwmini-grnme'><!-- |g_title| --></div></div></div></div>

</div>


And CSS for it:
CODE
/*****************************************
CW Minis
******************************************/

.cwmini-wrap {
 display: block;
 background-color: #F8F5E9;
 border: 1px solid #EFE9CF;
 position: relative;
 overflow: hidden;
 height: 502px;
 width: 242px;
 padding: 5px;
 margin-top: 7px;
 margin-left: -12px;
}

.cwmini-hvr {
 width: 240px;
 height: 400px;
 border: 1px solid #EFE9CF;
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
 background: #9772ab;
 -webkit-transition-property: color;
 transition-property: color;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 overflow: hidden;
 z-index: 99;
}
.cwmini-hvr:before {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: #FEFEFC;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: 50%;
 transform-origin: 50%;
 -webkit-transition-property: transform;
 transition-property: transform;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.cwmini-hvr:hover, .cwmini-hvr:focus, .cwmini-hvr:active {
}
.cwmini-hvr:hover:before, .cwmini-hvr:focus:before, .cwmini-hvr:active:before {
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

.cwmini-hvr .info {
width: 218px;
height: 378px;
padding: 10px;
background-color:#753B53;
position: absolute;
bottom: -408px;
right: 1px;  
transition-duration: .6s;
 -webkit-transition-duration: .6s;
 -moz-transition-duration: .6s;
 -ms-transition-duration: .6s;
 -o-transition-duration: .6s;
z-index: 9;
outline: 1px solid #FEFEFC;
outline-offset:-10px;
}

.cwmini-hvr:hover .info {
 bottom: 1px;
}


.cw-miniav {
 width: 106px;
 height: 77px;
 background: rgba(248, 245, 233, 0.31);
 border: 1px solid #EFE9CF;
 padding: 5px;
 margin-top: 25px;
 margin-left: 51px;
}

.cw-miniav img {
 width: 105px;
 height: 75px;
 border: 1px solid #EFE9CF;
}

.cw-miniav:after {
   content: '';
   margin-left: -57px;
   margin-top: -64px;
   width: 220px;
   display: block;
   position: absolute;
   z-index: -1;
   height: 0;
   border-top: 88px solid transparent;
   border-left: 220px solid #FEFEFC;
   border-right: 0px solid transparent;
}

.cwmini-inf {
 background: #FEFEFC;
 height: 246px;
 margin-top: 18px;
}

.cwmini-info {
 position: absolute;
 margin-top: -10px;
 padding: 10px;
 color: #9C8671;
 font-family: 'Montserrat';
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.cwmini-ratc {
 background-color:#753B53;
 width: 150px;
 height: 40px;
 border: 1px solid #EFE9CF;
 padding: 4px;
 margin-left: 20px;
 margin-top: 0px;
 outline: 1px solid #EFE9CF;
 outline-offset: -5px;
 margin-bottom: 5px;
}

.cwml {
 display: inline-block;
 border-bottom: 1px solid #EFE9CF;
 border-right: 1px solid #EFE9CF;
 padding: 0px 20.9px;
 background:rgba(248, 245, 233, 0.71);
 color: #FFF;
 font-weight: 700;
}

.cwms {
 display: inline-block;
 border-bottom: 1px solid #EFE9CF;
 border-right: 1px solid #EFE9CF;
 padding: 0px 20.9px;
 background:rgba(248, 245, 233, 0.71);
 color: #FFF;
 font-weight: 700;
}
.cwmv {
 display: inline-block;
 border-bottom: 1px solid #EFE9CF;
 padding: 0px 20.9px;
 background:rgba(248, 245, 233, 0.71);
 color: #FFF;
 font-weight: 700;
}

.cwmln {
 display: inline-block;
 border-right: 1px solid #EFE9CF;
 background:rgba(248, 245, 233, 0.31);
 padding: 1px 18px;
 font-weight: 700;
 font-size: 18px;
 color: #FFF;
}

.cwmsn {
 display: inline-block;
 border-right: 1px solid #EFE9CF;
 background:rgba(248, 245, 233, 0.21);
 padding: 1px 19px;
 font-weight: 700;
 font-size: 18px;
 color: #FFF;
}

.cwmvn {
 display: inline-block;
 background:rgba(248, 245, 233, 0.31);
 padding: 1px 19px;
 font-weight: 700;
 font-size: 18px;
 color: #FFF;
}

.cwmini-stf {
 width: 195px;
 padding: 9px 2px;
 border: 1px solid #EFE9CF;
 background:rgba(248, 245, 233, 0.31);
 line-height: 95%;
 margin-bottom: 3px;
 margin-left: 5px;
 font-weight: 700;
 font-size: 8px;
}

.cwmini-stf2 {
 width: 200px;
 margin-top: 3px;
 padding: 6px 2px;
 border: 1px solid #EFE9CF;
 background:rgba(248, 245, 233, 0.31);
 line-height: 95%;
 margin-bottom: 3px;
 margin-left: 2px;
 font-weight: 700;
 font-size: 9px;
 text-align: center;
}

.cwmini-stf span {
 color: #F8F5E9;
 background-color: #66594E;
 border-right: 1px solid #efe9cf;
 font-size: 8px;
 font-weight: 700;
 text-align: center;
 float: left;
 margin-top: -8px;
 margin-left: -1px;
 margin-right: 5px;
 display: block;
 line-height: 95%;
 padding: 8px 6px;
 text-align: center;
}

.cwmini-age {
 width: 190px;
 height: 15px;
 padding:  15px 10px;
 background: #753B53;
 line-height: 100%;
 outline: 1px solid;
 outline-offset: -6px;
 margin-top: 5px;
 color: #FFF;
 font-weight: 700;
 font-size: 15px;
 text-align: center;
}
 
.cwmini-quote {
 font-family: 'Calibri';
 font-size: 9px;
 width: 200px;
 height: 25px;
 padding: 5px;
 text-align: justify;
 overflow: auto;
 word-spacing: -1.5px;
 line-height: 95%;
}

.cwmini-quote b {
 color: #753B53;
 font-size: 25px;
 font-family: 'Playfair Display';
 display: inline-block;
 float: left;
 padding: 2px 4px;
}

.cwmini-grp {
 width: 222px;
 height: 75px;
 margin-top: 5px;
padding: 10px;
position: absolute;
background-color:#753B53;
outline: 1px solid #FEFEFC;
outline-offset:-10px;
z-index: 1;
}

.cwmini-grnme {
 font-family: 'Selima';
 text-shadow: 1px 1px #000;
 font-size:45px;
 letter-spacing:-1px;
 color:#9C8671;
 text-transform: lowercase !important;
 text-align: center;
 margin-top: 15px;
}

.cwmini-grnme:after {
   content: '';
   margin-left: 0px;
   margin-top: -31px;
   width: 135px;
   display: block;
   position: absolute;
   z-index: -1;
   height: 0;
   border-top: 75px solid #FEFEFC;
   border-left: 0px solid transparent;
   border-right: 75px solid transparent;
}

.cwmini-awards {
 width: 195px;
 height: 165px;
 padding: 5px;
 overflow: auto;
 margin-top: 5px;
 border: 1px solid #EFE9CF;
}

#cwminitabs {
 list-style: none;
 background-color: #F8F5E9;
 padding: 0px;
 display: table;
 width: 250px;
 margin-bottom: 0px;
}

#cwminitabs li {
 background: #F8F5E9;
 font-family: calibri;
 text-align: center;
 color: #fff;
 text-transform: uppercase;
 font-size: 10px;
 padding-top: 2px;
 width: 102.5px;
 height: 18px;
 z-index: 4;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
 display: table-cell;
}
#cwminitabs li a { color: #fff; }
#cwminitabs li.active  { background: #EFE9CF; }

#cwminitabs_content_container { background: transparent; }

#cwtab2 {
 width: 220px;
 height: 220px;
 position: relative;
 background: transparent;
 overflow: hidden;
}

.minitabs {
 margin-top: 120px;
 width: 250px;
 height: 200px;
}

.minitab {
float: left;
}

.minitab label {
 display: inline-block;
 background: #F8F5E9;
 font-family: calibri;
 text-align: center;
 color: #9C8671;
 text-transform: uppercase;
 font-size: 10px;
 padding: 6px 12.5px 2px 12.5px;
 line-height: 100%;
 position: absolute;
 margin: 5px -35px;
 left: 35px;
 top: 225px;
 height: 16px;
 width: 95px;
 z-index: 4;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.minitab [type=radio] {
display: none;  
}

.minicontent {
position: absolute;
top:0px;
bottom: 0px;
left: 0px;
right: 0px;
background: transparent;
padding: 5px;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
opacity: 0;
}

[type=radio]:checked ~ label {
background: #EFE9CF; z-ndex: 2;
}

[type=radio]:checked ~ label ~ .minicontent {
z-index: 1; opacity: 1;
}

Posted by: DustBucket Apr 21 2017, 02:47 PM
99% confident it's because you're using an ID in a repeating template. Normally, browsers can compensate for using the same ID multiple times, but with inputs it gets especially bonkers. You'll need to introduce some form of randomization to the IDs and selectors.

Posted by: Aralisse Apr 21 2017, 04:23 PM
I was doing good until you mentioned introducing the randomization to the ids and selectors, there you lost me, since I'm not sure how to do that.

Posted by: DustBucket Apr 22 2017, 12:23 PM
There used to be a variable <!-- |pid| --> that sufficed for it. It input the post's identifying number, and since it could never (in normal circumstances) be repeated, it worked well for being a one-off variable like you would need here. Unfortunately, this variable has since been depreciated for server strain, I think.

I'll see if I can find some time to work on a JS solution for you. In the mean time, if you come across any other sort of solution, I'm sure there are many here that would appreciate if you would share it.

Posted by: Aralisse Apr 25 2017, 08:14 PM
I know there is another type of tabbed mini, but I cannot, for the life of me, no matter if I use it on my test board or on previous boards without the coding or javascript it uses, make it work. On ONE board I managed to get that one to work, I've even copied and pasted the exact coding on my test board.... nada.

So if you can help, that would be amazing.

Posted by: DustBucket May 1 2017, 04:36 PM
Dunno why I forgot about this Aralisse, but it's actually a really simple script to make it all work. Here's what I use on my forum, though it will need to be adapted to your specific usage.

CODE
<script>
$(function () {
var r = 0,
div = $('.miniprofile');
$.each(div, function(r){
 var charbit = $(this).find('.charbit');
 charbit.removeClass('charbit').addClass('charbit' + r)
 charbit.find('#cc-88roll88').attr('id', 'cc-' + r)
 charbit.find('.mpcloff, .mpclon').attr('for', 'cc-' + r)
 var r = r++;
})
})
</script>


Placed at the bottom of your main wrappers - it doesn't need to go in the miniprofile template. All it does is find the .miniprofile element, and then finds a child element called .charbit. It renames that element with an incremented suffix (+r), then finds the child input (#cc-88roll88) and labels (.mpcloff, .mpclon) and readdresses the ID and 'for' attributes, respectively.

Posted by: Aralisse May 1 2017, 11:22 PM
Thanks DustBucket! I'll give it a try tomorrow when my brain feels less like mush and that makes more sense. Lol. Long days and coding are not my friend. Is it alright if I PM you if I happen to mess things up?

Posted by: DustBucket May 2 2017, 12:50 AM
For sure, I don't mind - but I do see multiplicity! hovering, so she might have a better solution than mine :b

Posted by: multiplicity! May 5 2017, 08:27 PM
    The only coding I have is this one, which requires you to make some edits overall to your miniprofile, but here it is:

    Place below the <% JAVASCRIPT %> tab in the board wrappers:
    CODE
    <script>
    // Tabbed Mini Profile
    $(document).ready(function() {
    if(window.location.href.indexOf("showtopic") > -1 || window.location.href.indexOf("ST") > -1) {
     var profiletabspeed = 440;
     $(".sideheader a").on("click", function (e) {
      var parent = $(this).parent().parent();
      var target = parent.find("." + $(this).attr("data-target"));
      if(!$(target).is(":visible")) {
       parent.find("> div:not(:first-child, :last-child)").fadeOut(profiletabspeed);
       target.delay(profiletabspeed).fadeIn(profiletabspeed);
      }
      e.preventDefault();
     });
    }
    });
    </script>



    This goes in your profile template under HTML templates:

    CODE
    <div class='sideprofile'>
    <div class='sideheader'>
     <a href='#' data-target='sideavatar'>Avatar</a>
     <a href='#' data-target='sidedetails'>Info</a>
     <a href='#' data-target='sidechars'>Dossier</a>
    </div>
    <div class='sideavatar'>
     <!-- |avatar| -->
    </div>
    <div class='sidedetails'>
     CONTENT HERE
    </div>
    <div class='sidechars'>
     CONTENT HERE
    </div>
    <div class='clear'></div>
    </div>



    It's been a while since I've used it, but I have it set up on a test board and it does function.
    If you need help, let me know? It's the only work around I can think of right now as I'm not well-versed in tabbed miniprofiles (my girlfriend is, honestly).

Posted by: Aralisse May 9 2017, 12:00 PM
I'll give it a shot. See how it goes.

Actually, quick question because I don't want to start and then swear a blue streak at myself later. You've seen how I have the profile laid out so that the tabs are inside a hover. multiplicity with what you gave me, will it work that way too?

Posted by: multiplicity! May 9 2017, 12:35 PM
    It should, yes. I have used it in a hover before.

Posted by: Aralisse Jun 3 2017, 03:31 PM
Seeing as life got nuts... sorry it took me a bit to reply! I've finally got some quiet time where I can sit and try this. Let's see if I can make it work like I want.

Posted by: multiplicity! Jun 3 2017, 05:04 PM
QUOTE (multiplicity! @ May 9 2017, 10:35 AM)
    It should, yes. I have used it in a hover before.

    Feel free to tag me here if you have any questions or need help! I just used this code the other day and it still works, even in the new HTML template system.

Posted by: Aralisse Jun 13 2017, 04:04 PM
So, update...

I've even tried Tav's code, on a clean site with no coding at all, that is functional on another site I have that I snagged the code from and it's not working. Could using it as a html template be what's the problem?

Posted by: Aralisse Jun 19 2017, 07:59 AM
bumpity bump.

Anyone have any ideas?

Posted by: Dusty Jun 19 2017, 12:00 PM
What is "Tav's code", and do you have a live page with it?

Posted by: Aralisse Jun 21 2017, 02:18 PM
Sorry for the delay! Okay here's the live page: http://immortalized.jcink.net/index.php?showtopic=1&st=0&#entry1

And this should be the coding:

Javascript:
CODE
//  Script by TAV of Jcink Forums

$(document).ready(function(){
//  When user clicks on tab, this code will be executed
$("#mp-tabs li").click(function() {

  //  First, which miniprofile are we in?
  currentprofile = $(this).parent().parent().parent().parent().parent().parent();

  //  Then, remove class "active" from currently active tab
  $("#mp-tabs li", currentprofile).removeClass('mp-active');

  //  Now add class "active" to the selected/clicked tab
  $(this).addClass("mp-active");

  //  Hide all tab content
  $(".mp-tab_content", currentprofile).hide();

  //  Here we get the href value of the selected tab
  var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
  $(selected_tab, currentprofile).fadeIn();

  //  At the end, we add return false so that the click on the link is not executed
  return false;
});
});</script>


And the mini profile part of it:
CODE
<center><div class="miniprofile"><div class="mp-name"><!-- |name| --></div><div class="mp-species"><!-- |g_title| --></div><div id='mp-tabs_container'><ul id='mp-tabs'><li class='mp-active'><a href='#1272TAB1'>I.</a></li><li><a href='#1272TAB2'>II.</a></li><li><a href='#1272TAB3'>III.</a></li></ul></div><div id='mp-tabs_content_container'><div id='1272TAB1' class='mp-tab_content' style='display: block;'><div class="mp-avatar"><!-- |avatar| --></div></div><div id='1272TAB2' class='mp-tab_content'><div class="mp-box">
Tab one info</div></div><div id='1272TAB3' class='mp-tab_content'> <div class="mp-box">Tab two awards and stuff
</div></div></div></center>


Let me know if you need the CSS part of it.

Posted by: Dusty Jun 23 2017, 04:51 AM
All you actually need to do is change the IDs to classes, but if it's alright with you, I'd like to rewrite that script and markup later today.

Aralisse sorry this took longer! Lunch break was short. Most of this (especially the CSS) is your exact coding, so it should drop right in.

Miniprofile template:
CODE
<div class="miniprofile">
   <div class="mp-name">
       <!-- |name| -->
   </div>
   <div class="mp-species">
       <!-- |g_title| -->
   </div>
   <div class='mp-tabs_container'>
       <ul class='mp-tabs'>
           <li class='mp-active'>
               <a tab='1272TAB1'>I.</a>
           </li>
           <li>
               <a tab='1272TAB2'>II.</a>
           </li>
           <li>
               <a tab='1272TAB3'>III.</a>
           </li>
       </ul>
   </div>
   <div class='mp-tabs_content_container'>
       <div class='1272TAB1 mp-tab_content' style='display:block;'>
           <div class="mp-avatar">
               <!-- |avatar| -->
           </div>
       </div>
       <div class='1272TAB2 mp-tab_content'>
           <div class="mp-box">
               Tab one info</div>
       </div>
       <div class='1272TAB3 mp-tab_content'>
           <div class="mp-box">Tab two awards and stuff
           </div>
       </div>
   </div>
</div>


CSS:
CODE
<style>
.miniprofile {
   background-color: #060404;
   margin: 30px auto;
   text-align: center;
   width: 250px;
   height: 400px;
}
.mp-name {
   background-color: #060404;
   color: #CCCCCC;
   padding: 10px 10px 0;
   width: 230px;
}
.mp-species {
   color: #AAAAAA;
   display: inline-block;
   font-family: calibri;
   font-size: 9px;
   font-weight: normal;
   letter-spacing: 2px;
   line-height: 150%;
   position: relative;
   text-transform: uppercase;
   top: -5px;
}
.mp-tabs {
   background-color: #060404;
   list-style: none;
   margin: 0;
   padding: 0 0 12px;
   width: 250px;
}
.mp-tabs li.mp-active {
   -webkit-transition: 0.8s;
   background-color: #151515;
   transition: 0.8s;
}
.mp-tabs li {
   background-color: #1A1A1A;
   display: inline-block;
   font-family: calibri;
   font-size: 8px;
   line-height: 100%;
   margin: 0;
   padding: 2px;
}
.mp-tabs li a {
   color: #CCCCCC;
   display: inline-block;
   width: 40px;
}
.mp-tabs_content_container {
   background-color: #060404;
}
.mp-avatar {
   background-image: url(http://placehold.it/250x400);
   height: 400px;
   width: 250px;
}
.mp-box {
   color: #CCCCCC;
   height: 360px;
   padding: 20px;
   position: relative;
   width: 210px;
}
.mp-tab_content {
display: none;
}
</style>


Jquery (goes in the wrapper):
CODE
<script>
   $('.mp-tabs li').click(function() {
       $(this).addClass('mp-active').siblings().removeClass('mp-active')
       $(this).parents('.miniprofile').find('.' + $(this).children().attr('tab')).fadeIn().siblings().hide()
   })
</script>

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)