How to manipulate DIVs with several CSS rules?

Question

How to manipulate DIVs with several CSS rules?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm creating a scrolling time alert for tablets and cell phones, based on the Spinning Wheel project, found at link

The problem is that in my project, the alert should appear in the middle of the screen, and in the original project, several elements are on several different CSS rules (divs like # sw-wrapper, # sw-slots, # sw- frame, etc.). I can even put some DIVs in the middle of the screen, but they are all misaligned. And they even lose scroll functionality. I've also tried putting all the elements inside a div, but it did not work.

Is there any concept of CSS that I have not assimilated? Is there any clever way to work around this?

Some modifications I made to the code to try this

In the CSS of the body I placed (to try to take all the DIVs)

alarm

            {
                position: fixed;
                top: 50%;
            }

In the DIVs I tried to use a

{ position: absolute;
  bottom:  50%;
}

In javascript, where to find:

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

I tried to force a DIV mine with:

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

html

asked by anonymous 28.12.2016 / 21:48

2 answers

0

It depends a lot on the CSS properties applied in the project, they may not fit in a new structure, but rather try to accommodate it in a fixed container with flex-box, for example ...

.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>

28.12.2016 / 22:06

Error trying to call Controller through View - SpringMVC Script to add songs

score 0 · Accepted Answer

Slow option - > Unlock all code until JavaScript functionality that influences CSS is exposed.

Changing each function, attribute, and even CSS properties. It is a method of exhaustion. Not always possible to apply, because it requires dedication to the extermo.

Option not so obvious, and sometimes faster - > Rebuild from scratch, functionality.

It's not because you found a super legal script, which means you can not reproduce part of the functionality, or in some cases, even the whole algorithm with even different code. In my case, I played the touch part in JS using the Swipe function of jquery.mobile-1.4.5: link

In order to scroll the clock number up and down, I use the Jquery Animate function: link