Posted By


ctran on 08/30/07

Tagged


Statistics


Viewed 156 times
Favorited by 0 user(s)

Position.center


/ Published in: JavaScript
Save to your folder(s)

Center a give element. Requires prototype.js


Copy this code and paste it in your HTML
  1. Position.center = function(element){
  2. var options = Object.extend({
  3. zIndex: 999,
  4. update: false
  5. }, arguments[1] || {});
  6.  
  7. element = $(element)
  8.  
  9. if(!element._centered){
  10. Element.setStyle(element, {position: 'absolute', zIndex: options.zIndex });
  11. element._centered = true;
  12. }
  13.  
  14. var dims = Element.getDimensions(element);
  15.  
  16. Position.prepare();
  17. var winSize = Position.getWindowSize();
  18. var winWidth = winSize.width;
  19. var winHeight = winSize.height;
  20.  
  21. var offLeft = (Position.deltaX + Math.floor((winWidth-dims.width)/2));
  22. var offTop = (Position.deltaY + Math.floor((winHeight-dims.height)/2));
  23. element.style.top = ((offTop != null && offTop > 0) ? offTop : '0')+ 'px';
  24. element.style.left = ((offLeft != null && offLeft > 0) ? offLeft :'0') + 'px';
  25.  
  26. if (options.update) {
  27. Event.observe(window, 'resize', function(evt) { Position.center(element); }, false);
  28. Event.observe(window, 'scroll', function(evt) { Position.center(element); }, false);
  29. }
  30. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.