Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 196
Nome: Brendo
Sexo: Masculino

Scroll na div (horizontal)

15-04-2018 17:31

Olá pessoal,
Este código javascript e htm para fazer uma div rolar verticalmente quadro a quadro, mas não dá certo! Ela rola um quadro e para... para direita e esquerda, mas só rola um.
Podem me ajudar?

<!doctype html public> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta charset="utf-8"> <script> function verifyCompatibleBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) return this } bw=new verifyCompatibleBrowser() var speed=50 var loop, timer function ConstructObject(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight this.up=MoveAreaUp;this.down=MoveAreaDown; this.MoveArea=MoveArea; this.x; this.y; this.obj = obj + "Object" eval(this.obj + "=this") return this } function MoveArea(x,y){ this.x=x;this.y=y this.css.left=this.x this.css.left=this.y //-- repeti LEFT para mover verticalmente } function MoveAreaDown(move){ if(this.y>-this.scrollHeight+objContainer.clipHeight){ this.MoveArea(0,this.y-move) if(loop) setTimeout(this.obj+".down("+move+")",speed) } } function MoveAreaUp(move){ if(this.y<0){ this.MoveArea(0,this.y-move) if(loop) setTimeout(this.obj+".up("+move+")",speed) } } function PerformScroll(speed){ if(initialised){ loop=true; if(speed>0) objScroller.down(speed) else objScroller.up(speed) } } function CeaseScroll(){ loop=false if(timer) clearTimeout(timer) } var initialised; function InitialiseScrollableArea(){ objContainer=new ConstructObject('divContainer') objScroller=new ConstructObject('divContent','divContainer') objScroller.MoveArea(0,0) objContainer.css.visibility='visible' initialised=true; } function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } </script> </head> <body onload='InitialiseScrollableArea()' style='*overflow-x:hidden;'> <section id="scroll" class="parallax parallax-top" style=''> <div style='position:relative;height:100px;background:#039bef;color:#fff;text-align:center;margin-bottom:10px;padding:10px 0 5px 0;'> <span class='font-la' style=''>TESTE</span> <div class='font-bb' style='text-align:center;margin-top:10px;'> Teste scroll </div> </div> <article style='max-width:1280px;'> <header> <style> .box-icon-pag { position:relative;display:inline-block;border:1px solid #ccc;border-radius:4px; } .bloco-dt { display:table-cell;width:100px;height:58px;text-align:center;vertical-align:middle;white-space:nowrap; } </style> <div id='divContainer' style='position:relative;*width:100%;height:60px;border:1px solid transparent;overflow:hidden;padding:0 25px 0 15px;'> <div id='divUpControl' style='position:absolute;width:1px;top:0;left:0;cursor:pointer;z-index:1;'> <div onmousedown=PerformScroll(-106) onmouseup=CeaseScroll() style='width:15px;height:60px;background:#0085bb;cursor:pointer;'> <div style='display:table-cell;width:15px;height:60px;color:#fff;text-align:center;vertical-align:middle;'><</div></div> </div> <div id='divDownControl' style='position:absolute;width:1px;bottom:0;right:14px;z-index:1;'> <div onmousedown='PerformScroll(106);' onmouseup='CeaseScroll();' style='width:15px;height:60px;background:#0085bb;cursor:pointer;'> <div style='display:table-cell;width:15px;height:60px;color:#fff;text-align:center;vertical-align:middle;'>></div></div> </div> <div id='divContent' style='position:absolute;*width:100%;white-space:nowrap;padding-left:19px;'> <div class='box-icon-pag'><div class='bloco-dt'>1</div></div> <div class='box-icon-pag'><div class='bloco-dt'>2</div></div> <div class='box-icon-pag'><div class='bloco-dt'>3</div></div> <div class='box-icon-pag'><div class='bloco-dt'>4</div></div> <div class='box-icon-pag'><div class='bloco-dt'>5</div></div> <div class='box-icon-pag'><div class='bloco-dt'>6</div></div> <div class='box-icon-pag'><div class='bloco-dt'>7</div></div> <div class='box-icon-pag'><div class='bloco-dt'>8</div></div> <div class='box-icon-pag'><div class='bloco-dt'>9</div></div> <div class='box-icon-pag'><div class='bloco-dt'>10</div></div> <div class='box-icon-pag'><div class='bloco-dt'>11</div></div> <div class='box-icon-pag'><div class='bloco-dt'>12</div></div> </div> </div> </header> </article> </section> </body> </html> [/code Obrigado. Luz e Paz!

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17817
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Scroll na div (vertical)

15-04-2018 18:04

Veja se esses exemplos já prontos não te servem http://kenwheeler.github.io/slick/
0
Pare de alimentar a violência. Pare de assistir televisão.
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 196
Nome: Brendo
Sexo: Masculino

Re: Scroll na div (vertical)

15-04-2018 19:08

Eles me pqreceram grandes demais, códigos pesados... parecem sliders...
eu só tô precisando de uma rodagem na vertical para um menu responsivo... Na tela grande o menu tá numa coluna vertical e com a própria rolagem do browser dá pra acessar todos os itens, mas qndo a trla tá pequena, o menu sobe pro topo da página, então pra poder acessar todos os itens que se escondem, preciso de uma rolagem na vertical.
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 196
Nome: Brendo
Sexo: Masculino

Re: Scroll na div (vertical)

16-04-2018 01:12

Gostaria de corrigir o título deste tópico para: Scroll na div (horizontal) e não na vertical como está. .. rs
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17817
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Scroll na div (horizontal)

16-04-2018 16:31

Título alterado.

Quanto a alteração no script, muitos scripts são feitos em versões mais antigas dos navegadores, o que acaba fazendo que os mesmos funcionem errado em navegadores atuais.

Hoje em dia você encontra diversos scripts já prontos na net. Por isso recomendei o link acima.

Você também pode testar o seguinte exemplo.
https://codepen.io/mahish/pen/RajmQw
0
Pare de alimentar a violência. Pare de assistir televisão.
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 196
Nome: Brendo
Sexo: Masculino

Re: Scroll na div (horizontal)  #resolvido

06-05-2018 12:11

Usei a função if para verificar a sessão da página destino para rolar o menu vertical e parando exatamente no botão (menu) da página atual e quanto a ida para esquerda e direita foi resolvido.
Agradeço se empenho em sempre ajudar web...
Resolvido!
Obrigado, Luz e Paz
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado