Rodrigo Cesar de Freitas 0 Denunciar post Postado Outubro 21, 2014 Boa Tarde Gostaria de saber se é possível inserir a ação de botão nas imagens " pra cima" e "pra baixo" onde clicando faça descer e subir o object em pdf ao lado conforme segue imagem abaixo! http://prntscr.com/4ycrz2 Desde de ja muito obrigado! Código: <div id="corte"> <div class="it_pro_004"> <object type="application/pdf" data="procedimentos/IT_PRO_004.pdf" width="915" height="600" ></object> </div> <div class="pageup"> <img src="imagens/pageup.png" width="90" height="90" alt=""/> </div> <div class="pagedown"> <img src="imagens/pagedown.png" width="90" height="90" alt=""/> </div> </div> Compartilhar este post Link para o post Compartilhar em outros sites
Lucas Medina 17 Denunciar post Postado Outubro 22, 2014 Olá, Rodrigo! Bem, parece algo bem simples. Os botões devem ter posição fixa para que a navegação dele fique constante, e não desapareça quando você clicar para descer. Isso você faz com CSS (position:fixed;). Você tem duas formas de fazer isso: * Usando Javascript: Basta usar o método scrollBy, dessa forma: var scroll = window.scrollBy(x, y); Como eu estou estudando Javascript como um ninja das sombras, eu achei uma forma bem legal de fazer isso, eu tinha feito essa semana, irei postar aqui para você ver o código. Coloque um id (pois os ids são únicos), para cada elemento de botão, como por exemplo "up" e "down", como eu utilizei, e tente este código: // Parametro da animação e variaveis para scroll var up = document.getElementById('up'); var down = document.getElementById('down'); // Velocidade e FPS var speed = 15; var fps = 30; //Botão para subir up.onclick = function() { var x = speed; //Sobe com velocidade decrescente var scroll = setInterval(function(){ window.scrollBy(0,-x); console.log(x); x--; if (x == 0) { clearInterval(scroll); } }, 1000/fps); } //Botão para descer down.onclick = function() { var x = speed; //Desce com velocidade descrescente var scroll = setInterval(function(){ window.scrollBy(0,x); console.log(x); x--; if (x == 0) { clearInterval(scroll); } }, 1000/fps); } O resultado fica legal, acho que vai gostar :) * JQuery Certamente é muito mais fácil fazer isso com JQuery, mas infelizmente eu não sei. Estou aprendendo de forma braçal (urrrgh), na esperança de conseguir aplicar alguns conhecimentos em Canvas no futuro. Recomendo que procure por plugins de scroll para JQuery, caso queira utilizá-lo. Isso é, se não for um método nativo do JQuery. Edit: coloquei uma variável para que você possa definir o FPS da transição. Assim, você escolhe a velocidade com a qual o scroll acontece! Bem, espero ter ajudado. Até! Compartilhar este post Link para o post Compartilhar em outros sites
Rodrigo Cesar de Freitas 0 Denunciar post Postado Outubro 22, 2014 Boa Tarde Lucas Primeiramente muito obrigado por responder brother, como estou engatinhando no que diz respeito a programação, lhe pergunto como aplico e onde aplico seu código no meu para que eu possa testar!?? Novamente muito obrigado cara! Compartilhar este post Link para o post Compartilhar em outros sites
Lucas Medina 17 Denunciar post Postado Outubro 22, 2014 Olá, Rodrigo! Veja, você precisa aplicar esse código, que é Javascript, no seu site. Para aplicá-lo, você pode optar por uma das formas: * Inserir o código manualmente através de uma tag script: <html> <head> <title>Meu site</title> </head> <body> <h1>Olá!</h1> <p>Esta é minha página</p> <!-- Script abaixo --> <script> //Seu código é colocado aqui </script> </body> </html> Outra forma é colocando todo o código num arquivo, e salvá-lo com a extensão .js. Você pode depois, incluí-lo dessa forma: <script src="meuscript.js"></src> Lembrando que o código e os nomes de arquivos são definidos por você. Se você está aprendendo Javascript, sugiro que comece a partir de dois sites que vou colocar abaixo: O HtmlDog é um site que estou utilizando para buscar referências e aprender sintaxe, e aplicá-la de forma que se consegue entender. Além disso, a forma como tudo é escrito torna o aprendizado bem intuitivo: htmldog.com/guides/javascript/ A Mozilla Developer Network, MDN, é um tapa na cara de qualquer pessoa que queira aprender, principalmente Javascript (no meu caso). https://developer.mozilla.org/pt-BR/docs/Web/JavaScript Sobre dúvidas em Javascript, lembre-se de postar no fórum de Javascript, acesse o clicando aqui. Espero ter lhe ajudado. Abraços! Compartilhar este post Link para o post Compartilhar em outros sites
Rodrigo Cesar de Freitas 0 Denunciar post Postado Outubro 23, 2014 Muito Bom Dia Lucas Então conseguir rodar seu código, funcionou perfeitamente porem na janela do navegador, conforme ja conversamos oque eu preciso era que o scroll fosse no arquivo PDF ao lado que esta inserido como object. Muito obrigado pela força até o momento Lucas tu é o cara ! Compartilhar este post Link para o post Compartilhar em outros sites
Lucas Medina 17 Denunciar post Postado Outubro 24, 2014 E aí, Rodrigo? Poxa, cara, eu terei que ser sincero com você; pra fazer esse tipo de interação com a página, o código que eu lhe passe é até útil, mas eu não sei como isso pode ser feito com um embed (seja PDF, flash, ou etc). Eu pensei em fazer um script que simulasse a seta para baixo, assim ao ativar o embed, o botão simularia a seta para baixo, e você conseguiria ver o conteúdo conforme fosse clicando. Mas eu infelizmente ainda não sei fazer algo desse tipo. Procurei por alguma regra de CSS que pudesse fazer com que o PDF fosse expandido para a tela inteira, mas não sei se a propriedade overflow funcionaria corretamente. Não consegui expandir um arquivo em tag <embed> ou <object>. Se expandir, é possível utilizar o código que eu passei, pois ele teria a altura da tela. Para casos mais extremos (corram!), você pode converter o PDF para imagens, e inseri-los na pagina. Isso vai fazer com que ele carregue de uma forma ou outra, mas em compensação, a página ficaria evidentemente mais pesada. Se a solução for local, acaba que o peso não é tão relevante, mas ainda assim, alguém vai me bater pela sugestão que eu acabei de te fornecer (haha). Bem, boa sorte com isso. Espero que consiga! Abraços. Compartilhar este post Link para o post Compartilhar em outros sites
Rodrigo Cesar de Freitas 0 Denunciar post Postado Outubro 24, 2014 Boa Tarde Lucas beleza brother! Entendo cara, tudo bem vou ver oque fazemos, muito obrigado por sua ajuda e tempo que disponibilizou! Grande abraço fera! Compartilhar este post Link para o post Compartilhar em outros sites
