Jump to content

AndréAraujo

Members
  • Content count

    42
  • Joined

  • Last visited

  • Days Won

    1

AndréAraujo last won the day on February 19 2018

AndréAraujo had the most liked content!

Community Reputation

2 Comum

1 Follower

About AndréAraujo

Informações Pessoais

  • Sexo
    Masculino
  1. 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. 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. 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".
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.