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">
Back
</div>
</a>
<div class='wrap-centre'>
<div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
Bookshelf
</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>
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);
});
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");
});
});
I spotter two problems
Your div with class flip has a position:relative so the cover is absolute to this and not the shelf.
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
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
Related
So I'll try and explain this as best I can. I have a CSS card that will flip when a button is pressed. The problem I'm running into is when that button is pressed and the card flips there is a moment where the content is blank before popping up. I believe I should be looking at a way to preload this content before the button is pressed so that it exists in cache before the event takes place.
HTML
<div class="col-sm-10 col-sm-offset-1">
<div class="col-md-4 col-sm-6">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="cover">
<img src="<?php bloginfo('template_directory');?>/images/team/thumb.png">
</div>
<div class="user">
<img class="img-circle" src="<?php bloginfo('template_directory');?>/images/team/member.png"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">Team Member</h3>
<p class="profession">Position</p>
<p class="text-center">"Some Content Text"</p>
</div>
<div class="footer">
<button class="btn btn-simple" onclick="rotateCard(this)">
<i class="fa fa-mail-forward"></i> Manual Rotation
</button>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="header">
<h5 class="motto">"Some Content Text"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Job Description</h4>
<p class="text-center">Some Qualifications</p>
</div>
</div>
<div class="footer">
<button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
<i class="fa fa-reply"></i> Back
</button>
<div class="social-links text-center">
<i class="fa fa-facebook fa-fw"></i>
<i class="fa fa-google-plus fa-fw"></i>
<i class="fa fa-twitter fa-fw"></i>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
</div> <!-- end col-sm-10 -->
CSS
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
.back .btn-simple{
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container, .front, .back {
width: 100%;
height: 420px;
border-radius: 4px;
}
.card .cover{
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img{
width: 100%;
}
.card .user{
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img{
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
width: 100%;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5{
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession{
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .footer {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer .social-links{
font-size: 18px;
}
.card .footer .social-links a{
margin: 0 7px;
}
.card .footer .btn-simple{
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto{
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container{
width: 100%;
margin-top: 50px;
}
.card .stats{
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child{
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{
border-left: 1px solid #EEEEEE;
}
.card .stats h4{
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p{
color: #777777;
}
/* Just for presentation */
.title{
color: #506A85;
text-align: center;
font-weight: 300;
font-size: 44px;
margin-bottom: 90px;
line-height: 90%;
}
.title small{
font-size: 17px;
color: #999;
text-transform: uppercase;
margin: 0;
}
.space-30{
height: 30px;
display: block;
}
.space-50{
height: 50px;
display: block;
}
.space-200{
height: 200px;
display: block;
}
.white-board{
background-color: #FFFFFF;
min-height: 200px;
padding: 60px 60px 20px;
}
.ct-heart{
color: #F74933;
}
pre.prettyprint{
background-color: #ffffff;
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
text-align: left;
}
.atv, .str{
color: #05AE0E;
}
.tag, .pln, .kwd{
color: #3472F7;
}
.atn{
color: #2C93FF;
}
.pln{
color: #333;
}
.com{
color: #999;
}
JS
function rotateCard(btn){
var $card = jQuery(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
It should also be mentioned that I am building this behind WordPress so if there is a plugin that will make the job easier I'm also open to that idea. TIA
Assuming you start the request to get the data when clicking the card, you can try starting when the mouse gets over it using jQuery's hover() function. If you want you can unload the data when the mouse stops hovering, too. If it's still too slow the only option I can think of is preloading.
I've seen coding on here for one transparent box inside a div,
but not for multiple and I'm having issues getting anything to work right..
I have one outter div that holds 3 boxes inside to the left, center & right with a border.
I want those 3 boxes to be transparent with opacity 0.3 all the way thru to the main background..
Is it possible to accomplish this with the simple coding I'm using without FlexBox or JavaScript??
How can I make the main div solid with 3 transparent boxes in it??
Here is my coding and a image..
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<div class="divl">Left <br> Make This Box Transparent..</div>
<div class="divr">Right <br> Make This Box Transparent..</div>
<div class="divc">Center <br> Make This Box Transparent..</div>
</main>
<div style="clear:both;"></div>
</body>
</html>
Hope that's what you need. When you specify background-attachment: fixed it goes relative to window not to parent block.
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<div class="divl">Left <br> Make This Box Transparent..</div>
<div class="divr">Right <br> Make This Box Transparent..</div>
<div class="divc">Center <br> Make This Box Transparent..</div>
</main>
<div style="clear:both;"></div>
</body>
</html>
Your main html tag has a solid color assigned to it, so your three divs are transparent but the one holding them "main" is not. You will need to assign transparency to main or remove the solid background.
main {
/*background: #336699; remove this to see the background image */
background: #33669947; /*optionally use hex to add transparency*/
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<div class="divl">Left <br> Make This Box Transparent..</div>
<div class="divr">Right <br> Make This Box Transparent..</div>
<div class="divc">Center <br> Make This Box Transparent..</div>
</main>
<div style="clear:both;"></div>
</body>
</html>
I'm editing a website for use on tablet, but obviously none of my :hover pseudo-classes will work.
I want to move a div up to reveal text by the same amount as when I hover, but I want it to happen when I click "up_down_icon.png".
Here is my html:
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png">
<p>Text here</p>
</div>
</div>
And the CSS:
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
Literally all I need to know is how to apply a change of position to .h_1_text_box, to be specific, moving it up 84px.
The answer is probably going to be really simple and I feel a little silly for asking, but my code is a bit long for me to get my head around applying JS. I haven't been able to find anything specific enough to help me out. If I have to change the order of anything in my HTML I don't mind.
Thanks for your help.
Just add an event listener to your icon which will listen for click events.
Then you would just need to add a css class to the parent element. You already have everything you need in your css defined.
Here is an example.
var upDownIcon = document.getElementsByClassName('icon').item(0);
upDownIcon.addEventListener('click', function(e) {
e.target.parentNode.classList.toggle('move_up_down');
}, false)
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 100px;
transition: 0.5s ease;
}
.h_1_text_box.move_up_down {
position: relative;
top: 0px;
background-color: rgba(0, 0, 0, 0.9);
}
/*
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
*/
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
/* this is just for the span*/
font-size: 26px;
cursor: pointer;
}
.h_1_text_box.move_up_down > .icon {
transform: rotate(-180deg);
}
/*
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
*/
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<span class="icon">⇅</span>
<!--<img class="icon" src="up_down_icon.png">-->
<p>Text here</p>
</div>
</div>
you can set top and left according to your requirement using simple JS -
document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";
This snippet is one of thousand ways ways you can do this using JS:
function toogleClass() {
var divhasClass = document.getElementById("onlyTouchDevices").classList;
if (divhasClass.contains("showMore")) {
divhasClass.remove("showMore");
} else {
divhasClass.add("showMore");
}
}
.home_1 {
width: 600px;
height: 300px;
margin: 0px 0px 96px 0px;
overflow: hidden;
background-color: lightblue;
background-size: 600px 300px;
border-radius: 8px;
}
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.showMore {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
h3 {
margin: 0 0 18 0;
font-weight: lighter;
-webkit-margin-before: 0px;
-webkit-margin-after: 18px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
<div class="home_1">
<div class="h_1_text_box" id="onlyTouchDevices">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png" onclick="toogleClass()" />
<p>Text here</p>
</div>
</div>
What I have done here is just toggled the class that added/reset the top spacing which you have used when you hover that element.
may be this will help you, run my code snippet and check it out
$('.icon').click(function(){
$('.h_1_text_box').css('position','relative');
$('.h_1_text_box').css('top','171px');
$('.h_1_text_box').css('background-color','rgba(0, 0, 0, 0.9)');
})
.home_1 {
width: 600px;
height: 300px;
margin: 0px 0px 96px 0px;
overflow: hidden;
background-color: lightblue;
background-size: 600px 300px;
border-radius: 8px;
}
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
h3 {
margin: 0 0 18 0;
font-weight: lighter;
-webkit-margin-before: 0px;
-webkit-margin-after: 18px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png">
<p>Text here</p>
</div>
</div>
So I'm trying to do this typography transformation. I have the letter in all white. When I hover the mouse on top, the top half of the letter should flip down exposing a different color. The problem is that it's flipping down the wrong div.
tback is the lower part of letter A.
tfront is the upper part of letter A.
HTML code:
<div id="letter-container" class="letter-container">
<h2><a href="#">
<div class="twrap">
<div class="tup">
<div class="tback"><span>A</span></div>
<div class="tfront"><span>A</span></div>
</div>
<div class="tbg"><span>A</span></div>
<div class="tdown"><span>A</span></div>
</div></a></h2>
</div>
HERE IS THE CSS:
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
box-shadow: 1px 1px 4px #000;
}
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
z-index: -10;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
}
/*Drop down part*/
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
color: #f2c200;
}
.letter-container h2 .tup .tdown{
background: red;
color: red;
}
.letter-container h2 .tup .tback{
-webkit-transform: rotateX(180deg);
}
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(180deg);
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/g4zja/
Not sure what exactly is the desired effect. Maybe this?
fiddle
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(90deg);
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Can somebody pleaes tell me why my contentt and foter are overlapping and why won't the content push the footer to the bottom.
Along with these two problems, the background-overlay and background-gradient don't seem to actually be set to 100% for if the content expands to far, they just stop leaving the black background exposed.
I have its live version here: http://jordan.rave5.com/tmp/
UPDATED:
CSS:
* {
margin: 0;
}
body, html {
position:relative;
border: 0px;
margin: 0px;
padding: 0px;
height:100%;
width:100%;
background-color: #000;
color: #BCBCBC
}
#background-overlay {
z-index: 100;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #273722;
background-image: url(images/main-bg.png);
background-repeat: repeat;
background-attachment: fixed;
opacity: 0.0;
top: 0;
bottom: 0;
}
#background-gradient {
position: relative;
z-index: 200;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-image: url(images/main-grad.png);
background-repeat: repeat-x;
background-position: top;
}
#header {
display: none;
z-index: 1000;
position: absolute;
width: 100%;
height: 80px;
top: 0;
left: 0;
-moz-box-shadow: 0px 0px 40px #555;
-webkit-box-shadow: 0px 0px 40px #555;
box-shadow: 0px 0px 40px #555;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=40, Direction=0, Color='#555555')";
}
#header-image-grad {
z-index: 300;
transition:width 2s;
-webkit-transition:width 2s;
width: 100%;
max-height: 608px;
background-image: url(images/gray-trans.png);
background-repeat: repeat;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#header-image-border {
z-index: 400;
transition: width 2s;
-webkit-transition: width 2s;
width: 100%;
max-height: 608px;
padding-bottom: 4px;
background-image: url(images/border.png);
background-repeat: repeat-x;
background-position: bottom;
}
.image-grad {
position: absolute;
z-index: 600;
width: 100%;
height: 324px;
min-height: 174px;
max-height: 608px;
background-image: url(images/header-img.png);
background-repeat: repeat-x;
background-position: bottom;
top: 4px;
left: 0;
}
.header-img {
position: relative;
z-index: 500;
width: 100%;
min-width: 1024px;
opacity: 0.0;
}
#header-container {
z-index: 600;
width: 100%;
height: 80px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
opacity: 0.5;
}
#navigation-container {
z-index: 1000;
width: 75%;
min-width: 1024px;
padding: 0px;
margin: 0 auto;
}
#navigation {
z-index: 1000;
height: 80px;
line-height: 80px;
width: 600px;
height: 100px;
}
.nav {
z-index: 1000;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
#body {
transition: height 2s;
-webkit-transition: height 2s;
width: 74%;
min-width: 1024px;
height: auto !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 300px;
background-color: #080908;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#body-content {
display: none;
height: 100%;
}
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
position: absolute;
bottom: 0;
left: 0;
}
#footer-content {
height: 100px;
width: 74%;
min-width: 1024px;
margin: 20px auto 20px;
background-color: #96a381;
padding: 10px;
color: #10120f;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
/* STYLE ELEMENTS */
p {
margin: 15px 0 15px;
}
.loading, .loading img {
margin: 0 auto;
margin-top: 5px;
text-align: center;
}
HTML:
<div id="background-overlay">
<div id="background-gradient">
<div id="header-image-grad">
<div id="header">
<div id="header-container">
<div id="navigation-container">
<div id="navigation">
<span id="nav">Navigation Area...</span>
</div>
</div>
</div>
</div>
<div id="header-image-border">
<img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
<div class="image-grad"></div>
</div>
</div>
<div id="body">
<div id="body-content"></div>
<div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
</div>
<div id="footer">
<br />
<div id="footer-content">
Footer Area...
</div>
</div>
</div>
</div>
Remove position: absolute; from #footer
#footer {
width: 100%;
height: 140px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
bottom: 0;
left: 0;
}
Maybe I don't understand what you need, but did you consider changing:
#footer-content {
height: 85%;
to
#footer-content {
height: 60px;
or simply try overlay:auto; or overlay:hidden; on both #footer and #body