Develop Reference

CSS only scroll middle container while there are still items in it

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>

On button click show information sliding up and pushing the button upwards using jQuery

I have a foreach loop which displays a list of items using relative and absolute positioning, and on the bottom I would like to add a button (which is at the bottom of the container), which when pressed, shows/hides the given information, pushing the button with itself. I've looked at a couple of stackoverflow questions which had basically the same problem, but I couldn't find a solution which would work in my case.
Here are the codes for the problem (since I've tried a couple solutions, the style positions might not be logical, if you see anything weird please let me know):
The view:
<ul class="events>
#foreach (var events in Model)
{
//absolute positioned div-s
<li>
<div class="eventActions">
<button class="toggleBet">Place bet</button>
#Html.ActionLink("Event details", "Details", "Event", new { eventId = events.Id }, null)
<div class="betContent">#Html.Partial("_BetPartial", new BetViewModel(events))</div>
</div>
</li>
</ul>
The styles:
.events > li .eventActions {
position: absolute;
bottom: 0;
right: 0;
font-size: 24px;
height: 200px;
}
.events > li .toggleBet {
display: inline-block;
}
.events > li .betContent {
background-color: green;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.events > li .eventActions.open .betContent {
max-height: 300px;
}
The jQuery:
$(".toggleBet").on("click",function(e) {
$(this.parentNode).toggleClass("open");
});
Here is a fiddle which shows what I would like to achieve: http://jsfiddle.net/yeyene/fpPJz/3/ (credits to user yeyene, from this question)
And here is the picture of my project so far (I would like to extend the list items height, move the links lower and make them move up when clicked)
Thank you in advance!

I would suggest forgetting about the .slideToggle method and just using a CSS class on the parent container, then use the max-height property to toggle between open and closed (or just height if you already know exactly how big the container should be when opened).
Here's a simple fiddle showing how you can do this with "pure" CSS by just adding a class to a container: https://jsfiddle.net/8ea3drce/
For good measure, below is the code used in the above JS fiddle:
HTML
<div class="container">
<a class="trigger">Trigger</a>
<ol class="content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
CSS
.container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.container .trigger {
display: inline-block;
background-color: red;
color: white;
cursor: pointer;
padding: 1em;
}
.container .content {
background-color: lightblue;
margin: 0;
max-height: 0; // This suppresses the element's height.
overflow: hidden; // This keeps internal elements from being visible when height is suppressed.
transition: max-height .5s; // This animates the motion when max-height is released. This isn't usually perfect. The closer max-height comes to be with the actual height of the element, the better. Fixed heights might be ideal.
}
.container.open .content {
max-height: 300px; // This releases the element's height to be as large as it would naturally be, up to 500px.
}
Javascript/jQuery
$('.trigger').on('click', function(e) {
$(this.parentNode).toggleClass('open');
})

Using the idea of classtoggling as shown in Dom's answer, setting the absolute position's anchors correctly and deleting the interfering height attribute solved the problem!

Marquee-like horizontal scroll without scrollbars?

I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.
The code in this example renders this:
Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.
Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).
So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?
Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?
The example code is:
.mainHolder {
font-size: 14px;
border: 2px solid #999;
text-align: center; /* centers the span */
}
.centerer {
border: 2px solid #555;
display: inline-block; /* makes the span have the same width as its div contents*/
margin: 0;
padding: 0;
}
.myBox {
width: 8em;
border: 2px solid #F55;
border-radius: 0.5em;
display: inline-block; /* enables two myBox side-by-side */
}
.heading {
height: 1.25em;
border-radius: 0.25em;
background-color: #94B6F7;
overflow: hidden;
overflow-x: scroll;
}
/*just as example, remove the scroller of box2*/
#box2 .heading {
overflow-x: hidden;
}
<div class="mainHolder">
<span class="centerer">
<div id="box1" class="myBox">
<div class="heading">
My very long title
</div>
<div class="data">
Data: 1
</div>
</div>
<div id="box2" class="myBox">
<div class="heading">
My even longer title
</div>
<div class="data">
Data: 2
</div>
</div>
</span>
</div>

CSS move element when hovering on previous div [closed]

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;
}

How to stick two unrelated elements together?

I'm working on an interface and I require something that would stick two unrelated elements together. Well, the most important element will be the "boss" and the other element called "employee" will follow the "boss" around and will change it's position accordingly.
This is the markup:
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
This is the jQuery I wrote:
$('.boss').each(function( i, obj ){
var Pos = $(this).position();
var ModuleWidth = $(this).outerWidth();
$(this).next('.employee').position({
my: 'right top',
at: 'right top',
of: $(this)
});
});
So I'm iterating through all the .boss classes and aligning all .employees to the right top of boss. They are supposed to always stick. But if I edit the html from the boss within chrome Developer Tools the .boss element will become smaller and larger and the .employee will not re-position its self accordingly. I would like to make .employee always reposition its self.
Later Update:
This http://screencast.com/t/F0RO7ODF is the kind of behavior i'm looking for. The gray box is the BOSS and the orange box is the EMPLOYEE. These 2 element's have a wrapper and i'm actually moving the wrapper. But i'd like a solution without a wrapper. Note: The organge box's position is irelevant.

I know this has been answered already, but here is an alternative which does not use any hierarchy between the two elements (even though that might not be the best practice):
HTML:
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
JS:
$.fn.invisible = function() {
return this.css("visibility", "hidden");
};
$.fn.visible = function() {
return this.css("visibility", "visible");
};
$(".boss").draggable({
stop:function(e) {
var employee_horizontal_position= $(this).offset().left+$(this).width();
var employee_vertical_position= $(this).offset().top-$(this).height();
$(this).next().visible();
$(this).next().offset({top: employee_vertical_position, left: employee_horizontal_position});
}
});
$(".boss").on("drag", function(e){
$(this).next().invisible();
});
CSS:
.boss{
height: 100px;
width: 300px;
background-color: grey;
float:left;
margin-top:100px;
}
.boss:hover{
cursor:pointer;
}
.employee{
height: 300px;
width: 100px;
background-color: orange;
float:left;
}
JSFIDDLE EXAMPLE: http://jsfiddle.net/ktxo4f6s/2/
I tried to make the employee hidden while the boss is being dragged as shown in your screencast.

n general when wanting elements to be in relation with each other they should be grouped together within an element.
To represent hierarchies it is best to also develop your html to honor the hierarchy you wish to represent.
This will force the behavior as you displayed in the video when moving the boss element.
For this particular example it may also be expanded upon with departments or roles.
See JSFiddle for example: http://jsfiddle.net/9dw5dvqw/
Updated: http://jsfiddle.net/en85bm9h/
HTML
<ul class="bosses">
<li class="boss">
<span class="boss-name"></span>
<ul class="employees">
<li class="employee">
<span class="employee-name"></span>
</li>
<li class="employee">
<span class="employee-name"></span>
</li>
</ul>
</li>
<li class="boss">
<span class="boss-name"></span>
<ul class="employees">
<li class="employee">
<span class="employee-name"></span>
</li>
<li class="employee">
<span class="employee-name"></span>
</li>
</ul>
</li>
</ul>
CSS
*{ margin: 0; padding: 0; }
body,
html{ height: 100%; }
ul{ list-style: none; overflow: hidden; float: left; }
li{ overflow: hidden; }
.bosses{ width: 100%; height: 100%; }
.boss{ margin: 20px 5px 20px 0; float: left; }
.boss-name{ display: block; background-color: #eee; float: left; width: 120px; height: 80px; cursor: move; }
.employees{ float: left; width: 50px; height: 120px; background-color: red; }