1

I have made a sliding (S) window with jQuery animate() function. i.e. it slides left and right. 

$.animate({width:'toggle', opacity:'toggle'},2000,'swing',function(){
    // ...
})

It uses the following CSS when open.

position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;

The problem I am facing is: on screens with different widths the window starts at different locations. I am supposed to show it adjacent to another window (A). On my laptop it works fine. On client side, it overlaps half of window A. I believe it is due to position:absolute; but I don't know how to solve it. Please help! Thanks!

a_fan
  • 383
  • 2
  • 22

5 Answers5

2

Different sized screens have different resolutions. So, on your computer 100px may be the center of your screen but on someone else's it may not. Using a % instead of px may work better for you.

Paul Nikonowicz
  • 3,883
  • 21
  • 39
1

you can use $("body").height(); and also $("body").scrollTop() to get the client window height and position of page to view, in your code you have your slides height. decrease your slide height from them. you can now show your slide in center of page. like this:

var top = $("body").scrollTop() + ((parseInt($("body").height()) - slideHeight) / 2);
Ali U
  • 384
  • 5
  • 17
0

You may try 

float:right;

to float that object just along side your window. You'll need to post whole code here for me to tell the division tag's placement though. Otherwise you may search for float property at W3Schools

daerty0153
  • 524
  • 1
  • 6
  • 11
  • nope. instead of absolute use float as % messes up sometimes especially on screens of different aspect ratios. The div tag would need to be placed in html accordingly then. – daerty0153 Feb 11 '12 at 11:57
0

If this div where the animation or the position:absolute property is applied has a parent div, then apply position:relative.

<div class="wrapper">
  <div class="slider"></div>
</div>

css:
.wrapper{ position:relative;}
.slider{
position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;
}
Abhidev
  • 7,063
  • 6
  • 21
  • 26
0

Thanks a lot for the answers guys! Much appreciated.

@ali-youhannaei's Answer gave me an idea to use the following code:

var pos = jQuery("#div_a").offset(); // Window A's position
var x = pos.left + jQuery("#div_a").width(); // Window S's position

Set left:x; with postion:absolute; for Window S. That will work.

a_fan
  • 383
  • 2
  • 22