Page count

Question

Personal I am trying to make a system of counting pages,that it counts the total of pages and which current page the user is.

I managed to make the total count of page however I am not able to find a way to show the current page of it ,I tried to use the method of position() but I could not.

var arrMenuInterno = [
{ titulo: "Introdução",
    telas: [
        {arquivo: "ambev_VPO_gente_sld002.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld005.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld007.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld009.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld010.swf", tipo:""}

    ]
}

];

for(var i = 0;i < arrMenuInterno.length;i++){
            _totalTelas = arrMenuInterno[i].telas.length;

        }

        $("#qtdTelas").html(+ localizaTelaAtual + "</b> de <b>" + _totalTelas + "</b>");

Answer 1

You can use the attribute Date HTML5 to store the contents of your page array. Here is an example of the implementation.

var arrMenuInterno = [
{ titulo: "Introdução",
    telas: [
        {arquivo: "ambev_VPO_gente_sld002.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld005.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld007.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld009.swf", tipo:""},
        {arquivo: "ambev_VPO_gente_sld010.swf", tipo:""}
    ]
}]
 
function getNextContent(){
  var $conteudo = $("#conteudo");
  var titleIndex = $conteudo.data("titleIndex");
  var fileIndex = $conteudo.data("fileIndex") + 1;
  var content = arrMenuInterno[titleIndex].telas[fileIndex];
  var countDescription = " [" + fileIndex + " de " + arrMenuInterno[titleIndex].telas.length + "]";

  if (content !== undefined){
  	$conteudo.data("fileIndex", fileIndex);
  	var $span = $("<span></span>");
  	$span.append(content.arquivo + countDescription);
  	$("#conteudo").html($span);
  }
}

function getPreviousContent(){
  var $conteudo = $("#conteudo");
  var titleIndex = $conteudo.data("titleIndex");
  var fileIndex = $conteudo.data("fileIndex")  - 1;
  var content = arrMenuInterno[titleIndex].telas[fileIndex];
  var countDescription = " [" + fileIndex + " de " + arrMenuInterno[titleIndex].telas.length + "]";

  if (content !== undefined){
  	$conteudo.data("fileIndex", fileIndex);
  	var $span = $("<span></span>");
  	$span.append(content.arquivo + countDescription);
  	$("#conteudo").html($span);
  }
}
 

.content {
  width: 100%;
  background-color: black;
  vertical-align: middle;
}

#conteudo {
  display: table-cell;
  height: 150px;
}

span {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<div class="content">
<div id="conteudo" data-title-index="0" data-file-index="0">
   <span>Introdução</span>
</div>
</div>

<a type="button" href="#" id="anterior" onclick="getPreviousContent()">Anterior</a>
<a type="button" href="#" id="proximo" onclick="getNextContent()">Próximo</a>
</div>