Develop Reference

My pre-loader is not working as expected, Animation not work

Want to create the pre-loader page, and have reference URL "https://www.priyaty.com/".
But somehow I'm not able to create the same loader as the above link.
I'm facing an issue when I applied the few CSS but, somehow I'm not matched with the above link loader.
can anyone help me out to build the same loader?
I'm using HTML, CSS, and JavaScript
function counter() {
var count = setInterval(function() {
var c = document.getElementById("counter")
int = parseInt(c.textContent);
c.textContent = (++int).toString();
if (int == 100) {
clearInterval(count);
c.classList.add("hide");
document.getElementById("preloader").classList.add("slide-up")
}
}, 40)
}
counter();
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.preloader .preloaderp {
font-size: 5em;
font-weight: bold;
color: rgba(255, 255, 255, .05);
position: absolute;
padding: 15px;
text-align: center;
text-transform: uppercase;
}
.preloader.slide-up {
height: 0px;
transition: .5s;
transition-delay: 1s;
font-size: 0px;
}
.counter {
font-size: 5em;
color: #fff;
font-weight: bold;
}
.counter.hide {
opacity: 0;
transition: 1s;
}
.counter::after {
content: "%";
font-size: .5em;
}
#media only screen and (max-width: 575px) {
.preloaderp {
font-size: 2em;
}
.counter {
font-size: 2em;
}
}
<div class="preloader" id="preloader">
<p class="preloaderp">Loading</p>
<div class="counter" id="counter">
0
</div>
</div>

Were you looking for this?
var counting = setInterval(function() {
var loader = document.getElementById("loader");
var currval = parseInt(loader.innerHTML);
var Width = 100 - currval;
var loadscreen = document.getElementById("loadscreen");
loader.innerHTML = ++currval;
if (currval === 100) {
clearInterval(counting);
loadscreen.style.display = "none";
}
loadscreen.style.transition = "0.1s";
loadscreen.style.width = Width + "%";
}, 10);
.loading-screen {
width: 100%;
height: 100%;
}
.loader {
font-size: 50px;
font-family: Arial;
position: fixed;
left: 45%;
z-index: 1000;
color: red;
}
.loader:after {
content: " %";
font-size: 100%;
}
.after-load {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
border: none;
}
<div class="loading-screen"></div>
<div class="after-load" id="loadscreen">
<div class="loader" style="top: 50%;" id="loader">0</div>
</div>

Changing modal popup trigger from button click to on page load

I have a modal on my page. Currently, it is set to pop up when you press a button. However, I want it to pop up when the page loads. Ideally, it would only popup the first time a user visits the site.
The snippet:
// Popup Window
var scrollTop = '';
var newHeight = '100';
$(window).bind('scroll', function () {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function (e) {
e.stopPropagation();
if (jQuery(window).width() < 767) {
$(this).after($(".popup"));
$('.popup').show().addClass('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $('.popup').offset().top
}, 500);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
}
;
});
$('html').click(function () {
$('.popup').hide();
});
$('.popup-btn-close').click(function (e) {
$('.popup').hide();
});
$('.popup').click(function (e) {
e.stopPropagation();
});
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
.popup {
display: none;
position: absolute;
top: 100px;
left: 50%;
width: 700px;
margin-left: -350px;
padding: 50px 30px;
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
border: 10px solid #150E2D;
z-index: 9999;
}
.popup-mobile {
position: relative;
top: 0;
left: 0;
margin: 30px 0 0;
width: 100%;
}
.popup-btn-close {
position: absolute;
top: 8px;
right: 14px;
color: #4EBD79;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup-trigger">Open Pop Up</a>
<div class="main">
Page text
</div>
<div class="popup">
Modal Text
<span class="popup-btn-close">close</span>
</div>
I don't want to use popup-trigger button anymore, I just want to have the modal show up when the page loads.
I have tried replacing
$('.popup-trigger').click(function(e) {
with:
$(document).load(function() {
no luck there.
Any ideas? Also, i just got into cookies, but not sure how they work. How would I have it such that it only appears the first time someone visits the site per certain time frame, e.g. per day.

Instead of adding click listeners, why don't you try calling the $('.popup').show() directly after onload.
Check this fiddle, hope it works for you.
https://jsfiddle.net/kajalc/h4fomm5q/
If this is fine then the button and its event can be removed from the script.

Removed use of button to trigger the modal.
Check this, if it works for you.
// Popup Window
var scrollTop = '';
var newHeight = '100';
if (jQuery(window).width() < 767) {
$('.popup').show().addClass('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $('.popup').offset().top
}, 500);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
}
$(window).bind('scroll', function() {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-btn-close').click(function(e) {
$('.popup').hide();
});
.popup {
display: none;
position: absolute;
top: 100px;
left: 50%;
width: 700px;
margin-left: -350px;
padding: 50px 30px;
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
border: 10px solid #150E2D;
z-index: 9999;
}
.popup-mobile {
position: relative;
top: 0;
left: 0;
margin: 30px 0 0;
width: 100%;
}
.popup-btn-close {
position: absolute;
top: 8px;
right: 14px;
color: #4EBD79;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
Page text
</div>
<div class="popup">
Modal Text
<span class="popup-btn-close">close</span>
</div>

You can perfom this by storing a cookies information (to check first visite of a user) and also use jquery ready to open the poupu on startup after checking the cookies .
Here you can find a Fiddle ( stack snippet doesn't give permission to use cookies , run the fiddle twice then the pupup will disapear )
PS : I ve created show popup function to prevent duplicate code, also i've removed the line //$(this).after($(".popup")); which remove the div popup ??!
Also I used Jquery cookie lib to access and et cookies
See code here
JS :
var scrollTop = '';
var newHeight = '100';
$(function() {
console.log($.cookie("openPop"));
if($.cookie('openPop')){
$.cookie('openPop',false);
showPopup();
}
else
$.cookie('name',true);
});
$(window).bind('scroll', function() {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function(e) {
e.stopPropagation();
showPopup();
});
function showPopup() {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
if (jQuery(window).width() < 767) {
//$(this).after($(".popup"));
$('.popup').show().addClass('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $('.popup').offset().top
}, 500);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
};
}
$('html').click(function() {
$('.popup').hide();
});
$('.popup-btn-close').click(function(e) {
$('.popup').hide();
});
$('.popup').click(function(e) {
e.stopPropagation();
});
CSS :
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
.popup {
display: none;
position: absolute;
top: 100px;
left: 50%;
width: 700px;
margin-left: -350px;
padding: 50px 30px;
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
border: 10px solid #150E2D;
z-index: 9999;
}
.popup-mobile {
position: relative;
top: 0;
left: 0;
margin: 30px 0 0;
width: 100%;
}
.popup-btn-close {
position: absolute;
top: 8px;
right: 14px;
color: #4EBD79;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
HTML :
<src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="popup-trigger">Open Pop Up</a>
<div class="main">
Page text
</div>
<div class="popup">
Modal Text
<span class="popup-btn-close">close</span>
</div>

How do I make a floating menu -> position:static

I want to make floating-menu position:static(or position:absolute. bottom:(floating-menu's height)), when it meets footer!
I made floating-bar originally position:static.
this operates moving up and down when scrolled.
I want to make this fixed or static..
$(window).bind(EVENT.SCROLL, function(){
if(($(window).scrollTop() + $(window).height()>= $('.footer-container').position().top)){
$('#floating-bar').css({'position': 'static'});
} else {
$('#floating-bar').css({'position': 'fixed'});
}
}).bind(EVENT.RESIZE, function(){
if(that.SCALE[0] > 900) sticky_sidebar();
});
#floating-bar{
display:block;
text-align: center;
bottom: 0;
position: static;
width: 100%; //position:fixed;
.check-price {
float:left;
padding: 20px 16px;
line-height: 23px;
background-color: #f1f4ff;
color: #emp-color;
font-size: 1.07em;
}
.order {
margin-left: 82px;
padding: 20px 63px;
background-color: #emp-color;
color: #fff;
font-size: 1.38em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="floating-bar">
<div class="check-price">가격 확인</div>
<div class="order">R5 멤버십 신청하기</div>
</div>

here is my answer to me.
$(window).bind(EVENT.SCROLL, function(){
var floating_bar = $('#floating-bar');
if($(window).scrollTop() >= $(document).height() - $(window).height() - $('.footer-container').height() && !floating_bar.hasClass('unsticky')){
floating_bar.addClass('unsticky');
}
if($(window).scrollTop() < $(document).height() - $(window).height() - $('.footer-container').height() && floating_bar.hasClass('unsticky')){
floating_bar.removeClass('unsticky');
}
}).bind(EVENT.RESIZE, function(){
if(that.SCALE[0] > 900) sticky_sidebar();
});
#floating-bar {display:block; text-align: center; bottom: 0; position: fixed; z-index:5; width: 100%;
&.unsticky {position:absolute;}
.check-price {float:left; padding: 20px 16px; line-height: 23px; background-color: #f1f4ff; color: #emp-color; font-size: 1.07em;}
.order {margin-left: 82px; padding: 20px 0; background-color: #emp-color; color: #fff; font-size: 1.38em;}
}

Slowing the speed of a Jquery Scroll

I've been using a jQuery scroll to enhance my parallax scrolling page. Specifically, this one. JQuery Scroll to Next Section
I am completely new to jQuery, (and have only used some fairly basic JavaScript in the past). I can work out how to change and adapt code found to my needs, but I don't know how to slow the scroller down.
The problem, is that to accommodate all of the content in my page, it needs to be about 17000px high. I only want the scroller to scroll to the bottom of the page then back to the top (without any stops inbetween), but when clicked it currently takes about 1 second to scroll 17000px. This means you can't read any of the text displayed. I want the scrolling animation to max out at about 1000px per second. How would I do this?
HTML
<div class="background fixed"></div>
<div class="trigger-scroll">></div>
<!-- Sections Id'd 1 through 5 -->
<section id="slide-6" class="homeSlide">
<div class="bcg center fixed"
data-0="top:200%; opacity:0;"
data-16000="top:200%; opacity:1;"
data-17000="top:90%;"
data-end="top:90%;">
<div class="hsContainer">
<div class="center middle">
<h2>View my portfolio!</h2>
<img class="portfolio" src="img/r3gamersHome.png"/>
</div>
</div>
</div>
</section>
<section id="slide-7" class="homeSlide scroll-here">
<div class="hsContainer">
<div class="hsContent bottom"
>
<h3>TEST</h3>
</div>
</div>
</section>
Javascript
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 2900;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
var s = skrollr.init();
s.refresh($('.homeSlide'));
$(document).ready(function() {
/* run scroll to section only
if body has class page-scroller */
var pageScroller = $( 'body' ).hasClass( 'page-scroller' );
if ( pageScroller ) {
// begin homepage scroll to section
var $scrollSection = $('.scroll-here');
var $scrollTrigger = $('.trigger-scroll');
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If already scrolled down
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
// end homepage scroll to section
}else{
console.log('page-scroller class was not found in body tag');
}//end if else
});
CSS (probably isn't relevant so i've added only the bare minimum, just in case)
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.hsContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 700px;
position: absolute;
}
.hsContent h2 {
color: #fff8de;
padding: 10px 5px;
font-size: 30px;
}
#media screen and (max-height: 400px) {
.hsContent h2 {
font-size: 25px;
}
}
.hsContent h3 {
color: #fff8de;
padding: 10px 5px;
line-height: 20px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h3 {
font-size: 15px;
padding: 5px 2.5px;
margin-bottom: 2px;
}
}
.hsContent h4 {
color: #fff8de;
padding: 10px 5px;
line-height: 15px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h4 {
font-size: 10px;
}
}
.hsContent p {
width: 400px;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.fixed {
position: fixed;
}
.center{
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.middle {
text-align: center;
margin: 0px;
padding-top: 40px;
width: 100%;
min-width: 300px;
}
#media screen and (max-height: 400px) {
.middle {
padding-top: 15px;
}
}
#slide-6 .bcg {background-color: rgb(208, 208, 208);
top: 100%;
box-shadow: inset 5px 5px 20px black;
}
#slide-6 .hsContent {
top: 0px;
text-align: center;
}
#slide-7 .hsContent {
max-height: 100px;
}
.trigger-scroll {
box-sizing: border-box;
display: inline-block;
border: 1px #f60 solid;
bottom: 20px;
width: 68px;
height: 68px;
position: fixed;
right: 20px;
padding: 16px 20px;
transition: transform 500ms ease-in-out;
z-index: 50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-weight: 700;
text-shadow: 0 1px 0 #fff;
color: #fff;
font-family: verdana;
font-size: 2em;
line-height: 1;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);
}
#media screen and (max-height: 400px) {
.trigger-scroll {
width: 51px;
height: 51px;
font-size: 1.5em;
padding: 12px 15px;
}
}
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

In this section's third line, change 1000:
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
to $(document).height(), like this:
$('html, body').animate({ scrollTop: 0 }, $(document).height());
this will make the animation scroll at about 1000 pixels per second.

sliding panel on right-hand side, like existing one at top

I have existing HTML/CSS/JavaScript that works fine for a "click to open" sliding panel from the top of the page, like this:
<div id="machineSelectorContainer">
<div id="machineSelectorTray">
<table id="machineSelector">
<tr id="machineSelectorThumbnailTextRow">
<td class="machineSelectorThumbnailText">VM1</td>
<td class="machineSelectorThumbnailText">VM2</td>
</tr>
<tr>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
</tr>
</table>
</div>
<div id="machineSelectorThumb">
<div id="machineSelectorThumbText">
•••
</div>
</div>
</div>
with
*, body {
margin: 0;
height: 100%;
}
#machineSelectorContainer {
width: 100%;
height: 150px;
text-align: center;
z-index: 100;
position: absolute;
top: -120px;
}
#machineSelectorThumb {
width: 60px;
height: 30px;
line-height: 30px;
font-family: sans-serif;
font-size: 12pt;
text-align: center;
position: relative;
top: 120px;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
z-index: 100;
}
#machineSelectorTray {
position: absolute;
height: 120px;
z-index: 100;
margin: auto;
left: 50%;
}
#machineSelector {
background-color: lightblue;
font-family: sans-serif;
font-size: 8pt;
text-align: center;
position: relative;
left: -50%;
margin: 0;
padding: 0;
height: 120px;
border: 1px solid black;
}
#machineSelector > table {
height: auto;
}
#machineSelectorThumbnailTextRow {
height: auto;
}
.machineSelectorThumbnailPicture > img {
width: 100px;
border: 1px solid black;
height: auto;
}
.machineSelectorThumbnailText {
position: relative;
bottom: 0;
width: 100px;
height: 20px;
line-height: 20px;
}
and
$("#machineSelectorThumb").click(function () {
var element = $("#machineSelectorContainer");
var currentTop = element.offset().top;
var newTop = -(currentTop + 120);
element.animate({
top: newTop
}, 200, function () {
});
});
(I put a jsfiddle at http://jsfiddle.net/mikebaz/rtTe5/1/ but note that the styling does not work correctly there for some reason - it's not worth messing with it as it's close enough, but be aware the thumb button doesn't overlap the tab in a normal browser setup.)
This works exactly how I want. I would like to have the same kind of behavior and design for a panel that slides out from the right, with the open button vertically centered and rotated, sliding open from off the right side of the window into view (right to left slide).
I have found a lot of different answers around pieces of this, such as CSS- hide element off the right of the screen to get the off-screen positioning, and I looked at Can't get Slide Out Tab on the right hand side of my page but that uses an image for the rotated text, which I don't want to do (among other differences). It seems that the script would be similar, but I'm stuck on how to build the CSS properly. I can't seem to get the combination of rotation, off-screen portion, and dynamic height working. In particular, I can't seem to get the contents to show or the thumb text to properly center in the thumb button. Here is what I have right now that is getting there:
<div id="machineControlsOuterContainer">
<div id="machineControlsContainer">
<div id="machineControlsTray">
<table id="machineControls">
<tr>
<td class="machineButton">Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
</table>
</div>
<div id="machineControlsThumb">
<div id="machineControlsRotatedContainer">
<div id="machineControlsThumbText">•••</div>
</div>
</div>
</div>
</div>
and
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.25;
opacity: 0.25;
margin: auto;
position: absolute;
left: 0px;
top: 50%;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: -120px;
height: 100%;
}
#machineControlsThumbText {
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 1px solid;
}
.machineButton {
border: 1px solid;
padding: 0px;
margin: 0px;
}
with the script:
$("#machineControlsThumb").click(function () {
var element = $("#machineControlsContainer");
var windowWidth = $(window).width();
var currentLeft = element.offset().left;
var currentRight = -150 + (windowWidth - currentLeft);
var newRight = -(currentRight + 120);
element.animate({
right: newRight
}, 200, function () {
});
});
I can tell I'm close, but I just can't finish closing the loop.
Thanks!

OK, so I finally figured this out. I had to do a little bit more manipulation of different pieces, and add some vertical centering script (I can't get the CSS to cooperate).
CSS:
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
position: absolute;
left: 0px;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: 0;
height: auto;
}
#machineControlsThumbText {
line-height: 60px;
text-align: center;
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 2px solid black;
border-spacing: 0;
}
#machineControls td {
height: 30px;
border: 1px solid black;
padding-left: 4px;
}
Adjustment script:
$(window).resize(function () {
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
});
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
function verticallyCenterElement(elementName) {
var element = $("#" + elementName);
var height = element.height();
var windowHeight = $(window).height();
var newTop = (windowHeight - height) / 2;
element.css("top", newTop);
}