I am encountering a bizarre behavior. I have simple blocks that contains a hidden overflow. A hoover event is triggered to display the hidden overflow. the hidden part has position absolute.
HTML:
<div class='container'>
<div class="edito">
<img src="https://via.placeholder.com/273x211" />
<div class="inner">
<p>Lorem ipsum dolores</p>
See more
</div>
</div>
<div class="edito">
<img src="https://via.placeholder.com/273x211" />
<div class="inner">
<p>Lorem ipsum dolores</p>
See more
</div>
</div>
<div class="edito">
<img src="https://via.placeholder.com/273x211" />
<div class="inner">
<p>Lorem ipsum dolores</p>
See more
</div>
</div>
</div>
CSS:
.edito {
width: 273px;
height: 211px;
position: relative;
border: 2px solid;
overflow:hidden;
}
.edito .inner {
position: absolute;
left: 0;
width: 100%;
height: 195px;
transition: top 0.8s ease;
top: calc(100% - 50px);
}
.edito:hover .inner {
background-color: purple;
top: calc(100% - 150px);
}
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
img {
position:relative;
}
Now when someone (with accessibility issue for e.g) tries to press tab to navigate between these blocks, the style is broken.
You can see this here:
jsfiddle.net/0ubqwfxc
Try to press tab to navigate to the third block; the style of first ones is broken.
Why this happens and how to fix it?
Thank you
It breaks because when the user clicks tab it selects the link and the link automatically goes up. To stop them from focusing on a link with tab simply add the attribute tabindex="-1" to your <a> tag like this See more Working example: https://codepen.io/Ajjarindahouse/pen/qBbjERM
I managed to solve this by handling selector focus-within like this:
.edito:focus-within .inner {
top: calc(100% - 195px);
transition: top 0s ease;
}
Can be tested here: http://jsfiddle.net/tzfoc0sr/
Related
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>
First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>
It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.
z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>
For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/