Develop Reference

How can i achieve the animation shown in this video link?

I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks

Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>

How can i close my overlay modal box here,it doesnt work

I cant close my overlay modal Box.I try when the x is clicked than remove the class list,than the modal-box should be closed,but it is not recognized by js and css.First i have one ovarlay where should be showed the name and the position of the coas,after that when the user clicks on the arrow the modal box pop up in full width and height and that'sworks correct and after that i have one X span #times where when i click on the X i want the mdoal box to be disapered.I tried with addevent listener and everything itdoesnt work.
JS CODE
const makingTheInstructorSection = (arrInst) => {
for(let coach of arrInst) {
$('.instructorBoxes').append
(`
<div class="infoPerInstructor">
<img src="ImageGalleryPictures/instructor.jpg"/>
<div class="firstOverlay">
<p class="arrowPointerInstructor">→</p>
<div class="text">
<p class="arrowPointerInstructor">→</p>
<h3>${coach.name}</h3>
<p>${coach.position}</p>
</div>
</div>
<div class="secondOverlayOnClick">
<span class="closeTheInstructorBox">×</span>
<h5>Why you coach:</h5>
<p>${coach.WhyYouCoach}</p>
<h5>Favorite Movement:</h5>
<p>${coach.favoriteMovement}</p>
<h5>Favorite Quote:</h5>
<p>${coach.favoriteQuote}</p>
</div>
</div>
`)
}
}
// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console
// when i click that x in the browser
for(let item of closing) {
item.addEventListener("click" , (e) => {
console.log(e.target);
})
}
THE CSS CODE
.instructorBoxes {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 8px;
}
.instructorBoxes > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructorBoxes div {
width: 100%;
height: 100%;
}
.infoPerInstructor {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.firstOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* background-color: #008CBA; */
background-color: #570194;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
cursor: pointer;
z-index:1;
}
.infoPerInstructor:hover .firstOverlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.arrowPointerInstructor {
float: right;
font-size: 50px;
color: white;
}
.secondOverlayOnClick {
display: none;
}
.activeteTheSecondOverlayOnClick {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: block;
}
/* .DEactiveteTheSecondOverlayOnClick {
display: none;
} */
.activeteTheSecondOverlayOnClick p , h1 {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.closeTheInstructorBox {
font-size: 30px;
color: red;
cursor: pointer;
float: right;
right: 0;
z-index: 100;
}

I found an answer.Because it is overlay it does not work,the best way to do is to make add event listener on body,and then check
if some event target contains that specific class list,then it will be found,and throught that event can you search the "modal box" depending on the structure on your html and remove some class list etc...
body.addEventListener("click" , (e) => {
if(e.target.classList.contains("closeTheInstructorBox")) {
console.log("x e ");
console.log(e.target.parentElement)
e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
}

JS - Click event not working as it should

Maybe some of you can help me solve this problem.
I have this code and I made like an extension for the product that will show product description when click on product. But the on click function isn't working (can't close description).
Thanks!
$('.product').on('click', function(){
$('.product .productExtension').css("display","none");
$(this).children(".productExtension").css("display","block");
});
function close(){
$('.productExtension').css("display","none");
}
.product{
position: relative;
width: 80px; height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center; font-family: Arial;
}
.product > .productExtension{
position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 300px; height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product > .productExtension > .closeProductExtension{
position: absolute;
top: -40px; left: 0;
width: 20px; height: 20px;
margin: 10px;
border: none;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="close()">Close</div>
</div>
</div>

Now I know it wasn't fully part of the question, and I took a bit of liberty with the styling, but there is absolutely no need to hide all different productExtension classes upon each close. It would be far lighter to read the properties detailed inside your product div, and render them to a modal.
It does have an overly complex way of closing the modal ( just some liberties at work there, I am sorry for that one :) )
The answer that is currently accepted both details the reason why you cannot use close (could be window.close), I just thought the offer a different perspective when you have more than one product how to transfer the data between a modal and your DOM as you describe it now. I think it has its advantages
window.addEventListener( 'load', function() {
document.querySelectorAll('.product').forEach( product => {
product.addEventListener('click', handleProductClicked, false );
} );
document.querySelectorAll('[data-action]').forEach( action => {
action.addEventListener('click', handleAction );
} );
function handleAction( e ) {
const owner = e.currentTarget;
const action = owner.getAttribute('data-action');
const selector = owner.getAttribute('data-target');
const target = document.querySelector( selector );
if (action === 'hide') {
if ( !target.classList.contains('hidden') ) {
target.classList.add('hidden');
}
}
}
function showModal( title, content, owner ) {
const modal = document.querySelector('#modal');
if ( modal.classList.contains('hidden') ) {
modal.classList.remove( 'hidden' );
}
modal.querySelector('[data-for=title]').innerText = title;
modal.querySelector('[data-for=content]').innerHTML = content;
}
function handleProductClicked( e ) {
const productContainer = e.currentTarget;
const name = productContainer.querySelector('.productName').innerText;
const description = productContainer.querySelector('.productExtension').innerHTML;
showModal( name, description, productContainer );
}
} );
.hidden {
display: none;
visibility: hidden;
}
.productExtension {
display: none;
visibility: hidden;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
border: solid #a0a0a0 1px;
box-shadow: 5px 3px 5px #777;
background-color: #cfcfcf;
}
.modal > .title {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 20px;
font-size: 0.9em;
background-color: blue;
border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 18px;
background-color: #efefef;
border: solid #a0a0a0 1px;
text-align: center;
text-transform: small-caps;
}
.controls:hover {
font-weight: bold;
cursor: pointer;
}
.modal > .title > [data-for] {
padding: 3px;
color: #fff;
font-weight: 800;
}
.modal > .content {
position: absolute;
left: 0px;
right: 0px;
top: 21px;
bottom: 0px;
padding: 5px;
border: inset #666 1px;
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
<div class="modal hidden" id="modal">
<div class="title">
<span data-for="title"></span>
<div class="controls">
<span data-action="hide" data-target="#modal">X</span>
</div>
</div>
<div class="content" data-for="content">
</div>
</div>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
</div>
</div>
<div class="product">
<div class="productName">Blue Hoodie</div>
<div class="productPrice">14.75$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in blue color</div>
</div>
</div>

This is happening because both functions trigger. The first trigger because you are clicking on an item that is inside the DIV “product” and the second because you’ve passed the function to the onClick. You should take out the “productExtension” div from “product” to make it works.

As mentioned in other comments, you have two click handler in the parent and child. The parent div is intercepting all click events. Try this for your requirement.
$(".product").on("click", function(e) {
$(".product .productExtension").css("display", "none");
$(this)
.children(".productExtension")
.css("display", "block");
if (e.target.classList.contains('closeProductExtension')) {
$(".productExtension").css("display", "none");
}
});

You have several problems. The first is that you trigger the open event as well. To solve this you can use stop propagation. The second is that you are using the method name "close" which is already used in JS.
$('.product').on('click', function() {
$('.product .productExtension').css("display", "none");
$(this).children(".productExtension").css("display", "block");
});
function closeE(event) {
event.stopPropagation();
$('.productExtension').css("display", "none");
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
.product>.productExtension {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product>.productExtension>.closeProductExtension {
position: absolute;
top: -40px;
left: 0;
width: 20px;
height: 20px;
margin: 10px;
border: 1px solid black;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="closeE(event)">Close</div>
</div>
</div>

According to the button 1 image is shown

I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>

This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>

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);
}