I want to scale the size of a div when it's hovered over to give a more detailed view of it's content.
I had two ideas on how to do it, firstly have an onHover that when hovered shows an absolute positioned div that is perhaps 125%-130% bigger than the relative div and place it on top. (I kind of like this idea as it allows me to make the new div have different content to the one underneath)
The other idea would simply be to scale the original div using transform. I don't really want to do this though as the div thats "popping over" is a more detailed version of the underlying content.
I can do that no problem, however the part I'm getting stuck with (and can't seem to find an answer for), is to scale the div in a certain direction based on where it is located in a container row.
I created an image describing it below.
The default behaviour would be something like:
as you can see, the default behaviour is that when we scale we are aligned to the left and the extra width will go outwards to the right and the extra height will go downwards
The issue with this is, on the far right, the div that scaled has done so, but because of its position/direction, it's now gone off and to the right (outside the container).
Likewise, I'd like for the 2 centre divs to scale from the centre rather than from left to right.
Just to note, not all divs will be expanded at once, but I highlighted it that way just for the purpose of this question.
The desired result that I would like (showing all expanded), would be something like:
obviously this is kind of hard to see with them all expanded, but if I show a centre div being expanded only:
and then the right most
So what is the difference?
Firstly, each div is vertically centred based on it's relative container (that's easy to do), but the part that I'm stuck with is how to tell the centre divs to expand from the centre both vertically and horizontally, but then tell the leftmost and rightmost divs, expand from centre vertically but horizontally go left to right or right to left etc.
In the last image above, the div knows that it is on the far right of the container and shouldn't expand the default way because it would overflow out of the container, so instead it expands inwards.
Is this possible with CSS only? Or is it a combination of CSS and JS.
I hope that makes sense!
Is this the sort of thing you're looking for? The bigbox div is a child of the small box and I've absolutely positioned it then used a bunch of utility classes to position the child div. Should be fairly self-explanatory but drop me a comment and I'll elaborate further.
* {
box-sizing: border-box;
}
.smallbox {
--offset: 0.5rem;
position: relative;
display: inline-block;
aspect-ratio: 2/1;
background-color: #dae8fc;
border: 1px solid #6c8ebf;
padding: 0.5rem;
margin: 1rem;
}
.bigbox {
font-size: 1.25rem;
position: absolute;
padding: 0.5rem;
background-color: #d5e8d4;
border: 1px solid #82b366;
width: 150%;
aspect-ratio: 2/1;
opacity: 0;
z-index: 1;
}
.smallbox:hover .bigbox {
opacity: 1;
}
.left {
left: calc(-1 * var(--offset));
}
.right {
right: calc(-1 * var(--offset));
}
.top {
top: calc(-1 * var(--offset));
}
.center {
left: 50%;
translate: -50%;
}
.middle {
top: 50%;
translate: 0 -50%;
}
.bottom {
bottom: calc(-1 * var(--offset));
}
.center.middle {
top: 50%;
left: 50%;
translate: -50% -50%;
}
<div class='smallbox'>
Some content
<div class='bigbox left top'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox center top'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox right top'>
Some content (but bigger!)
</div>
</div>
<br><br>
<div class='smallbox'>
Some content
<div class='bigbox left middle'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox center middle'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox right middle'>
Some content (but bigger!)
</div>
</div>
<br> <br>
<div class='smallbox'>
Some content
<div class='bigbox bottom left'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox bottom center'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox bottom right'>
Some content (but bigger!)
</div>
</div>
Related
Im working on a spot the difference game.
So far I have an image with a difference shown by a red circle for testing.
I also have a dot (a button currently blue for testing but transparent for final) which will be what the user clicks on to get the difference.
I need help getting the dot to stay within the red circle when the browser window is resized.
Here is a link to my JSFIDDLE and the code is below
CSS:
.position001{position:relative}.block001{position:absolute;top:50px;left:673px;background-color:#7fffd4;border-radius:50%}.button001{background-color:transparent;border:1px solid transparent;width:45px;height:42px}.hide001{outline:0;border:none}
HTML
<div class="position001">
<div id="board001">
<button class="hide001" onclick="incorrect001()">
<img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
</button>
<div class="block001">
<div id="disappear001">
<button class="button001" onclick="correct001()"></button>
</div>
</div>
</div>
</div>
This may help you to get going!
You have to use the height and width in vw since the screen changes and the size of the circle should also align with the view port.
Second, you can use Media query however I don't think that is a feasible option for you unless you're very good at handling media query when screen resolution changes, instead as suggested in my answer you can use vw for height, width and place another circle correctly, rest the property will take care of it.
.position001 {
position: relative;
}
.block001 {
position: absolute;
background-color: aquamarine;
border-radius: 50%;
top: 9.2%;
left: 61.4%;
width: 5vw;
height: 5vw;
}
.button001 {
background-color: transparent;
border: 1px solid transparent;
width: 45px;
height: 42px;
}
.hide001 {
border: none;
outline: none;
}
<div class="position001">
<div id="board001">
<button class="hide001" onclick="incorrect001()">
<img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
</button>
<div class="block001">
<div id="disappear001">
<button class="button001" onclick="correct001()"></button>
</div>
</div>
</div>
</div>
You should put the blue dot and red circle under a div element. Then let the div's position be relative, and the dot and circle's position absolute And you can then position the div in order to position both the red circle and the blue dot. They will always be in the same area, above each other.
This is because the absolute position will make an elements position at 0, 0 regardless if there is another element there, or even 100 elements. But because absolute position can be modified if the element is under a relatively-positioned element, we can take advantage of that to easily position both the dot and the circle, and place them on top of each other.
Graphical demonstrations in here: https://css-tricks.com/how-to-stack-elements-in-css/
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>
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I'm trying to position a fixed element WITHIN a div (not the whole page) in my website.
I want the navigation (deadspin, gawer, awl, other) to be fixed within the writing section so that even when user scrolls, the nav is still there. But currently it's fixed for the whole page.
As you can see on my test page, the navigation is fixed the way I want it to be.
I tried messing around with position:relative/position:fixed for the #small-box-links but that doesn't help.
.home_writing {
display: block;
position: relative;
background: rgba(50, 50, 50, 0);
height: 1000px;
text-align: left;
}
#small-box-container {
border: 1px solid black;
background: rgba(10, 200, 10, 0);
width: 980px;
height: 800px;
overflow: auto;
}
#small-box-links {
position: relative;
margin-left: 700px;
height: 25px;
margin-top: 10px;
}
<div id="small-box-container">
<div id="small-box-links">
deadspin |
gawker |
the awl |
other
</div>
<div style='overflow:hidden; width:980px;'>
<div style='overflow:scroll; width:988px'>
<div id="small-box1" class="small-box">
<h2>deadspin</h2>
<h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3>
<!-- etc. for other boxes -->
I found this related question and yet when I try top / left, etc., the element is still fixed to the page, not writing div. (I tried making the parent element, .home_writing, relative but this doesn't fix my issue.)
(On another note, I can't figure out why my Playfair in the paragraphs doesn't look like the sidebar navigation. It's styled the same way).
position:fixed always uses the viewport as the frame of reference, so you can’t use that here.
But the solution is rather simple - use position:absolute instead to position the navigation inside a container element that has position:relative (and a fixed height), and then have the content as a sibling inside that container as well, with fixed height and overflow:auto for that element:
<div style="position:relative; height:800px;">
<div style="position:absolute; top:0; …"> [link link link] </div>
<div style="height:800px; overflow:auto;">
Lorem ipsum, dolor sit …
</div>
</div>