I got the following problem:
On click I am trying to animate the position, width and height of an absolute positioned div. Additionally I am trying to change the background-size through jQuery.
What happens is that it changes all the CSS properties correctly, but not background-size.
It's supposed to change background-size:100% auto to background-size:auto 100%. It just seems to ignore that.
Does anyone know why this problem occurs?
$(".item").click(function(){
$(this).animate({
'width': '94vw',
'height': '94vh',
'top': '3vh',
'left': '3vw',
'background-size': 'auto 100%'
}, 500);
$(".again").fadeIn();
});
$('.again').click(function() {
location.reload();
});
*{
margin:0;
padding:0;
}
.item{
background:#a0a0a0;
width:50%;
height:100px;
position: absolute;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
background-image:url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
.again{
display:none;
position:absolute;
bottom:20px;
width:100px;
left:calc(50% - 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<button class="again">Again</button>
Why not use CSS transitions combined with a class instead of jQuery animate() ?
Here I use the class .big to toggle your CSS rules. I also added transition: all .5s; on your .item to enable transitions.
$(".item").click(function() {
$(this).toggleClass('big');
});
* {
margin: 0;
padding: 0;
}
.item {
background: #a0a0a0;
width: 50%;
height: 100px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
overflow: hidden;
background-image: url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
transition: all .5s;
}
.item.big {
width: 94vw;
height: 94vh;
top: 3vh;
left: 3vw;
background-size: auto 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
Related
I want a css option for this
currently i am using this css classes
.a{
top:-102px;
height: 140px !important;
}
.b{
top:0px;
height: 240px !important;
}
but this is opening the div from top to bottom and i want it to open from bottom to top
can Anyone please help its very important
thanks in advance
You need to wrap your div in another div
Give the parent div position:relative
Give the child div position:absolute
Anchor the child div using bottom:0
Demo 1 uses minimal JavaScript:
classList.toggle()
Demo 2 uses only CSS:
<label> and <input type='checkbox'> needed for "trigger"
Demo 1 (Plain JavaScript)
var x = document.querySelector('.x');
x.addEventListener('click', function(e) {
this.classList.toggle('b');
});
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
.b {
height: 240px;
transition: height .5s ease;
}
<div class='y'>
<div class='x'>Click the Red</div>
</div>
Demo 2 (Pure CSS)
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
#chx {
display: none
}
#chx:checked+.y .x {
height: 240px;
transition: height .5s ease;
}
<input id='chx' type='checkbox'>
<div class='y'>
<label for='chx'>
<div class='x'>Click on the Red</div>
</label>
</div>
why don't you try something like this?
.b{
top:0px;
height: 240px !important;
display:hidden;
}
and with jquery
$('.a').click(function(){
$('.b').show('fast');
})
You can put one div inside the main div. And give it overflow: hidden;
HTML
<div class='main_div'>
<div class='overlay_div'>
</div>
</div>
CSS
.main_div{
height: 240px;
}
.overlay_div{
height: 140px;
overflow: hidden;
}
Javascript
$('.overlay_div').click(function(){
$('.overlay_div').css({'overflow': 'visible'});
});
Please check below solution. I hope this will help you.
$('.a').click(function(){
$(this).toggleClass('b');
})
.a{
position:absolute;
top:100px;
height: 50px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
.b{
top:0px;
height: 150px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Hello World!</div>
You can't handle click with CSS. you must add JavaScript for this.
I have made a sample code for hover
Here it's
<div class="wrapper">
<div class="face">Face</div>
<div class="back">Back</div>
</div>
And styling
.wrapper {
border: 1px solid red;
height: 100px;
width: 100px;
overflow: hidden;
}
.wrapper:hover .face {
margin-top: -100%;
}
.face, .back {
height: 100%;
transition: margin ease 0.2s;
}
.face {
background-color: yellow;
}
.back {
background-color: orange;
}
Here's the a CodePen for you:
https://codepen.io/AbuMuslim/pen/GvEwYz
You can use JS as following:
document
.querySelector('.wrapper')
.addEventListener('click', function() {
this.classList.toggle('active');
});
And instead of using hover selector, we change to .active, as following:
.wrapper.active .face {
margin-top: -100%;
}
Here's a CodePen for that: https://codepen.io/AbuMuslim/pen/QMgJVw
I have a rectangle with class .box and inside it, I have a button with class .btn. I need to make an effect in such a way that when I click on the button the rectangle should split in 2 from the center and one division should move to left and other division should move to the right. How do I do it using jquery or javascript? Or is there any way to do it without using jquery or javascript?
this is my HTML:
<div class="box">
<button class"btn"> click </button>
</div>
and this is my CSS:
.box{
width:500px;
height:500px;
background-color:royalblue;
}
You cannot split HTML element. However, you can add other elements to it, if all you want to achieve is some visual effect. And upon clicking your .btn, you can toggleClass() on them, so their width decreases. Combined with css transition property, it will be animated.
See my fiddle
You could make two div's. I don't think it's possible with one:
$('.btn').on('click', function() {
$('#left').animate({
left: '-100%'
}, 2000);
$('#right').animate({
right: '-100%'
}, 2000);
});
.container {
font-size: 0;
position: relative;
text-align: center;
display: inline-block;
width: 100%;
overflow: hidden;
}
.btn{
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
height:30px;
width: 100px;
}
#left,
#right {
background-color:royalblue;
width: 50%;
height: 100px;
position: relative;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<button class="btn">click</button>
<div id="left"></div>
<div id="right"></div>
</div>
You could have some fun with pseudo elements ... and no script
.container {
position: relative;
text-align: center;
height: 200px;
line-height: 200px;
}
input {
display: none
}
.btn{
position: relative;
display: inline-block;
height: 40px;
width: 100px;
line-height: 40px;
z-index: 1;
background: lightgray;
}
.container::before,
.container::after {
content: '';
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: blue;
transition: width 1s;
}
.container::before {
left: 0;
}
.container::after {
right: 0;
}
input:checked + .container::before,
input:checked + .container::after {
transition: width 1s;
width: 0;
}
input:checked + .container label {
transition: opacity 1s;
opacity: 0.3;
}
<input id="inp_btn" type="checkbox">
<div class='container'>
<label for="inp_btn" class="btn">click</label>
</div>
Here's one approach in jQuery starting with the html you presented in your question and then adding... a sprinkling of .clone(), a lot of .css() and a dash of .animate():
$(document).ready(function(){
$('button').click(function() {
$('.box button').remove();
$('.box').clone().appendTo('.box').attr('class','halfbox left');
$('.left').css({'position': 'absolute', 'display': 'block', 'top': '0', 'left': '0', 'width': '250px', 'height': '500px', 'backgroundColor': 'royalblue'});
$('.left').clone().appendTo('.box').attr('class','halfbox right');
$('.right').css({'left': 'auto', 'right': '0'});
$('.box').css('backgroundColor', 'transparent');
$('.left').animate({left: '-300px'}, 800);
$('.right').animate({right: '-300px'}, 800);
});
});
.box {
position: relative;
display: block;
margin: 24px auto;
width: 500px;
height: 500px;
background-color: royalblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<button type="button"> click </button>
</div>
What I'm trying to achieve is on hover over the image, display the hover div over the image; I created this JsFiddle but I don't exactly know how to achieve what I'm trying to do.
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
}
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div class="hover"></div>
<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>
.img:hover #hover{
display:block;
}
#hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
position:absolute;
left:0;
top:0;
display:none;
}
Working fiddle
https://jsfiddle.net/kcdued0s/3/
Try like this
.hover:hover {
opacity:1;
}
I'd wrap it in a containing div(hoverwrap) that's relatively positioned.
It just needs the attribute, so the child element that are positioned absolute will take that as an anchor instead of the document.
Then set your width parameter on the wrapper, and have the child elements width 100% so it will always fill up the size of the wrapper.
Then have the image hide by default, and only show on hover.(done with the display:none value and display:inline-block
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
background-size: contain;
opacity: 0.7;
}
.hoverwrap {
position: relative;
}
.hoverwrap img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.hoverwrap .hover {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: none;
}
.hoverwrap:hover .hover {
display: inline-block;
}
<div class="hoverwrap" style="width:75px;height:75px">
<img src="http://i.imgur.com/QQzdPIF.jpg" />
<div class="hover"></div>
</div>
You can do this with CSS
<div>
<img ... />
<div class="hover"></div>
</div>
.hover{
...
display:none;
position:absolute;
top:0;
left:0;
}
img:hover .hover {
display:block;
}
Use position absolute for hover image
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
display: none;
position: absolute;
top : 0;
left: 0;
}
img:hover ~ .hover {
display:block;
}
I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});
Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.
How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}
Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/
Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other