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.
Related
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;
}
The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?
I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 5px;
border: solid 1px #11b28e;
background: gray;
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}
/* Add button text */
.wpcf7-file:before {
content: "прикріпити файл";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}
To change the text 'Select File' on the button I use the code below. And it works fine for me.
However, I can't change the text "No file chosen" next to the button.
Can anyone tell me something about this topic?
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Select File NEW';
display: inline-block;
background: #00a0dd !important;
padding: 15px 15px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
color:#FFF
}
.wpcf7-file:hover::before {
border-color: black;
}
.wpcf7-file:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});
2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.
So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>
Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx
The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.
So I have a box that contains the post content which is text. What happens is if the content "overflows", the box gets bigger, but the icons push out of the box. What I want to do is keep them as a solid location. Here's what I see
The comment, delete, and likes count is off to the side. And here's what I want it to look like, even when there is more content
Here's the CSS for the box
.main-content{
margin-top: 20px;
width: 100%;
min-height: 100px;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
}
And the icons
.fa-comment {
float: right;
margin-top: 67px;
margin-right: 15px;
font-size: 24px;
cursor: pointer;
color: #69f;
}
.likes{
padding-left: 20px;
}
.fa-heart-o{
transition: 0.5s;
margin-top: 60px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.fa-heart{
transition: 0.5s;
margin-top: 60px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.fa-trash-o {
transition: 0.5s;
margin-top: 67px;
color: #ABA9A9;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.icons{
float: right;
margin-right: 0%;
margin-top: 1%;
}
I'm not sure if I'd do this with CSS or JS, but any help would be great.
You can Add clearfix after comments block.
For example:
<div class="main-content">
...
Your images and text
...
<div class="clearBoth"></div>
</div>
<style>
.clearBoth{
clear:both;
}
</style>
You can use my block-style: jsfiddle
You might be over-complicating this.
Here's a fiddle: http://jsfiddle.net/Y6HSB/17/
As a rule of thumb, work on scoping out your DOM first, and make it clean and neat.
HTML:
<div class="comment">
<div class="comment-content">
<div class="image-holder">
<img src="">
</div>
<p>The comment text would go here. It could be really short or really long and it won't matter because this is ambiguous to size. It will resize automatically and clear the space below it because that's how this works when you keep your structures simple and float elements where needed while providing a clearfix to push things down when needed.</p>
</div>
<div class="comment-actions">
<a href class="likes">0 Likes</a>
<a href class="comment"><span class="fa fa-comment">comment</span></a>
<a href class="delete"><span class="fa fa-trash-o">delete</span></a>
</div>
</div>
Once you've got a nice DOM setup, create as little style as you need to get your basic structure.
CSS: (LESS OR SCSS for simplicity)
body {
background: #888;
}
.comment {
background: #fff;
padding: 10px;
border-radius: 10px;
.comment-content {
margin-bottom: 10px;
.image-holder {
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
}
}
.comment-content:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.comment-actions {
text-align: right;
a {
display: inline-block;
// you'd want to tweak the styles here. but it should not require much.
}
}
}
After this, you can customize it to meet your exact needs, but I find it easiest to work in steps like this to get your desired placement before adding any visual context.
Cheers!