Tim Tim - 6 months ago 13
Javascript Question

Absolute positioning not working on Javascript DIV

I've used some Javascript that slides a DIV up from the bottom of the webpage and I've tried to position it absolute bottom center.

The DIV at the bottom seems to be bottom left and I've tried to have it centered no matter what the browser window size is.

I'd have a look at this URL to see the page in question: http://s361608839.websitehome.co.uk/oneonly/index.html

HTML:

<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<a href="mailto:name@domain.com">name@domain.com</a><br /><br />
<p>Address</p>
<p>Telephone</p>
</div>


CSS:

.slide-out-div {
padding: 20px;
width: 276px;
background: url(images/kontakt-bg.png);
color: #fff;
}


JS:

$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'images/kontakt-tab.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '26px', //height of tab image
imageWidth: '316px', //width of tab image
tabLocation: 'bottom', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation

fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});


Thanks!

Ana Ana
Answer

Add

left: 50%;
margin-left: -138px; /* half its width which you have set to be 276px */

to .slide-out-div (works for me when editing live via developer tools).

Comments