Problem
Currently I have a sidebar that lists only 7 out of a total of 40 placeholder pet names: Adonis, Billy, Comet, Dexter, Evan, Fritz, Grommit
I'm looking to write an if/ else if statement that would use .html() to change the text of the <p> tags that make up the list, to the next 7 names from an array of objects Hank, Izzy, Jello ... when my var index is between 7-14, again when the index is between 15-22, 23-30, until 40 (in multiples of 7).
I'm also wondering if I'll have to add additional classes to my <p> tags in order to achieve this.
JSFiddle: http://ift.tt/1Nd2zpH
scripts.js
$(function(){
// Deals with loading the pets
var public_spreadsheet_url = "http://ift.tt/1H5tMeV";
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#pets").html();
var template = Handlebars.compile(source);
// The actual name of the sheet, not entire .csv
$.each(tabletop.sheets("Pets").all(), function(i, fact) {
var html = template(fact);
// You need an element with this id or class in your HTML
$("#pets-list").append(html);
$('.container').eq(i).addClass(data.Pets.elements[i]);
// Logs all the 40 pet names
console.log(data.Pets.elements[i].name);
});
}
// Deals with the left menu
$(".nameNav").click(function(){
$(".nameNav").removeClass("active");
$(this).toggleClass("active");
});
$(window).scroll(function(){
var $pets = $('.pet').map(function(_, i){
return $(i).offset().top;
});
var scroll = $(window).scrollTop();
var index = $pets.filter(function(i, v){ if(v<scroll) return i; }).length;
$(".nameNav").removeClass("active");
$(".nameNav").eq(index).addClass("active");
console.log(index);
if (index >= 7 && index <= 14) {
$(".nameNav").html();
} else if (index >= 15 && index <= 22) {
$(".nameNav").html();
} else if (index >= 23 && index <= 30) {
$(".nameNav").html();
} else if (index >= 31 && index <= 38) {
$(".nameNav").html();
} else if (index == 39 || index == 40 ) {
$(".nameNav").html();
}
});
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://ift.tt/YW5hLg' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav class="vertical">
<div class="rectangle">
<a href="#Adonis"><p class="nameNav first active">Adonis</p></a>
<a href="#Billy"><p class="nameNav">Billy</p></a>
<a href="#Comet"><p class="nameNav">Comet</p></a>
<a href="#Dexter"><p class="nameNav">Dexter</p></a>
<a href="#Evan"><p class="nameNav">Evan</p></a>
<a href="#Fritz"><p class="nameNav">Fritz</p></a>
<a href="#Grommit"><p class="nameNav">Grommit</p></a>
</div><!-- /.rectangle -->
</nav>
<main>
<div id="pets-list"></div>
</main>
<script src="http://ift.tt/1JsU1tb"></script>
<script src="assets/js/scripts.js"></script>
<script src="http://ift.tt/1CWMWvo"></script>
<script src="http://ift.tt/1B2TElF"></script>
<script src="http://ift.tt/1CWMYDx"></script>
<!-- This is where the template for facts goes -->
<script id="pets" type="text/x-handlebars-template">
<div class="container">
<div class="pet">
<p class="nameTitle" id="{{name}}">{{name}}</p>
<img src="{{image}}" alt="">
<p class="breed">{{breed}}</p>
<p class="description">{{description}}</p>
<p class="cost">{{cost}}</p>
<hr>
</div><!-- /.pet -->
</div><!-- /.container -->
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire