Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to make a site that uses a "grid" that looks just like the one on www.uve.info/en/ (middle of the page, under "Services") and has the same effect while hovering.
I've made divs with classes "black-cell", "grey-cell" and "white-cell" and ordered them the same way they did. White cells have a negative z-index and are moved left (odd rows) or right (even rows) by 33%. That way, they stay invisible under grey or black cells.
It's easy to get the desired result on odd rows:
.grey-cell:hover + .odd
visibility: visible
right: 0
, but the problem arises when I try to do the same thing with white cells in even rows because the HTML structure is different (white cell - black cell - grey cell) and I can't target the previous div.
Unfortunately, I can't use flexbox to change the order of elements due to some reasons that are not important for this topic. I've tried using jquery function "insertBefore", but it changes the HTML structure and doesn't help here.
So, is there a way to change the order of the elements without flexbox, OR to target the previous div with CSS/SASS?
In the site you're refering to, the structure seems to be the same for the two types of effects (move to the left & move to the right).
<div class="item [...]">
<div class="col [...]">[...]</div>
<div class="col [...]">[...]</div>
<div class="col-hover">[...]</div>
</div>
Actually, you can see that for the "Cycle hire" effect (2nd one), there is another "indent" class for the main container of the row (class "item").
<div class="item indent [...]">[same structure as above]</div>
It looks like this class is driving the animation to the left when it's written.
Then, if you take the element having class "col-hover", it's displayed "absolute" and positioned at left:50% inside the class "item".
.item .col-hover {
left: 50%;
}
But, for "item" and "indent", it's overwritten to be at left: 0.
That way, the element is positioned under the central block, which is the second for a transition to the right, and the first for moving to the left.
So when "item" is hovered, "col-hover" goes to the right :
.item:hover col-hover {
left: 100%;
}
But if the element which has the "item" class also has "indent" class, then the "col-hover" goes to left:-50% (to the left)
.item:hover.indent .col-hover {
left: -50%;
}
So you can keep the same structure and play with absolute position for the element you want to move.
I suppose you have noted the transition on "col-hover" for the animation, changing the left property making the element moving.
Hope this helps !
Please mind the code its a little dirty clean it but it works like you want.
<html>
<head>
<style type="text/css">
.box
{
width:200px;
height:200px;
background:rgba(0,0,0,120);
margin:0 auto;
color:White;
}
.big-box
{
height:200px;
width:600px;
color:White;
position:absolute;
border:1px solid black;
z-index:-1;
-webkit-transition:all 0.3s;
}
.big-box1
{
top:0px;
left:-200px;
text-align:right;
}
.big-box2
{
top:200px;
left:200px;
text-align:left;
}
.big-box > .box
{
display:inline-block;
}
.par
{
position:relative;
height:400px;
width:600px;
margin:0 auto;
border:1px solid black;
overflow:visible;
}
.b1:hover~.big-box1
{
left:0px;
}
.b2:hover~.big-box2
{
left:0px;
}
</style>
</head>
<body>
<div class="par">
<div class="box b1">One</div>
<div class="box b2">Two</div>
<div class="big-box big-box1">
<div class="box">OneC</div>
</div>
<div class="big-box big-box2">
<div class="box">TwoC</div>
</div>
</div>
</body>
</html>
Was messing around with this question for a warm up, it's not fully thought through but I'll post in case some of it helps.
fiddle
https://jsfiddle.net/Hastig/7Lb427m4/2/
css
.blocks-wrapper {
font-size: 0;
margin-bottom: 10px;
position: relative;
text-align: center;
}
.block {
display: inline-block;
height: 200px; width: 200px;
}
.hidey {
font-size: 15px;
z-index: -1;
color: red;
position: absolute;
left: 50%;
top: 50%; bottom: 50%;
transition: all 1s ease;
}
.blocks-wrapper:nth-child(odd) .block:nth-child(1) { }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) { }
.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {
left: 15%;
}
.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {
left: 75%;
}
html
<div class="blocks-wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
Have tried using the previous sibling selector ~
.grey-cell:hover ~ .even{
visibility: visible;
left: 0;
}
Related
I want to create a web page to show a list of doctors. I should call fetch to get an array of doctors with js, and then put them on my page. for instance, see this website (it is in the Persian language, but as you can guess, the middle container are doctors and there's one class for each doctor). I have two problems with styling the page when the object array is ready:
1st: How can I mimic this? I mean, while there are still doctors on the list, I want that the middle container is scrolled and left and the top container to stay right there. But when doctors are finished (at the end of the list), the user is able to scroll and see the rest of the page.
The site I want to mimic
As you can see in my webpage schematic, I want to implement the doctors div in a way that until there are more doctor classes to be seen, the doctors div will scroll. Only when the scrolling down is finished the user is able to scroll down to the next section, or vice versa, when he wants to scroll up, he should be able to do so when he has scrolled up to the top to see the previous section.
My second issue is a minor one. I'm not sure How to set the height of the doctors div because there could be an unknown number of doctors classes (each for one doctor) so the solution must also handle the unknown number of items to be placed in the doctors div (only after I fetched the doctors using the API would I be able to know the number of items to put in the doctors div)
Thanks.
I looked at the website you shared. You can do something like this.
Link: https://codepen.io/en0ndev/pen/RwGOgMX
header {
text-align:center;
padding:5pt;
background:black;
color:#fff;
}
footer {
text-align:center;
padding:5pt;
background:black;
color:#fff;
}
.main-div {
display:flex;
}
.left-div {
flex: 0 0 50%;
max-width:50%;
background:red;
display:inline-block;
max-height:200px;
overflow-y:scroll;
}
.right-div {
flex: 0 0 50%;
max-width:50%;
background:blue;
display:inline-block;
height:200px;
}
.doctor {
display:block;
color:white;
padding:5pt;
}
.menu {
display:block;
color:white;
padding:5pt;
}
<header>
Header
</header>
<div class="main-div">
<div class="left-div">
<div class="doctor">Doctor1</div>
<div class="doctor">Doctor2</div>
<div class="doctor">Doctor3</div>
<div class="doctor">Doctor4</div>
<div class="doctor">Doctor5</div>
<div class="doctor">Doctor6</div>
<div class="doctor">Doctor7</div>
<div class="doctor">Doctor8</div>
<div class="doctor">Doctor9</div>
<div class="doctor">Doctor10</div>
</div>
<div class="right-div">
<div class="menu">Menu1</div>
<div class="menu">Menu2</div>
<div class="menu">Menu3</div>
<div class="menu">Menu4</div>
<div class="menu">Menu5</div>
<div class="menu">Menu6</div>
</div>
</div>
<footer>
Footer
</footer>
It's not a perfect clean code but it'll give you the idea of how to do it. in your provided example the side column has a sticky position with a top:0; which stops it from scrolling while the rest of the page is scrollable. so i tried to make something like that as a simple how to.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background-color: #333;
height: 70rem;
width: 20rem;
}
.top {
background-color: yellow;
width: 100%;
height: 5rem;
}
.doctors {
display: inline-block;
background-color: green;
width: 80%;
height: 30rem;
}
.right-col {
float: right;
position: sticky;
top: 0;
display: inline-block;
background-color: red;
width: 20%;
height: 10rem;
}
<main>
<div>
<nav class="top"></nav>
<section class="doctors"></section>
<aside class="right-col"></aside>
</div>
</main>
Much easier to explain with an image (see below).
https://www.dropbox.com/s/2a19vv7pooop0r3/stack.jpg
I'd like to make an interactive carousel by displaying 4 images.
Each image takes up 25% of space horizontally, but on rollover, expands to show the majority of the image. None of the images should translate in any way, just have their masks adjusted.
Reason:
I've got 4 renders of a 3D model (wireframe, solid, textured, rendered).
I'd like to be able to see more/less of each one by hovering over them.
Edit:
Video explains it perfectly:
https://www.dropbox.com/s/g3mq15mlf560q68/example.mov
Implemented what I think you're looking for using a flexbox. Im sure you might need to tweak it a bit, but it might be what you're looking for.
http://jsbin.com/wocolukiyido
Editable:
http://jsbin.com/wocolukiyido/1/edit?css,output
HTML:
<div class='border'>
<div class='grid'>
<div class='img1'></div>
<div class='img2'></div>
<div class='img3'></div>
<div class='img4'></div>
</div>
</div>
CSS:
.border {
border: 1px solid black;
width: 960px;
}
.grid {
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.grid:hover > div {
width: 5%;
}
.grid > div:hover {
width: 90%;
}
.grid > div {
height: 100px;
width: 25%;
background-repeat: no-repeat;
}
.img1 {
background-image: url('http://fillmurray.com/960/100');
}
.img2 {
background-image: url('http://fillmurray.com/960/101');
}
.img3 {
background-image: url('http://fillmurray.com/960/102');
}
.img4 {
background-image: url('http://fillmurray.com/960/103');
}
EDIT http://jsfiddle.net/xus5zx6s/3/
Sorry it took so long. The case statement could be improved logically but it works. I had a slight error in calculating the border in version 2 so use version 3.
EDIT: http://jsfiddle.net/xus5zx6s/5/
I want to STRESS this code could be cleaned up in a much more programmatic way, but it functions as you wish.
`$('#contain div').click(function(){
var id = $(this).data('id');
$('#contain div').removeClass('active');
$(this).addClass('active');
$("#contain div:not('.active')").animate({'width':'10%'});
$(this).animate({'width':'70%'});
switch(id){
case 1:
$('#img2 img').animate({'left':'-672px'});
$('#img3 img').animate({'left':'-768px'});
$('#img4 img').animate({'left':'-864px'});
break;
case 2:
$('#img2 img').animate({'left':'-96px'});
$('#img3 img').animate({'left':'-768px'});
$('#img4 img').animate({'left':'-864px'});
break;
case 3:
$('#img2 img').animate({'left':'-96px'});
$('#img3 img').animate({'left':'-192px'});
$('#img4 img').animate({'left':'-864px'});
break;
case 4:
$('#img2 img').animate({'left':'-96px'});
$('#img3 img').animate({'left':'-192px'});
$('#img4 img').animate({'left':'-288px'});
break;
}
});`
Here's a html/css3 method that simulates what you want. Percent size is reduced a bit because of the spacing between divs, but should get the point across.
http://jsfiddle.net/biz79/51625mom/
HTML
<div id='container'>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
</div>
CSS
* {
padding: 0px;
margin: 0px;
transition: width 200ms ease-in-out;
/* edit the time 200ms to change transition speed */
}
#container {
width:960px;
}
#container div {
width:24%;
height:200px;
display:inline-block;
overflow:hidden;
}
#container:hover div {
width:10%;
}
#container div:hover {
width:68%;
}
I have an idea for my personal website layout. I'd like stacked menu items on the left side (with like 10% width) and content on the right side. By 'vertical abacus' (the original calculator with beads on a rod), I'd like menu items to appear as boxes of varying colors with a set height for each box. Because they're a set height, there will be a large portion of empty space (colored depending on what menu you select).
Utilizing the new HTML5/CSS3, I'd like to know how I'd go about creating the menu so that when you select an item, that particular item (and the items above it) slide up and stack to the top, while changing the color of the empty space below it according to the color of the respective menu item. When a menu item that is stacked at the top is selected, the items stacked below it will move back down to their original position.
First visit to the website:
After clicking 'Page2':
(I'm such an excellent MSPaint artist, I know.)
Did I lose anyone yet? :)
Would I have to tweak this process with Javascript?
I'm not asking someone to code it for me (though obviously welcome), I just have no idea where to start since W3Schools.com is frowned upon and I have an amateur knowledge of the new features in HTML5/CSS3. Would something as seemingly simple as this be difficult to begin with?
Any help is greatly appreciated! :)
Create a Fiddle for you:
http://jsfiddle.net/M8bQH/
Please adapt Width/Height and colors to your needs!
HTML:
<div id="container">
<div id="sideBar">
<ul id="myMenu">
<li class="topic1 activeItem">Home</li>
<li class="topic2">Page 2</li>
<li class="topic3">Page 3</li>
</ul>
</div>
<div class="mainContent activeContent">
Content1
</div>
<div class="mainContent">
Content2
</div>
<div class="mainContent">
Content3
</div>
</div>
JavaScript (jQuery needed!)
$('#myMenu li').click(function(){
// Set active menu item
$('#myMenu li').removeClass('activeItem');
$(this).addClass('activeItem');
// Set active content according to item
$('.mainContent').removeClass('activeContent');
$('.mainContent').eq($(this).index()).addClass('activeContent');
// Adapt background color of content according to item
$('.mainContent.activeContent').css('background-color', $(this).css('background-color'));
});
CSS:
#container {
width: 800px;
height: 600px;
}
#myMenu {
list-style-type:none;
padding: 0;
margin: 0;
}
#myMenu li {
width: 100px;
height:48px;
border-bottom: 5px solid black;
-webkit-transition: height linear 0.5s; /* For Safari 3.1 to 6.0 */
transition: height linear 0.5s;
}
#myMenu li:last-child {
border-bottom: 0px;
}
#sideBar {
width: 100px;
height: 600px;
float:left;
border-right: 5px solid black;
}
.mainContent {
width: 700px;
height: 100%;
background-color: gray;
display: none;
}
.topic1 {
background-color: gray;
}
.topic2 {
background-color: #33CCFF;
}
.topic3 {
background-color: #99FF00;
}
.activeItem {
height: 494px !important;
}
.activeContent {
display: block !important;
}
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>