Jcink.com Forums -> Mini Profiles and Tabs

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();'><div class='info' div style='background-color:;' ><div class='cw-miniav'><img src=''></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:;'><div class='cwml' title='language'>L</div><div class='cwms' title='sex'>S</div><div class='cwmv' title='violence'>V</div><div class='cwmln'></div><div class='cwmsn'></div><div class='cwmvn'></div></div><div class='cwmini-stf'><span>job</span></div><div class='cwmini-stf'><span>relationship</span></div><div class='cwmini-stf'><span>sexuality</span></div><div class='cwmini-age' div style='background-color:;'> years old</div><div class='cwmini-stf2'></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:;'>“</div></b></div><div class='cwmini-awards'></div></div></div></div></div></div>
</div></div></div><div class='cwmini-grp' div style='background-color: !important;'><div class='cwmini-grnme'></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;
}

Dusty · 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.

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.

Dusty · Apr 22 2017, 12:23 PM

There used to be a variable  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.

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.

Dusty · 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

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.

This post has been edited by DustBucket: May 1 2017, 04:37 PM

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?

Dusty · 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

This post has been edited by DustBucket: May 2 2017, 12:50 AM

multiplicity! · May 5 2017, 08:27 PM

Place below the <% JAVASCRIPT %> tab in the board wrappers:

CODE

profile template

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'>

</div>
<div class='sidedetails'>
CONTENT HERE
</div>
<div class='sidechars'>
CONTENT HERE
</div>
<div class='clear'></div>
</div>

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?

This post has been edited by Aralisse: May 9 2017, 12:12 PM

multiplicity! · May 9 2017, 12:35 PM

It should, yes. I have used it in a hover before.

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.

multiplicity! · Jun 3 2017, 05:04 PM

QUOTE (multiplicity! @ May 9 2017, 10:35 AM)

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.

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?

Aralisse · Jun 19 2017, 07:59 AM

bumpity bump.

Anyone have any ideas?