CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark Said Camilleri
Mark Said Camilleri

Reputation: 388

Centering div elements on click

I have some div elements which when I click on them, they show their back (flipcards) and expand to a size of 600px by 600px, I want those divs to also go in the center of the screen when I click on it, then move back again when a click on it again. I would like it to be centered horizontally and vertically. I have tried searching, and so far none of them worked. Most results included something such as:

.flip.cover.flipped{
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    position: absolute;
    height: 600px;
    width: 600px;
    top: 50%;
}

I've added that to the current css class.flip.cover.flipped which is a class which is toggled on click using javascript, but that only resulted in my div elements to remain where it was on click. See this. Here is the .flip.cover.flipped class in full:

.flip .cover.flipped {
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    position: absolute;
    height: 600px;
    width: 600px;
    top: 50%;
    transform: rotatey(-180deg);
        -moz-transform: rotatey(-180deg);
        -ms-transform: rotatey(180deg);
        -o-transform: rotatey(-180deg);
        -webkit-transform: rotatey(-180deg);
    z-index: 10;
}

Other results included a custom javascript function, which I couldn't test out. If a custom javascript function works, I just need something to toggle it with (If that's the case, I'm really hoping for something simple such as $(this).find('.cover').toggleClass('flipped');, only for functions)

I'd really appreciate anyone's help as to how I'd be able to do this.

I've recently discovered that the usual way centres the element within its parent element. Problem is that I want to centre the element within the window not within its parent element.
Here is the HTML structure:

<div class="flip">
    <div class="cover">
        <div class="face front">
            <img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125"/>
        </div>
        <div class="face back">
            Hello World!
        </div>
    </div>
</div>

and this is the javascript to toggle the class:

        $('.flip').click(function() {
            $(this).find('.cover').toggleClass('flipped');
        });

Edit: I was reviewing some of my own questions, and since the link to my example has been changed, I decided on showing the full code of the page here along with the result:

$('.flip').click(function() {
  $(this).find('.cover').toggleClass('flipped');
});
            /*Sorted alphabetically*/
            * {
              margin: 0px;
              padding: 0px;
            }
            #backbutton {
              background-image: url("http://farm9.staticflickr.com/8538/8781018857_feef1c4e6e_o.png");
              background-position: center;
              background-repeat: no-repeat;
              background-size: 90px 32px;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              float: left;
              min-width: 90px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            body {
              background-image: url('http://farm3.staticflickr.com/2891/8769949843_f6b2b03c89_o.png');
              background-repeat: repeat-y;
              background-position: 0px 37px;
              background-size: cover;
            }
            #creditsbutton {
              background-image: url("http://farm4.staticflickr.com/3726/8769949955_3d28f7be67_o.png");
              background-position: center;
              background-repeat: no-repeat;
              background-size: 100px 32px;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              float: right;
              min-width: 100px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            .flip {
              box-shadow: 0px 15px 6px -6px #2C0600;
              -o-box-shadow: 0px 15px 6px -6px #2C0600;
              -ms-box-shadow: 0px 15px 6px -6px #2C0600;
              -moz-box-shadow: 0px 15px 6px -6px #2C0600;
              -webkit-box-shadow: 0px 15px 6px -6px #2C0600;
              display: inline-block;
              height: 185px;
              position: relative;
              width: 125px;
              perspective: 800;
              -o-perspective: 800;
              -moz-perspective: 800;
              -ms-perspective: 800;
              -webkit-perspective: 800;
            }
            .flip .cover {
              height: 100%;
              padding: 0px 0px 0px 0px;
              position: relative;
              text-align: center;
              width: 100%;
              transform-style: preserve-3d;
              -o-transform-style: preserve-3d;
              -moz-transform-style: preserve-3d;
              -ms-transform-style: preserve-3d;
              -webkit-transform-style: preserve-3d;
              transition: 0.5s;
              -o-transition: 0.5s;
              -moz-transition: 0.5s;
              -ms-transition: 0.5s;
              -webkit-transition: 0.5s;
            }
            .flip .cover .back {
              background: white;
              color: black;
              cursor: pointer;
              transform: rotatey(-180deg);
              -moz-transform: rotatey(-180deg);
              -ms-transform: rotatey(-180deg);
              -o-transform: rotatey(-180deg);
              -webkit-transform: rotatey(-180deg);
            }
            .flip .cover.flipped {
              left: 50%;
              margin-top: -300px;
              margin-left: -300px;
              position: absolute;
              height: 600px;
              width: 600px;
              top: 50%;
              transform: rotatey(-180deg);
              -moz-transform: rotatey(-180deg);
              -ms-transform: rotatey(180deg);
              -o-transform: rotatey(-180deg);
              -webkit-transform: rotatey(-180deg);
              z-index: 10;
            }
            .flip .cover .face {
              font-family: Helvetica, Sans Serif;
              height: 100%;
              line-height: 200px;
              position: absolute;
              text-align: center;
              width: 100%;
              backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -ms-backfae-visibility: hidden;
              -webkit-backface-visibility: hidden;
            }
            .flip .cover .front {
              background: black;
              color: white;
              cursor: pointer;
              position: absolute;
            }
            #header {
              background-image: url("http://farm9.staticflickr.com/8137/8774763204_453c37e1aa_o.png");
              background-repeat: no-repeat;
              background-size: cover;
              min-width: 673px;
              padding: 4px 14px;
              z-index: 1;
            }
            .headerbuttonsegment-centre {
              background-image: url("http://farm6.staticflickr.com/5330/8787597480_6696f22a79_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #headerbuttonsegment-left {
              background-image: url("http://farm9.staticflickr.com/8560/8787597614_733a58b275_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #headerbuttonsegment-right {
              background-image: url("http://farm6.staticflickr.com/5466/8787597568_43fd6869fb_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #shelf {
              list-style-type: none;
              padding: 10px 50px 20px;
              position: relative;
            }
            .spacing {
              display: inline-block;
              width: 50px;
            }
            .wrap-centre {
              min-width: 603px;
              text-align: center;
              width: 100%
            }
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<body>
  <div id='header'>
    <a href="http://markscamilleri.tumblr.com">
      <div id="backbutton">
        &nbsp;&nbsp;Back
      </div>
    </a>
    <div class='wrap-centre'>
      <div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
        &nbsp;Bookshelf&nbsp;
      </div>
      <div class="headerbuttonsegment-centre" style=" min-width: 175px; background-size: 175px 32px;">
        Want to Read
      </div>
      <div id="headerbuttonsegment-right" style=" min-width: 150px; background-size: 150px 32px;">
        Favourites
      </div>
      <a href="#" target="_blank">
        <div id='creditsbutton'>
          Credits
          <!--Do not remove Credits!!-->
        </div>
      </a>
    </div>
  </div>
  <div id="shelf">
    <div class="flip">
      <div class="cover">
        <div class="face front">
          <img src="http://farm3.staticflickr.com/2866/8804333739_9d644bcdf6_o.jpg" width="125" />
        </div>
        <div class="face back">
          Hello World!
        </div>
      </div>
    </div>
    <div class="spacing">
    </div>
    <div class="flip">
      <div class="cover">
        <div class="face front">
          <img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125" />
        </div>
        <div class="face back">
          Hello World!
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 5399

Answers (4)

apaul
apaul

Reputation: 16170

Your flip animation is likely to need a lot of work, but I think I've got the centering issue worked out.

Working Example

$(function () {
    $('.flip').click(function () {
        $(this).find('.cover').toggleClass('flipped');
        centered();
    });
    centered = function () {
        var wy = window.innerHeight / 2,
            wx = window.innerWidth / 2,
            py = 300,
            px = 300,
            pageTop = wy - py,
            pageLeft = wx - px;
        if ($('.cover').hasClass('flipped')) {
            $('.flipped').css({
                position: "absolute",
                top: pageTop,
                left: pageLeft
            });
        } else {
            $('.flip, .cover').removeAttr('style');
        }
    };
    $(window).resize(centered);
});

Upvotes: 2

Kardos Rudolf
Kardos Rudolf

Reputation: 35

I'm not an expert but try with Jquery :)

Create a .centermybox DIV.

Css:

.centermybox{
      position:absolute;
      left:50%;
      top:50%;
      z-index:99;
      margin: -300px 0 0 -300px;
}

Jquery : 

$(document).ready function() {
     $(".youdivhere").toggle( function() {
         $(this).addClass(".centermybox"); 
     });
});

Upvotes: 1

Zach Saucier
Zach Saucier

Reputation: 25954

Try adding this to the body

body {
  height:100%;
}

and this to the flipped class (changing what is necessary):

position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-300px;

You can animate the motion using javascript/jQuery, but I assume you know how to do that. Please comment if you have no clue

EDIT: Here is a jsFiddle showing it works

On a side note you should probably use margins for the spacing in between each book (aka margin-right:50px;, etc.), not another element

Edit 2: Since you're using jQuery already, you can change your jQuery on click function to this:

$('.flip').click(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    $(this).find('.cover').toggleClass('flipped').css({
        "position":"absolute",
        "top":midHeight,
        "left":midWidth,
        "margin-top":"-300px",
        "margin-left":"-300px"
    });
});

With the jsFiddle to prove it works too. However with this method you have would have to do the same type of calculation on window resize if you want it to stay perfectly centered as in

$(window).resize(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    $(this).find('.cover').toggleClass('flipped').css({
        "top":midHeight,
        "left":midWidth
    });
});

But this takes more to process

Keep in mind you need to change the position back to the original value on the next click

Edit three:

Since it seems you don't have enough basic jQuery knowledge to apply what I have given you correctly, here is a fully working jsfiddle. You should be able to switch out the class names/lines I have for the commented out lines and it work, though without directly manipulating your code there could be a couple small errors that you should be able to fix yourself

As for animating the transition, I approximated the result in this jsFiddle by simply moving some of the .css to .animates. You can play around with it to get it functioning a little better

If you're unsure of what anything that I added does, or you have some error you can't resolve after some time of working on it including looking up similar problems, comment and I will try to assist you further

Upvotes: 0

Alexandros B
Alexandros B

Reputation: 1891

I spotter two problems

  1. Your div with class flip has a position:relative so the cover is absolute to this and not the shelf.

  2. Your margin-left and margin-top are not calculated correctly. You need to calculate these according to screen and modal size

This is a way to center a div using jquery

This working correctly depends heavily on 1. above

Upvotes: 0

Related Questions