Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''jquery''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 777 registros

  1. Cesar Melo

    Retorno de função com JSON

    Olá, gostaria de uma ajuda para retornar um resultado de uma função. Dentro dessa função, eu faço uma requisição através do $.getJSON(), e gostaria que função retornasse o resultado que obtido na requisição JSON. Ex: function pedidoGet() { var pedido; $.getJSON( "getters.php", {param1: "pedidoId"}, function (data) { pedido= data[0]; console.log(pedido) //aqui, ainda dentro da requisição, a variavel "pedido" tem o valores que foi //retornado pela requisição getJSON } ); console.log(pedido) //aqui, não retorna nada return pedido; //aqui, essa variavel pedido não tem mais os valores que a requisição getJSON retornou. } var pedidoTeste= pedidoGet(); //depois que chamar a funçõa, gostaria de ter os valores para usar como for melhor pra mim. console.log(pedidoTeste.id); console.log(pedidoTeste.valor); Conseguiram entender minha necessidade? Desde já, agradeço!
  2. Boa tarde, voltei a estudar jquery, ja estou conseguindo manipular o elemento dom do meu site, mas tenho uma duvida, estou colocando uns elementos e retirando outros, quando eu vou ver esses elementos com f12 funciona tudo direitinho os que tirei e os que coloquei tudo normal, mas quando eu aperto ctrl+u para ver ele não muda la no códgo fonte, gostaria de saber como o google vai ler essa minha pagina, se ele le do modo que esta no f12 ou do modo que esta no ctrl+u?
  3. Ola, bom dia!! pessoal preciso de ajuda! tenho a seguinte lista criada no html, ela não esta completa, só p vcs entenderem. <ul class="lista"> <li>Datetime:</li> <li>Velocidade:</li> <li>$ Inicial:</li> <li>$ Atual: </li> <li>$ Financ: </li> <li>% Neil: </li> <li>% Financ: </li> <li>% Ultimo: </li> <li>Estado: </li> <li>QDT Trade: </li> e tenho no JS isso( peguei em um tutorial, e acho que é disso que eu preciso var numsList = []; $.ajax( 'Input.txt', { dataType: 'text', success: function(response){ //response é o conteudo do Input.txt var lines = response.split('\n'); //quebra o arquivo em linhas, for(var i in lines){ var row = lines; var nums = row.split(','); //quebra a linha em valores separdos por virgula for(var j in nums){ var num = parseInt(nums[j]); //converte o valor para int if( !isNaN(num) ) //basicamente verifica se é um numero numsList.push(num); //adiciona o item no array }} console.log(numsList); } }); Tenho também um arquivo txt(Input.txt) com algumas informações separadas por virgula. O que quero é alimentar a lista com as informações do arquivo txt, mas coloca-los na posição correta por exemplo eu Tenho o 1º item da lista Datatime: e dentro dele quero colocar o primeiro item do arquivo mas não sei como chamar o JS no HTML. Desde ja Obrigada.
  4. Alguém pode me ajudar por favor? O script que fiz é para transformar a matriz curricular que está em um ul em colunas separadas, mas ele está pegando a matriz curricular de outros cursos. Lembro que a como separar isso por seletor, mas não consigo entender a lógica de como fazer dentro do loop. https://codepen.io/priscilacarvalho/pen/bxoYaN <!-- Button trigger modal --> <a href="" class="circle-modal blue" data-toggle="modal" data-target="#administracao"> <i>Administração</i> </a> <!-- Modal --> <div class="modal fade" id="administracao" tabindex="-1" role="dialog" aria-labelledby="administracao"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title text-center" id="myModalLabel">Administração</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <h4>Perfil Profissional</h4> <p class="text-justify">Na UNIFAMMA o estudante de Administração aprenderá que o principal papel do administrador é conceber, planejar e executar estratégias que visam o melhor desempenho da organização em qualquer mercado de atuação. Todas as organizações, com ou sem fins lucrativos, privadas ou públicas, grandes ou pequenas e operando em qualquer setor da economia necessitam de administradores. O curso de Administração da UNIFAMMA busca desenvolver empreendedores e administradores capazes de promoverem o avanço da sociedade, por meio de uma formação voltada para identificação e resolução de problemas, do trabalho em equipe e da criatividade.</p> </div> <div class="clearfix"></div> <hr> <div class="col-sm-12"> <h4>Matriz curricular</h4> </div> <ul> <li>Comunicação oral e escrita</li> <li>Contabilidade Geral</li> <li>Filosofia e Ética</li> <li>Matemática Aplicada</li> <li>Metodologia do trabalho Científico</li> <li>Teoria Geral da Administração</li> <li>Economia</li> <li>Matemática Financeira</li> <li>Sociologia</li> <li>Direito Empresarial</li> <li>Psicologia Organizacional</li> <li>Gestão de Custos</li> <li>Teoria das Organizações</li> <li>Estatística</li> <li>Macroeconomia</li> <li>Gestão de Pessoas e Subsistemas de RH</li> <li>Sistemas de Informação</li> <li>Gestão da cadeia de suprimentos</li> <li>Administração de Marketing</li> <li>Antropologia</li> <li>Prática de Gestão de Pessoas e Departamento Pessoal</li> <li>Planejamento Financeiro</li> <li>Pesquisa Operacional</li> <li>Sistemas de produção de bens e serviços</li> <li>Composto de Marketing</li> <li>Administração Pública</li> <li>Administração Financeira</li> <li>Logística</li> <li>Empreendedorismo</li> <li>Administração de Projetos</li> <li>Direito Trabalhista</li> <li>Consultoria Organizacional</li> <li>Estratégia Empresarial</li> <li>Mercados Financeiros</li> <li>Ciência Política</li> <li>Gestão do Agronegócio</li> <li>Gestão da Qualidade</li> <li>Análise de Investimento</li> <li>Varejo</li> <li>Tópicos Especiais I: Produção científica</li> <li>Gestão Ambiental</li> <li>Componente Curricular Optativo</li> <li>Jogos de Empresa</li> </ul> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info text-white" data-dismiss="modal"> <i class="fa fa-graduation-cap"></i> <span>Inscreva-se</span> </button> </div> </div> </div> </div> <!-- Button trigger modal --> <a href="" class="circle-modal blue" data-toggle="modal" data-target="#ArquiteturaeUrbanismo"> <i>Arquitetura e Urbanismo</i> </a> <!-- Modal --> <div class="modal fade" id="ArquiteturaeUrbanismo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title text-center" id="myModalLabel">Arquitetura e Urbanismo</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <h4>Perfil Profissional</h4> <p class="text-justify">O curso de Arquitetura e Urbanismo é bastante dinâmico, e na UNIFAMMA o profissional aprenderá a ter senso crítico e estético apurado, sensibilidade criativa aguçada e habilidade técnica desenvolvida para abordar e tratar problemas sociais relacionados à produção do espaço. Na prática o Arquiteto é capaz de exercer uma gama de atividades relativas às áreas de Arquitetura e Urbanismo: desenvolver pesquisas; estabelecer diretrizes; planejar e elaborar projetos com viabilidade técnico-econômica, considerando fatores culturais, estéticos e sociais; absorver novas tecnologias, elaborar soluções alternativas e propor com criatividade novas aplicações considerando aspectos ambientais e humanos, de maneira ética e socialmente responsável.</p> </div> <div class="clearfix"></div> <hr> <div class="col-sm-12"> <h4>Matriz curricular</h4> </div> <div class="clearfix"></div><div class="clearfix"></div><div class="clearfix"></div><div class="clearfix"></div><div class="clearfix"></div><div class="clearfix"></div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info text-white" data-dismiss="modal"> <i class="fa fa-graduation-cap"></i> <span>Inscreva-se</span> </button> </div> </div> </div> </div> <script> var count = 0; var perCol = 11; var $ul = $('.modal-body ul'); var rows = Math.ceil($ul.find('li').length/perCol); // var clearfix = "<div class='clearfix'></div>"; for(var i=0; i<=rows;i++){ if(count % 4 == 0){ $ul.before("<div class='clearfix'></div>"); } $ul.before('<div class="col-sm-3" data-count='+count+'><ul class="list-unstyled"></ul></div>'); count +=1; } for(var i=0;i<=rows;i++){ $ul.find('li:lt('+(perCol)+')').appendTo('ul.list-unstyled:eq('+(i)+')'); } $("ul.list-unstyled:empty").parent().remove(); $ul.remove(); </scritp>
  5. sandroporto

    Autoplay no jPlayer

    Bom dia pessoal, estou voltando a desenvolver sites, e desatualizado, muito, mas principalmente com Jquery, bootstrap, enfim, quase tudo depois de 2015, estou com um site de cliente que pediu um Player de músicas MP3, implantei o JPlayer ( http://jplayer.org ) e funciona, porém se nenhuma forma estou conseguindo o mesmo executar o "autoPlay" na playlist... segue o link do player (http://www.gessohouse.com.br/v2018/player.php) segue abaixo o código do arquivo player.php com URL completa de todos os arquivos requeridos(CSS, JS e MP3) <link href="http://www.gessohouse.com.br/v2018/js/jPlayer/estilo_tema4.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jquery.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.min.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jplayer.playlist.min.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.inspector.js"></script> <script type="text/javascript"> $(document).ready(function(){ var myPlaylist = new jPlayerPlaylist({ jPlayer: "#PlayerHtml5", cssSelectorAncestor: "#jp_container_N" }, [ { title:'Gesso House - Design & Elegância (Faixa 01)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_8_0_30082018083521.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 02)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_10_0_30082018084115.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 03)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_12_0_30082018085004.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 04)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_14_0_30082018092756.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 05)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_15_0_03092018103923.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 06)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_16_0_03092018104018.mp3', oga:'', poster:'' }, ], { playlistOptions: { enableRemoveControls: false, loopOnPrevious: false, shuffleOnLoop: false, autoPlay: true }, swfPath: "js/jPlayer/", supplied: "mp3", wmode: "window", volume: .99, smoothPlayBar: true, keyEnabled: true, audioFullScreen: true }); // The remove commands $("#playlist-remove").click(function() { myPlaylist.remove(); }); // The shuffle commands $("#playlist-shuffle").click(function() { myPlaylist.shuffle(); }); $("#playlist-shuffle-false").click(function() { myPlaylist.shuffle(false); }); $("#playlist-shuffle-true").click(function() { myPlaylist.shuffle(true); }); // The next/previous commands $("#playlist-next").click(function() { myPlaylist.next(); }); $("#playlist-previous").click(function() { myPlaylist.previous(); }); // The play commands $("#playlist-play").click(function() { myPlaylist.play(); }); // The pause command $("#playlist-pause").click(function() { myPlaylist.pause(); }); //$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#PlayerHtml5")}); /* added Dustin Blake code 01-11-2013 */ $("#PlayerHtml5").bind($.jPlayer.event.play, function (event) { var current = myPlaylist.current, playlist = myPlaylist.playlist; $.each(playlist, function (index, obj) { if (index == current) { $('.NomeDaMusica').text(obj.title); } }); }); }); </script> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td> <div id="jp_container_N" class="jp-video jp-video-270p"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <table width="460" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td> <div class="jp-type-playlist"> <div id="PlayerHtml5" class="jp-jplayer"></div> <div class="jp-gui"> <div class="jp-video-play"> <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> </div> <div class="jp-interface"> <div id="NomeDaMusica" class="NomeDaMusica"></div> <div class="jp-divisor">/</div> <div class="jp-current-time"></div> <div class="jp-duration"></div> <div class="jp-controls-holder"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-previous" tabindex="1" title="Voltar Música">voltar</a></li> <li><a href="javascript:;" class="jp-play" tabindex="1" title="Play" id="BotaoPlay">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1" title="Pausar">pause</a></li> <li><a href="javascript:;" class="jp-next" tabindex="1" title="Avançar Música">proxima</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1" title="Parar">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="Mudo">mudo</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Desativar Mudo">mudo off</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volume Máximo">volume maximo</a></li> </ul> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="Repetir">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="Desligar Repetir">repeat off</a></li> </ul> </div> <div class="jp-title"> <ul> <li></li> </ul> </div> </div> </div> <div class="jp-playlist"> <ul> <li></li> </ul> </div> </div> </td></tr></table> </div> </td></tr></table>
  6. marcelocardoso

    Function dentro de RULES jquery.validate

    Olá pessoal. Estou procurando na internet algo que possa incluir função ou ADDMETHOD nas rules ou em outra parte do JQUERY, ainda não encontrei algo satisfatório, se puderem exemplificar com exemplos, ou sugestões semelhantes, agradeço. 1) PRECISO DENTRO DAS RULES "campo_email" executar uma função. CODE: $(function () { $('#frm_form_contato').validate({ rules: { campo_email: { required: true, minlength: 5, email: true }, }, }); Incluir esta função, jQuery.validator.addMethod( $("#campo_email").verimail({ denyTempEmailDomains: true, messageElement: function (element) { this.element(element); }, }); ); Quero usar o valimail.js para validar o campo email, não somente validar, mas com ele, verificar se ele existe, pois é um script muito bom para isso. notei que dá para adicionar um método junto ao validate do jquery, porém, ainda pesquisando na internet não encontrei algo esclarecedor.. Agradeço sugestões. Obrigado.
  7. brunooliveira.dlp

    Input file com arquivo pré selecionado

    Eu tenho o código abaixo, que no clique de um botão, abre a janela do windows explore para selecionar um arquivo e depois envia um POST para um .php O arquivo que quero enviar para o POST, já esta no servidor e eu tenho o caminho de origem. Como faço pra que esse código envie o POST com o arquivo que preciso, sem abrir o windows explore? Import: function() { var _this = this; var importButton = this._controlPanel.ProjectPages.self.querySelector('.import'); importButton.addEventListener('click', function() { if (!_this._triggerImport) { _this._triggerImport = true; var inputFile = document.createElement('input'); inputFile.setAttribute("type", "file"); inputFile.setAttribute("name", 'data'); inputFile.style.display = 'none'; document.body.appendChild(inputFile); inputFile.addEventListener('change', function () { if (inputFile.files && inputFile.files[0]) { var nameFile = inputFile.files[0].name; var form = new FormData(); form.append('data', inputFile.files[0]); form.append('name_file', nameFile); _this.ajax(form, 'import', function (data) { var datas = _this._prepareContentPagesToSave('no-storage'); _this._loadProject(data, 'load'); document.body.removeChild(inputFile); builder.setStep(function () { _this._loadProject(datas, 'import'); }); }); } }); inputFile.click(); setTimeout(function(){ _this._triggerImport = false; },2000); } }); }
  8. Ola, bom dia! Sou novata aqui, e novata em programação também. estou criando um site simples e gostaria de uma ajudinha de vocês é o seguinte eu tenho essa função aqui: function atualizar(){ window.location.reload();} e defini para a pagina atualizar sem dar refhesh a cada 2 segundos: <body onload="setInterval('atualizar()', 2000)"> até ai tudo bem. O que eu quero mesmo é um status com uma condição (if, else) que me mostre se a pagina esta sendo atualizada com um sinal verde e se não for um sinal vermelho. tentei aqui, mas nao consegui chamar uma função na condição. Desde ja obrigada!
  9. Mech

    Duvida WebDesign

    Eu tenho uma duvida em relação ao header ou footer. Assim como em todos os sites, o header ou footer é o mesmo independente da pagina, no caso, a forma mais simples seria dar ctrl+c e ctrl+v e criar pagina. Mas caso eu fosse alterar o conteúdo dela, eu precisaria trocar de pagina em pagina. Teria alguma solução, um framework ou alguma forma de só alterar em uma pagina e alterar em todas paginas?
  10. Mech

    Como converter esse JQuery em JavaScript?

    Achei esse codigo jquery: $('.wrap a').click(function () { $(this).parent().next().toggleClass('active'); }); Ele basicamente faz, ao clicar, aparecer um texto. Exemplo: https://jsfiddle.net/Lq2pw6j7/32/ Mas, como eu faria esse mesmo código em javascript puro? EU ja fiz um código puro com 2 funções, uma abrir e uma fechar, que troca o .style.display para none ou block. Mas não especifica a classe que vai ser. Como no exemplo acima, são vários botões com o mesmo código(jquery). E eu queria aprender a faze-lo em js.
  11. Gustavo2503

    Paginação com jQuery

    Olá! Eu preciso fazer uma tabela que contém muitos registros, para organizá-lo melhor eu necessitarei de uma paginação que não faça refresh na página, que não precise de um envio do método GET, que o usuário tivesse a opção de escolher quantos registros por página ele verá, e que só aparecesse no máximo 5 botões, por exemplo: < 1 2 3 4 5 > Ai o usuário foi pra página 8. < 6 7 8 9 10 > E detalhe, sem usar o DataTables. Agradeço.
  12. Gustavo2503

    Baixar tabela em PDF

    Olá! Existe uma extensão fácil de usar para baixar tabela em PDF? Eu tentei usar o jsPDF mas não consegui baixar a tabela com o css. var doc = new jsPDF(); $('#pdf').click(function () { doc.fromHTML($('#tb_usuarios').get(0), 15, 15, { 'width': 170 }); doc.save('usuarios.pdf'); });
  13. danipereira

    Exportar FullCalendar

    Oi pessoal. Tou com uma dificuldade, será que alguém consegue me ajudar... Eu tenho um site de reservas e preciso exportar o calendario de outros sites. Uso o full calendar. Como faço?
  14. Gustavo2503

    Problema de recuperar um atributo data

    Estou com problema para recuperar um atributo data. No meu código php, que recupera os dados do usuário no banco de dados, eu usei um WHILE para escrever numa tabela estes dados, cada button tem um atributo data-modal, eu preciso deles para abrir um modal que editará suas informações, quando eu coloco este buttton dentro do while ele não o retorna, mas quando eu coloco o button fora do WHILE ele retorna o data-modal. Assim: modal.js $(document).ready( function(){ $(".btn-modal").click( function(){ const modal = $(this).attr("data-modal"); const fecha = $(modal+" .fecha-modal"); console.log("Irá abrir o modal: "+modal); $(modal).css("display", "block"); $("body, html").css("overflow", "hidden"); fecha.click( function() { $(modal+" > .modal-container").addClass("sobe-modal"); setTimeout(function(){ $(modal).css("display","none"); $("body, html").css("overflow", "auto"); $(modal+" > .modal-container").removeClass("sobe-modal"); }, 400); }); shortcut.add("Esc",function(){ fecha.click(); }); }); }); tb_usuarios.php (neste caso o atributo data-modal não será retornado) <?php require_once '../bd/banco.php'; $sql = " SELECT * "; $sql.= " FROM TB_USUARIOS "; $sql.= " ORDER BY nome ASC "; $resultado = mysqli_query($link, $sql); if($resultado){ while ($dados = mysqli_fetch_array($resultado, MYSQLI_ASSOC)) { $id_usu = $dados['id_usuario']; $nome = $dados['nome']; $email = $dados['email']; $telefone = $dados['telefone']; $cc = $dados['cc']; $perfil = $dados['perfil']; echo ' <tr> <td>'.$nome.'</td> <td>'.$email.'</td> <td>'.$telefone.'</td> <td>'.$cc.'</td> <td>'.$perfil.'</td> <td> <button class="btn-modal" data-modal="#modal-edita-'.$id_usu.'"> <span class="fa fa-pencil"></span> </button> <button> <span class="fa fa-close"></span> </button> </td> </tr> '; } } else { echo ' <tr> <td colspan="6"> <p style="color: #ff0000">Erro na execução da consulta. <a href="" target="_blank">Por favor entre em contato conosco</a></p> </td> </tr> '; } index.php (neste caso o atributo data-modal será retornado) <button class="btn btn-roxo btn-modal" data-modal="#modal-novo"> <span class="fa fa-plus"></span> Novo </button> Me ajudem por favor!!!!
  15. AndréAraujo

    MouseMove sobre iframe, div e div em modo fullscreen

    Olá pessoal, venho procurando uma maneira de fazer com que o evento mousemove seja reconhecido quando executado sobre um iframe do YouTube, minha ideia inicial foi sobrepor uma div ao iframe, mas o devido aos banners e anúncios em vídeo a ideia se tornou inviável. Procurei por um bom tempo soluções, não encontrei nenhuma que eu pudesse compreender e adaptar-la ao meu projeto. Montei um pequena simulação do projeto para tornar mais fácil a exibição do problema: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> </head> <body> <style> .area-mousemove{ width:600px; height:500px; background-color:#09F; margin:0 auto; } .container{ max-width:600px; max-height:337.5px; position:relative; } .container-player{ padding-bottom:56.25%; height:0; background-color:#222; } #ytplayer{ display:block; } .container-player iframe, .container-player object, .container-player embed{ background-color:#000; position:absolute; top:0; left:0; width:100%; height:100%; border:0; z-index:1; } .controls{ width:100%; height:40px; background-color:#F60; position:absolute; z-index:1; bottom:0; left:0; display:none; } .text{ line-height:40px; margin-left:20px; font-family:Arial; font-size:18px; font-weight:700; color:#000; display:table; float:left; cursor:default; } .screen{ line-height:40px; background-color:#222; margin-right:20px; padding:0 10px; font-family:Arial; font-size:18px; font-weight:700; color:#fff; float:right; cursor:pointer; } .close-screen{ line-height:40px; background-color:#222; margin-right:20px; padding:0 10px; font-family:Arial; font-size:18px; font-weight:700; color:#fff; float:right; display:none; cursor:pointer; } </style> <div class="area-mousemove"> <div class="container"> <div id="container-screen"> <div class="container-player"> <iframe id="ytplayer" type="text/html" src="https://www.youtube.com/embed/2TvNnW2Br70?controls=0&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> <div class="controls"><span class="text">Controles</span><span class="screen start">Screen</span><span class="close-screen start">[ x ]</span></div> </div> </div> </div> </div> <script> $('.area-mousemove').mousemove(function(cursor){ $('.controls').fadeIn(200); hideStart(); }); var timeout; function hideStart(){ if(timeout !== undefined){ clearTimeout(timeout); } timeout = setTimeout(function(){ $('.controls').fadeOut(200); }, 2500); } $('.controls span.start').on('click', function(a){ $('.screen').hide(); $('.close-screen').show(); var elem = document.getElementById("container-screen"); if(elem.requestFullscreen){ elem.requestFullscreen(); }else if(elem.mozRequestFullScreen){ /* Firefox */ elem.mozRequestFullScreen(); }else if(elem.webkitRequestFullscreen){ /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); }else if(elem.msRequestFullscreen){ /* IE/Edge */ elem.msRequestFullscreen(); } screenfull.toggle($('#container-screen')[0]); }); if (document.addEventListener){ document.addEventListener('webkitfullscreenchange', exitHandler, false); document.addEventListener('mozfullscreenchange', exitHandler, false); document.addEventListener('fullscreenchange', exitHandler, false); document.addEventListener('MSFullscreenChange', exitHandler, false); } function exitHandler(){ if(!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement){ $('.close-screen').hide(); $('.screen').show(); $('.controls').css('position', 'absolute'); } } </script> <script type="text/jscript" src="https://AndreAraujo1.github.io/screen/screen.js"></script> </body> </html> Agradeço a atenção!
  16. Boa tarde pessoal, Estou com o seguindo problema, tenho uma aplicação que possui uma tabela que é preenchida com ajax e o método append para inserir as linhas na tabela. O problema é que não consigo ordenar os dados desta tabela usando o tablesorter() do jquery, se eu preencher a tabela com dados fixos ele funciona perfeitamente, se eu preencher usando java ou php também mas quando preencho com js usando o append não funciona. Alguém pode me ajudar?
  17. Julio Cavallari

    Erro 401 somente em requisição AJAX

    Estou com um problema para conseguir autorização a uma API, mesmo colocando o usuário e senha corretos na URL, o AJAX me retorno erro 401, somente quando é o AJAX que faz a requisição que esse erro acontece. Se eu colo a URL no navegador funciona normalmente. function consulta(nb, username, password){ var url = "http://"+username+":"+password+"@consulta.ws/a/"+nb+"?type=json&cache=refresh"; console.log(url); $.ajax({ url: url, method: "POST", dataType: "JSON", headers: { 'Authorization': 'Basic ' + btoa(username+':'+password), }, success: function (result){ console.log(result); }, error: function(error){ console.log(error); } }); } Imagem do erro:
  18. joaovitorbatista

    Erro no Ajax

    Oi, Estou com um problema em uma requisição, não tenho muita experiencia, estou estudando, mas essa questão me pegou. Meu ajax era assim: <input name="data_agenda" class="form-control form-control-sm" type="text" id="data_agenda" value="<?=$_REQUEST['data_agenda']?>" size="15" maxlength="10" onFocus="this.className='boxover'" onKeyPress="return MM_formtCep(event,this,'##/##/####');" onBlur="this.className='boxnormal'" /> >>>>> Não funcionou <<<<< Agora estou tentando arrumar e fazer assim: <script type="text/javascript"> function carregaHorario() { function carregaHorario() { var myAjax = new Ajax.Updater('agenda_horario', '/php/clientes/carrega_horario_consultor.php?id_consultor='+document.forms[0].id_consultor.value+'&data_agendamento='+document.forms[0].data_agenda.value+'&id_franquia=<?=$id_franquia?>', { type: 'POST', dataType: 'json', parameters: 'foo=bar' }) } </script> Preciso fazer uma verificação se o horário selecionado está disponivel ou não, com base na seleção do consultor. Mas mesmo assim, ainda não estou conseguindo, se alguém puder me ajudar. Obrigado.
  19. jhonatanpacheco

    Slideshow em java e jquery

    eu estou com um problema, eu peguei um codigo de uma video aula e um jquery tambem, estou usando os dois, coloquei os codigos exatamente como estavam no video, mas mesmo assim a minha seta não aparece, fica tipo que um A nela, eu coloquei uma imagem para melhorar a visualização, como eu poderia proceder? o caminho do jquery ta todo certo, do java também, tudo nas pastas certinho e ja foi revisado mais de uma vez, agradeço quem puder me ajudar, abraço. HTML: <h1 class="inicial">Adicionados Recentemente </h1><div class="carousel"> <div><a href="#"><img class="slide" src="img/01.png" alt="js" /></div></a> <div><a href="#"><img src="img/02.png" alt="java" /></div></a> <div><a href="#"><img src="img/03.png" alt="python"/></div></a> JQUERY: ;(function(factory) { 'use strict'; if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports !== 'undefined') { module.exports = factory(require('jquery')); } else { factory(jQuery); } }(function($) { 'use strict'; var Slick = window.Slick || {}; Slick = (function() { var instanceUid = 0; function Slick(element, settings) { var _ = this, dataSettings; _.defaults = { accessibility: true, adaptiveHeight: false, appendArrows: $(element), appendDots: $(element), arrows: true, asNavFor: null, prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Previous</button>', nextArrow: '<button class="slick-next" aria-label="Next" type="button">Next</button>', autoplay: false, autoplaySpeed: 3000, centerMode: false, centerPadding: '50px', cssEase: 'ease', customPaging: function(slider, i) { return $('<button type="button" />').text(i + 1); }, dots: false, dotsClass: 'slick-dots', draggable: true, easing: 'linear', edgeFriction: 0.35, fade: false, focusOnSelect: false, infinite: true, initialSlide: 0, lazyLoad: 'ondemand', mobileFirst: false, pauseOnHover: true, pauseOnFocus: true, pauseOnDotsHover: false, respondTo: 'window', responsive: null, rows: 1, rtl: false, slide: '', slidesPerRow: 1, slidesToShow: 1, slidesToScroll: 1, speed: 500, swipe: true, swipeToSlide: false, touchMove: true, touchThreshold: 5, useCSS: true, useTransform: true, variableWidth: false, vertical: false, verticalSwiping: false, waitForAnimate: true, zIndex: 1000 }; _.initials = { animating: false, dragging: false, autoPlayTimer: null, currentDirection: 0, currentLeft: null, currentSlide: 0, direction: 1, $dots: null, listWidth: null, listHeight: null, loadIndex: 0, $nextArrow: null, $prevArrow: null, scrolling: false, slideCount: null, slideWidth: null, $slideTrack: null, $slides: null, sliding: false, slideOffset: 0, swipeLeft: null, swiping: false, $list: null, touchObject: {}, transformsEnabled: false, unslicked: false }; $.extend(_, _.initials); _.activeBreakpoint = null; _.animType = null; _.animProp = null; _.breakpoints = []; _.breakpointSettings = []; _.cssTransitions = false; _.focussed = false; _.interrupted = false; _.hidden = 'hidden'; _.paused = true; _.positionProp = null; _.respondTo = null; _.rowCount = 1; _.shouldClick = true; _.$slider = $(element); _.$slidesCache = null; _.transformType = null; _.transitionType = null; _.visibilityChange = 'visibilitychange'; _.windowWidth = 0; _.windowTimer = null; dataSettings = $(element).data('slick') || {}; _.options = $.extend({}, _.defaults, settings, dataSettings); _.currentSlide = _.options.initialSlide; _.originalSettings = _.options; if (typeof document.mozHidden !== 'undefined') { _.hidden = 'mozHidden'; _.visibilityChange = 'mozvisibilitychange'; } else if (typeof document.webkitHidden !== 'undefined') { _.hidden = 'webkitHidden'; _.visibilityChange = 'webkitvisibilitychange'; } _.autoPlay = $.proxy(_.autoPlay, _); _.autoPlayClear = $.proxy(_.autoPlayClear, _); _.autoPlayIterator = $.proxy(_.autoPlayIterator, _); _.changeSlide = $.proxy(_.changeSlide, _); _.clickHandler = $.proxy(_.clickHandler, _); _.selectHandler = $.proxy(_.selectHandler, _); _.setPosition = $.proxy(_.setPosition, _); _.swipeHandler = $.proxy(_.swipeHandler, _); _.dragHandler = $.proxy(_.dragHandler, _); _.keyHandler = $.proxy(_.keyHandler, _); _.instanceUid = instanceUid++; // A simple way to check for HTML strings // Strict HTML recognition (must start with <) // Extracted from jQuery v1.11 source _.htmlExpr = /^(?:\s*(<[\w\W]+>)[^>]*)$/; _.registerBreakpoints(); _.init(true); } return Slick; }()); Slick.prototype.activateADA = function() { var _ = this; _.$slideTrack.find('.slick-active').attr({ 'aria-hidden': 'false' }).find('a, input, button, select').attr({ 'tabindex': '0' }); }; Slick.prototype.addSlide = Slick.prototype.slickAdd = function(markup, index, addBefore) { var _ = this; if (typeof(index) === 'boolean') { addBefore = index; index = null; } else if (index < 0 || (index >= _.slideCount)) { return false; } _.unload(); if (typeof(index) === 'number') { if (index === 0 && _.$slides.length === 0) { $(markup).appendTo(_.$slideTrack); } else if (addBefore) { $(markup).insertBefore(_.$slides.eq(index)); } else { $(markup).insertAfter(_.$slides.eq(index)); } } else { if (addBefore === true) { $(markup).prependTo(_.$slideTrack); } else { $(markup).appendTo(_.$slideTrack); } } _.$slides = _.$slideTrack.children(this.options.slide); _.$slideTrack.children(this.options.slide).detach(); _.$slideTrack.append(_.$slides); _.$slides.each(function(index, element) { $(element).attr('data-slick-index', index); }); _.$slidesCache = _.$slides; _.reinit(); }; Slick.prototype.animateHeight = function() { var _ = this; if (_.options.slidesToShow === 1 && _.options.adaptiveHeight === true && _.options.vertical === false) { var targetHeight = _.$slides.eq(_.currentSlide).outerHeight(true); _.$list.animate({ height: targetHeight }, _.options.speed); } }; Slick.prototype.animateSlide = function(targetLeft, callback) { var animProps = {}, _ = this; _.animateHeight(); if (_.options.rtl === true && _.options.vertical === false) { targetLeft = -targetLeft; } if (_.transformsEnabled === false) { if (_.options.vertical === false) { _.$slideTrack.animate({ left: targetLeft }, _.options.speed, _.options.easing, callback); } else { _.$slideTrack.animate({ top: targetLeft }, _.options.speed, _.options.easing, callback); } } else { if (_.cssTransitions === false) { if (_.options.rtl === true) { _.currentLeft = -(_.currentLeft); } $({ animStart: _.currentLeft }).animate({ animStart: targetLeft }, { duration: _.options.speed, easing: _.options.easing, step: function(now) { now = Math.ceil(now); if (_.options.vertical === false) { animProps[_.animType] = 'translate(' + now + 'px, 0px)'; _.$slideTrack.css(animProps); } else { animProps[_.animType] = 'translate(0px,' + now + 'px)'; _.$slideTrack.css(animProps); } }, complete: function() { if (callback) { callback.call(); } } }); } else { _.applyTransition(); targetLeft = Math.ceil(targetLeft); if (_.options.vertical === false) { animProps[_.animType] = 'translate3d(' + targetLeft + 'px, 0px, 0px)'; } else { animProps[_.animType] = 'translate3d(0px,' + targetLeft + 'px, 0px)'; } _.$slideTrack.css(animProps); if (callback) { setTimeout(function() { _.disableTransition(); callback.call(); }, _.options.speed); } } } }; Slick.prototype.getNavTarget = function() { var _ = this, asNavFor = _.options.asNavFor; if ( asNavFor && asNavFor !== null ) { asNavFor = $(asNavFor).not(_.$slider); } return asNavFor; }; Slick.prototype.asNavFor = function(index) { var _ = this, asNavFor = _.getNavTarget(); if ( asNavFor !== null && typeof asNavFor === 'object' ) { asNavFor.each(function() { var target = $(this).slick('getSlick'); if(!target.unslicked) { target.slideHandler(index, true); } }); } }; Slick.prototype.applyTransition = function(slide) { var _ = this, transition = {}; if (_.options.fade === false) { transition[_.transitionType] = _.transformType + ' ' + _.options.speed + 'ms ' + _.options.cssEase; } else { transition[_.transitionType] = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase; } if (_.options.fade === false) { _.$slideTrack.css(transition); } else { _.$slides.eq(slide).css(transition); } }; Slick.prototype.autoPlay = function() { var _ = this; _.autoPlayClear(); if ( _.slideCount > _.options.slidesToShow ) { _.autoPlayTimer = setInterval( _.autoPlayIterator, _.options.autoplaySpeed ); } }; Slick.prototype.autoPlayClear = function() { var _ = this; if (_.autoPlayTimer) { clearInterval(_.autoPlayTimer); } }; Slick.prototype.autoPlayIterator = function() { var _ = this, slideTo = _.currentSlide + _.options.slidesToScroll; if ( !_.paused && !_.interrupted && !_.focussed ) { if ( _.options.infinite === false ) { if ( _.direction === 1 && ( _.currentSlide + 1 ) === ( _.slideCount - 1 )) { _.direction = 0; } else if ( _.direction === 0 ) { slideTo = _.currentSlide - _.options.slidesToScroll; if ( _.currentSlide - 1 === 0 ) { _.direction = 1; } } } _.slideHandler( slideTo ); } }; Slick.prototype.buildArrows = function() { var _ = this; if (_.options.arrows === true ) { _.$prevArrow = $(_.options.prevArrow).addClass('slick-arrow'); _.$nextArrow = $(_.options.nextArrow).addClass('slick-arrow'); if( _.slideCount > _.options.slidesToShow ) { _.$prevArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex'); _.$nextArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex'); if (_.htmlExpr.test(_.options.prevArrow)) { _.$prevArrow.prependTo(_.options.appendArrows); } if (_.htmlExpr.test(_.options.nextArrow)) { _.$nextArrow.appendTo(_.options.appendArrows); } if (_.options.infinite !== true) { _.$prevArrow .addClass('slick-disabled') .attr('aria-disabled', 'true'); } } else { _.$prevArrow.add( _.$nextArrow ) .addClass('slick-hidden') .attr({ 'aria-disabled': 'true', 'tabindex': '-1' }); } } }; Slick.prototype.buildDots = function() { var _ = this, i, dot; if (_.options.dots === true) { _.$slider.addClass('slick-dotted'); dot = $('<ul />').addClass(_.options.dotsClass); for (i = 0; i <= _.getDotCount(); i += 1) { dot.append($('<li />').append(_.options.customPaging.call(this, _, i))); } _.$dots = dot.appendTo(_.options.appendDots); _.$dots.find('li').first().addClass('slick-active'); } }; Slick.prototype.buildOut = function() { var _ = this; _.$slides = _.$slider .children( _.options.slide + ':not(.slick-cloned)') .addClass('slick-slide'); _.slideCount = _.$slides.length; _.$slides.each(function(index, element) { $(element) .attr('data-slick-index', index) .data('originalStyling', $(element).attr('style') || ''); }); _.$slider.addClass('slick-slider'); _.$slideTrack = (_.slideCount === 0) ? $('<div class="slick-track"/>').appendTo(_.$slider) : _.$slides.wrapAll('<div class="slick-track"/>').parent(); _.$list = _.$slideTrack.wrap( '<div class="slick-list"/>').parent(); _.$slideTrack.css('opacity', 0); if (_.options.centerMode === true || _.options.swipeToSlide === true) { _.options.slidesToScroll = 1; } $('img[data-lazy]', _.$slider).not('[src]').addClass('slick-loading'); _.setupInfinite(); _.buildArrows(); _.buildDots(); _.updateDots(); _.setSlideClasses(typeof _.currentSlide === 'number' ? _.currentSlide : 0); if (_.options.draggable === true) { _.$list.addClass('draggable'); } }; Slick.prototype.buildRows = function() { var _ = this, a, b, c, newSlides, numOfSlides, originalSlides,slidesPerSection; newSlides = document.createDocumentFragment(); originalSlides = _.$slider.children(); if(_.options.rows > 1) { slidesPerSection = _.options.slidesPerRow * _.options.rows; numOfSlides = Math.ceil( originalSlides.length / slidesPerSection ); for(a = 0; a < numOfSlides; a++){ var slide = document.createElement('div'); for(b = 0; b < _.options.rows; b++) { var row = document.createElement('div'); for(c = 0; c < _.options.slidesPerRow; c++) { var target = (a * slidesPerSection + ((b * _.options.slidesPerRow) + c)); if (originalSlides.get(target)) { row.appendChild(originalSlides.get(target)); } } slide.appendChild(row); } newSlides.appendChild(slide); } _.$slider.empty().append(newSlides); _.$slider.children().children().children() .css({ 'width':(100 / _.options.slidesPerRow) + '%', 'display': 'inline-block' }); } }; Slick.prototype.checkResponsive = function(initial, forceUpdate) { var _ = this, breakpoint, targetBreakpoint, respondToWidth, triggerBreakpoint = false; var sliderWidth = _.$slider.width(); var windowWidth = window.innerWidth || $(window).width(); if (_.respondTo === 'window') { respondToWidth = windowWidth; } else if (_.respondTo === 'slider') { respondToWidth = sliderWidth; } else if (_.respondTo === 'min') { respondToWidth = Math.min(windowWidth, sliderWidth); } if ( _.options.responsive && _.options.responsive.length && _.options.responsive !== null) { targetBreakpoint = null; for (breakpoint in _.breakpoints) { if (_.breakpoints.hasOwnProperty(breakpoint)) { if (_.originalSettings.mobileFirst === false) { if (respondToWidth < _.breakpoints[breakpoint]) { targetBreakpoint = _.breakpoints[breakpoint]; } } else { if (respondToWidth > _.breakpoints[breakpoint]) { targetBreakpoint = _.breakpoints[breakpoint]; } } } } if (targetBreakpoint !== null) { if (_.activeBreakpoint !== null) { if (targetBreakpoint !== _.activeBreakpoint || forceUpdate) { _.activeBreakpoint = targetBreakpoint; if (_.breakpointSettings[targetBreakpoint] === 'unslick') { _.unslick(targetBreakpoint); } else { _.options = $.extend({}, _.originalSettings, _.breakpointSettings[ targetBreakpoint]); if (initial === true) { _.currentSlide = _.options.initialSlide; } _.refresh(initial); } triggerBreakpoint = targetBreakpoint; } } else { _.activeBreakpoint = targetBreakpoint; if (_.breakpointSettings[targetBreakpoint] === 'unslick') { _.unslick(targetBreakpoint); } else { _.options = $.extend({}, _.originalSettings, _.breakpointSettings[ targetBreakpoint]); if (initial === true) { _.currentSlide = _.options.initialSlide; } _.refresh(initial); } triggerBreakpoint = targetBreakpoint; } } else { if (_.activeBreakpoint !== null) { _.activeBreakpoint = null; _.options = _.originalSettings; if (initial === true) { _.currentSlide = _.options.initialSlide; } _.refresh(initial); triggerBreakpoint = targetBreakpoint; } } // only trigger breakpoints during an actual break. not on initialize. if( !initial && triggerBreakpoint !== false ) { _.$slider.trigger('breakpoint', [_, triggerBreakpoint]); } } }; Slick.prototype.changeSlide = function(event, dontAnimate) { var _ = this, $target = $(event.currentTarget), indexOffset, slideOffset, unevenOffset; // If target is a link, prevent default action. if($target.is('a')) { event.preventDefault(); } // If target is not the <li> element (ie: a child), find the <li>. if(!$target.is('li')) { $target = $target.closest('li'); } unevenOffset = (_.slideCount % _.options.slidesToScroll !== 0); indexOffset = unevenOffset ? 0 : (_.slideCount - _.currentSlide) % _.options.slidesToScroll; switch (event.data.message) { case 'previous': slideOffset = indexOffset === 0 ? _.options.slidesToScroll : _.options.slidesToShow - indexOffset; if (_.slideCount > _.options.slidesToShow) { _.slideHandler(_.currentSlide - slideOffset, false, dontAnimate); } break; case 'next': slideOffset = indexOffset === 0 ? _.options.slidesToScroll : indexOffset; if (_.slideCount > _.options.slidesToShow) { _.slideHandler(_.currentSlide + slideOffset, false, dontAnimate); } break; case 'index': var index = event.data.index === 0 ? 0 : event.data.index || $target.index() * _.options.slidesToScroll; _.slideHandler(_.checkNavigable(index), false, dontAnimate); $target.children().trigger('focus'); break; default: return; } }; Slick.prototype.checkNavigable = function(index) { var _ = this, navigables, prevNavigable; navigables = _.getNavigableIndexes(); prevNavigable = 0; if (index > navigables[navigables.length - 1]) { index = navigables[navigables.length - 1]; } else { for (var n in navigables) { if (index < navigables[n]) { index = prevNavigable; break; } prevNavigable = navigables[n]; } } return index; }; Slick.prototype.cleanUpEvents = function() { var _ = this; if (_.options.dots && _.$dots !== null) { $('li', _.$dots) .off('click.slick', _.changeSlide) .off('mouseenter.slick', $.proxy(_.interrupt, _, true)) .off('mouseleave.slick', $.proxy(_.interrupt, _, false)); if (_.options.accessibility === true) { _.$dots.off('keydown.slick', _.keyHandler); } } _.$slider.off('focus.slick blur.slick'); if (_.options.arrows === true && _.slideCount > _.options.slidesToShow) { _.$prevArrow && _.$prevArrow.off('click.slick', _.changeSlide); _.$nextArrow && _.$nextArrow.off('click.slick', _.changeSlide); if (_.options.accessibility === true) { _.$prevArrow.off('keydown.slick', _.keyHandler); _.$nextArrow.off('keydown.slick', _.keyHandler); } } _.$list.off('touchstart.slick mousedown.slick', _.swipeHandler); _.$list.off('touchmove.slick mousemove.slick', _.swipeHandler); _.$list.off('touchend.slick mouseup.slick', _.swipeHandler); _.$list.off('touchcancel.slick mouseleave.slick', _.swipeHandler); _.$list.off('click.slick', _.clickHandler); $(document).off(_.visibilityChange, _.visibility); _.cleanUpSlideEvents(); if (_.options.accessibility === true) { _.$list.off('keydown.slick', _.keyHandler); } if (_.options.focusOnSelect === true) { $(_.$slideTrack).children().off('click.slick', _.selectHandler); } $(window).off('orientationchange.slick.slick-' + _.instanceUid, _.orientationChange); $(window).off('resize.slick.slick-' + _.instanceUid, _.resize); $('[draggable!=true]', _.$slideTrack).off('dragstart', _.preventDefault); $(window).off('load.slick.slick-' + _.instanceUid, _.setPosition); }; Slick.prototype.cleanUpSlideEvents = function() { var _ = this; _.$list.off('mouseenter.slick', $.proxy(_.interrupt, _, true)); _.$list.off('mouseleave.slick', $.proxy(_.interrupt, _, false)); }; Slick.prototype.cleanUpRows = function() { var _ = this, originalSlides; if(_.options.rows > 1) { originalSlides = _.$slides.children().children(); originalSlides.removeAttr('style'); _.$slider.empty().append(originalSlides); } }; Slick.prototype.clickHandler = function(event) { var _ = this; if (_.shouldClick === false) { event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); } }; Slick.prototype.destroy = function(refresh) { var _ = this; _.autoPlayClear(); _.touchObject = {}; _.cleanUpEvents(); $('.slick-cloned', _.$slider).detach(); if (_.$dots) { _.$dots.remove(); } if ( _.$prevArrow && _.$prevArrow.length ) { _.$prevArrow .removeClass('slick-disabled slick-arrow slick-hidden') .removeAttr('aria-hidden aria-disabled tabindex') .css('display',''); if ( _.htmlExpr.test( _.options.prevArrow )) { _.$prevArrow.remove(); } } if ( _.$nextArrow && _.$nextArrow.length ) { _.$nextArrow .removeClass('slick-disabled slick-arrow slick-hidden') .removeAttr('aria-hidden aria-disabled tabindex') .css('display',''); if ( _.htmlExpr.test( _.options.nextArrow )) { _.$nextArrow.remove(); } } if (_.$slides) { _.$slides .removeClass('slick-slide slick-active slick-center slick-visible slick-current') .removeAttr('aria-hidden') .removeAttr('data-slick-index') .each(function(){ $(this).attr('style', $(this).data('originalStyling')); }); _.$slideTrack.children(this.options.slide).detach(); _.$slideTrack.detach(); _.$list.detach(); _.$slider.append(_.$slides); } _.cleanUpRows(); _.$slider.removeClass('slick-slider'); _.$slider.removeClass('slick-initialized'); _.$slider.removeClass('slick-dotted'); _.unslicked = true; if(!refresh) { _.$slider.trigger('destroy', [_]); } }; Slick.prototype.disableTransition = function(slide) { var _ = this, transition = {}; transition[_.transitionType] = ''; if (_.options.fade === false) { _.$slideTrack.css(transition); } else { _.$slides.eq(slide).css(transition); } }; Slick.prototype.fadeSlide = function(slideIndex, callback) { var _ = this; if (_.cssTransitions === false) { _.$slides.eq(slideIndex).css({ zIndex: _.options.zIndex }); _.$slides.eq(slideIndex).animate({ opacity: 1 }, _.options.speed, _.options.easing, callback); } else { _.applyTransition(slideIndex); _.$slides.eq(slideIndex).css({ opacity: 1, zIndex: _.options.zIndex }); if (callback) { setTimeout(function() { _.disableTransition(slideIndex); callback.call(); }, _.options.speed); } } }; Slick.prototype.fadeSlideOut = function(slideIndex) { var _ = this; if (_.cssTransitions === false) { _.$slides.eq(slideIndex).animate({ opacity: 0, zIndex: _.options.zIndex - 2 }, _.options.speed, _.options.easing); } else { _.applyTransition(slideIndex); _.$slides.eq(slideIndex).css({ opacity: 0, zIndex: _.options.zIndex - 2 }); } }; Slick.prototype.filterSlides = Slick.prototype.slickFilter = function(filter) { var _ = this; if (filter !== null) { _.$slidesCache = _.$slides; _.unload(); _.$slideTrack.children(this.options.slide).detach(); _.$slidesCache.filter(filter).appendTo(_.$slideTrack); _.reinit(); } }; Slick.prototype.focusHandler = function() { var _ = this; _.$slider .off('focus.slick blur.slick') .on('focus.slick blur.slick', '*', function(event) { event.stopImmediatePropagation(); var $sf = $(this); setTimeout(function() { if( _.options.pauseOnFocus ) { _.focussed = $sf.is(':focus'); _.autoPlay(); } }, 0); }); }; Slick.prototype.getCurrent = Slick.prototype.slickCurrentSlide = function() { var _ = this; return _.currentSlide; }; Slick.prototype.getDotCount = function() { var _ = this; var breakPoint = 0; var counter = 0; var pagerQty = 0; if (_.options.infinite === true) { if (_.slideCount <= _.options.slidesToShow) { ++pagerQty; } else { while (breakPoint < _.slideCount) { ++pagerQty; breakPoint = counter + _.options.slidesToScroll; counter += _.options.slidesToScroll <= _.options.slidesToShow ? _.options.slidesToScroll : _.options.slidesToShow; } } } else if (_.options.centerMode === true) { pagerQty = _.slideCount; } else if(!_.options.asNavFor) { pagerQty = 1 + Math.ceil((_.slideCount - _.options.slidesToShow) / _.options.slidesToScroll); }else { while (breakPoint < _.slideCount) { ++pagerQty; breakPoint = counter + _.options.slidesToScroll; counter += _.options.slidesToScroll <= _.options.slidesToShow ? _.options.slidesToScroll : _.options.slidesToShow; } } return pagerQty - 1; }; Slick.prototype.getLeft = function(slideIndex) { var _ = this, targetLeft, verticalHeight, verticalOffset = 0, targetSlide; _.slideOffset = 0; verticalHeight = _.$slides.first().outerHeight(true); if (_.options.infinite === true) { if (_.slideCount > _.options.slidesToShow) { _.slideOffset = (_.slideWidth * _.options.slidesToShow) * -1; verticalOffset = (verticalHeight * _.options.slidesToShow) * -1; } if (_.slideCount % _.options.slidesToScroll !== 0) { if (slideIndex + _.options.slidesToScroll > _.slideCount && _.slideCount > _.options.slidesToShow) { if (slideIndex > _.slideCount) { _.slideOffset = ((_.options.slidesToShow - (slideIndex - _.slideCount)) * _.slideWidth) * -1; verticalOffset = ((_.options.slidesToShow - (slideIndex - _.slideCount)) * verticalHeight) * -1; } else { _.slideOffset = ((_.slideCount % _.options.slidesToScroll) * _.slideWidth) * -1; verticalOffset = ((_.slideCount % _.options.slidesToScroll) * verticalHeight) * -1; } } } } else { if (slideIndex + _.options.slidesToShow > _.slideCount) { _.slideOffset = ((slideIndex + _.options.slidesToShow) - _.slideCount) * _.slideWidth; verticalOffset = ((slideIndex + _.options.slidesToShow) - _.slideCount) * verticalHeight; } } if (_.slideCount <= _.options.slidesToShow) { _.slideOffset = 0; verticalOffset = 0; } if (_.options.centerMode === true && _.slideCount <= _.options.slidesToShow) { _.slideOffset = ((_.slideWidth * Math.floor(_.options.slidesToShow)) / 2) - ((_.slideWidth * _.slideCount) / 2); } else if (_.options.centerMode === true && _.options.infinite === true) { _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2) - _.slideWidth; } else if (_.options.centerMode === true) { _.slideOffset = 0; _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2); } if (_.options.vertical === false) { targetLeft = ((slideIndex * _.slideWidth) * -1) + _.slideOffset; } else { targetLeft = ((slideIndex * verticalHeight) * -1) + verticalOffset; } if (_.options.variableWidth === true) { if (_.slideCount <= _.options.slidesToShow || _.options.infinite === false) { targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex); } else { targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex + _.options.slidesToShow); } if (_.options.rtl === true) { if (targetSlide[0]) { targetLeft = (_.$slideTrack.width() - targetSlide[0].offsetLeft - targetSlide.width()) * -1; } else { targetLeft = 0; } } else { targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0; } if (_.options.centerMode === true) { if (_.slideCount <= _.options.slidesToShow || _.options.infinite === false) { targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex); } else { targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex + _.options.slidesToShow + 1); } if (_.options.rtl === true) { if (targetSlide[0]) { targetLeft = (_.$slideTrack.width() - targetSlide[0].offsetLeft - targetSlide.width()) * -1; } else { targetLeft = 0; } } else { targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0; } targetLeft += (_.$list.width() - targetSlide.outerWidth()) / 2; } } return targetLeft; }; Slick.prototype.getOption = Slick.prototype.slickGetOption = function(option) { var _ = this; return _.options[option]; }; Slick.prototype.getNavigableIndexes = function() { var _ = this, breakPoint = 0, counter = 0, indexes = [], max; if (_.options.infinite === false) { max = _.slideCount; } else { breakPoint = _.options.slidesToScroll * -1; counter = _.options.slidesToScroll * -1; max = _.slideCount * 2; } while (breakPoint < max) { indexes.push(breakPoint); breakPoint = counter + _.options.slidesToScroll; counter += _.options.slidesToScroll <= _.options.slidesToShow ? _.options.slidesToScroll : _.options.slidesToShow; } return indexes; }; Slick.prototype.getSlick = function() { return this; }; Slick.prototype.getSlideCount = function() { var _ = this, slidesTraversed, swipedSlide, centerOffset; centerOffset = _.options.centerMode === true ? _.slideWidth * Math.floor(_.options.slidesToShow / 2) : 0; if (_.options.swipeToSlide === true) { _.$slideTrack.find('.slick-slide').each(function(index, slide) { if (slide.offsetLeft - centerOffset + ($(slide).outerWidth() / 2) > (_.swipeLeft * -1)) { swipedSlide = slide; return false; } }); slidesTraversed = Math.abs($(swipedSlide).attr('data-slick-index') - _.currentSlide) || 1; return slidesTraversed; } else { return _.options.slidesToScroll; } }; Slick.prototype.goTo = Slick.prototype.slickGoTo = function(slide, dontAnimate) { var _ = this; _.changeSlide({ data: { message: 'index', index: parseInt(slide) } }, dontAnimate); }; Slick.prototype.init = function(creation) { var _ = this; if (!$(_.$slider).hasClass('slick-initialized')) { $(_.$slider).addClass('slick-initialized'); _.buildRows(); _.buildOut(); _.setProps(); _.startLoad(); _.loadSlider(); _.initializeEvents(); _.updateArrows(); _.updateDots(); _.checkResponsive(true); _.focusHandler(); } if (creation) { _.$slider.trigger('init', [_]); } if (_.options.accessibility === true) { _.initADA(); } if ( _.options.autoplay ) { _.paused = false; _.autoPlay(); } }; Slick.prototype.initADA = function() { var _ = this, numDotGroups = Math.ceil(_.slideCount / _.options.slidesToShow), tabControlIndexes = _.getNavigableIndexes().filter(function(val) { return (val >= 0) && (val < _.slideCount); }); _.$slides.add(_.$slideTrack.find('.slick-cloned')).attr({ 'aria-hidden': 'true', 'tabindex': '-1' }).find('a, input, button, select').attr({ 'tabindex': '-1' }); if (_.$dots !== null) { _.$slides.not(_.$slideTrack.find('.slick-cloned')).each(function(i) { var slideControlIndex = tabControlIndexes.indexOf(i); $(this).attr({ 'role': 'tabpanel', 'id': 'slick-slide' + _.instanceUid + i, 'tabindex': -1 }); if (slideControlIndex !== -1) { $(this).attr({ 'aria-describedby': 'slick-slide-control' + _.instanceUid + slideControlIndex }); } }); _.$dots.attr('role', 'tablist').find('li').each(function(i) { var mappedSlideIndex = tabControlIndexes; $(this).attr({ 'role': 'presentation' }); $(this).find('button').first().attr({ 'role': 'tab', 'id': 'slick-slide-control' + _.instanceUid + i, 'aria-controls': 'slick-slide' + _.instanceUid + mappedSlideIndex, 'aria-label': (i + 1) + ' of ' + numDotGroups, 'aria-selected': null, 'tabindex': '-1' }); }).eq(_.currentSlide).find('button').attr({ 'aria-selected': 'true', 'tabindex': '0' }).end(); } for (var i=_.currentSlide, max=i+_.options.slidesToShow; i < max; i++) { _.$slides.eq(i).attr('tabindex', 0); } _.activateADA(); }; Slick.prototype.initArrowEvents = function() { var _ = this; if (_.options.arrows === true && _.slideCount > _.options.slidesToShow) { _.$prevArrow .off('click.slick') .on('click.slick', { message: 'previous' }, _.changeSlide); _.$nextArrow .off('click.slick') .on('click.slick', { message: 'next' }, _.changeSlide); if (_.options.accessibility === true) { _.$prevArrow.on('keydown.slick', _.keyHandler); _.$nextArrow.on('keydown.slick', _.keyHandler); } } }; Slick.prototype.initDotEvents = function() { var _ = this; if (_.options.dots === true) { $('li', _.$dots).on('click.slick', { message: 'index' }, _.changeSlide); if (_.options.accessibility === true) { _.$dots.on('keydown.slick', _.keyHandler); } } if ( _.options.dots === true && _.options.pauseOnDotsHover === true ) { $('li', _.$dots) .on('mouseenter.slick', $.proxy(_.interrupt, _, true)) .on('mouseleave.slick', $.proxy(_.interrupt, _, false)); } }; Slick.prototype.initSlideEvents = function() { var _ = this; if ( _.options.pauseOnHover ) { _.$list.on('mouseenter.slick', $.proxy(_.interrupt, _, true)); _.$list.on('mouseleave.slick', $.proxy(_.interrupt, _, false)); } }; Slick.prototype.initializeEvents = function() { var _ = this; _.initArrowEvents(); _.initDotEvents(); _.initSlideEvents(); _.$list.on('touchstart.slick mousedown.slick', { action: 'start' }, _.swipeHandler); _.$list.on('touchmove.slick mousemove.slick', { action: 'move' }, _.swipeHandler); _.$list.on('touchend.slick mouseup.slick', { action: 'end' }, _.swipeHandler); _.$list.on('touchcancel.slick mouseleave.slick', { action: 'end' }, _.swipeHandler); _.$list.on('click.slick', _.clickHandler); $(document).on(_.visibilityChange, $.proxy(_.visibility, _)); if (_.options.accessibility === true) { _.$list.on('keydown.slick', _.keyHandler); } if (_.options.focusOnSelect === true) { $(_.$slideTrack).children().on('click.slick', _.selectHandler); } $(window).on('orientationchange.slick.slick-' + _.instanceUid, $.proxy(_.orientationChange, _)); $(window).on('resize.slick.slick-' + _.instanceUid, $.proxy(_.resize, _)); $('[draggable!=true]', _.$slideTrack).on('dragstart', _.preventDefault); $(window).on('load.slick.slick-' + _.instanceUid, _.setPosition); $(_.setPosition); }; Slick.prototype.initUI = function() { var _ = this; if (_.options.arrows === true && _.slideCount > _.options.slidesToShow) { _.$prevArrow.show(); _.$nextArrow.show(); } if (_.options.dots === true && _.slideCount > _.options.slidesToShow) { _.$dots.show(); } }; Slick.prototype.keyHandler = function(event) { var _ = this; //Dont slide if the cursor is inside the form fields and arrow keys are pressed if(!event.target.tagName.match('TEXTAREA|INPUT|SELECT')) { if (event.keyCode === 37 && _.options.accessibility === true) { _.changeSlide({ data: { message: _.options.rtl === true ? 'next' : 'previous' } }); } else if (event.keyCode === 39 && _.options.accessibility === true) { _.changeSlide({ data: { message: _.options.rtl === true ? 'previous' : 'next' } }); } } }; Slick.prototype.lazyLoad = function() { var _ = this, loadRange, cloneRange, rangeStart, rangeEnd; function loadImages(imagesScope) { $('img[data-lazy]', imagesScope).each(function() { var image = $(this), imageSource = $(this).attr('data-lazy'), imageSrcSet = $(this).attr('data-srcset'), imageSizes = $(this).attr('data-sizes') || _.$slider.attr('data-sizes'), imageToLoad = document.createElement('img'); imageToLoad.onload = function() { image .animate({ opacity: 0 }, 100, function() { if (imageSrcSet) { image .attr('srcset', imageSrcSet ); if (imageSizes) { image .attr('sizes', imageSizes ); } } image .attr('src', imageSource) .animate({ opacity: 1 }, 200, function() { image .removeAttr('data-lazy data-srcset data-sizes') .removeClass('slick-loading'); }); _.$slider.trigger('lazyLoaded', [_, image, imageSource]); }); }; imageToLoad.onerror = function() { image .removeAttr( 'data-lazy' ) .removeClass( 'slick-loading' ) .addClass( 'slick-lazyload-error' ); _.$slider.trigger('lazyLoadError', [ _, image, imageSource ]); }; imageToLoad.src = imageSource; }); } if (_.options.centerMode === true) { if (_.options.infinite === true) { rangeStart = _.currentSlide + (_.options.slidesToShow / 2 + 1); rangeEnd = rangeStart + _.options.slidesToShow + 2; } else { rangeStart = Math.max(0, _.currentSlide - (_.options.slidesToShow / 2 + 1)); rangeEnd = 2 + (_.options.slidesToShow / 2 + 1) + _.currentSlide; } } else { rangeStart = _.options.infinite ? _.options.slidesToShow + _.currentSlide : _.currentSlide; rangeEnd = Math.ceil(rangeStart + _.options.slidesToShow); if (_.options.fade === true) { if (rangeStart > 0) rangeStart--; if (rangeEnd <= _.slideCount) rangeEnd++; } } loadRange = _.$slider.find('.slick-slide').slice(rangeStart, rangeEnd); if (_.options.lazyLoad === 'anticipated') { var prevSlide = rangeStart - 1, nextSlide = rangeEnd, $slides = _.$slider.find('.slick-slide'); for (var i = 0; i < _.options.slidesToScroll; i++) { if (prevSlide < 0) prevSlide = _.slideCount - 1; loadRange = loadRange.add($slides.eq(prevSlide)); loadRange = loadRange.add($slides.eq(nextSlide)); prevSlide--; nextSlide++; } } loadImages(loadRange); if (_.slideCount <= _.options.slidesToShow) { cloneRange = _.$slider.find('.slick-slide'); loadImages(cloneRange); } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow) { cloneRange = _.$slider.find('.slick-cloned').slice(0, _.options.slidesToShow); loadImages(cloneRange); } else if (_.currentSlide === 0) { cloneRange = _.$slider.find('.slick-cloned').slice(_.options.slidesToShow * -1); loadImages(cloneRange); } }; Slick.prototype.loadSlider = function() { var _ = this; _.setPosition(); _.$slideTrack.css({ opacity: 1 }); _.$slider.removeClass('slick-loading'); _.initUI(); if (_.options.lazyLoad === 'progressive') { _.progressiveLazyLoad(); } }; Slick.prototype.next = Slick.prototype.slickNext = function() { var _ = this; _.changeSlide({ data: { message: 'next' } }); }; Slick.prototype.orientationChange = function() { var _ = this; _.checkResponsive(); _.setPosition(); }; Slick.prototype.pause = Slick.prototype.slickPause = function() { var _ = this; _.autoPlayClear(); _.paused = true; }; Slick.prototype.play = Slick.prototype.slickPlay = function() { var _ = this; _.autoPlay(); _.options.autoplay = true; _.paused = false; _.focussed = false; _.interrupted = false; }; Slick.prototype.postSlide = function(index) { var _ = this; if( !_.unslicked ) { _.$slider.trigger('afterChange', [_, index]); _.animating = false; if (_.slideCount > _.options.slidesToShow) { _.setPosition(); } _.swipeLeft = null; if ( _.options.autoplay ) { _.autoPlay(); } if (_.options.accessibility === true) { _.initADA(); // for non-autoplay: once active slide (group) has updated, set focus on first newly showing slide if (!_.options.autoplay) { var $currentSlide = $(_.$slides.get(_.currentSlide)); $currentSlide.attr('tabindex', 0).focus(); } } } }; Slick.prototype.prev = Slick.prototype.slickPrev = function() { var _ = this; _.changeSlide({ data: { message: 'previous' } }); }; Slick.prototype.preventDefault = function(event) { event.preventDefault(); }; Slick.prototype.progressiveLazyLoad = function( tryCount ) { tryCount = tryCount || 1; var _ = this, $imgsToLoad = $( 'img[data-lazy]', _.$slider ), image, imageSource, imageSrcSet, imageSizes, imageToLoad; if ( $imgsToLoad.length ) { image = $imgsToLoad.first(); imageSource = image.attr('data-lazy'); imageSrcSet = image.attr('data-srcset'); imageSizes = image.attr('data-sizes') || _.$slider.attr('data-sizes'); imageToLoad = document.createElement('img'); imageToLoad.onload = function() { if (imageSrcSet) { image .attr('srcset', imageSrcSet ); if (imageSizes) { image .attr('sizes', imageSizes ); } } image .attr( 'src', imageSource ) .removeAttr('data-lazy data-srcset data-sizes') .removeClass('slick-loading'); if ( _.options.adaptiveHeight === true ) { _.setPosition(); } _.$slider.trigger('lazyLoaded', [ _, image, imageSource ]); _.progressiveLazyLoad(); }; imageToLoad.onerror = function() { if ( tryCount < 3 ) { /** * try to load the image 3 times, * leave a slight delay so we don't get * servers blocking the request. */ setTimeout( function() { _.progressiveLazyLoad( tryCount + 1 ); }, 500 ); } else { image .removeAttr( 'data-lazy' ) .removeClass( 'slick-loading' ) .addClass( 'slick-lazyload-error' ); _.$slider.trigger('lazyLoadError', [ _, image, imageSource ]); _.progressiveLazyLoad(); } }; imageToLoad.src = imageSource; } else { _.$slider.trigger('allImagesLoaded', [ _ ]); } }; Slick.prototype.refresh = function( initializing ) { var _ = this, currentSlide, lastVisibleIndex; lastVisibleIndex = _.slideCount - _.options.slidesToShow; // in non-infinite sliders, we don't want to go past the // last visible index. if( !_.options.infinite && ( _.currentSlide > lastVisibleIndex )) { _.currentSlide = lastVisibleIndex; } // if less slides than to show, go to start. if ( _.slideCount <= _.options.slidesToShow ) { _.currentSlide = 0; } currentSlide = _.currentSlide; _.destroy(true); $.extend(_, _.initials, { currentSlide: currentSlide }); _.init(); if( !initializing ) { _.changeSlide({ data: { message: 'index', index: currentSlide } }, false); } }; Slick.prototype.registerBreakpoints = function() { var _ = this, breakpoint, currentBreakpoint, l, responsiveSettings = _.options.responsive || null; if ( $.type(responsiveSettings) === 'array' && responsiveSettings.length ) { _.respondTo = _.options.respondTo || 'window'; for ( breakpoint in responsiveSettings ) { l = _.breakpoints.length-1; if (responsiveSettings.hasOwnProperty(breakpoint)) { currentBreakpoint = responsiveSettings[breakpoint].breakpoint; // loop through the breakpoints and cut out any existing // ones with the same breakpoint number, we don't want dupes. while( l >= 0 ) { if( _.breakpoints[l] && _.breakpoints[l] === currentBreakpoint ) { _.breakpoints.splice(l,1); } l--; } _.breakpoints.push(currentBreakpoint); _.breakpointSettings[currentBreakpoint] = responsiveSettings[breakpoint].settings; } } _.breakpoints.sort(function(a, b) { return ( _.options.mobileFirst ) ? a-b : b-a; }); } }; Slick.prototype.reinit = function() { var _ = this; _.$slides = _.$slideTrack .children(_.options.slide) .addClass('slick-slide'); _.slideCount = _.$slides.length; if (_.currentSlide >= _.slideCount && _.currentSlide !== 0) { _.currentSlide = _.currentSlide - _.options.slidesToScroll; } if (_.slideCount <= _.options.slidesToShow) { _.currentSlide = 0; } _.registerBreakpoints(); _.setProps(); _.setupInfinite(); _.buildArrows(); _.updateArrows(); _.initArrowEvents(); _.buildDots(); _.updateDots(); _.initDotEvents(); _.cleanUpSlideEvents(); _.initSlideEvents(); _.checkResponsive(false, true); if (_.options.focusOnSelect === true) { $(_.$slideTrack).children().on('click.slick', _.selectHandler); } _.setSlideClasses(typeof _.currentSlide === 'number' ? _.currentSlide : 0); _.setPosition(); _.focusHandler(); _.paused = !_.options.autoplay; _.autoPlay(); _.$slider.trigger('reInit', [_]); }; Slick.prototype.resize = function() { var _ = this; if ($(window).width() !== _.windowWidth) { clearTimeout(_.windowDelay); _.windowDelay = window.setTimeout(function() { _.windowWidth = $(window).width(); _.checkResponsive(); if( !_.unslicked ) { _.setPosition(); } }, 50); } }; Slick.prototype.removeSlide = Slick.prototype.slickRemove = function(index, removeBefore, removeAll) { var _ = this; if (typeof(index) === 'boolean') { removeBefore = index; index = removeBefore === true ? 0 : _.slideCount - 1; } else { index = removeBefore === true ? --index : index; } if (_.slideCount < 1 || index < 0 || index > _.slideCount - 1) { return false; } _.unload(); if (removeAll === true) { _.$slideTrack.children().remove(); } else { _.$slideTrack.children(this.options.slide).eq(index).remove(); } _.$slides = _.$slideTrack.children(this.options.slide); _.$slideTrack.children(this.options.slide).detach(); _.$slideTrack.append(_.$slides); _.$slidesCache = _.$slides; _.reinit(); }; Slick.prototype.setCSS = function(position) { var _ = this, positionProps = {}, x, y; if (_.options.rtl === true) { position = -position; } x = _.positionProp == 'left' ? Math.ceil(position) + 'px' : '0px'; y = _.positionProp == 'top' ? Math.ceil(position) + 'px' : '0px'; positionProps[_.positionProp] = position; if (_.transformsEnabled === false) { _.$slideTrack.css(positionProps); } else { positionProps = {}; if (_.cssTransitions === false) { positionProps[_.animType] = 'translate(' + x + ', ' + y + ')'; _.$slideTrack.css(positionProps); } else { positionProps[_.animType] = 'translate3d(' + x + ', ' + y + ', 0px)'; _.$slideTrack.css(positionProps); } } }; Slick.prototype.setDimensions = function() { var _ = this; if (_.options.vertical === false) { if (_.options.centerMode === true) { _.$list.css({ padding: ('0px ' + _.options.centerPadding) }); } } else { _.$list.height(_.$slides.first().outerHeight(true) * _.options.slidesToShow); if (_.options.centerMode === true) { _.$list.css({ padding: (_.options.centerPadding + ' 0px') }); } } _.listWidth = _.$list.width(); _.listHeight = _.$list.height(); if (_.options.vertical === false && _.options.variableWidth === false) { _.slideWidth = Math.ceil(_.listWidth / _.options.slidesToShow); _.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length))); } else if (_.options.variableWidth === true) { _.$slideTrack.width(5000 * _.slideCount); } else { _.slideWidth = Math.ceil(_.listWidth); _.$slideTrack.height(Math.ceil((_.$slides.first().outerHeight(true) * _.$slideTrack.children('.slick-slide').length))); } var offset = _.$slides.first().outerWidth(true) - _.$slides.first().width(); if (_.options.variableWidth === false) _.$slideTrack.children('.slick-slide').width(_.slideWidth - offset); }; Slick.prototype.setFade = function() { var _ = this, targetLeft; _.$slides.each(function(index, element) { targetLeft = (_.slideWidth * index) * -1; if (_.options.rtl === true) { $(element).css({ position: 'relative', right: targetLeft, top: 0, zIndex: _.options.zIndex - 2, opacity: 0 }); } else { $(element).css({ position: 'relative', left: targetLeft, top: 0, zIndex: _.options.zIndex - 2, opacity: 0 }); } }); _.$slides.eq(_.currentSlide).css({ zIndex: _.options.zIndex - 1, opacity: 1 }); }; Slick.prototype.setHeight = function() { var _ = this; if (_.options.slidesToShow === 1 && _.options.adaptiveHeight === true && _.options.vertical === false) { var targetHeight = _.$slides.eq(_.currentSlide).outerHeight(true); _.$list.css('height', targetHeight); } }; Slick.prototype.setOption = Slick.prototype.slickSetOption = function() { /** * accepts arguments in format of: * * - for changing a single option's value: * .slick("setOption", option, value, refresh ) * * - for changing a set of responsive options: * .slick("setOption", 'responsive', [{}, ...], refresh ) * * - for updating multiple values at once (not responsive) * .slick("setOption", { 'option': value, ... }, refresh ) */ var _ = this, l, item, option, value, refresh = false, type; if( $.type( arguments[0] ) === 'object' ) { option = arguments[0]; refresh = arguments[1]; type = 'multiple'; } else if ( $.type( arguments[0] ) === 'string' ) { option = arguments[0]; value = arguments[1]; refresh = arguments[2]; if ( arguments[0] === 'responsive' && $.type( arguments[1] ) === 'array' ) { type = 'responsive'; } else if ( typeof arguments[1] !== 'undefined' ) { type = 'single'; } } if ( type === 'single' ) { _.options[option] = value; } else if ( type === 'multiple' ) { $.each( option , function( opt, val ) { _.options[opt] = val; }); } else if ( type === 'responsive' ) { for ( item in value ) { if( $.type( _.options.responsive ) !== 'array' ) { _.options.responsive = [ value[item] ]; } else { l = _.options.responsive.length-1; // loop through the responsive object and splice out duplicates. while( l >= 0 ) { if( _.options.responsive[l].breakpoint === value[item].breakpoint ) { _.options.responsive.splice(l,1); } l--; } _.options.responsive.push( value[item] ); } } } if ( refresh ) { _.unload(); _.reinit(); } }; Slick.prototype.setPosition = function() { var _ = this; _.setDimensions(); _.setHeight(); if (_.options.fade === false) { _.setCSS(_.getLeft(_.currentSlide)); } else { _.setFade(); } _.$slider.trigger('setPosition', [_]); }; Slick.prototype.setProps = function() { var _ = this, bodyStyle = document.body.style; _.positionProp = _.options.vertical === true ? 'top' : 'left'; if (_.positionProp === 'top') { _.$slider.addClass('slick-vertical'); } else { _.$slider.removeClass('slick-vertical'); } if (bodyStyle.WebkitTransition !== undefined || bodyStyle.MozTransition !== undefined || bodyStyle.msTransition !== undefined) { if (_.options.useCSS === true) { _.cssTransitions = true; } } if ( _.options.fade ) { if ( typeof _.options.zIndex === 'number' ) { if( _.options.zIndex < 3 ) { _.options.zIndex = 3; } } else { _.options.zIndex = _.defaults.zIndex; } } if (bodyStyle.OTransform !== undefined) { _.animType = 'OTransform'; _.transformType = '-o-transform'; _.transitionType = 'OTransition'; if (bodyStyle.perspectiveProperty === undefined && bodyStyle.webkitPerspective === undefined) _.animType = false; } if (bodyStyle.MozTransform !== undefined) { _.animType = 'MozTransform'; _.transformType = '-moz-transform'; _.transitionType = 'MozTransition'; if (bodyStyle.perspectiveProperty === undefined && bodyStyle.MozPerspective === undefined) _.animType = false; } if (bodyStyle.webkitTransform !== undefined) { _.animType = 'webkitTransform'; _.transformType = '-webkit-transform'; _.transitionType = 'webkitTransition'; if (bodyStyle.perspectiveProperty === undefined && bodyStyle.webkitPerspective === undefined) _.animType = false; } if (bodyStyle.msTransform !== undefined) { _.animType = 'msTransform'; _.transformType = '-ms-transform'; _.transitionType = 'msTransition'; if (bodyStyle.msTransform === undefined) _.animType = false; } if (bodyStyle.transform !== undefined && _.animType !== false) { _.animType = 'transform'; _.transformType = 'transform'; _.transitionType = 'transition'; } _.transformsEnabled = _.options.useTransform && (_.animType !== null && _.animType !== false); }; Slick.prototype.setSlideClasses = function(index) { var _ = this, centerOffset, allSlides, indexOffset, remainder; allSlides = _.$slider .find('.slick-slide') .removeClass('slick-active slick-center slick-current') .attr('aria-hidden', 'true'); _.$slides .eq(index) .addClass('slick-current'); if (_.options.centerMode === true) { centerOffset = Math.floor(_.options.slidesToShow / 2); if (_.options.infinite === true) { if (index >= centerOffset && index <= (_.slideCount - 1) - centerOffset) { _.$slides .slice(index - centerOffset, index + centerOffset + 1) .addClass('slick-active') .attr('aria-hidden', 'false'); } else { indexOffset = _.options.slidesToShow + index; allSlides .slice(indexOffset - centerOffset + 1, indexOffset + centerOffset + 2) .addClass('slick-active') .attr('aria-hidden', 'false'); } if (index === 0) { allSlides .eq(allSlides.length - 1 - _.options.slidesToShow) .addClass('slick-center'); } else if (index === _.slideCount - 1) { allSlides .eq(_.options.slidesToShow) .addClass('slick-center'); } } _.$slides .eq(index) .addClass('slick-center'); } else { if (index >= 0 && index <= (_.slideCount - _.options.slidesToShow)) { _.$slides .slice(index, index + _.options.slidesToShow) .addClass('slick-active') .attr('aria-hidden', 'false'); } else if (allSlides.length <= _.options.slidesToShow) { allSlides .addClass('slick-active') .attr('aria-hidden', 'false'); } else { remainder = _.slideCount % _.options.slidesToShow; indexOffset = _.options.infinite === true ? _.options.slidesToShow + index : index; if (_.options.slidesToShow == _.options.slidesToScroll && (_.slideCount - index) < _.options.slidesToShow) { allSlides .slice(indexOffset - (_.options.slidesToShow - remainder), indexOffset + remainder) .addClass('slick-active') .attr('aria-hidden', 'false'); } else { allSlides .slice(indexOffset, indexOffset + _.options.slidesToShow) .addClass('slick-active') .attr('aria-hidden', 'false'); } } } if (_.options.lazyLoad === 'ondemand' || _.options.lazyLoad === 'anticipated') { _.lazyLoad(); } }; Slick.prototype.setupInfinite = function() { var _ = this, i, slideIndex, infiniteCount; if (_.options.fade === true) { _.options.centerMode = false; } if (_.options.infinite === true && _.options.fade === false) { slideIndex = null; if (_.slideCount > _.options.slidesToShow) { if (_.options.centerMode === true) { infiniteCount = _.options.slidesToShow + 1; } else { infiniteCount = _.options.slidesToShow; } for (i = _.slideCount; i > (_.slideCount - infiniteCount); i -= 1) { slideIndex = i - 1; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex - _.slideCount) .prependTo(_.$slideTrack).addClass('slick-cloned'); } for (i = 0; i < infiniteCount + _.slideCount; i += 1) { slideIndex = i; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + _.slideCount) .appendTo(_.$slideTrack).addClass('slick-cloned'); } _.$slideTrack.find('.slick-cloned').find('[id]').each(function() { $(this).attr('id', ''); }); } } }; Slick.prototype.interrupt = function( toggle ) { var _ = this; if( !toggle ) { _.autoPlay(); } _.interrupted = toggle; }; Slick.prototype.selectHandler = function(event) { var _ = this; var targetElement = $(event.target).is('.slick-slide') ? $(event.target) : $(event.target).parents('.slick-slide'); var index = parseInt(targetElement.attr('data-slick-index')); if (!index) index = 0; if (_.slideCount <= _.options.slidesToShow) { _.slideHandler(index, false, true); return; } _.slideHandler(index); }; Slick.prototype.slideHandler = function(index, sync, dontAnimate) { var targetSlide, animSlide, oldSlide, slideLeft, targetLeft = null, _ = this, navTarget; sync = sync || false; if (_.animating === true && _.options.waitForAnimate === true) { return; } if (_.options.fade === true && _.currentSlide === index) { return; } if (sync === false) { _.asNavFor(index); } targetSlide = index; targetLeft = _.getLeft(targetSlide); slideLeft = _.getLeft(_.currentSlide); _.currentLeft = _.swipeLeft === null ? slideLeft : _.swipeLeft; if (_.options.infinite === false && _.options.centerMode === false && (index < 0 || index > _.getDotCount() * _.options.slidesToScroll)) { if (_.options.fade === false) { targetSlide = _.currentSlide; if (dontAnimate !== true) { _.animateSlide(slideLeft, function() { _.postSlide(targetSlide); }); } else { _.postSlide(targetSlide); } } return; } else if (_.options.infinite === false && _.options.centerMode === true && (index < 0 || index > (_.slideCount - _.options.slidesToScroll))) { if (_.options.fade === false) { targetSlide = _.currentSlide; if (dontAnimate !== true) { _.animateSlide(slideLeft, function() { _.postSlide(targetSlide); }); } else { _.postSlide(targetSlide); } } return; } if ( _.options.autoplay ) { clearInterval(_.autoPlayTimer); } if (targetSlide < 0) { if (_.slideCount % _.options.slidesToScroll !== 0) { animSlide = _.slideCount - (_.slideCount % _.options.slidesToScroll); } else { animSlide = _.slideCount + targetSlide; } } else if (targetSlide >= _.slideCount) { if (_.slideCount % _.options.slidesToScroll !== 0) { animSlide = 0; } else { animSlide = targetSlide - _.slideCount; } } else { animSlide = targetSlide; } _.animating = true; _.$slider.trigger('beforeChange', [_, _.currentSlide, animSlide]); oldSlide = _.currentSlide; _.currentSlide = animSlide; _.setSlideClasses(_.currentSlide); if ( _.options.asNavFor ) { navTarget = _.getNavTarget(); navTarget = navTarget.slick('getSlick'); if ( navTarget.slideCount <= navTarget.options.slidesToShow ) { navTarget.setSlideClasses(_.currentSlide); } } _.updateDots(); _.updateArrows(); if (_.options.fade === true) { if (dontAnimate !== true) { _.fadeSlideOut(oldSlide); _.fadeSlide(animSlide, function() { _.postSlide(animSlide); }); } else { _.postSlide(animSlide); } _.animateHeight(); return; } if (dontAnimate !== true) { _.animateSlide(targetLeft, function() { _.postSlide(animSlide); }); } else { _.postSlide(animSlide); } }; Slick.prototype.startLoad = function() { var _ = this; if (_.options.arrows === true && _.slideCount > _.options.slidesToShow) { _.$prevArrow.hide(); _.$nextArrow.hide(); } if (_.options.dots === true && _.slideCount > _.options.slidesToShow) { _.$dots.hide(); } _.$slider.addClass('slick-loading'); }; Slick.prototype.swipeDirection = function() { var xDist, yDist, r, swipeAngle, _ = this; xDist = _.touchObject.startX - _.touchObject.curX; yDist = _.touchObject.startY - _.touchObject.curY; r = Math.atan2(yDist, xDist); swipeAngle = Math.round(r * 180 / Math.PI); if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } if ((swipeAngle <= 45) && (swipeAngle >= 0)) { return (_.options.rtl === false ? 'left' : 'right'); } if ((swipeAngle <= 360) && (swipeAngle >= 315)) { return (_.options.rtl === false ? 'left' : 'right'); } if ((swipeAngle >= 135) && (swipeAngle <= 225)) { return (_.options.rtl === false ? 'right' : 'left'); } if (_.options.verticalSwiping === true) { if ((swipeAngle >= 35) && (swipeAngle <= 135)) { return 'down'; } else { return 'up'; } } return 'vertical'; }; Slick.prototype.swipeEnd = function(event) { var _ = this, slideCount, direction; _.dragging = false; _.swiping = false; if (_.scrolling) { _.scrolling = false; return false; } _.interrupted = false; _.shouldClick = ( _.touchObject.swipeLength > 10 ) ? false : true; if ( _.touchObject.curX === undefined ) { return false; } if ( _.touchObject.edgeHit === true ) { _.$slider.trigger('edge', [_, _.swipeDirection() ]); } if ( _.touchObject.swipeLength >= _.touchObject.minSwipe ) { direction = _.swipeDirection(); switch ( direction ) { case 'left': case 'down': slideCount = _.options.swipeToSlide ? _.checkNavigable( _.currentSlide + _.getSlideCount() ) : _.currentSlide + _.getSlideCount(); _.currentDirection = 0; break; case 'right': case 'up': slideCount = _.options.swipeToSlide ? _.checkNavigable( _.currentSlide - _.getSlideCount() ) : _.currentSlide - _.getSlideCount(); _.currentDirection = 1; break; default: } if( direction != 'vertical' ) { _.slideHandler( slideCount ); _.touchObject = {}; _.$slider.trigger('swipe', [_, direction ]); } } else { if ( _.touchObject.startX !== _.touchObject.curX ) { _.slideHandler( _.currentSlide ); _.touchObject = {}; } } }; Slick.prototype.swipeHandler = function(event) { var _ = this; if ((_.options.swipe === false) || ('ontouchend' in document && _.options.swipe === false)) { return; } else if (_.options.draggable === false && event.type.indexOf('mouse') !== -1) { return; } _.touchObject.fingerCount = event.originalEvent && event.originalEvent.touches !== undefined ? event.originalEvent.touches.length : 1; _.touchObject.minSwipe = _.listWidth / _.options .touchThreshold; if (_.options.verticalSwiping === true) { _.touchObject.minSwipe = _.listHeight / _.options .touchThreshold; } switch (event.data.action) { case 'start': _.swipeStart(event); break; case 'move': _.swipeMove(event); break; case 'end': _.swipeEnd(event); break; } }; Slick.prototype.swipeMove = function(event) { var _ = this, edgeWasHit = false, curLeft, swipeDirection, swipeLength, positionOffset, touches, verticalSwipeLength; touches = event.originalEvent !== undefined ? event.originalEvent.touches : null; if (!_.dragging || _.scrolling || touches && touches.length !== 1) { return false; } curLeft = _.getLeft(_.currentSlide); _.touchObject.curX = touches !== undefined ? touches[0].pageX : event.clientX; _.touchObject.curY = touches !== undefined ? touches[0].pageY : event.clientY; _.touchObject.swipeLength = Math.round(Math.sqrt( Math.pow(_.touchObject.curX - _.touchObject.startX, 2))); verticalSwipeLength = Math.round(Math.sqrt( Math.pow(_.touchObject.curY - _.touchObject.startY, 2))); if (!_.options.verticalSwiping && !_.swiping && verticalSwipeLength > 4) { _.scrolling = true; return false; } if (_.options.verticalSwiping === true) { _.touchObject.swipeLength = verticalSwipeLength; } swipeDirection = _.swipeDirection(); if (event.originalEvent !== undefined && _.touchObject.swipeLength > 4) { _.swiping = true; event.preventDefault(); } positionOffset = (_.options.rtl === false ? 1 : -1) * (_.touchObject.curX > _.touchObject.startX ? 1 : -1); if (_.options.verticalSwiping === true) { positionOffset = _.touchObject.curY > _.touchObject.startY ? 1 : -1; } swipeLength = _.touchObject.swipeLength; _.touchObject.edgeHit = false; if (_.options.infinite === false) { if ((_.currentSlide === 0 && swipeDirection === 'right') || (_.currentSlide >= _.getDotCount() && swipeDirection === 'left')) { swipeLength = _.touchObject.swipeLength * _.options.edgeFriction; _.touchObject.edgeHit = true; } } if (_.options.vertical === false) { _.swipeLeft = curLeft + swipeLength * positionOffset; } else { _.swipeLeft = curLeft + (swipeLength * (_.$list.height() / _.listWidth)) * positionOffset; } if (_.options.verticalSwiping === true) { _.swipeLeft = curLeft + swipeLength * positionOffset; } if (_.options.fade === true || _.options.touchMove === false) { return false; } if (_.animating === true) { _.swipeLeft = null; return false; } _.setCSS(_.swipeLeft); }; Slick.prototype.swipeStart = function(event) { var _ = this, touches; _.interrupted = true; if (_.touchObject.fingerCount !== 1 || _.slideCount <= _.options.slidesToShow) { _.touchObject = {}; return false; } if (event.originalEvent !== undefined && event.originalEvent.touches !== undefined) { touches = event.originalEvent.touches[0]; } _.touchObject.startX = _.touchObject.curX = touches !== undefined ? touches.pageX : event.clientX; _.touchObject.startY = _.touchObject.curY = touches !== undefined ? touches.pageY : event.clientY; _.dragging = true; }; Slick.prototype.unfilterSlides = Slick.prototype.slickUnfilter = function() { var _ = this; if (_.$slidesCache !== null) { _.unload(); _.$slideTrack.children(this.options.slide).detach(); _.$slidesCache.appendTo(_.$slideTrack); _.reinit(); } }; Slick.prototype.unload = function() { var _ = this; $('.slick-cloned', _.$slider).remove(); if (_.$dots) { _.$dots.remove(); } if (_.$prevArrow && _.htmlExpr.test(_.options.prevArrow)) { _.$prevArrow.remove(); } if (_.$nextArrow && _.htmlExpr.test(_.options.nextArrow)) { _.$nextArrow.remove(); } _.$slides .removeClass('slick-slide slick-active slick-visible slick-current') .attr('aria-hidden', 'true') .css('width', ''); }; Slick.prototype.unslick = function(fromBreakpoint) { var _ = this; _.$slider.trigger('unslick', [_, fromBreakpoint]); _.destroy(); }; Slick.prototype.updateArrows = function() { var _ = this, centerOffset; centerOffset = Math.floor(_.options.slidesToShow / 2); if ( _.options.arrows === true && _.slideCount > _.options.slidesToShow && !_.options.infinite ) { _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false'); _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false'); if (_.currentSlide === 0) { _.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true'); _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false'); } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) { _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true'); _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false'); } else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) { _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true'); _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false'); } } }; Slick.prototype.updateDots = function() { var _ = this; if (_.$dots !== null) { _.$dots .find('li') .removeClass('slick-active') .end(); _.$dots .find('li') .eq(Math.floor(_.currentSlide / _.options.slidesToScroll)) .addClass('slick-active'); } }; Slick.prototype.visibility = function() { var _ = this; if ( _.options.autoplay ) { if ( document[_.hidden] ) { _.interrupted = true; } else { _.interrupted = false; } } }; $.fn.slick = function() { var _ = this, opt = arguments[0], args = Array.prototype.slice.call(arguments, 1), l = _.length, i, ret; for (i = 0; i < l; i++) { if (typeof opt == 'object' || typeof opt == 'undefined') _.slick = new Slick(_, opt); else ret = _.slick[opt].apply(_.slick, args); if (typeof ret != 'undefined') return ret; } return _; }; })); JAVA: <script> $('.carousel').slick({ dots: true, infinite: true, speed: 500, slidesToShow: 4, slidesToScroll: 1, }); </script>
  20. Bom gente, eu tenho a seguinte tabela dinamica / temporaria: Quando ele é um item, ele tem um total de itens e apareça em um input, tipo, se ele adicionou um item eo total desse item foi 100, vai 100 pro input, se ele adicionou outro, soma o valor do tal do outro mais, que ficaria 200, e assim por diante, pode ser usado todos os desejos e salvar. meu input que irá receber o total
  21. Anderson Modolon

    Selecionar impressora com javascript ou jquery

    É possível selecionar a impressora antes de usar o comando para imprimir em Javascript ou jquery? No caso antes de usar o comando window.print(); o mesmo já vir com a impressora selecionada.
  22. Minha View Edit é aberta dentro de uma janela modal Bootstrap através de uma função dinâmica criada para os botões Create, Edit e Delete. Cada botão possui a sua respectiva url de referência e uma propriedade data-modal="" para ser chamada no evento click de cada botão (Ex: data-modal="" href="/pessoa-gerenciar/editar-pessoa/' + full.id). No evento click, é chamada a função "openmodal", a url é passada por parâmetro e a #modalGenerica é aberta. Há também a função "bindForm" que faz com que cada submit dado na view Edit funcione corretamente e que a view Edit permaneça sempre dentro da modal #modalGenerica. Até aí tudo perfeito e funcionando corretamente! //Bloco da Janela Modal <div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div id="contentModal"> </div> </div> </div> </div> //Controller [HttpPost] [Authorize(Policy = "CanWritePessoaData")] [Route("pessoa-gerenciar/editar-pessoa/{id:int}")] [ValidateAntiForgeryToken] public IActionResult Edit(PessoaViewModel pessoaViewModel) { if ((pessoaViewModel.PessoaNatureza == Domain.ValueObjects.Pessoa.PessoaNatureza.Juridica && pessoaViewModel.PessoaJuridicaViewModel == null) || (pessoaViewModel.PessoaNatureza == Domain.ValueObjects.Pessoa.PessoaNatureza.Fisica && pessoaViewModel.PessoaFisicaViewModel == null)) { var pessoa = _pessoaAppService.Change(pessoaViewModel); ModelState.Clear(); return View(pessoa); } if (!ModelState.IsValid) return View(pessoaViewModel); _pessoaAppService.Update(pessoaViewModel); if (IsValidOperation()) ViewBag.Sucesso = "Pessoa Atualizada!"; return View(pessoaViewModel); } //JavaScript $(document).ready(function () { $.ajaxSetup({ cache: false }); // busca os elementos do atributo data-modal e os inscreve no evento click $('a[data-modal]').on('click', function (e) { // Abre a janela modal com o formulario solicitado openmodal(this.href); return false; }); $('table').on('click', 'a[data-modal]', function (e) { //Este tratamento personaliza a Modal Excluir if (this.id == 'btnExcluir') { $(".modal-dialog").addClass("modal-lg"); $(".modal-dialog").addClass("modal-danger"); } openmodal(this.href); return false; }); $('#modalGenerica').on('hidden.bs.modal', function () { $('#contentModal').html(''); }); dataTablePrincipalLoad(); }); function openmodal(url) { // Faz uma requisição get e carrega o formulário na janela modal $('#contentModal').load(url, function () { $('#modalGenerica').modal({ keyboard: true }, 'show'); //Enviar o foco para campo Descrição $('#modalGenerica').on('shown.bs.modal', function (event) { // $("#txtNomeCompleto").focus(); }); $("#pessoaNatureza").on('change', function (event) { document.getElementById("frmEdit").submit(); //open(ur); }); // Inscreve o evento submit bindForm(this); }); } function bindForm(dialog) { // Inscreve o formulário na janela modal com o evento submit $('form', dialog).submit(function () { if ($(this).valid()) { // Realiza una requisição ajax $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { // Se a requisição for satisfatória, recarrega a página atual if (result.success) { window.location = window.location; } else { $('#contentModal').html(result); bindForm(); } } }); return false; } else { return false; } }); } function dataTablePrincipalLoad() { $('.dataTables_filter input').attr('placeholder', 'Search...').hide(); var table = $("#dtPrincipal").DataTable({ "processing": true, // for show progress bar "serverSide": true, // for process server side "filter": true, // this is for disable filter (search box) "orderMulti": false, // for disable multiple column at once //"dom": '<"top"i>rt<"bottom"lp><"clear">', // "ordering": false, "ajax": { "url": '/pessoa-gerenciar/getPessoa', "type": "POST", "datatype": "json" }, "columnDefs": [ //Estilos Das Colunas { className: "align-center", "targets": [0] }, { className: "align-center", "targets": [3] }, //Largura das Colunas { width: 100, targets: 0 }, { width: 100, targets: 3 } ], "columns": [ { "data": "id", "name": "Id", "autoWidth": true }, { "data": "nomeRazao", "name": "NomeRazao", "autoWidth": true }, { "data": "apelidoFantasia", "name": "ApelidoFantasia", "autoWidth": true }, { "render": function (data, type, full, meta) { return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a id="btnEditar" data-modal="" href="/pessoa-gerenciar/editar-pessoa/' + full.id + '"class="btn btn-sm btn-icon btn-default btn-outline" title="Visualizar/Editar"><i class="icon wb-edit" aria-hidden="true"></i></a><a id="btnExcluir" data-modal="" href="/pessoa-gerenciar/remover-pessoa/' + full.id + '" class="btn btn-sm btn-icon btn-default btn-outline" title="Excluir"><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><a title="Mais Ações" class="btn btn-sm btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-grid-4" aria-hidden="true"></i></a><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>'; } } ], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "_MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "searchPlaceholder": "Digite algo...", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); $('.search-input').on('keyup change', function () { var index = $(this).attr('data-column'), val = $(this).val(); table.columns(index).search(val.trim()).draw(); }); } //View Edit @using Retaguarda.Domain.ValueObjects.Pessoa @model Retaguarda.Application.ViewModels.Pessoa.PessoaViewModel @{ ViewData["Title"] = "Editar Pessoa"; Layout = null; } <div> <form asp-action="Edit" asp-controller="Pessoa" id="frmEdit"> @Html.AntiForgeryToken() <div class="modal-shadow"> <div class="modal-header modal-header-primary"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title text-center"> @ViewData["Title"] </h4> </div> <div class="form-horizontal"> <você:summary /> <div class="panel-body"> @await Html.PartialAsync("_Pessoa") @if (Model.PessoaNatureza == PessoaNatureza.Fisica) { <div id="divPessoaFisica"> @await Html.PartialAsync("_PessoaFisica") </div> } else if (Model.PessoaNatureza == PessoaNatureza.Juridica) { <div id="divPessoaJuridica"> @await Html.PartialAsync("_PessoaJuridica") </div> } </div> </div> <div class="modal-footer"> <div class="col-md-offset-2 col-md-10"> <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button> <button id="btnFechar" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Fechar </button> </div> </div> </div> </form> </div> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } PROBLEMA: Quando eu seleciono no dropdown #pessoaNatureza uma determinada pessoa (por exemplo pessoa jurídica), preciso fazer um submit no evento change para que a model seja alterada com dados de pessoa jurídica e preciso que a view Edit seja retornada para dentro da mesma janela modal, mas isso não está acontecendo e a view é aberta em uma página e com um layout desconfigurado. Parece que o bind não funcionada... (O Interessante é que para Salvar funciona perfeitamente, mas para o evento change do drop-down não!). Acho que estou tentando dar o submit com document.getElementById("frmEdit").submit(); e não está fazendo o bind corretamente, pois não passa pela função openmodal. Já tentei fazer isso, mas não consegui, pois teria que chamar a função de dentro dela... ALguém saberia como me ajudar? $("#pessoaNatureza").on('change', function (event) { document.getElementById("frmEdit").submit(); //open(ur); });
  23. juliosertori

    Enviar Valor Somado em Input

    Olá boa noite, procurei e não encontrei algo relacionado. Tenho um Input onde vou mostrar valores somados, e tenho outros input que tem os valores. Existe a possibilidade, de após um evento, ele mandar o valor do input de preços, a somar com o valor já existente ao input de total de valores?
  24. juliosertori

    Soma de Campos em Repeat

    Olá boa noite galera, tenho um Repeat que incrementa Preço e Quantidade de um produto. Estou tentando fazer multiplicação do "preço" * "quantidade" de cada linha do Repeat mas ainda não encontrei uma forma de fazer isso, já que os campos são repetidos com IDS iguais. A única diferença nos campos é que se cria um Array por exemplo, name="preco[0]", assim por diante. Mas não tem um Looping para eu criar cada script para multiplicação dos campos e acredito que não seja a maneira correta. Estou fazendo assim o calculo funciona: $(document).on('keyup', 'input[id="qtdProds"]', function(){ var tr = $(this).closest('#add_item_list'); var qtde = tr.find('input[id="precoProds"]').val(); var qtde = qtde.toString().replace( "R$ ", "" ); var qtde = qtde.toString().replace( ",", "" ); var vlrunt = $(this).val(); if (qtde && vlrunt){ tr.find('input[id="totalProds"]').val(parseFloat(vlrunt) * parseFloat(qtde)); parseFloat(String('123.456').replace(/[^\d\.]/g, "")).toFixed(2); } }); O problema é que assim da "bug" logicamente, pois não está sendo feito para cada linha do repeat, e sim todos campos com mesmo nome. Alguém tem uma ideia de como posso fazer isso? Obrigado!
  25. juliosertori

    [Resolvido] Pegar Chave de Array em Listagem Repeat

    Olá boa tarde, eu tenho uma listagem que utilizo com JQuery Repeat, e fora ela adiciono novas linhas através de código de barras que o cliente digita, até ai tudo bem, está funcionando perfeitamente essa parte. Consigo adicionar novas linhas no Repeat tanto pelo próprio Repeat, quanto por um Append externo. O problema está no Array que é criado para enviar o POST. Criando por exemplo quando adiciono nova linha pelo Repeat: <input type="text" value="0" name="produtos_pdv[0][qtd]" class="form-control" /> E então ao adicionar novas linhas pelo Repeat, ele adiciona com "produtos_pdv[1][qtd]". Mas pelo outro Append, não consigo seguir a mesma ordem do Repeat, então fica bagunçado o Array, tentei utilizar o ID do produto como CHAVE, mas ai o Array se desvincula. Como posso pegar a ultima chave desse Array que está criando "produtos_pdv" para continuar seguindo a ordem no meu Append? Obrigado!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.