Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 12 months ago.
Improve this question
If I have data like displayed on top of the image. Is it posible to make a diagran like this (picture), with pure JS, CSS and HTML? I dont know what a diagram/chart like this is called. Any help is greatly appreciated!
The most straightforward approach is to use an absolutely positioned child in a relatively positioned parent and set its width as the progress.
function setProgress(percent) {
const range = document.querySelector('.range');
const progress = range.querySelector('.progress');
progress.style.width = `${percent}%`
}
setProgress(70);
.range {
position: relative;
height: 20px;
background-color: #ed3a23;
border: 2px solid #000;
box-sizing: border-box;
overflow: hidden;
}
.progress {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: #4db24c;
border-right: 3px solid #000;
}
<div class="range">
<div class="progress"></div>
</div>
You don't need JavaScript.
Pass a CSS var() from HTML to CSS and use calc() to get the percentages
Using background linear gradient
.progress {
background: green;
height: 2em;
background: linear-gradient(to right, green calc(var(--val) * 10%), red calc(var(--val) * 10%));
background-size: 100%;
}
<div class="progress" style="--val:1"></div><br>
<div class="progress" style="--val:7"></div><br>
Using CSS pseudo element ::before
.progress {
background: red;
height: 2em;
}
.progress::before {
content: "";
display: block;
height: inherit;
background: green;
width: calc(var(--val) * 10%);
}
<div class="progress" style="--val:1"></div><br>
<div class="progress" style="--val:7"></div><br>
Here's pure HTML & CSS
.bar-wrap {
display: flex
}
.col {
display: block;
text-align:center;
width: var(--size)
}
.bar {
height: 50px;
width: 100%;
border: 3px solid #000;
background: var(--background)
}
.cgreen {
color: green
}
.cred {
color: red
}
<div class="bar-wrap">
<div class="col cgreen" style="--size:70%;">
<h3 class="heading">Correct</h3>
<div class="bar" style="--background:green"></div>
<p class="label">70%</p>
</div>
<div class="col cred" style="--size:30%;">
<h3 class="heading">Wrong</h3>
<div class="bar" style="--background:red"></div>
<p class="label">30%</p>
</div>
</div>
To meet accessibility and semantic code standards, I'd recommend having a look into the HTML <meter> element (official specification with all the attributes). Or you just have a look on HTML5 doctor to get a more compact/short conclusion.
However, keep in mind that according to caniuse.com, legacy browsers like Edge 12 and others don't support this HTML tag. So if you want to support these older browsers, that are listed there as non-supporting, you would need to come up with a fallback solution.
Rough code example for a fallback solution
<div class="meter-wrapper">
<div class="meter" style="width: 70%;">
<!-- `hidden` attribute to hide the text content but keeping the element accessible for screen readers. -->
<p class="meter__text-fallback meter__text-fallback--correct"><strong>70%</strong><span hidden>of given answers are correct.</span></p>
</div>
<p class="meter__text-fallback meter__text-fallback--incorrect"><strong>30%</strong><span hidden>of given answers are incorrect.</span></p>
</div>
and style it something like this:
/* CSS */
.meter-wrapper {
background-color: pink;
height: 40px;
position: relative;
}
.meter {
display: inline-block;
background-color: MediumAquamarine;
height: 100%;
position: relative;
}
.meter__text-fallback {
position: absolute;
margin: 0;
bottom: -25px;
}
/* This class block is not utterly necessary, since the default value for `left` is already `0`. Just in case you want to have different values. */
.meter__text-fallback--correct {
left: 0;
}
.meter__text-fallback--incorrect {
right: 0;
}
See this code example in action
Link to codepen
Important notes to this code example
I would recommend to change your layout from having the percentage of correct and incorrect answers outside the meter bars to avoid a case, where you would have a slimmer bar than the width of the typography overlapping it.
Setting the values for the style="width: 70%" attributes would need to be controlled via JS.
It is also arguable to style HTML elements with inline styles, like I did in this example. On the other hand creating a 100+ different CSS classes for such a case, might be overkill. Styling via data attributes is also not fully supported. So I'll leave this decision up to you.
Related
I have this code:
<nav>
<div class="slider" id="slider"></div>
<div class="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
I need to make the slider appear on top of titleGroup but under its h2 childs, is there a way to do it using javascript? Making the h2s appear on top of everything would work too.
I tried doing it with z-index but obviously it doesn't work because z-index is relative to the parent.
Since you asked for JavaScript solution... you can prepend it to be the first child of the .titleGroup. But of course a better approach would have been to fix the HTML or try with z-index.
titleGroup.prepend(slider)
.titleGroup {
background: red;
height: 150px;
}
h2 {
position:relative;
background: black;
}
.slider {
opacity: 0.5;
background: yellow;
height: 100px;
width: 100%;
position: absolute;
}
<nav>
<div class="slider" id="slider">I am slider</div>
<div class="titleGroup" id="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
It's actually possible to solve your current problem using z-index and no JavaScript
(assuming you're not doing something funny with your titleGroup).
nav{
position:relative;
}
.titleGroup {
background: red;
height: 150px;
border: 1px solid yellow;
}
#slider{
z-index:1;
position: absolute;
top: 5px;
background: green;
color: white;
height: 80px;
left: 5px;
width: calc(100% - 10px);
padding: 5px;
box-sizing: border-box;
}
#slider::before{
content: "Slider in front of titleGroup background, but behind h2"
}
h2 {
position: relative;
background: cyan;
z-index: 2;
}
<nav>
<div class="slider" id="slider"></div>
<div class="titleGroup" id="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
Note that .titleGroup has no special value for position (or z-index for that matter), so no new stacking context is created.
(And if a css statement somehow affects your titleGroup element’s position property, you can use position:unset or position:static)
More about stacking context: Link1 (The stacking context
)
The following has an example where elements that are not siblings can be controlled just using z-index: Link2 (Stacking context example 1
)
In my example, h2 and #slider are not siblings, but since .titleGroup has no stacking context, in effect the behavior of z-indexes is comparable that of siblings.
Also note that this fails if your .titleGroup has opacity value less than 1, as it creates a new stacking context, and similarly if you have a special filter, etc. (described in the first link).
I want the background of upperdiv to become red when lowerdiv has the .active class:
<div id="upperdiv">Text case</div>
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
.active is being added by JavaScript. Example image.
I tried:
#upperdiv + #lowediv .active {
background: red;
}
but it's not working.
Is this possible with CSS or jQuery?
If I understand the question correctly you are trying to select the previous sibling. There is no way to do this using CSS. However, using JavaScript you can achieve the desired result. When you add the active class to the lower div, use your script to change the background color of the upper div.
See Is there a "previous sibling" CSS selector? for more information.
First I'd like to warn that OP doesn't ask to hack impossible CSS thing like previous sibling styling. So I'd ask people to read carefully question before downvote or abuse this answer.
There are two ways to get it with CSS, but you can use these ways for specific cases only. Common requirement is that both divs should come one by one.
First way is to swap divs using position attributes. I mean that lower div should come first in your HTML:
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
<div id="upperdiv">Text case</div>
div {
position: absolute;
width: 100%;
height: 50px;
margin: 0;
left: 0;
background: orange;
}
#upperdiv {
margin-top: 0px;
}
#lowerdiv{
margin-top: 50px;
}
#lowerdiv.active + #upperdiv {
background: red;
}
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
<div id="upperdiv">Text case</div>
And second way is to use ::before pseudo-element to put it under upperdiv as a background:
div {
position: relative;
width: 100%;
height: 50px;
margin: 0;
left: 0;
background: transparent;
}
#lowerdiv{
background: orange;
}
#lowerdiv.active:before {
content: " ";
display: block;
position: absolute;
height: 100%;
width: 100%;
bottom: 100%;
background: red;
z-index: -1;
}
<div id="upperdiv">Text case</div>
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
Third way really exists but this is beyond conditions of the question.
I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)
Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}
If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.
Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
I am trying to create an effect that when you roll over an image a pointer will point towards it. The same as used in this website about half way down: https://thecleansekitchen.com.au/
I'm not sure where to begin or if there are any JQuery or plugins out there for this but I cant find any?
Any help appreciated.
I'm sure there are some jQuery plugins out there that do this but that's probably unnecessary. You can accomplish this pretty easily with some basic HTML, CSS and JavaScript.
I created a JSFiddle to try to help you get started. https://jsfiddle.net/x823m6ff/
Note that the above is very crude and you'll definitely need to massage it for your needs but hopefully it will help you start down the right path.
I'll lay out the code here as well to explain.
HTML:
<div class="container">
<div class="block">
<div class="arrow arrow-down"></div>
</div>
<div class="block">
<div class="arrow arrow-down"></div>
</div>
<div class="block">
<div class="arrow arrow-down"></div>
</div>
</div>
For the HTML, I created a container with three blocks (like your screenshot). Each block has a child arrow element that is hidden through CSS.
CSS:
.container {
width: 960px;
margin: 0 auto;
}
.block {
width: 100px;
height: 150px;
background-color: #000;
float: left;
margin-right: 20px;
position: relative;
}
.arrow {
display: none;
position: absolute;
top: 0;
left: 25%;
}
.arrow-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #FFF;
}
The CSS sets up some widths and heights for our blocks and creates the arrow elements. We're positioning these arrow elements relative to each block and putting them at the top middle of each block.
JavaScript:
$(document).ready(function() {
$('.block').hover(function() {
$(this).find('.arrow').show();
}, function() {
$(this).find('.arrow').hide();
});
});
The above JavaScript is very simple and basically just listens for a mouse hover over our block and shows / hides our arrow depending on the state of the user's mouse over the block.
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>