?
Solved

jquery - center an element

Posted on 2011-09-22
3
Medium Priority
?
346 Views
Last Modified: 2012-06-27
Is there a slick way to have jquery center the selected element?

 if($('span[id*="lblCatNameID"]'))
        {        
            this.css("position", "absolute");
            this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
            this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
            return this;
        }



seems not to work
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1000 total points
ID: 36584834
assuming that 'this' object handle you already have for the element to be centered. And it needs to be centered inside the window, not necessarily its parent

function centerThis(obj)
{
 var winHeight = $(window).height();
 var winWidth = $(window).width();
 obj.css("position", "absolute");
 obj.css("top", ( winHeight - this.height( ) ) / 2  + "px" ) ;
 obj.css("left", ( winWidth - this.width( ) ) / 2  + "px" );
}
0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 1000 total points
ID: 36585232
Check this



<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
   $('span[id*="lblCatNameID"]').center();
  });
  
  
  (function($){
    $.fn.extend({
        center: function () { alert("DD");
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);


  </script>
  <title>Kiran Test</title>
  </head>
  <body>
   
   <span id="lblCatNameID"><h1>Centre Element<h1></span>   

  </body>
  </html>

Open in new window

0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36588082
thx
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month10 days, 1 hour left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question