I am trying to add an image within my :before element with an change function. What I am doing is wrapping a label around the #signupCheck to work as a checkbox input. I added a console.log statement to my change event and it isn't running, so I am unsure of what I am doing wrong.
Does anyone see anything that could be causing this to not work?
$('#proposal-check-wrap').on('change', function() {
$('#signupCheck:before').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck:before.active {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">
Two things:
You are incorrectly binding the event handler to the label #proposal-check-wrap instead of the checkbox #proposal-check.
Pseudo-elements cannot have attributes.
The originating element can have a class, so attach the class to that element instead, and style its pseudo-element based on the class. In other words, instead of #signupCheck:before.active, apply the rule to #signupCheck.active:before:
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">
Your two :before rules have unequal dimensions by the way. Just a note in case this is a mistake.
A couple of things.
Your change listener needs to be on the input itself.
You can't manipulate a psuedo element like that. Instead you should add the class to the element (no psuedo mentioned in it) and style it accordingly.
JS fiddle
JS
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
});
CSS
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
Related
Trying to make counter(till 9) by javascript.
Hid the counting of 1 to 9. So, when the user enters the target then scroll the counter by its height so the hidden numbers will be shown. Used two set intervals in the code maybe that's why code not running according to expectation.
codepen link --> https://codepen.io/aryansharma-2002/pen/GRyZJJv
same code pasted here:-
HTML CODE
<div class="input">
<h1 class="heading">Enter a value between 0 and 9</h1>
<div class="left">
<input type="number" id="count" placeholder="Enter Number">
</div>
<div class="right">
<button class="submit-btn" id="submit-btn">Start Counter</button>
</div>
</div>
<div class="output">
<div class="count-output" id="count-output">
<span class="zero" data-count="0">0</span>
<span class="one" data-count="1">1</span>
<span class="two" data-count="2">2</span>
<span class="three" data-count="3">3</span>
<span class="four" data-count="4">4</span>
<span class="five" data-count="5">5</span>
<span class="six" data-count="6">6</span>
<span class="seven" data-count="7">7</span>
<span class="eight" data-count="8">8</span>
<span class="nine" data-count="9">9</span>
</div>
</div>
NO NEED TO READ FULL CSS CODE. THE MAIN CSS is that to div.count-output is given some fixed height and width and then the span tag inside it, is giving 100% height and width so that only one number shown at a time. And all the other numbers is hidden by using overflow: hidden; css rule. So, we will scroll the .count-output by using javascript.
CSS CODE
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
}
.input{
width: 90%;
margin: 10px auto;
padding: 50px;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,177,204,0.5374883229659051) 0%, rgba(255,0,218,0.32180204845610116) 100%);
}
.heading{
color: white;
word-spacing: 4px;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
}
.left{
float: left;
width: 50%;
/* border: 2px solid black; */
text-align: center;
}
.right{
width: 50%;
float: right;
/* border: 2px solid black; */
text-align: center;
}
.input::after{
content: "";
display: block;
clear: both;
}
.input input[type="number"]{
width: 50%;
font-size: 20px;
padding: 3px 5px;
outline: none;
border: none;
}
.submit-btn{
background: white;
font-size: 18px;
font-weight: 700;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px white;
}
.output{
width: 80%;
margin: 20px auto;
background: rgba(0, 0, 0, 0.685);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.output .count-output{
/* border: 2px solid white; */
width: 75px;
/* height: 75px; */
height: 75px;
background: white;
box-shadow: 0px 0px 5px 0px white;
overflow: hidden;
}
.count-output span{
display: inline-block;
width: 100%;
height: 100%;
border-top: 2px solid red;
font-size: 70px;
/* text-align: center; */
display: flex;
justify-content: center;
align-items: center;
/* font-weight: 700; */
}
JS CODE
// when we click the submit button then take the data of the count, then start the counter and from 1 to 9 data hidden there so by js scroll it after 1sec when the target reaches stop and show alert
var input=document.getElementById("count");
var btn=document.getElementById("submit-btn");
var counter=document.getElementById("count-output");
console.log(input);
console.log(btn);
console.log(counter);
var scrollTillTarget=function (target) {
let count=0;
var heightCounter=counter.clientHeight;
console.log(heightCounter);
let intervalId=setInterval(function () {
if (count==target) {
alert("Target has reached");
clearInterval(intervalId);
counter.scrollTo(0,0);
return;
}
// By this line scrolling occurs instantly so the scrolling is not shown. So, used the setInterval so that do small scrolling in small time till the height of counter.
// counter.scrollBy(0,heightCounter);
let currentScroll=0;
let scrollId=setInterval(function () {
if (currentScroll==heightCounter) {
clearInterval(scrollId);
return;
}
counter.scrollBy(0,1);
currentScroll++;
},1);
count++;
},1000);
}
btn.addEventListener("click",function (event) {
var targetCount=input.value;
console.log(targetCount);
// now start the counter and scroll the count-output div to the span where the data-count attribute of span is equal to the targetCount
scrollTillTarget(targetCount);
});
Problem - Want that scrolling must show and also in 1 second. Then next scrolling till the target count.
This problem occuring maybe because the call stack is blocked by the setInterval callback function.
Solved this question by some other technique but want the answer why the above code is having some problem.
Solved Link- https://codepen.io/aryansharma-2002/pen/MWrjELL
I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way-
https://jsfiddle.net/anuranpal/Lead7c7q/43/
CSS
edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
.select-button {
background: none!important;
border: none;
padding: 0!important;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
-moz-user-select: none;
-webkit-user-select: none;
/* this will work for QtWebKit in future */
-webkit-user-drag: none;
}
.selected-color-container {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
width: 35px;
height: 35px;
background: #DF068C;
display: inline-block;
vertical-align: top;
margin: auto;
margin-top: 5px;
position: relative;
}
HTML
<div class="edit-color-container">
<input id="selected-color-value" type="hidden" value="#DF068C" />
<button id="editColor" class="select-button jscolor " data-jscolor="
{width:150, height:150,valueElement:'selected-color-
value',styleElement:'selectedColor',borderWidth:0,borderColor:'#FFF',
insetWidth:0, insetColor:'#FFF',shadow:false,
backgroundColor:'#e6e7e9',borderRadius:2, zIndex:'2000'}">
<div class="selected-color-container" id="selectedColor"></div>
<div class="uk-text-small uk-text-primary uk-margin-small-top" style="margin:auto">Edit</div>
</button>
</div>
But here I have used button instead of div and it is creating some issues in chrome like if I click on the circle,nothing happen but If I click just outside the circle, the color picker toggles.
So, I want to use div instead of button and open the colorpicker when I click on the div.
Please help. Thank you in Advance :-)
Seems like the plugin doesn't support div, but using its api you can toggle colorpicker using code, if I got you correctly, here is my solution:
HTML
<div class="edit-color-container">
<div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
onclick="document.getElementById('color-picker').jscolor.show()"></div>
<div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
<input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}" type="hidden">
</div>
CSS
.edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
#styleSpan {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 5px auto;
cursor: pointer;
}
#btn {
cursor: pointer;
}
body > div:last-child {
margin: 50px 0 0 20px;
}
jsfiddle
Notice that you can use onclick on edit-color-container instead.
autocomplete working fine but i need a transition effect(slide down) in suggested menu,
I referred from this sites http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html
and i tried
$(document).ready(function() {
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
.ac_results {
background-color: white;
border: 1px solid #5c5c5c;
left: 174.5px !important;
overflow: hidden;
padding: 0;
width: 247px !important;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font-family: "armataregular";
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #ccc;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listone">
<input type="text" placeholder="Enter Keyword" id="tag">
</div>
I added transition property on id="tag" and .ac_results its not working,
please suggest any idea.,
Transitions work by listening to a property and will "animate" when that property changes. So in your case you would need to add a transition to #ac_results. Set the #ac_results height to 0, and when it finds results change the height that element and it should slide down
transition: height 0.5s ease-in-out;
height: 0;
Here is a quick example of it (note that it doesn't do any auto complete, just it shows when input is detected)
http://jsfiddle.net/schwqa7k/1/
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}
I am using custom checkboxes with the input hidden wrapped in a span; I have written a script to add the class for checked, but it doesn't actually mark the inputs as checked. What am I doing wrong here?
UPDATE: So the checkbox checks now! Hooray. A new problem is that hiding the visibility on the checkbox, also hides the new class when checked on the area of the checkbox... if the label is clicked, then the checkbox shows as checked, but if the checkbox image itself is clicked, nothing changes...
HTML
<fieldset>
<label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label>
<span class="open-checkbox">
<input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" />
</span>
</fieldset>
CSS
.open-checkbox {
background-position: -4px -48px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
.checked {
background-position: -4px -12px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
input[type=checkbox] {
visibility: hidden;
}
#key-areas-inputs label.sublabel {
display: block;
float: left;
height: 44px;
padding: 0 0 0 10px;
width: 300px;
}
#key-areas-inputs input.key-areas-checkbox {
float: right;
display: block;
clear: none;
height: 22px;
width: 22px;
margin-top: 18px;
margin-right: 4px;
margin-bottom: 0px;
margin-left: 0px;
}
#key-areas-label {
font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #df007c;
display: block;
clear: left;
float: left;
width: 348px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
text-align: right;
}
JS
// check checked boxes on load
$(".key-areas-checkbox:checked").each(function(){
$(this).next().addClass('checked');
});
// add class and checked attribute to filter inputs
$('.open-checkbox').click(function () {
console.log('click');
var $this = $(this);
var $input = $this.find('input');
$this.toggleClass('checked', $input.is(':checked'));
return;
if($input.prop('checked')){
$this.removeClass('checked');
} else {
$this.addClass('checked');
}
});
to check the checkbox add:
$input.attr('checked','checked');
to uncheck:
$input.removeAttr('checked');
Your for and ids don't match. Change your id to "checkbox-insights-and-planning" (was missing an 's') and it should work.
Also make sure your image path is correct (we can't test that with your example code as it's a relative path; I just tried it with a background-color and it worked).
I figured out what the issue was. The JS was fine. The fix was to nest the inputs inside of the label and wrap inside of a div. This gave the desired effect.