Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 Mini Profiles and Tabs
#
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;
}
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.
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.
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.
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.
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.

This post has been edited by DustBucket: May 1 2017, 04:37 PM
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?
PM
#
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
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).
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
PM
#
    It should, yes. I have used it in a hover before.
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.
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.
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?
PM
#
bumpity bump.

Anyone have any ideas?
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll