Jump to content
AndréAraujo

MouseMove sobre iframe, div e div em modo fullscreen

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By daviassumpcao
      Pessoal... há valores em um JSON sendo exibidos por um JS (imagem anexo)... preciso verificar se um valor "x" está em um determinado nó do JSON. E a partir daí exibir uma div.... marquei na imagem com um círculo rosa qual valor quero verificar porém meu script não funciona... material de estudo. É possível fazer isso acontecer?
       
      JS
      const jsonCat = vtxctx.categoryId; const catProd = JSON.parse(jsonCat); var divProd = document.getElementById('faq-connect'); if (catProd.categoryId == 10103) { divProd.style.display = 'block'; } else{ divProd.style.display = 'none'; } HTML para exibir uma DIV em caso positivo
      <div class="faq-connect" style="display:none"> <p>Sucesso!</p> </div>  
       

    • By paulinhosupriano
      Bom dia a todos!
       
      Gente, tenho uma dúvida!
       
      Muitos desenvolvedores utilizam o framework nodejs com express para trabalhar com API e também estão utilizando o ADONISJS.
      Minha duvida seria, em alguns projetos devemos criar configurações onde o usuário cliente não poderá ter acesso a visualização dos dados public de constantes de configuração, url ou banco. 
      Como protejo essas informações?
      Muitas dizem que seria o arquivo .env. 
       
      Como protegerei essas informações? 
      Exemplo firabase como proteger os dados token etc.
       
      Poderiam informar tutorial, curso, vídeo algo a respeito do assunto? 
       
      Agradecido!
       
    • By violin101
      Caros amigos, saudações...
       
      Estou com uma dúvida de dados vindo do MySql, para preencher Tabela via AJAX.
       
      Como faço para formatar o CAMPO no formato MOEDA, ou seja:
      o campo vem.: 12.00
      formatar para: 12,00
       
      o código está assim:
      function montaTable(cep){ $.ajax({ url: "<?php echo base_url();?>site/produtos/getByCep", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //Remove Mensagem da Tabela $("#tborden tbody tr.message").remove(); var cols = ""; for (var i = 0; i < data.length; i++) { cols += "<tr>"; cols += "<td>" + data[i].cepRegiao + "</td>"; cols += "<td>" + data[i].frtEntreg + "</td>"; cols += "<td>" + data[i].vlrFrete + "</td>"; //<--como formatar esse campo cols += "</tr>"; } //Atualiza a Tabela $("#tborden tbody").empty(); //Adiciona os Itens a Tabela $("#tborden tbody").append(cols); } });//Fim - ajax Valor Frete }

      Grato,
       
      Cesar
    • By Rodrigo5468
      Olá, tudo bem? Espero que sim.
       
      Eu seguir esse tutorial e essa atualização para conseguir o código final. Mas o meu site fica totalmente, não exibe absolutamente nada. Eu venho aqui recorrer a vocês, pois lá não irei ter nenhum tipo de suporte. Por favor, quem for me auxiliar com esse pequeno problema, leia o tópico do tutorial. Mas o Fruition é um script para personalizar o domínio utilizando o Notion.
      /* CONFIGURATION STARTS HERE */ /* Step 1: enter your domain name like fruitionsite.com */ const MY_DOMAIN = 'DOMINIO'; /* * Step 2: enter your URL slug to page ID mapping * The key on the left is the slug (without the slash) * The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'CODIGO_DA_PÁGINA_PÚBLICA_DO_NOTION' }; /* Step 3: enter your page title and description for SEO purposes */ const PAGE_TITLE = ''; const PAGE_DESCRIPTION = ''; /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */ const GOOGLE_FONT = ''; /* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */ const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); addEventListener("fetch", event => { event.respondWith(fetchAndApply(event.request)); }); function generateSitemap() { let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'; slugs.forEach( (slug) => (sitemap += "<url><loc>https://" + MY_DOMAIN + "/" + slug + "</loc></url>") ); sitemap += "</urlset>"; return sitemap; } const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type" }; function handleOptions(request) { if ( request.headers.get("Origin") !== null && request.headers.get("Access-Control-Request-Method") !== null && request.headers.get("Access-Control-Request-Headers") !== null ) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { Allow: "GET, HEAD, POST, PUT, OPTIONS" } }); } } async function fetchAndApply(request) { if (request.method === "OPTIONS") { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === "/robots.txt") { return new Response("Sitemap: https://" + MY_DOMAIN + "/sitemap.xml"); } if (url.pathname === "/sitemap.xml") { let response = new Response(generateSitemap()); response.headers.set("content-type", "application/xml"); return response; } let response; if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) { response = await fetch(url.toString()); let body = await response.text(); response = new Response( body .replace(/www.notion.so/g, MY_DOMAIN) .replace(/notion.so/g, MY_DOMAIN), response ); response.headers.set("Content-Type", "application/x-javascript"); return response; } else if (url.pathname.startsWith("/api")) { // Forward API response = await fetch(url.toString(), { body: request.body, headers: { "content-type": "application/json;charset=UTF-8", "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" }, method: "POST" }); response = new Response(response.body, response); response.headers.set("Access-Control-Allow-Origin", "*"); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; return Response.redirect("https://" + MY_DOMAIN + "/" + pageId, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method }); response = new Response(response.body, response); response.headers.delete("Content-Security-Policy"); response.headers.delete("X-Content-Security-Policy"); } return appendJavascript(response, SLUG_TO_PAGE); } class MetaRewriter { element(element) { if (PAGE_TITLE !== "") { if ( element.getAttribute("property") === "og:title" || element.getAttribute("name") === "twitter:title" ) { element.setAttribute("content", PAGE_TITLE); } if (element.tagName === "title") { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== "") { if ( element.getAttribute("name") === "description" || element.getAttribute("property") === "og:description" || element.getAttribute("name") === "twitter:description" ) { element.setAttribute("content", PAGE_DESCRIPTION); } } if ( element.getAttribute("property") === "og:url" || element.getAttribute("name") === "twitter:url" ) { element.setAttribute("content", MY_DOMAIN); } if (element.getAttribute("name") === "apple-itunes-app") { element.remove(); } } } class HeadRewriter { element(element) { if (GOOGLE_FONT !== "") { element.append( `<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap' rel='stylesheet'> <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, { html: true } ); } element.append( `<style> div.notion-topbar > div > div:nth-child(3) { display: none !important; } div.notion-topbar > div > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(5) { display: none !important; } div.notion-topbar > div > div:nth-child(6) { display: none !important; } div.notion-topbar-mobile > div:nth-child(3) { display: none !important; } div.notion-topbar-mobile > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; } div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; } </style>`, { html: true } ); } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append( `<script> const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)}; const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; const el = document.createElement('div'); let redirected = false; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); function getPage() { return location.pathname.slice(-32); } function getSlug() { return location.pathname.slice(1); } function updateSlug() { const slug = PAGE_TO_SLUG[getPage()]; if (slug != null) { history.replaceState(history.state, '', '/' + slug); } } function onDark() { el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'; document.body.classList.add('dark'); __console.environment.ThemeStore.setState({ mode: 'dark' }); }; function onLight() { el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'; document.body.classList.remove('dark'); __console.environment.ThemeStore.setState({ mode: 'light' }); } function toggle() { if (document.body.classList.contains('dark')) { onLight(); } else { onDark(); } } function addDarkModeButton(device) { const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile'); el.className = 'toggle-mode'; el.addEventListener('click', toggle); nav.appendChild(el); onLight(); } const observer = new MutationObserver(function() { if (redirected) return; const nav = document.querySelector('.notion-topbar'); const mobileNav = document.querySelector('.notion-topbar-mobile'); if (nav && nav.firstChild && nav.firstChild.firstChild || mobileNav && mobileNav.firstChild) { redirected = true; updateSlug(); addDarkModeButton(nav ? 'web' : 'mobile'); const onpopstate = window.onpopstate; window.onpopstate = function() { if (slugs.includes(getSlug())) { const page = SLUG_TO_PAGE[getSlug()]; if (page) { history.replaceState(history.state, 'bypass', '/' + page); } } onpopstate.apply(this, [].slice.call(arguments)); updateSlug(); }; } }); observer.observe(document.querySelector('#notion-app'), { childList: true, subtree: true, }); const replaceState = window.history.replaceState; window.history.replaceState = function(state) { if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return; return replaceState.apply(window.history, arguments); }; const pushState = window.history.pushState; window.history.pushState = function(state) { const dest = new URL(location.protocol + location.host + arguments[2]); const id = dest.pathname.slice(-32); if (pages.includes(id)) { arguments[2] = '/' + PAGE_TO_SLUG[id]; } return pushState.apply(window.history, arguments); }; const open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function() { arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so'); return open.apply(this, [].slice.call(arguments)); }; </script>${CUSTOM_SCRIPT}`, { html: true } ); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on("title", new MetaRewriter()) .on("meta", new MetaRewriter()) .on("head", new HeadRewriter()) .on("body", new BodyRewriter(SLUG_TO_PAGE)) .transform(res); }  
      Tem alguma coisa de errado?
    • By violin101
      Caros amigos, saudações...
       
      Estou com uma pequena dúvida.

      Gostaria de mostrar a MENSAGEM de ERRO, quando a função no AJAX não encontrar o resultado.
       
      Meu código está assim:
      //Função para Buscar Cidade e Estado Via CEPs. $(function(){ $("#btn_consulta").click(function(){ var cep = $('#cepOrg').val(); if (cep == '') { alert('Informe o CEP antes de continuar'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').focus(); return false; } $('#btn_consulta').html ('Aguarde...'); $.ajax({ url: "<?php echo base_url();?>site/produtos/consulta", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //retorna o resultado encontrado //Exibe os Dados Recebidos $('#cidadeUf').val(data.localidade+'/'+data.uf); //Chama a Função para Exibir a DIV oculta statusDIV(); $('#btn_consulta').html('Consultar'); } });//Fim - ajax });//Fim - function button });//Fim - 1º.function

      Grato,
       
      Cesar
×

Important Information

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