Ir para conteúdo

AndréAraujo

Members
  • Total de itens

    42
  • Registro em

  • Última visita

  • Dias vencidos

    1

Reputação

2 Comum

1 Seguidor

Sobre AndréAraujo

Informações Pessoais

  • Sexo
    Masculino
  1. 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!
  2. Olá, estou tentando enviar um array multidimensional para o Promise.all(), mas mesmo pegando a property path direto do navegador o items["0"] aparece como undefined, é possível ver que o objeto esta acessível pelo console.log(data[0]) ou console.log(data[1]), segue o código abaixo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Promise Multidimensional Array</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <button onClick="start()">Start</button> <script> function start(){ var array = [ ["hTWKbfoikeg","Nirvana - Smells Like Teen Spirit"], ["1G4isv_Fylg","Coldplay - Paradise"], ["NMNgbISmF4I","Aerosmith - Crazy"], ["btPJPFnesV4","Survivor - Eye Of The Tiger"], ["gEPmA3USJdI","AC/DC - Highway to Hell"] ], promises = [], list = []; for(var i =0; i < array.length; i++){ pushGet(array[i][0],array[i][1]); //pushGet(array[i][0]); } Promise.all(promises).then(function(r){ r.forEach(function(data){ console.log(data[0]); console.log(data[1]); var title = data[1]; //var viewCount = parseInt(data["0"].responseJSON.items["0"].statistics.viewCount); //var currentId = data["0"].responseJSON.items["0"].id; list.push([/*viewCount,currentId,*/title]); }); }); console.log(list); function pushGet(id,title){ var val = $.getJSON("https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics&id=" + id + "&key=AIzaSyDIWyCOtTKDFyH9N4YlQPBP8VG4NX3Pgp4"); promises.push([val,title]); //promises.push(val); } } </script> </body> </html> Agradeço a atenção!
  3. AndréAraujo

    Nomear array criado dentro do Ajax

    Olá William Bruno, Muito obrigado por sua imensa ajuda, a ordem de carregamento esta perfeita. Fiz umas pequenas alterações no script para a criação dos grupos de array. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="label-head"> <span>Blogger</span>, <span>adsense</span>, <span>gadgets</span>, <span>10th Birthday</span> </div> <script> var eachLabel = []; var dataPost = []; var arrayLabel = []; $(".label-head span").each(function(){ eachLabel.push($(this).text()); }); console.log(eachLabel); var promises = [] eachLabel.forEach(function(label) { promises.push(fetch(label)) }); Promise.all(promises) .then(function(results) { results.forEach(function(data) { console.log(data.feed.link[1].href); //para debugar e você ver que manteve a ordem data.feed.entry.forEach(function(entry) { var title = entry.title.$t; dataPost.push([title]); }); arrayLabel.push(dataPost); //envia o grupo criado dataPost = [];//empedindo que o mesmo receba todos os arrays }); //return dataPost; }) /*.then(function(dataPost) { console.log(dataPost); });*/ function fetch(label) { return $.ajax({ url: "https://blogger.googleblog.com/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=10", type: "get", dataType: "jsonp" }) } console.log(arrayLabel); </script> </body> </html>
  4. AndréAraujo

    Nomear array criado dentro do Ajax

    Olá, tenho um script que busca informações de outras páginas e nele são gerados arrays que posteriormente são inseridos em outro array, não consigo fazer com que os arrays mantenham uma ordem para que eu possa acessar o item correto. Pensei em colocar o nome em cada array , mas não obtive sucesso em puxar o nome para dentro do Ajax. Como eu faço para que os arrays carreguem na ordem certa ou como inserir o nome da label no array? Segue o script abaixo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="label-head"> <span>Blogger</span>, <span>adsense</span>, <span>gadgets</span>, <span>10th Birthday</span> </div> <script> eachLabel = new Array(); dataPost = new Array(); arrayLabel = new Array(); $(".label-head span").each(function(){ eachLabel.push($(this).text()); }); console.log(eachLabel); for(var l = 0;l < eachLabel.length;l++){ label = eachLabel[l]; $.ajax({ url: "https://blogger.googleblog.com/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=10", type: "get", dataType: "jsonp", success: function(data){ for(var i = 0;i < data.feed.entry.length;i++){ var title = data.feed.entry[i].title.$t; dataPost.push([title]); } //arrayLabel[label] = new Array(dataPost); arrayLabel.push(dataPost); dataPost = []; } }) } console.log(arrayLabel); </script> </body> </html> Agradeço a atenção!
  5. Gostaria de saber se é possível remover e os itens que são acionados ao final do vídeo, no caso "Tela final e anotações" conforme o mostrado na imagem abaixo, eu já estou utilizando o "rel: 0" e o "iv_load_policy: 3" que estão funcionando bem para a não exibição das anotações e não exibição de miniaturas após o encerramento do vídeo. Agradeço a atenção!
  6. AndréAraujo

    Areá clicável dentro de área clicável

    Olá HwapX, muito obrigado por sua ajuda, acabei optando pela primeira solução pois se encaixou perfeitamente o código e exigiu menos alterações, eu já tinha uma estrutura grande voltada para esse código e tive um pouco de medo de ter que refaze-lá. Mais uma vez muito obrigado!
  7. AndréAraujo

    innerHTML x javascript - undefined

  8. AndréAraujo

    Areá clicável dentro de área clicável

    Olá, estou precisando inserir um botão delete dentro de cada item de uma lista que já tem uma função especifica para selecioná-la, alguém sabe se tem um modo de executar esta ação sem gerar o conflito abaixo? Segue minha ideia inicial: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <style> #list ul{ margin:0; padding:0; } #list ul li{ width:300px; height:30px; background-color:#F60; margin-bottom:10px; padding:10px; list-style:none; } #list ul li span{ line-height:30px; color:#FFF; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; } #list ul li i{ line-height:30px; color:#FFF; font-size:14px; float:right; } #list ul li.active{ background-color:#F30; } </style> <div id="list"> <ul> <li><span>Item 1</span><i class="fa fa-times"></i></li> <li><span>Item 2</span><i class="fa fa-times"></i></li> <li><span>Item 3</span><i class="fa fa-times"></i></li> <li><span>Item 4</span><i class="fa fa-times"></i></li> </ul> </div> <script> $(document).on('click', '#list ul li', function(){ $('#list ul li').removeClass("active"); $(this).addClass('active').fadeIn(200); alert("Você selecionou o " + $(this).text()); }); $(document).on('click', 'i.fa-times', function(){ alert("Você removeu o " + $(this).parent().find('span').text()); $(this).parent().remove(); }); </script> </body> </html> Agradeço a atenção!
  9. AndréAraujo

    Sobrepor div a um <iframe> em modo fullscreen

    Olá Joao_Lucaas, consegui resolver o problema de uma forma até bem simples, no lugar de chamar o id "ytplayer" do iframe no script, chamei o id "contarner_video" / "container_video" , aplicando fullscreen na div e não no iframe, fazendo com que a div "controls" ficasse visível no modo fullscreen em todos os navegadores que testei.
  10. AndréAraujo

    Sobrepor div a um <iframe> em modo fullscreen

    Olá Joao_Lucaas, obrigado por me responder! Acho que acabei me expressando mal, não citei que no exemplo acima o vídeo esta configurado para ocupar 100% da tela mas não esta em fullscreen, tem um botão escrito FullScreen no canto superior direito que ativa o fullscreen. Caso não seja esse o caso minhas versões de navegadores são: Google Chrome 64.0.3282.167 (Versão oficial) 32 bits (atualizado) (sem bug) Opera (51.0) 51.0.2830.34 (atualizado) (sem bug) Firefox Quantum 58.0.2 (32-bit) (atualizado) (com bug) Microsoft Edge 20.10240.16384.0 (com bug) Internet Explorer(11) 11.0.10240.16384 (com bug) Navegadores com bug: Navegadores sem bug: O código que eu estou testando é esse mesmo.
  11. AndréAraujo

    Sobrepor div a um <iframe> em modo fullscreen

    Um exemplo, no Google Chrome o "z-index:2147483647" consegue fazer a div se sobrepor ao iframe sem problemas, já nos outros navegadores não estou conseguindo fazer <div id"controls"> se sobrepor ao iframe, alguém conhece alguma forma de sobrepor o iframe ou tem alguma ideia do que eu estou fazendo de errado? Segue o exemplo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Teste</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #contarner_video{ padding-bottom:56.25%; height:0; border-radius:inherit; overflow:hidden; z-index:0; } #contarner_video iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; } #ytplayer{ display:block; } #controls{ width:100%; height:30px; background-color:#000; opacity:0.9; position:absolute; top:0; left:0; z-index:2147483647; } #controls span{ line-height:30px; padding:0 20px; color:#fff; float:right; } </style> </head> <body> <div id="contarner_video"> <iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE?controls=0&enablejsapi=1&fs=0&rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe> <div id="controls"> <span>FullScreen</span> </div> </div> <script> $('#controls span').on('click', function(){ var e = document.getElementById("ytplayer"); if (e.requestFullscreen) { e.requestFullscreen(); } else if (e.mozRequestFullScreen) { e.mozRequestFullScreen(); } else if (e.webkitRequestFullscreen) { e.webkitRequestFullscreen(); } else if (e.msRequestFullscreen) { e.msRequestFullscreen(); } }); </script> </body> </html>
  12. Olá pessoal, eu tenho dois select onde um é de categoria e o outro é de sub-categoria. O primeiro select é carregado na página normalmente, eu busco o valor do <option> que esta selecionado usando JQuery. Já o segundo select é carregado via Ajax e assim o JQuery não é executado ao carregar a página: Não reconhece: $(document).ready(function(){ var sub_categoria = $("#id_sub_categoria option:selected").text(); document.getElementById("sub").innerHTML = sub_categoria; }); Assim é reconhecido: $(document).on("click", "#id_sub_categoria", function(){ var sub_categoria = $("#id_sub_categoria option:selected").text(); document.getElementById("sub").innerHTML = sub_categoria; }); Meu script: <script> $(document).ready(function(){ $("#id_categoria").click(function(){ var id_categoria = $("#id_categoria option:selected").text(); document.getElementById("cat").innerHTML = id_categoria; }); var id_categoria = $("#id_categoria option:selected").text(); document.getElementById("cat").innerHTML = id_categoria; }); $(document).on("click", "#id_sub_categoria", function(){ var sub_categoria = $("#id_sub_categoria option:selected").text(); document.getElementById("sub").innerHTML = sub_categoria; }); </script> Como faço para executar o JQuery ao carregar a página e reconhecer o select que foi carregado via Ajax, sem precisar do click ou change? Agradeço a atenção!
  13. AndréAraujo

    como executar função ao carregar a página?

    Sim Ctrl + c Ctrl + v, ele não reconhece o valor msm, o meu select seleciona o valor que for igual ao valor do banco de dados, no código fonte da para ver perfeitamente que exite valor no <option> e que o valor que é igual ao do banco recebeu o selected, sem contar que com o change o script funciona corretamente.
  14. AndréAraujo

    como executar função ao carregar a página?

    Olá DSerma, obrigado pela atenção, como avia dito acima, ao retirar o: $('#id_categoria').change(function(){ o script não reconhece o valor do id do select "#id_categoria", como não tem valor ele cai no else e assim a mensagem de erro é exibida no select. Eu não sei como substituir esta linha. Sobre decidir qual evento eu vou usar, vou usar onchange e onload, mesmo que tenha que criar dois eventos separados.
  15. AndréAraujo

    como executar função ao carregar a página?

    Olá BRAndersonLuciona, obrigado pela atenção, a página onde o select vai ser exibido é uma página para criar e editar conteúdo, no caso de criação de conteúdo o primeiro option será vazio para que o usuário escolha a categoria desejada, até aqui o código já está funcionando corretamente. Mas na parde de editar o conteúdo, a seleção automática é indispensável pois o primeiro select tem que carregar a categoria encontrada no banco de dados, "até aqui tudo funcionando".
×

Informação importante

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