Centering dynamically a div on window resize using jQuery

The code below will centers a div horizontally and vertically on window resize:

CSS

.centeredDiv{
  width: 400px;
  height: 400px;
}

Coffee script

# This function gets the current window width and height and set the position of the ".centeredDiv"
adjustPosition = ->
  $(".centeredDiv").css
    position: "absolute"
    left: ($(window).width() - $(".className").outerWidth()) / 2
    top: ($(window).height() - $(".className").outerHeight()) / 2
  return

# Everytime the user resize the browser window this calls the function "adjustPosition"
$(window).resize adjustPosition

# This calls the function at the start
$(document).ready ->
  adjustPosition()

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2019 Netgloo