Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Game Icons http://seiyria.com/gameicons-font/ -->
<header>
  <section class="columns is-mobile">
<!--   is updated with current kingdom name and time Will also be the resting place of the game settings   -->
    <p class="column kingdomName">Kingdom Name</p>
    <p class="column">Day: <span class="day">0</span> &amp; <span class="hours">0</span>/hrs</p>
    <p class="column is-one-fifth"><button class="settings">set</button></p>
  </section>
  <div class="info columns is-mobile">
<!--   filol   -->
    <article class="column resourcesInfo has-text-centered"></article>
    <article class="column foundRecInfo has-text-centered"></article>
    <article class="column refinedRecInfo has-text-centered"></article>
  </div>
  <br>
</header>

<section class="page active animated" id="gather">
  <div class="columns is-mobile is-centered has-text-centered">
    <p class="column is-8"> gather resources to unlock upgrades </p>
  </div>
  <article class="resourcesButton columns is-multiline is-centered is-mobile">
    
  </article>
</section>
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<section class="page animated " id="workers">
  <article class="columns is-mobile is-multiline">
<!--   is updated with current population numbers   -->
    <p class="column is-4">Population: <span class="population">0</span></p>
    <p class="column is-4">Civilians: <span class="civilians">0</span></p>
    <p class="column is-4">Workers: <span class="workers">0</span></p>
    <button class="recruit column is-12"> recruit people to your kingdom<br> costs 10 fruit</button>
  </article>
<!--  fills with currently bought workers  -->
  <article class="workersInfo columns is-mobile"></article>
<!--  fills with current available workers  -->
  <div class="workersButton columns is-centered is-multiline is-mobile"></div>
  <div class="columns is-mobile is-centered has-text-centered">
    <p class="column is-8"> unlock upgrades to assign workers </p>
  </div>
</section>

<section class="page animated " id="build">
<!--  fills with what buildings are owned  -->
  <div class="buildingInfo columns is-multiline is-mobile"></div>
<!--  fills with available buildings  -->
  <article class="buildingButton columns is-multiline is-mobile">
    
  </article>
</section>

<section class="page animated " id="upgrade">
<!--  fills with current purchased upgrades  -->
  <p class="pageError"></p>
  <div class="upgradesInfo columns is-mobile"></div>
<!--  fills with available upgrades  -->
  <article class="upgradesButton columns is-multiline is-mobile">
  </article>
</section>

<section class="page animated " id="log">
  <p class="error"> </p>
  <article class="log">
    
  </article>
</section>
  <footer>
    <nav>
      <ul class="columns  is-mobile">
        <li class="column"><a href="#gather">gather</a></li>
        <li class="column"><a href="#workers">work</a></li>
        <li class="column"><a href="#build">build</a></li>
        <li class="column"><a href="#upgrade">upgrade</a></li>
        <li class="column"><a href="#log">log</a></li>
      </ul>
    </nav>
  </footer>
              
            
!

CSS

              
                body {
  margin: 10px;
}
.page {
  height:0px;
  width:0px;
  overflow:hidden;
}
.active {
  height:auto;
  width:auto;
}
.log {
  height: 400px;
  overflow-x: scroll;
}
footer {
  position: absolute;
  bottom:10px;
  left:10px;
  right:0;
  z-index:20;
}
              
            
!

JS

              
                // Written by Jeremy King :) 
// Basic Idle Game App
// Build with Jquery for simplicty of writing.
// if built to deploy, I recommend using native JavaScript
// not much is used of jquery, and it just shortens what needs to be typed
// at the cost of loading a large library

// runs settings modal
$(".settings").on("click", function(){
  $(".modal").addClass("is-active");
});
$(".modal-close").on("click", function(){
  $(".modal").removeClass("is-active");
});

// --VARIABLES--
// stores initial values
var time = 0;
var FPS = 4;
// game speed is in milliseconds
// 1000 is 1 second 500 is half 250 is quarter 125 is eigth
var gameSpeed = [1000, 500, 250, 125];
var fRate = gameSpeed[0] / FPS;
var kingdomName = "DogTown USA";
var hour = 0;
var day = 0;
var land = 100;

// Resources
/* using an object and an array to store info
// type determines if it needs an additional building or tool to use 
// and how far into the game that tool is meant to be
*/
var gameAttr = {
  resources: {
    // index 0 name, 1 is stage, 2 catagory, 3 amount, 4 max
    fruit: ["fruit", "type1", "resource", 0, 0],
    wood: ["wood", "type1", "resource", 0, 0],
    stone: ["stone", "type1", "resource", 0, 0]
  },
  foundRec: {
    skins: ["skins", "level2", "resource", 0, 0],
    ore: ["ore", "level2", "resource", 0, 0],
    herbs: ["herbs", "level2", "resource", 0, 0],
  },
  refinedRec: {
    leather: ["leather", "type3", "resource", 0, 0],
    metal: ["metal", "type3", "resource", 0, 0],
    piety: ["piety", "type3", "resource", 0, 0],
  },
  workers: {
    // 0, 1, 2, 3 is currentAmount, 4 is max,
    farmer: ["farmer", "level2", "follower", 0, 0],
    logger:["logger", "level2", "follower", 0, 0],
    miner:["miner", "level2", "follower", 0, 0] 
  },
  people:{
    // 0, 1, 2, 3 is current, 4 is max (30 by default)
    people: ["people", "type1", "follower", 0, 30],
  },
  buildings:{
    // 0, 1, 2, 3 is current, 4 is land cost not cost to build
    tent: ["tent", "type1", "building", 0, 1],
    hut: ["hut", "type1", "building", 0, 3],
    //house: ["house", "type2", "building", 0],
    farm: ["farm", "type2", "building", 0, 10],
    sawmill: ["sawmill", "level2", "building", 0, 10],
    mine: ["mine", "level2", "building", 0, 10],
    dryingracks: ["dryingracks", "level2", "building", 0, 5],
    smithy: ["smithy", "level2", "building", 0, 15],
    //cleric: ["cleric", "type2", "building", 0],
    //temple: ["temple", "type3", "building", 0],
  },
  upgrades:{
    // 0 = name, 1 is unlocked or not, 2 is cost, 3 is amount purchased
    farm: ["farm", false, 0, 0, ],
    sawmill: ["sawmill", false, 0, 0,],
    mine: ["mine", false, 0, 0,],
    level2: ["level 2", false, 0, 0,],
    dryingrack: ["Drying Rack", false, 0, 0,],
    smithy: ["Smithy", false, 0, 0,],
    apothecary: ["Apothecary", false, 0, 0,],
  },
};
// not sure if these are really usefull
// lvl1 
var farmCost = gameAttr.upgrades.farm[2];
var farmAmount = gameAttr.upgrades.farm[3];
var sawmillCost = gameAttr.upgrades.sawmill[2];
var sawmillAmount = gameAttr.upgrades.sawmill[3];
var mineCost = gameAttr.upgrades.mine[2];
var mineAmount = gameAttr.upgrades.mine[3];
// lvl2
var dryingCost = gameAttr.upgrades.dryingrack[2];
var dryingAmount = gameAttr.upgrades.dryingrack[3];
var smithyCost = gameAttr.upgrades.smithy[2];
var smithyAmount = gameAttr.upgrades.smithy[3];
var apothecaryCost = gameAttr.upgrades.apothecary[2];
var apothecaryAmount = gameAttr.upgrades.apothecary[3];

// Game Variables
// variables for buying more than one 
var currentBuy = 0;
var buyMax = 5;
// different buy amounts
var buyX = [1,5,10,25,100,250];
// starting autoClicker Cost
var costW = 25;
// stores error messages in an array
var prompt = ["You do not have enough gold! Work Harder!", "Well Done, keep up the good work!"];

// --FUNCTIONS--
// Setup Function for general starting settings, and paramaters
// Look into Preload Function to load game assets
function setup (){
  makeGatherButtons();
}

//update every X milliseconds
var update = setInterval(function() {
  screen();
}, fRate);

var numb = 0;

// sets an update function to refresh general values with current numbers
function screen (){
  // loop through resources to update scores
  
  var x;
  for ( key in gameAttr){
    numb++;
    //console.log(key);
    for( x in gameAttr[key]){
      var scorename = "." + gameAttr[key][x][0] + "Score";
      console.log(scorename);
      //console.log(gameAttr[key][x][0]);
      $(scorename).text(gameAttr[key][x][3]);
    }
  }
  var civilians = gameAttr.people.people[3];
  var industry = gameAttr.workers.farmer[3] + gameAttr.workers.logger[3]+ gameAttr.workers.miner[3];
  var population = civilians + industry;
  $(".population").text(population);
  $(".civilians").text(civilians);
  $(".workers").text(industry);
  
  // look at seeing if this can be done through a for loop, as I add additional max page elements
  $(".farmerMax").text(gameAttr.workers.farmer[4]);
  $(".loggerMax").text(gameAttr.workers.logger[4]);
  $(".minerMax").text(gameAttr.workers.miner[4]);
  
  $(".kingdomName").text(kingdomName);
  //console.log(hour);
  $(".hours").text(hour);
  $(".day").text(day);
  $(".error").text(prompt[1]);
  $(".costW").text(costW);
  $(".buyX").text(buyX[currentBuy]);
  $(".costW").text(costW * buyX[currentBuy]);
  // increase score by number of autoclickers
  //score = score + auto;
  time++;
  Time();
  //console.log(time);
};

// sets the game up
setup();
// updates the game at the framerate (FPS)
update;


// sets interval for clicker on 1 second
function Time (){
  if (time === FPS) {
    hour++;
    //workers work between 8am and 5pm
    if ( hour === 7 || hour === 18){
      feedPopulation();
    }
    if ( hour > 8 && hour < 17 ) {
      workersWork();
    }
    if (hour === 24){
      day++;
      hour = 0;
      newDay();
    }
    time=0;
  }
}

function makeGatherButtons () {
  
  for (key in gameAttr) {
    //console.log(key);
    if ( gameAttr.hasOwnProperty(key) ) {
        for ( x in gameAttr[key] ) {
        if ( key === "resources") {
            var info = "." + key + "Info";
            var button = "." + key + "Button";
            $(info).append("<p>"+ x + ": " +"<span class='"+ x +"Score'>"+ "0" +"</span>"+"</p>");
            $(button).append("<button class='" + x + "Button column is-multiline is-8' >"+ "Gather " + x + "</button>");
        }else if ( key === "foundRec" || key === "refinedRec" ){
          var info = "." + key + "Info";
          //console.log(x);
          $(info).append("<p>"+ x + ": " +"<span class='"+ x +"Score'>"+ "0" +"</span>"+"</p>");
        } // Buildings and Upgrades are not generated in this section
      }
    }
  }
}

function workersWork (){
  
  // for each worker increase resources by that amount
  gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] + (gameAttr.workers.farmer[3] * 1);
  gameAttr.resources.wood[3] =  gameAttr.resources.wood[3] + (gameAttr.workers.logger[3] * 1);
  gameAttr.resources.stone[3] = gameAttr.resources.stone[3] + (gameAttr.workers.miner[3] * 1);
  
  // work on code for gathering found Resoucres.
  // should work more like # of workers Divided by a rate, based on a random number.
  // so that it's random when a resource is found, But it's more likely to be found if you have more workers.
  if ( gameAttr.workers.farmer[3] > 0 || gameAttr.workers.logger[3] > 0 || gameAttr.workers.miner[3] > 0) {
      var ran = Math.random() ;
      if ( gameAttr.workers.farmer[3] > 0 && ran > .33) {
          gameAttr.foundRec.skins[3] = gameAttr.foundRec.skins[3] + 1 ;
      }
      if ( gameAttr.workers.logger[3] > 0 && ran > .55) {
          gameAttr.foundRec.herbs[3] = gameAttr.foundRec.herbs[3] + 1 ;
      }
      if ( gameAttr.workers.miner[3] > 0 && ran > .77) {
          gameAttr.foundRec.ore[3] = gameAttr.foundRec.ore[3] + 1 ;
      }
  }
}
// randomly find foundRec


function feedPopulation (){
  var civilians = gameAttr.people.people[3];
  var industry = gameAttr.workers.farmer[3] + gameAttr.workers.logger[3]+ gameAttr.workers.miner[3];
  var population = civilians + industry;
  gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] - population;
  
}

// New Day New Stuff
// Update to have something randomly happen every hour.
// pull options out into functions, and call one randomly each day
//
function newDay (){
  if (true){
    var starterNum = Math.random();
    // if startNum is less than .6 do this
    if(starterNum < .6 || day < 3) {
      acceptPeasants();
    } else if ( starterNum < .8) {
      badWeather();
    } else if ( starterNum < .95){
        $(".log").prepend("<p>Day: " + day + " - nothing happened. </p>");
        // otherwise viking raiders
    } else {
      vikingRaiders();
    } 
  }  
}
// create additional daily events
// options for each day
  function acceptPeasants () {
    if (gameAttr.people.people[4] > gameAttr.people.people[3]) { 
      var availableSpace = gameAttr.people.people[4] - gameAttr.people.people[3] ;             
      if ( availableSpace > 10){
        var strangers = Math.round(Math.random() * 10);
        gameAttr.people.people[3] = gameAttr.people.people[3] + strangers;
        $(".log").prepend("<p>Day: " + day + " - You accepted " + strangers + " Strangers into your kingdom.</p>");
      } else if ( availableSpace > 0 ) {
        var strangers = Math.round(Math.random() * availableSpace);
        gameAttr.people.people[3] = gameAttr.people.people[3] + strangers;
        $(".log").prepend("<p>Day: " + day + " - You accepted " + strangers + " Strangers into your kingdom.</p>");
      } else {
        var turnedAway = Math.round(Math.random() * 10);
        $(".log").prepend("<p>Day: " + day + " - You turned away " + turnedAway + " Strangers from your kingdom due to overpopulation.</p>");
      }
    }
  }
  
  function badWeather () {
    var weather = Math.round(Math.random() * 10);
    // lose a random number of resources
    //console.log("Bad Weather");
    gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] - weather;
    gameAttr.resources.wood[3] = gameAttr.resources.wood[3] - weather;
    gameAttr.resources.stone[3] = gameAttr.resources.stone[3] - weather;
    $(".log").prepend("<p>Day: " + day + " - It rained, " + weather + " of each resource was lost.</p>");
    // if ran is less than .9 do this
  }
  
  function vikingRaiders (){
    //console.log("Viking Raiders");
    // Lose a random number of villagers & resources
    var killed = Math.round(Math.random() * 10);
    //console.log(killed);
    var plundered = Math.round(Math.random() * 100);
    //console.log(plundered);
    var current = [gameAttr.people.people[3], gameAttr.resources.fruit[3], gameAttr.resources.wood[3], gameAttr.resources.stone[3]];
    gameAttr.people.people[3] = gameAttr.people.people[3] - killed;
    gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] - plundered;
    gameAttr.resources.wood[3] = gameAttr.resources.wood[3] - plundered;
    gameAttr.resources.stone[3] = gameAttr.resources.stone[3] - plundered;
    $(".log").prepend("<p>Day: " + day + " - You were raided by Vikings. "+ killed +" people died, " + plundered + " Of each resources was plundered.</p>");
  }
  /*
  // possible options
  // Gain Villagers, Lose Villagers, Get Raided, Bad Weather
  // hunters kill an animal, gain land (fought a kingdom and won)
  // a Bard Raised your peoples Happyness, the people named a holiday after you
  */

  // function to open to home page or settings of game
  // call settings, speed, difficulty, starting resources, family Size, family Names?
  // Starting Location, Race, starting Age (if later ages are unlocked)

// new function

// when a button is pressed

// determine class?

// change the amount for that class

// Gather or Buys a resource when the player clicks
$(".fruitButton").on("click", function(){
  console.log("yo Dog! get a fruit");
  gameAttr.resources.fruit[3]++;
});
$(".woodButton").on("click", function(){
  console.log("yo Dog! get a wood");
  gameAttr.resources.wood[3]++;
});
$(".stoneButton").on("click", function(){
  console.log("yo Dog! get a stone");
  gameAttr.resources.stone[3]++;
});
$(".recruit").on("click", function(){
  if (gameAttr.resources.fruit[3] >= 10 && gameAttr.people.people[4] > gameAttr.people.people[3] ){
  console.log("yo Dog! You found a person");
  gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] - 10;
  gameAttr.people.people[3]++;
  }
});
// use this logic for all buttons.
// https://stackoverflow.com/questions/1313373/jquery-same-click-event-for-multiple-elements
// https://stackoverflow.com/questions/8909652/adding-click-event-listeners-in-loop
// also consider this for looping through multiple buttons
// change to select multiple elemetns in one click function

$(".workersButton").on("click",".buttonUp", function(){
  buttonUp(this.dataset.worker);
});

// accepts parameters for the add workers buttons
function buttonUp (worker){
  if (gameAttr.people.people[3] >= 1 &&  gameAttr.workers[worker][3] < gameAttr.workers[worker][4] ){
    console.log("Yo Dog! You got a" + worker);
    gameAttr.people.people[3] = gameAttr.people.people[3] - 1;
    gameAttr.workers[worker][3] = gameAttr.workers[worker][3] + 1;

  }
}

$(".workersButton").on("click",".buttonDown", function(){
  buttonDown(this.dataset.worker);
});

function buttonDown (worker) {
  if (gameAttr.workers[worker][3] >= 1){
  console.log("yo Dog! get a" + worker);
  gameAttr.people.people[3]++;
  gameAttr.workers[worker][3]--;
  }
}

// update with gameAttr to pass values into data on the elements, and pull them into the functions.

$(".buildingButton").on("click",".farmButton", function(){
  buildingUp("farm", "farmer", 100, 50);
});
$(".buildingButton").on("click",".sawmillButton", function(){
  buildingUp("sawmill", "logger", 150, 100);
});
$(".buildingButton").on("click",".mineButton", function(){
  buildingUp("mine", "miner", 100, 150);
});
// consider having different max worker numbers
function buildingUp (building, worker, woodCost, stoneCost){
  if (gameAttr.resources.wood[3] >= woodCost && gameAttr.resources.stone[3] >= stoneCost){
  console.log("yo Dog! You made a mine");
  gameAttr.resources.wood[3] = gameAttr.resources.wood[3] - woodCost;
  gameAttr.resources.stone[3] = gameAttr.resources.stone[3] - stoneCost;
  gameAttr.buildings[building][3]++;
  //increases max workers
  gameAttr.workers[worker][4] = gameAttr.workers[worker][4] + 5;
  }
}

// enable max population increase

$(".hutButton").on("click", function(){
  if ( gameAttr.resources.wood[3] === 5 && gameAttr.resources.stone[3] === 3){
    console.log("yo Dog! get a hut");
    gameAttr.resources.wood[3] = gameAttr.resources.wood[3] - 5;
    gameAttr.resources.stone[3] = gameAttr.resources.stone[3] - 3;
    gameAttr.buildings.hut[3] = gameAttr.buildings.hut[3] + 1;
  }
});

// update to create base upgrade buttons in make buttons function.
// also look at adding additional variables into the gameAttr object.
// to pass full cost of buildings and upgrades into data objects on DOM elements.

// update upgrade info
$(".upgradesInfo").append("<p class='column upgradeDesc'> No Upgrades </p>");
// make upgrade button
$(".upgradesButton").append("<p class='column is-9 farmPar has-text-centered'> Unlock Farms Costs: <br>30 Fruit/Wood/Stone</p><button class='column is-3 farmBut' >Unlock</button>");
$(".upgradesButton").append("<p class='column is-9 sawmillPar has-text-centered'> Unlock Sawmills Costs: <br>60 Fruit/Wood/Stone</p><button class='column is-3 sawmillBut'>Unlock</button>");
$(".upgradesButton").append("<p class='column is-9 minePar has-text-centered'> Unlock Mines Costs: <br>100 Fruit/Wood/Stone</p><button class='column is-3 mineBut'>Unlock</button>");
// operate upgrade buttons

// unlock farms
$(".upgradesButton").on("click", ".farmBut", function(){
  upgradeButtons("farm", "farmer", 1);
});
// unlock sawmills
$(".upgradesButton").on("click", ".sawmillBut", function(){
  upgradeButtons("sawmill", "logger", 1);
});
// unlock mines
$(".upgradesButton").on("click", ".mineBut", function(){
  upgradeButtons("mine","miner",1);
});


// update to accept Upgrades for Additional Buildings, To create additional workers.
// also enable toggling between gathers, and Special Workers.
// AND Toggling between Huts to increase max pop, Storage buildings, and Specialty buildings 
// to increase max number of special workers.


function upgradeButtons (building, worker, cost){
  if (gameAttr.resources.wood[3] >= cost && gameAttr.resources.stone[3] >= cost && gameAttr.resources.fruit[3] >= cost && gameAttr.upgrades[building][1] === false){
    gameAttr.resources.wood[3] = gameAttr.resources.wood[3] - cost;
    gameAttr.resources.stone[3] = gameAttr.resources.stone[3] - cost;
    gameAttr.resources.fruit[3] = gameAttr.resources.fruit[3] - cost;
    // creates worker buttons
    $(".workersInfo").append("<p class='column'> " + worker + ": <span class='" + worker + "Score'> 0 </span> </p>");
    $(".workersButton").append("<button class='buttonUp column is-one-fifth is-size-4' data-worker='"+worker+"' > + </button>");
    $(".workersButton").append("<p class='column is-three-fifths has-text-centered'> " + worker + "buttons<br> Max "+ worker+": <span class='"+worker+"Max'>0</span></p>");
    $(".workersButton").append("<button class='buttonDown column is-one-fifth is-size-1' data-worker='"+worker+"' > - </button>");
    // creates building buttons
    $(".buildingInfo").append("<p class='column'> "+building+" <span class=' "+building+"Score'> 0 </span> </p>");
    $(".buildingButton").append("<p class='column is-three-quarters has-text-centered'> Build "+building+" to add 5 workers <br> costs 100 Wood and 150 stone</p>");
    $(".buildingButton").append("<button class=' "+building+"Button column is-one-quarter is-size-1' > + </button>");
    // sets values to one building for getting the upgrade
    gameAttr.buildings[building][3]++;
    gameAttr.workers[worker][4] = gameAttr.workers[worker][4] + 5;
    
    $("."+worker+"But").prop("disabled", true);
    // change to add current building appended to a column structure
    $(".upgradesInfo .upgradeDesc").text("Unlocked Upgrades:");
    $(".upgradesInfo").append("<p class='column'>"+building+"</p>");
    $(".pageError").text("");
    gameAttr.upgrades[building][1] = true;
  } else if (gameAttr.upgrades[building][1] === true) { // do nothing
  } else { $(".pageError").text("You don't have enough resources"); }
}

// add additional Navigation fix, for in Page button toggles.
// may use a jquery or Bulma toggle insead

// Mobile Navigation
$(document).ready( function(){
  $('nav a').on('click', function(e){  
    // prevent normal link behavior
    e.preventDefault( );
    var pageRef = $(this).attr('href');
    if( $(pageRef).hasClass("active")){
      //do nothing
    } else {
      // animate to new page
      $(".active").removeClass("active");
      //$(".fadeInLeft").removeClass("fadeInLeft");
      $(pageRef).addClass("active");
      //$(pageRef).addClass("fadeInLeft");        
    }
    //$(".active").removeClass("active");
    //$(pageRef).addClass("active fadeInLeft");
  });
});
              
            
!
999px

Console