JS/CSS: Animating a circle expanding out from another circle - javascript

I would like to get a circle to expand from itself, while keeping the original circle. What I want is something like when you hover over the circles (e.g. water) on this page (click lets get started to see the circles). I'm not sure how to do this. Note that my knowledge of jQuery is quite small, so if you find a way to do this with jQuery, can you try to keep it simple? Thanks in advance. The earlier the better, as this is for a school project.
I tried to make the div have a function for onmouseover, but then I don't know how to get the rest. I was thinking about while the div animates from a smaller width and height, to move the circle, but the circle will still expand from the middle, and not the old circle.

Start with a CSS-only setup, then see if you actually need Javascript at all. This will generally always be more responsive/faster-loading. However, if you're already loading a JS library and it has functions built for this (like jQuery), then sure make use of them. There are plenty of tutorials for animating elements, CSS or JS.
Play around with numbers and styling as you wish.
Codepen
#container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
.circle:before {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
z-index: -1;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 0.5s ease-in-out;
}
.circle:hover:before {
transform: scale(1.7) translate(-20%,-30%);
background-color: pink;
}
<div id="container">
<div class="circle red"> </div>
</div>

Related

Trouble with v-for="product in products"

First of all, I'm sorry for my english, not my maternal language. Secondly, there is my github : https://github.com/CapitaineBarbarossa/test-carousel
So, my problem is that I want to make a dynamic carousel so I use v for= product in product. As you can see, no image appears but when you press F12 to inspect, all appear and all is good and stay good if you leave the dev tool. But if you refresh the page, the images disappears again. And I really don't know how to fix this issue.
With my gratitude, I wish you a good day!
I tried to make a dynamic carousel but the images don't appear like they should.
I checked your code. That is not a vue issue. That is a CSS issue. All carousel div's width & height is zero because you used position absolute property.
.carousel__body .carousel__slider__item .item__3d-frame {
position: relative;
width: 300px;
height: 200px;
transition: transform 1s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carousel__body .carousel__slider__item .item__3d-frame__box {
display: flex;
align-items: center;
vertical-align: middle;
text-align: center;
position: absolute;
box-sizing: border-box;
border-color: var(--box-border);
background: var(--box-bg);
border-width: 3px;
border-style: solid;
}
.contain {
width: 300px;
height: 200px;
position: relative;
}

HTML & CSS Tooltip Keeping On Screen

I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20

Changing the values of object.style.alignSelf

Let's say I have a function that changes the Align Self css property via JS.
HTML
<img id= "arrow" src="/images/leftarrow.svg">
CSS
.container {
background-color: $white;
box-shadow: 2px 0px 4px 1px black;
width: 400px;
height: 100vh;
display: flex;
flex-direction: column;
visibility: visible;
position: relative;
z-index: 2;
}
#arrow {
height: 25px;
width: 25px;
position: absolute;
align-self: flex-end;
top: 50vh;
cursor: pointer;
background-color: $white;
border-radius: 50%;
}
JS
function reverseIcon () {
arrow.style.alignSelf = "flex-start";
}
arrow.addEventListener("click", reverseIcon);
Javascript doesn't seem to change the align self property straight away. When I click, it does not change. I jumped into devTools to see what was wrong and it was applied when there was a change in the screen(?). I have no media queries. I tried this on 3 different browsers but AlignSelf doesn't seem to show up on the screen right away. It only actually changes as soon as I jump into devtools or like change the size of the screen. Anyone know why?
**Nevermind, Seems like only Chrome isn't responding to it. Still don't understand what part of this code isn't compatible with Chrome then
Are you sure the alignSelf property gets applied when you change your screen size?
Or is it just the default bahavior? In Dev-Tools, if you inspect, do you see the style-attribute at your image element? If yes, than it could be that your #arrow selector overrides it. If that's the case, I would try to toggle between a class where you can use the !important rule to override the property. Like so:
.flex-start{
align-self: flex-start !important;
}

How to make the progress bar with html css javascript

How to make the progress bar Like the image below
I think the easiest way would be to use something like:
css:
.progress
{
position:relative;
width: 100px;
height: 100px;
}
.progressUnder
{
position: absolute;
width: 100%;
height: 100%;
background-image: url('backgroundUnder.jpg');
}
.progressOver
{
position: absolute;
width: 100%;
height: 0%;
background-image: url('backgroundOver.jpg');
}
.progressPercent
{
position:absolute;
top: 40px;
width: 100%;
text-align: center;
}
and html:
<div class='progress'>
<div class='progressUnder'/>
<div class='progressOver' />
<div class='progressPercent'>0%</div>
</div>
and then use javascript to animate the percent height of div.progressOver, as well as the .progressPercent counter.
You need to use a animation I think.
Aswell as The Molecule says. You need to use height for that color. I guess you know how an normal one works. First try to out create a circle, use the height as The Molecule explained, then you need to make the inside of the circle transparent/unneeded. As that is done the heights will be displayed in the circle. That how you do it, never done it myself tho since i dont use custom loading bars.

using element's own (not parent's) width for calculation or percentage in css, without javascript

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set negative margin values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width:
<!DOCTYPE html>
<html>
<head>
<style>
.clap {
position:relative;
margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
color:#f00
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
</center>
</body>
</html>
I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a \style command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScript code within its formulas, so you see why this must be CSS-only. I know it's possible with scripting. Is it possible with CSS, or is my endeavor hopeless?
Update: Thanks to a suggestion from #Daiwei, I think I'm on the road to the right solution. Thanks for all your answers. Here is the revised code:
.clap {
position:absolute;
display:inline-block;
transform: translate(-50%,0);
color:#f00 // for contrast
}
I'd love to show you the results, but I can't upload a picture. Sorry.
Another update: The solution I presented above works best in an HTML/CSS context, but it breaks in a MathJaX array, matrix, or similar tabular environment. Specifically, if the element is too long, it clips on the left side. Relative positioning moves the element halfway to the left but leaves a gaping space where it used to be! Any ideas for patching it up?
One pure CSS solution is to use transform.
element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Notes:
You can use top: 50%; for vertical and left: 50%; for horizontal.
You would then use translateY(-50%) for vertical and translateX(-50%) for horizontal centering.
You can also use this trick to align elements to the bottom or right of it's parent, like in a table-cell by using 100% instead of 50% in the css.
If you want to support older browsers, then you'll need to use prefixes for transform. I highly recommend autoprefixer in your workflow.
As the size of the element is only known after it has been styled, how should the style be able to use it? Imagine this: Some element has a width of 200% of it's own width (=double size than "normal") set in CSS. One of it's children has its width set to 100% of the parent (=our element). The default width of an element is determined by its content. Content's of our element are as width as the element itself. Our element has no width yet however, as we're waiting for it to get some default, so we can double that one. Result: Nothing will ever get any width.
Therefore: What you're trying to do is not possible. But CSS3 has its calc, maybe you can get closer to what you want to acheive using it?
I don't know if this is what you wanted to do, but here is a demo: http://cdpn.io/bgkDf
HTML
<div class="container">
<div id="box-left"></div>
<div id="box-overlap">
<div id="box-overlap-inner"></div>
</div>
<div id="box-right"></div>
</div>
CSS
.container > div {
height: 50px;
float: left;
}
#box-left {
width: 40%;
background-color: red;
}
#box-right {
width: 60%;
background-color: green;
}
#box-overlap {
width: 0;
}
#box-overlap-inner {
position: relative;
z-index: 10;
height: 50px;
width: 50px;
transform: translate(-50%,0);
background-color: rgba(0,0,255,.5);
}
"Using element's own width for calculation or percentage" In general:
(Maybe not the best solution for your issue, but an answer to your question)
At the moment,the attr function doesn't work in Chrome. That would have been nice.
But you can use variables, if you either set the parent attribute yourself, or are able to use a predefined one. That way you can use the calc() function to calculate your child attribute.
Here is an example, using the browser defined viewport size, to calculate the width of an element:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 33vw;
}
.clap {
display:inline-block;
width: calc(var(--module-size) / 2);
color:#f00;
border: 1px solid;
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890
<span class="clap">1234567890</span>
1234567890</span>
</center>
</body>
This can be used in many interesting ways, to streamline your CSS. For instance with the #media style...
And if someone (like me) was trying to center the element by its parent, use this simple style:
.clap {
position:absolute;
left: 50%;
transform: translate(-50%,0);
}
What about converting the content to divs and enclose each within another div to use
margin: auto
?
Example (each super div within its own colour and shifted a little in height for clarity):
<html>
<head>
<style>
.dl
{
position: absolute;
left: 0px;
top: 0px;
max-width: 50%;
width: 50%;
text-align: left;
background: red;
opacity: 0.5;
}
.dls
{
margin: auto;
}
.dc
{
position: absolute;
left: 25%;
top: 10px;
max-width: 50%;
width: 50%;
text-align: center;
background: green;
opacity: 0.5;
color: white;
}
.dcs
{
margin: auto;
}
.dr
{
position: absolute;
right: 0px;
top: 20px;
max-width: 50%;
width: 50%;
text-align: right;
background: blue;
opacity: 0.5;
color: white;
}
.drs
{
margin: auto;
}
.overall-width
{
position: absolute;
left: 0%;
width:100%;
height: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="overall-width">
<div class="dl">
<div class="dls">
1234567890
</div>
</div>
<div class="dc">
<div class="dcs">
1234567890
</div>
</div>
<div class="dr">
<div class="drs">
1234567890
</div>
</div>
</div>
</body>
</html>

Categories