This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Access the css ":after" selector with jQuery [duplicate]
(3 answers)
Closed 3 years ago.
I'm working on the pseudo class element here on hover I want to change ::after background color, I have tried but its is not working. Can anyone suggest me in the right direction why it is not working.
$(document).ready(function() {
$('.box').click(function() {
$('.box:after').css('background-color', 'yellow');
});
});
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
<div class="content"></div>
</div>
Js not supporting pseudo element properties. better Do with css
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.box:hover:after {
background-color: yellow;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
<div class="box">
<div class="content"></div>
</div>
you cannot target pseudo element in jQuery so i have created 1 class changed
.changed:after{
background-color: yellow;
}
and toggled that class when hover in jQuery.
Hope this helps. thanks
$(document).ready(function() {
$('.box').hover(function() {
$(this).toggleClass('changed');
});
});
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
.changed:after{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
<div class="content"></div>
</div>
Related
I'm working on getting better with CSS animations and transitions. What I'm trying to do is make the transition from a square to a circle and vice versa smoother. I know that I need to use the transition method in CSS to control this.
2 questions:
Why is the transition method not working in the below code snippet?
How do I go about making different transition properties for each changing value? i.e. 1 transition timing for changing the border radius, 1 transition timing for moving the circle to where the square is, etc.
.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s alternate;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s alternate;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>
.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s ease;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s ease;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>
I've a form I'm creating, and I'll have some sections that will apear from right to left, on top of that and fixed is a bar, that should increase in width each time I click on continue to go to the next question. that way user will know he's progressing. I can't make work my progress bar, can you help me figure out why?
HTML
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="questionsContainer">
<div class="section one">
<p class="sectionTitle">This is the First Question?</p>
<div class="buttonContinue" id="section2">CONTINUE</div>
</div>
<div class="section two">
<p class="sectionTitle">Aja! time for the Second one!!</p>
<div class="buttonContinue" id="section3">CONTINUE</div>
</div>
<div class="section three">
<p class="sectionTitle">Another Question? 3 so far?</p>
<div class="buttonContinue" id="section4">CONTINUE</div>
</div>
</div>
CSS
body {
margin: 0 auto;
transition: all 0.2s ease;
}
.progress-container {
width: 100%;
height: 4px;
background: transparent!important;
position: fixed;
top: 0;
z-index: 99;
}
.progress-bar {
height: 4px;
background: #4ce4ff;
width: 10%;
}
header {
width: 100%;
height: 150px;
position: relative;
background-color: fuchsia;
}
.questionsContainer {
width: 100%;
height: calc(100% - 200px);
position: absolute;
background-color: lime;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
}
.section {
background-color: purple;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.one {
position: absolute;
right: auto;
transition: all 0.2s ease;
}
.two {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.three {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.sectionTitle {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 30px;
margin: 0 auto;
}
.buttonContinue {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: red;
border-radius: 5px;
margin: 20px 0px;
text-align: center;
cursor: pointer;
width: 100px;
}
JAVASCRIPT
<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}
document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});
function addVisit(){
var progressTag = $('#myBar');
count ++;
progressTag.css('width', count * 10 + "%");
});
</script>
Your main issue is that the count variable has not been created and given a value initially.
I have optimized your code a bit and this is how I did it:
var count = 1;
$(document).ready(function() {
$("#section2, #section3, #section4").click(function() {
$('#myBar').css('width', ++count * 10 + "%");
});
});
I also added transition: all 1s; for animated CSS transition.
Here is your updated code in JSFiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to make a sidebar smooth transition when click so the content wrapper also makes a transiction to the left.
I simply cant do it.
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').hide()
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').show();
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: left 1s ease;
display: none;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
Maybe something you looking for:
I set position: relative to #sidebar-right and just use right with the same pixel to make this move with .content-wrapper
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', "-205px");
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
position: relative;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all .7s ease;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
If I were you, I'd just do the transition of the right property:
var rightSidebarOpen;
$('#toggle-right-sidebar').click(function () {
if (rightSidebarOpen) {
//$('#sidebar-right').hide();
$('#sidebar-right').css('right', "-200px");
$('.content-wrapper').css('margin-right', "0");
}
else {
//$('#sidebar-right').show();
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
/* added */
* {box-sizing: border-box}
body {margin: 0; overflow: hidden}
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: margin-right 1s; /* modified */
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -200px; /* modified */
overflow-x: hidden;
transition: right 1s; /* modified */
/*display: none; better to put it off screen with the "right" property*/
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
show(), hide() functions only work as display:block; and display:none; and hence you cant animate them.
HTML
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
CSS
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all 1s ease;
transform: translateX(200px);
background: blue;
}
JS
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('transform', 'translateX(200px)')
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('transform', 'translateX(0)');
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
You can try out this pen
I'm working on a Roulette site, i just can't get the roulette animation to work.
I have an image for the roulette but i need the image to disappear after a certain amount of % and that the image loops around to the left.
This is how it kind of needs to look like (it doesn't end at the end of the border, and doesn't loop around to the left thought.):
$("#right").click(function () {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function () {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
And this is what i want it to look like, but the border has to end near the end of the screen, and the image has to be invisible outside the border, and loop around:
div.numbers {
display: inline-flex;
border: 4px solid gray;
}
div.numbers img {
margin-right: 5px;
}
<section>
<div class="numbers">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
</div>
</section>
so once i click on a button it should do the transition left 500px, and loop the image around to the left so the image keeps going to the right until the image is 500px further, and it should be invisible outside the border.
Thanks alot for the help!
You're really close to hiding the scrolled content. You just need to hide the overflow in section with overflow: hidden;
$("#right").click(function() {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function() {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
overflow: hidden;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
The parent element needs { overflow-y: hidden; } in your css code
I was wondering if someone would be willing to help me translate this pen I created into plain ol' JavaScript. I'm just learning JavaScript and would like to see what this same effect looks like in pure JavaScript instead of jQuery. Here is the jQuery:
$(document).scroll(function(){
var y = $(this).scrollTop();
if (y > 500 ){
$(".arrow-box").addClass("slide");
}
else{
$(".arrow-box").removeClass("slide");
}
});
See Pen Here.
let arrow = document.querySelector('.arrow-box');
document.addEventListener('scroll', () => {
if (window.scrollY > 500)
return arrow.classList.add('slide');
arrow.classList.remove('slide');
});
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px;
background-color: gray;
position: relative;
}
.container {
margin: 0 auto;
height: 500px;
width: 1200px;
background-color: lightblue;
margin-bottom: 100px;
}
img {
width: 50px;
height: auto;
}
.arrow_container {
left: 0;
right: 0;
bottom: 0px;
margin-left: auto;
margin-right: auto;
position: fixed;
height: auto;
height: 100px;
width: 100%;
max-width: 1400px;
background-color: #2d2d2d;
overflow: hidden;
}
.arrow-box {
transform: translateX(100%);
transition: transform: .3s ease-in-out;
-webkit-transition: -webkit-transform .3s ease-in-out;
position: absolute;
right: 0px;
padding: 25px;
height: 100px;
background-color: red;
}
.slide {
transform: translateX(0%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
<div class="arrow_container">
<div class="arrow-box">
<img src="http://cdns2.freepik.com/media/img/subscription_modal/rocket.svg" />
</div>
</div>