I’m trying to understand how bootstrap works, right now I’m not interested in how responsive functionality works, I’m only interested in how adding class to element will change its appearance.
For example adding class="checkbox-inline" to label like this
<label class="checkbox-inline">
will give you this shape
I’m trying to do the same thing using css and jQuery, but the problem is I need multiple divs to do this
<div class="buttoun-toggle">
<div id="line"></div>
<div id="circle"></div>
</div>
and with some css it will give me this shape
also I did the animation using jQuery (when you click it, it will move).
So what I did is so simple, create circle and square with rounded edge to make my button...
No the problem is this code is not reusable because I can't just use
<label class="buttoun-toggle">
to create this button again, and that mainly because it has three divs in it.
So what I need to know how Bootstrap has this code reusability and how I could do the same thing here, meaning how could I call class and all those div get called?
You would usually use pseudo-elements like, before and after to accomplish a composition of elements that are tied to one class:
.toggle-button {
position: relative;
content: "";
display: block;
width: 40px;
height: 14px;
border-radius: 3px;
background-color: #CECECE;
float: left;
}
.toggle-button::after{
content: "";
display: block;
width: 20px;
height: 20px;
float: right;
margin-left: -20px;
border-radius: 100%;
margin-top: -3px;
}
.toggle-button-red::after {
background-color: red;
}
.toggle-button-blue::after {
background-color: blue;
}
<div class="toggle-button toggle-button-red"></div>
<div class="toggle-button toggle-button-blue"></div>
Related
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.
On this website, I have images that you can hover over with your mouse and it will display two buttons. I want keyboard-only users to be able to tab through the site, so when they tab, the hoverable menu shows up. I've read a lot of solutions involving :focus and tabindex=0 but I can't seem to make it work. I have attempted to put tabindex=0 on the <a> tags to see if that would do it, but it doesn't. I believe the buttons will be tabbed through just fine if I could just get the hover menu to show up using the tab key. I might be missing something obvious, but I'm a beginner with all of these things. If it's not possible via CSS, can someone suggest a JS solution?
HTML
<div class="thumbnail thumbnail-medium-short">
<div class="nqspCover-container">
<img src="img/stuff.jpg" alt="Front cover" width="180px" height="233px">
<div class="overlay">
<div class="read-button">Read</div>
<div class="buy-button">Buy</div>
</div>
</div>
<div class="nqsp-caption">
<p>stuff</p>
</div>
</div>
CSS
.nqspCover-container {
position: relative;
width: 180px;
height: 233px;
margin: 0 auto;
}
.overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: background 0.5s ease;
}
.nqspCover-container:hover .overlay {
background: rgba(0,0,0,.3);
}
.buy-button{
margin-top: 40px;
}
.read-button, .buy-button{
position: absolute;
width: 65px;
padding: 5px 15px;
border: solid 2px white;
opacity: 0;
transition: opacity .35s ease;
}
.read-button a, .buy-button a{
text-decoration: none;
text-align: center;
color: white;
}
.nqspCover-container:hover .read-button,
.nqspCover-container:hover .buy-button{
opacity: 1;
}
.read-button a:hover, .buy-button a:hover{
text-decoration: underline;
}
.read_button a:focus, .buy-button a:focus{
display: block;
}
Example of the hover menu I need to pop up when they tab to it (don't worry, the background img and buttons definitely won't look like that when it's done):
Only one element can have focus at a time, so you can not do this using :focus alone. That's what the :focus-within pseudo class was made to solve - but be aware of browser compatibility; MicroSofts two current browsers don't support it yet.
You'll need a JS solution or at least a polyfill for :focus-within
(FYI, div elements can't receive focus by default, so you'd need to start by adding the tabindex attribute. tabindex="0" is usually what you want to make an element focus-able in normal DOM order.)
I don't know if "focus" really does what I need it to do at all.
It does what the other pseudo classes do, too - no more or less: Identify/react to an element being in a specific state. What you do with it, or it's descendants/siblings, is up to you - by writing the selectors that target those elements, based on that parent/siblings state.
https://www.google.com/search?q=menu+with+focus-within gets you more detailed explanations & examples, f.e. http://www.scottohara.me/blog/2017/05/14/focus-within.html That one explains the topic pretty well, and also mentions a polyfill, https://allyjs.io/api/style/focus-within.html
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 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 have been reading a lot of past posts but I don't quite understand how to do this for my particular issue.
I have an image on the left part of my site which has two options, Cow and Pig. The way I plan on using this part of the page is as a sort of slider. I would like a user to be able to click on this image and rotate from "Cow" to "Pig" and "Pig" to "Cow" as many times as they want.
This selection dictates what background image is used in another div on the right side of the page. So upon clicking the image on the left, I would like to alternate the display properties from making the Cow visible to making the Pig visible (and toggling the display:none property from Pig to Cow).
Any help would be appreciated. I have seen http://jsfiddle.net/NjTea/5/ but it doesn't completely help me out.
<div id="slider">
<div class="homesplashslider">
<div class="homesplashslider2">
#slider {
float: left;
.homesplashslider {
float: left;
margin-left: 15px;
background: url('../images/slider.png');
margin-top: 20px;
width: 123px;
height: 64px;
.homesplashslider2 {
float: left;
margin-left: 15px;
background: url('../images/slider2.png');
margin-top: 20px;
width: 123px;
height: 64px;
display: none;
<div id="cowandpig">
<img class="cowtoggle" src="assets/images/cow.png">
<img class="pigtoggle" src="assets/images/pig.png">
</div>
.cowtoggle {
float: right;
.pigtoggle {
float: right;
display: none;
Try adding a click event on each image that hides and shows the image you need shown. Try this:
$(document).ready(function() {
var $slider1 = $('.homesplashslider');
var $slider2 = $('.homesplashslider2');
$('.cowtoggle').click(function() {
$slider1.show();
$slider2.hide();
});
$('.pigtoggle').click(function() {
$slider2.show();
$slider1.hide();
});
});