CODEWITHSUNDEEP
jqueryhtmlcssarrays
Alsh
Alsh

Reputation: 307

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/

Upvotes: 0

Views: 84

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206344

You could make your code wayyy simpler
by manipulating the .view elements Array

var $div = $(".main"),
    v    = $(".view").get(),
    show = 2; // how many to show

function showView() {
  $(v).hide().slice(0,show).prependTo($div).show();
} showView();

$("#prev, #next").on("click", function(){
  if(this.id==="next") v.push(v.shift());
  else v.unshift(v.pop());
  showView();
});
.container:after{content:""; display:table; clear:both;}
.view{float:left; background: #ECF00F;padding: 20px; display:none; /*HIDE INITIALLY*/}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container"><section class="main"></section></div>

<div class="view">CONTENT 1</div>
<div class="view">CONTENT 2</div>
<div class="view">CONTENT 3</div>
<div class="view">CONTENT 4</div>

<button id="prev">PREV</button>
<button id="next">NEXT</button>

Upvotes: 1

Huelfe
Huelfe

Reputation: 1836

Have a look at this jsfiddle. I've completed your next and prev function.

HTML 

<div class="container">
  <section class="main"></section>
</div>
<div class="view--wrapper">
  <div class="view">CONTENT1</div>
  <div class="view">CONTENT2</div>
  <div class="view">CONTENT3</div>
  <div class="view">CONTENT4</div>
</div>
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>

JS

var totalSlides;
var x = 0;
var y = 1;

$(document).ready(function(){
  var obj = $(".view");
  var viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;

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

  $(document).on("click", "#next", function(){
    x = next(x);
    y = next(y);
    $(".main").html('');
    $(".main").append(viewArray[x]);
    $(".main").append(viewArray[y]);
  });

  $(document).on("click", "#prev", function(){
    x = prev(x);
    y = prev(y);
    $(".main").html('');
    $(".main").append(viewArray[x]);
    $(".main").append(viewArray[y]);
  });
});

function next(z) {
  if(z == totalSlides-1) {
    z = 0;
  } else {
    z++;
  }
  return z;
}

function prev(z) {
  if(z == 0) {
    z = totalSlides - 1;
  } else {
    z--;
  }
  return z;
}

Upvotes: 0

Benjamin Poignant
Benjamin Poignant

Reputation: 1064

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();

  });
});

Upvotes: 1

Related Questions