Alzor Alzor - 7 months ago 10
HTML Question

Display certain element from array?

I have a two column layout which display specific elements (e.g. Biography on the left column, News on the right column). I have a set of elements which are in an array. What I'd like to do is click a button and the first columns content would detach and attach back in the hidden element, the second column to move into the first and then the next element in the array to attach itself into the now empty second column.

What's the best way of doing this? I have an idea on detaching/appending the elements, I'm having trouble figuring out how I actually grab the next element in the array to display it?

Here's the HTML Layout I'm also attaching a JSFiddle with all of the code as it's quite a lot to just throw in here.

<div class="container">
<section class="main"></section>
</div>
<div class="view--wrapper">
<div class="view">CONTENT</div>
<div class="view">CONTENT</div>
<div class="view">CONTENT</div>
<div class="view">CONTENT</div>
</div>


https://jsfiddle.net/7fx5s8an/1/

Answer

I complete your "next" function, comment if you had some questions.

var activeIndex = 0;
var totalSlides;
var viewArray;//declare viewarray here
var reset = function() {
  activeIndex = 0;
};

var init = function(totaSlides) {
  var obj = $(".view");
  viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;
  console.log(totalSlides);
  console.log(viewArray);

  reset();

  $(".main").append(viewArray[0]);
  $(".main").append(viewArray[1]);
};  

$(document).ready(function(){
  init();

  $("#next").on("click", function(){
    activeIndex=activeIndex+1;//check this index he must be between 0 and totalSlides -1

    console.log(activeIndex);


    $(".main").html('');//i remove old viewArray

    //show two next item
    $(".main").append(viewArray[activeIndex]);
    $(".main").append(viewArray[activeIndex+1]);
  });
});

Further you can create a "display" function to display right elements, "next" and "previous" just increment or decrement "activeIndex" and check if this index is correct.

Example :

var activeIndex = 0;
var totalSlides;
var viewArray;
var reset = function() {
  activeIndex = 0;
};

var display = function() {
        $(".main").html('');

    $(".main").append(viewArray[activeIndex]);
    $(".main").append(viewArray[activeIndex+1]);
};

var init = function(totaSlides) {
  var obj = $(".view");
  viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;
  console.log(totalSlides);
  console.log(viewArray);

  reset();

  $(".main").append(viewArray[0]);
  $(".main").append(viewArray[1]);
};  

$(document).ready(function(){
  init();

  $("#next").on("click", function(){
    activeIndex=activeIndex+1;

    if(activeIndex>totalSlides-2){
            activeIndex=totalSlides-2;
    }
    console.log(activeIndex);

    display();

  });

  $("#prev").on("click", function(){
    activeIndex=activeIndex-1;

    if(activeIndex<0){
            activeIndex=0;
    }
    console.log(activeIndex);

    display();

  });
});