A simple easy to understand solution

Question

I am using a design I found on a website and it looks really cool but I wanted to alter it to look like what I need it to be.

The original demo looked like this

but I needed them to be side by side, so i created a table that was a width of 100% and two columns. I placed both of the lists in the table but something strange happened.

I have checked and there isn't a padding on the top nor is there another object there. The list and table are both set to v-align. I have attached a jFiddle for better reference and help.

JSFiddle

Thank you all so much!

<table width="100%" border="0">
<tbody valign="top">
<tr valign="top">
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script       src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
 </tr>
 </tbody>
  </table>

Answer 1

This is the code you need in the moveTabs function

 var indexOffset = 0;       
  tabs.each(function(index) {
    if ($(this).hasClass('tabs__first'))
       indexOffset = index-1;

    transY  = (index-indexOffset) * 10;        
    scale       = 0.5 + (index-indexOffset)/25;

then add a tabs__first to the class of the first item you want to "reset"

How this works --

In the loop I check for the tabs___first marker when I see it I set my offset to one less than index
When doing the transformation on the item instead of using index to do the transformation (as the original code did) I use index-indexOffset.

fiddle - https://jsfiddle.net/s4sc2mu1/2/

Answer 2

The issue here is that the javascript is setting how far down the page the boxes appear based on their index in a list.

 transY     = index * 10;

I've saved a copy of the fiddle (http://jsfiddle.net/trn44k7j/2/), but here are the changes that need to be made:

Add an id to both of your unordered lists:

 <ul class="tabs" id="list1">

 <ul class="tabs" id="list2">

In the javascript section, add two more lists, based on the new IDs:

var tabs        = $('li.tabs__item');           // current list
var tabs1       = $('#list1 li.tabs__item');    // new list
var tabs2       = $('#list2 li.tabs__item');    // new list

Also in the javascript, change this:

 tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

to this:

 tabs1.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

 tabs2.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

What we are doing here is getting two seperate lists for the two columns. We're then running the javascript to set the box positions based on the two seperate lists, so when it uses the index, it will be starting from 0 for each column, instead of continuing in column two where column one left off.

Answer 3

恕我直言，这解决了这个问题：

var Tabs = (function() {

  var toggler = $('.views-toggle');
  var tabs      = $('li.tabs__item');
  var toggled = false;

  var transform = function(el, value) {
    el.css('transform', value);
    el.css('-webkit-transform', value);
    el.css('-ms-transform', value);
  };
   var transition = function(el, value) {
    el.css('transition', value);
    el.css('-webkit-transition', value);
    el.css('-ms-transition', value);
  };

  var moveContent = function() {
    if (!toggled) {
      toggled = true;
    } else {
      toggled = false;
    }

    moveTabs(toggled);

    return false;
  };

  var moveTabs = function(a) {
    var transY, scale;

    if (a) {
      tabs.css({
        'opacity': '1',
        'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
        'cursor': 'pointer'
      });

      tabs.each(function(index) {         

        transY  = $(this).index() * 10;        
        scale       = 0.5 + $(this).index()/25;

        transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });

      toggler.addClass('views-toggle--hidden');
    } else {
      transform(tabs, 'translate3d(0,0,0) scale(1)');
    }
  };

  var switchTabs = function() {
    var selected = $(this);
    var others = selected.siblings('li');

    if (toggled) {
      transition(others, 'transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06)');
      transform(others, 'translate3d(0, 100%, 0) scale(1)');
      transform(selected, 'translate3d(0,0,0) scale(1)');
      tabs.css({
        'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
        'cursor': 'default'
      });
      toggled = false;

      selected.on('transitionend webkitTransitionend', function() {
        toggler.removeClass('views-toggle--hidden');
        others.css({
          'opacity': '0'
        });
        transform(others, 'translate3d(0, 100%, 0) scale(0)');
        transition(others, 'transform 0.9s cubic-bezier(0.23, 1, 0.32, 1)');
        selected.off('transitionend webkitTransitionend');
      });
    }
  };

  var setup = function() {
    toggled = true;
    moveTabs(toggled);
  };

  var init = function() {
    $(document).on('ready', setup);
        toggler.on('click touchstart', moveContent);
    tabs.on('click touchstart', switchTabs);
  };

  return {
    init: init
  };

}());

Tabs.init();

https://jsfiddle.net/trn44k7j/5/

Answer 4

In your javascript

  tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

is never being reset, so you are transforming that second column as if they were being added to the first column.

You need better logic for setting "transY". Currently you are setting it based on the index of the list of "tab"s, so tab 1 is 10vh's down, tab 2 is 20vh's down and tab 7 is 70vh's down.

A simple easy to understand solution

If you know there will always be 4 "tabs" per column you could do a hard coded fix by modifying the above to:

  tabs.each(function(index) {
    transY  = (index%4) * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

Otherwise you will need to rework the logic behind setting "tabs" y location to not be based solely on the number of "tabs". This is only here for educational purposes to show you why your logic was wrong and a simple solution that doesn't use complex techniques.

EDIT:

Solution using Jquery tree navigation

A none hard coded solution that is a bit more complex. The logic is to grab every "tabs" list and for each child in that "tabs" list grab each list element with class "tabs__item" and transform their height based on that. This is 100% modular and will work for any number of "tab__item"s within any number of "tabs" for any number of "tabs" and does not require any modification of CSS files or changes to your current structure.

  $('.tabs').each(function(index) {
      $(this).children('li.tabs__item').each(function(index) {
          transY    = index * 10;        
          scale     = 0.5 + index/25;

          transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });
   });

JS Fiddle Link: https://jsfiddle.net/trn44k7j/8/

Answer 5

check this out now: https://jsfiddle.net/trn44k7j/3/

The thing is, every window is being set with parameters through index. But the script counts ALL windows, not only in the particular cell. This is not a real solution, but at least this shows where you need to think futher, here what I've updated:

 tabs.each(function(index) {
          if (index % 4 == 1){
          index=1;
          }
          if (index % 4 == 2){
          index=2;
          } 
          if (index % 4 == 3){
          index=3;
          }          
          if (index % 4 == 0){
          index=0;
          }
        transY  = index * 10;        
        scale       = 0.5 + index/25;

        transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });

Space between List and top of the page

5 个答案:

A simple easy to understand solution

Solution using Jquery tree navigation