1

Estou criando um alerta de horário funcionando com scroll para tablets e celulares, me baseando no projeto Spinning Wheel, encontrado em https://github.com/mcfedr/Spinning-Wheel/blob/master/index.html

O problema, é que em meu projeto, o alerta deve aparecer no meio da tela, e no projeto original, vários elementos estão sobre várias regras CSS diferentes (divs como #sw-wrapper ,#sw-slots , #sw-frame, etc). Até consigo colocar algumas DIVs no meio da tela, mas elas ficam todas desalinhadas. E até chegam a perder a funcionalidade do scroll. Também já tentei colocar todos os elementos dentro duma div, mas não funcionou.

Existe algum conceito de CSS que eu não tenha assimilado? Existe alguma forma inteligente de solucionar isso?

Algumas modificações que fiz do código para tentar isso

No CSS do body coloquei (para tentar levar todas as DIVs)

alarme

            {
                position: fixed;
                top: 50%;
            }

nas DIVs tentei usar um

{ position: absolute;
  bottom:  50%;
}

No javascript, aonde encontro:

div.innerHTML = '<div id="sw-header"><div id="sw-cancel">....</div>

Tentei forçar uma DIV minha com:

div.innerHTML = '<div id="alarme"><div id="sw-header"><div id="sw-cancel">....</div>

2 Respostas 2

0

depende muito das propriedades do CSS aplicadas no projeto, pode ser que elas não se encaixe em uma nova estrutura, porém da para tentar acomoda-la em um container fixo com flex-box, exemplo...

.CtnPrinc {
  height: 90vh;
  width: 90%;
  border: 1px black solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
}
.meio{
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 1px black solid;
  text-align: center;
}
<div class="CtnPrinc">
  <div class="meio">
    
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
    
  </div>
</div>

1
  • Tentei isso. Mas como cada elemento dessa aplicação tinha uma div, ficou desfigurado. Cheguei a conseguir levar todos os elementos ao mesmo tempo, mas ao que parece, o javascript estava usando as propriedades CSS para formar o scroll, e perdeu as funcionabilidades. No final, apelei para usar IFRAME. Suas dicas foram boas. Em breve eu também vou enriquecer mais esse tópico. Commented 30/12/2016 às 15:15
0

Opção lenta - > Destrinchar todo o código até que a funcionalidade do JavaScript que influencia no CSS seja exposta.

Alterando cada função, atributo e até propriedades CSS. É um método de exaustão. Nem sempre possível de aplicar, pois requer dedicação ao extermo.

Opção não tão óbvia, e as vezes mais rápida -> Reconstruir do zero, a funcionalidade.

Não é porque você achou um script super legal, que quer dizer que não pode reproduzir parte da funcionalidade, ou em alguns casos, até mesmo todo o algoritmo com código até diferente. No meu caso, reproduzi a parte do touch em JS, usando a função Swipe do jquery.mobile-1.4.5 : http://jsfiddle.net/Q3d9H/1/

Para conseguir rolar o número do "relógio" para cima e para baixo, uso a função Animate do Jquery: http://api.jquery.com/animate/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .