Create a custom select box dropdown using jQuery - javascript

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.
$(document).ready(function() {
selecta("#a", "#b")
$("#a").click(function() {
$("#b").show();
});
});
function selecta(a, b) {
$(b + " li").click(function() {
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
.cselect {
position: relative;
}
.cselect input[type]:disabled {
background: #fff;
}
.cselect-menu {
display: none;
position: absolute;
/* top: 0px;*/
left: 0px;
width: 100%;
background: #fff;
}
.cselect-menu ul {
border: 1px solid #d6d6d6;
width: 100%;
}
.cselect-menu li {
padding: 10px 5%;
width: 90%;
}
.cselect-menu li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="cselect">
<input type="text" disabled placeholder="Select"/>
<div id="b" class="cselect-menu">
<ul >
<li>Business</li>
<li>Hair</li>
</ul>
</div>
</div>

jsBin demo
Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #a
function selecta(a, b) {
$(b + " li").click(function( event ) {
event.stopPropagation(); // HERE!
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...
Here I've simplified HTML, CSS and jQuery:
$(function() { // DOM ready
$(".cselect").each(function(){
var $input = $(this).find("input");
var $dropDown = $(this).find("ul");
$(this).on("click", function(){
$dropDown.stop().slideToggle();
});
$dropDown.on("click", "li", function(){
$input.val( $(this).text() );
});
});
});
*{margin:0; padding:0;} /* ugly reset */
.cselect {
position: relative;
}
.cselect input{
background: #fff;
}
.cselect ul{
display: none;
position: absolute;
z-index:999;
left: 0;
top: 1.2rem;
margin:0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style:none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cselect">
<input type="text" disabled placeholder="Select n1">
<ul>
<li>Business</li>
<li>Hair</li>
</ul>
</div>
<div class="cselect">
<input type="text" disabled placeholder="Select n2">
<ul>
<li>Something</li>
<li>Else</li>
</ul>
</div>

Related

Focus textarea using css

I'm searching one javascript or html or css code that make change background color when i click in textarea i need something like this http://prntscr.com/bzsqgq
I tried with javascript but i can't do that its to hard, i tried onclick change background color with rgba something like blur.
$('.comment .body').on('click', function() {
if($(this).hasClass('changing')) {
$('.comment textarea').blur();
}else {
$('.comment textarea').focus();
}
});
$('.comment textarea').on('focus',function() {
$('.comment .body').addClass('changing').style('background-color: #FF0000;');
});
$('.change-stamp textarea').on('blur',function() {
$('.comment .body').removeClass('changing').text('background-color: transparent;');
});
Thanks who can help me.
Add a wrapper and an inner element like this
.wrapper {
display: inline-block;
position: relative;
padding: 20px;
}
input:focus ~ .inner,
textarea:focus ~ .inner {
position: absolute;
z-index: -1;
left: 0; top: 0;
width: 100%; height: 100%;
background: yellow;
border: 2px solid red;
box-sizing: border-box;
}
<div class="wrapper">
<input type="text">
<br/>
<br/>
<textarea></textarea>
<div class="inner"></div>
</div>
var element = document.getElementsByClassName("chg_parent_on_focus")[0]
var parent = element.parentElement
element.onfocus = function(){
parent.className = "cont active";
}
element.onblur = function(){
parent.className = "cont";
}
.cont{
width:200px;
background:red;
padding:100px;
}
input{
margin:10px;
}
.cont.active{
background:black;
}
<div class="cont">
<input class="chg_parent_on_focus"/>
</div>

Smooth Scroll on selection change jquery

I am trying to scroll to the anchor smoothly on dropdown selection change. Tried a lot of code from other answers but couldnt get it to work since i have no experience with jquery.
Any help would be appreciated!
P.S : dont mind the link selector if statements
here is my dropdown
<select class="form-control " id="dropDownSelect" onchange="location = this.value;">
<option value="#">Hotel Selection</option>
<option value="#ecoHotel">EcoName</option>
<option value="#luxuryHotel">LuxuryName</option>
</select>
and here is the jquery i am trying to implement in
<script>
$("#dropDownSelect").change(function() {
console.log(this.value);
// Here Should be my smoothscroll
if (this.value === "#luxuryHotel") {
$("#inqLink").attr('href', "http://www.google.com");
}
else{
$("#inqLink").attr('href', "package-dentmodern-hollywoodsmile-inquire.html");
}
});
</script>
I've got another solution for you. Make your own dropdown, in this way it is more easy for you to achieve what you want. I did all the drop down functions with JQuery, you just have to style dropdown:
$(document).ready(function(){
$('.target-click').click(function(){
$('.hidden-drop').slideToggle();
})
$('nav li a').click(function(e) {
setTimeout(function(){
$('.hidden-drop').slideUp();
}, 200);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 600);
return false;
});
});
select {
margin-bottom: 30px;
}
#ecoHotel {
background-color: lightgreen;
}
#luxuryHotel {
background-color: lightgrey;
}
.page {
display: block;
height: 100vh;
width: 100%;
transition: all .3s ease;
}
.hidden-drop {
display: none;
}
ul li {
cursor: pointer;
list-style: none;
}
ul {
padding: 0;
}
span.target-click {
color: #444;
border: 1px solid #ddd;
background-color: #f7f7f7;
height: 44px;
display: inline-block;
line-height: 44px;
padding-left: 10px;
padding-right: 10px;
}
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<nav>
<ul>
<li>
<span class="target-click">Hotel Selection</span>
<ul class="hidden-drop">
<li>EcoName</li>
<li>LuxuryName</li>
</ul>
</li>
</ul>
</nav>
<div id="ecoHotel" class="page">Eco Hotel Section</div>
<div id="luxuryHotel" class="page">Luxury Hotel Section</div>
$('html,body').animate({
scrollTop: $('#target').offset().top
}, 1000);
This will scroll smoothly to the DOM element with the targeted id
1000 is in miliseconds.

CKEDITOR Drag and drop plugin integration stops working after editor instance is destroyed and recreated

I'm having quite a bit of trouble while trying to use CKEditor's drag and drop integration.
At first, dragging and dropping into the editor works allright with dataTransfer and all. But whenever I have to destroy and recreate an instance of the editor, dragging and dropping content stops working as expected.
I have modified the sample code directly from CKEditor's SDK page about DnD integration, where you can see the issue being reproduced.
(I just reduced the example as to make it more succint and added the "Destroy and recreate" button at the bottom of the list.)
Could not get it to work in JSFiddle, so sorry about that, but here's the code:
'use strict';
var CONTACTS = [{
name: 'Huckleberry Finn',
tel: '+48 1345 234 235',
email: 'h.finn#example.com',
avatar: 'hfin'
}, {
name: 'D\'Artagnan',
tel: '+45 2345 234 235',
email: 'dartagnan#example.com',
avatar: 'dartagnan'
}];
CKEDITOR.disableAutoInline = true;
CKEDITOR.plugins.add('drag_list', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('drag_list', {
allowedContent: true,
pathName: 'drag_list',
upcast: function(el) {
return el.name == 'table' && el.hasClass('product_widget');
}
});
editor.addFeature(editor.widgets.registered.drag_list);
editor.on('paste', function(evt) {
var contact = evt.data.dataTransfer.getData('contact');
if (!contact) {
return;
}
evt.data.dataValue =
'<span class="h-card">' +
'' + contact.name + '' +
' ' +
'<span class="p-tel">' + contact.tel + '</span>' +
'</span>';
});
}
});
CKEDITOR.document.getById('contactList').on('dragstart', function(evt) {
var target = evt.data.getTarget().getAscendant('div', true);
CKEDITOR.plugins.clipboard.initDragDataTransfer(evt);
var dataTransfer = evt.data.dataTransfer;
dataTransfer.setData('contact', CONTACTS[target.data('contact')]);
dataTransfer.setData('text/html', target.getText());
if (dataTransfer.$.setDragImage) {
dataTransfer.$.setDragImage(target.findOne('img').$, 0, 0);
}
});
CKEDITOR.inline('editor1', {
extraPlugins: 'drag_list,sourcedialog,justify'
});
function destroy_recreate() {
for (var instance in CKEDITOR.instances) {
console.log(CKEDITOR.instances[instance])
CKEDITOR.instances[instance].destroy();
}
CKEDITOR.inline('editor1', {
extraPlugins: 'drag_list,sourcedialog,justify'
});
}
.columns {
background: #fff;
padding: 20px;
border: 1px solid #E7E7E7;
}
.columns:after {
content: "";
clear: both;
display: block;
}
.columns > .editor {
float: left;
width: 65%;
position: relative;
z-index: 1;
}
.columns > .contacts {
float: right;
width: 35%;
box-sizing: border-box;
padding: 0 0 0 20px;
}
#contactList {
list-style-type: none;
margin: 0 !important;
padding: 0;
}
#contactList li {
background: #FAFAFA;
margin-bottom: 1px;
height: 56px;
line-height: 56px;
cursor: pointer;
}
#contactList li:nth-child(2n) {
background: #F3F3F3;
}
#contactList li:hover {
background: #FFFDE3;
border-left: 5px solid #DCDAC1;
margin-left: -5px;
}
.contact {
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact .u-photo {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
#editor1 .h-card {
background: #FFFDE3;
padding: 3px 6px;
border-bottom: 1px dashed #ccc;
}
#editor1 {
border: 1px solid #E7E7E7;
padding: 0 20px;
background: #fff;
position: relative;
}
#editor1 .h-card .p-tel {
font-style: italic;
}
#editor1 .h-card .p-tel::before,
#editor1 .h-card .p-tel::after {
font-style: normal;
}
#editor1 .h-card .p-tel::before {
content: "(☎ ";
}
#editor1 .h-card .p-tel::after {
content: ")";
}
#editor1 h1 {
text-align: center;
}
#editor1 hr {
border-style: dotted;
border-color: #DCDCDC;
border-width: 1px 0 0;
}
<script src="http://cdn.ckeditor.com/4.5.5/standard-all/ckeditor.js"></script>
<div class="columns">
<div class="editor">
<div cols="10" id="editor1" name="editor1" rows="10" contenteditable="true">
<h3>Drop stuff here then press the Destroy/Recreate button and try again.</h3>
</div>
</div>
<div class="contacts">
<h3>List of Droppable Contacts</h3>
<ul id="contactList">
<li>
<div class="contact h-card" data-contact="0" draggable="true" tabindex="0">
<img src="http://sdk.ckeditor.com/samples/assets/draganddrop/img/hfin.png" alt="avatar" class="u-photo">Huckleberry Finn
</div>
</li>
<li>
<div class="contact h-card" data-contact="1" draggable="true" tabindex="0">
<img src="http://sdk.ckeditor.com/samples/assets/draganddrop/img/dartagnan.png" alt="avatar" class="u-photo">D'Artagnan
</div>
</li>
</ul>
<button class='destroy_recreate' onclick='destroy_recreate()'>Destroy and recreate editors</button>
</div>
</div>
Other plugins like sourcedialog and justify seem to keep working well, but drag_list does not.
Does anyone know why this is happening? What do I have to do to be able to drag and drop content such as the example's hcards in a newly created CKEditor instance?
Thanks in advance.
It looks like a nasty bug in the editor core. I checked it and reported a ticket: https://dev.ckeditor.com/ticket/14339 Until the ticket will be fixed, all I can suggest is to reattach dragstart event on the editor recreation. You can put: CKEDITOR.document.getById('contactList').on('dragstart', ... ); inside the plugin init method. After such change drag and drop should work, but dragstart will be fired multiple times. You can detach the dragstart event, before you attach it again end everything should work fine.

How do I manipulate the same function in javascript for two different classes

I have to use two different sizes of checkbox on the same page. I will determine which size to use based on the checkbox name. If name='room' I will use the big image of class 'custom-checkbox'. Else if name='request', I will use small image of class custom-checkbox2.
Now, how do I modify the below script so that it can determine which class to use based on the name of the checkbox?
CSS:
.custom-checkbox{
width: 50px;
height: 50px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("../img/big-check-nopass.png") no-repeat;
}
.custom-checkbox:hover{
background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox.selected{
background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox input[type="checkbox"]{
margin: 0;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}
/* Let's Beautify Our Form */
label{
display: block;
padding: 2px 0;
}
/*for small cehckbox*/
.custom-checkbox2{
width: 20px;
height: 20px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("../img/small-check-nopass.png") no-repeat;
}
.custom-checkbox2:hover{
background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2.selected{
background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2 input[type="checkbox"]{
margin: 0;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}
/* Let's Beautify Our Form */
label2{
display: block;
padding: 2px 0;
}
Javascript:
function customCheckbox(checkboxName){
var checkBox = $('input[name="'+ checkboxName +'"]');
$(checkBox).each(function(){
$(this).wrap( "<span class='custom-checkbox'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
});
$(checkBox).click(function(){
$(this).parent().toggleClass("selected");
});
}
$(document).ready(function (){
customCheckbox("room[]");
})
HTML
<div class="row">
<div class="large-3 right columns">
<label><input type="checkbox" name="room[]" value="" /></label>
</div>
</div>
<div class="row">
<div class="large-3 right columns">
<label><input type="checkbox" name="request[]" value="" /></label>
</div>
</div>
EDIT**
Removed function and modified script:
<script>
$(document).ready(function (){
$("input:checkbox").each(function(){
if($(this).attr("name") == "room[]") {
$(this).wrap( "<span class='custom-checkbox'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
} else if($(this).attr("name") == "request[]") {
$(this).wrap( "<span class='custom-checkbox2'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
}
});
})
</script>
You can use the "each" jQuery function, which will check every inputs of the checkbox type on the page. So, you simple get it's name, if it's "room[]", add the custom-checkbox-big-size class to the span wrap, if it's name is "request[]", add the custom-checkbox-small-size class to the span wrap (I changed your CSS to make the things simple).
JS:
var wrapSpan = $('<span class="custom-checkbox-span"</span>');
$('input:checkbox').each(function() {
if ($(this).is(':checked')) {
wrapSpanspan.addClass('checked');
}
if($(this).attr("name") == "room[]") {
wrapSpan.addClass("custom-checkbox-big-size");
}
if($(this).attr("name") == "request[]") {
wrapSpan.addClass("custom-checkbox-small-size");
}
$(this).wrap(wrapSpan).hide();
});
$(".custom-checkbox-span").on("mouseup",function(){
checkSpan($(this));
});
function checkSpan(el) {
if(el.hasClass("selected")) {
el.removeClass("selected");
el.children().prop("checked",false);
} else {
el.addClass("selected");
el.children().prop("checked",true);
}
}
CSS:
.custom-checkbox-big-size {
background:red;
width: 50px;
height: 50px;
display: inline-block;
}
.custom-checkbox-big-size:hover, .custom-checkbox-big-size.selected {
background:yellow;
}
.custom-checkbox-small-size {
background:blue;
width: 20px;
height: 20px;
display: inline-block;
}
.custom-checkbox-small-size:hover, .custom-checkbox-small-size.selected {
background:green;
}
Check the jsFiddle. I did it with colors, because I don't have your original images, you have to change the background: color; rules.
This is handled in the selector, assuming you are using CSS3,like so...
input[type*='checkbox'][name*='room'] {
... styles here
}

jQuery toggle background color on radio buttons

I have a two radio controls that are designed as buttons. When I click the first radio button, then second one's background color should change and vice versa.
HTML:
<input type="radio" id="boo1" name="boo" value="boo1"><label for="boo1"><span></span>boo1</label>
<input type="radio" id="boo2" name="boo" value="boo2"><label for="boo2"><span></span>boo2</label>
CSS:
body {
font-family: open sans, arial, sans-serif;
color: #ffffff;
margin: 0;
background: #3894db;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
cursor: pointer;
width: 50%;
height: auto;
font-size: 22px;
margin-top: 10px;
float: left;
color: #ffffff;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked + label {
background: #c0392b;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked + label {
background: #f39c12;
}
JavaScript?
$(document).ready(function() {
$("#boo1").click(function () {
});
});
if($('#boo1').is(':checked'))
{
$('#boo2').css('color','#ff0000');
}
If you want the buttons to have different background colors when "inactive", you can use jQuery's css() function, like this:
$(document).ready(function () {
$("#boo1").click(function () {
$("#boo1 + label").css("background-color", "#c0392b");
$("#boo2 + label").css("background-color", "green");
});
$("#boo2").click(function () {
$("#boo2 + label").css("background-color", "#f39c12");
$("#boo1 + label").css("background-color", "blue");
});
});
See working jsFiddle.
try the following code
$("#boo1").click(function (event) {
$("#boo2").prop( "checked",true );
});
$("#boo2").click(function (event) {
$("#boo1").prop( "checked",true );
});
Try to use this javascript code
$(document).ready(function () {
$("input[name='boo']").click(function () {
$(this).next().removeAttr('style');
$("input[name='boo']").not(this).next().css('background-color', 'green');
});
});
try this way
HTML CODE:
<label for="boo1"><span><input type="radio" id="boo1" name="boo" value="boo1" /></span>boo1</label>
<label for="boo2"><span><input type="radio" id="boo2" name="boo" value="boo2" /></span>boo2</label>
JQUERY CODE:
$('input[type=radio]').on('click', function () {
$('input[type=radio]').not(this).closest('label').css('background', 'blue');
$(this).closest('label').css('background', 'red');
});
LIVE DEMO:
Happy Coding :)
http://jsfiddle.net/dreamweiver/py2BM/14/
You can achieve that with pure CSS
/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked ~ label[for="boo2"] {
background: #c0392b;
}
#boo1:checked ~ label[for="boo1"]{
background: #f39c12;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked ~ label[for="boo1"] {
background: #f39c12;
}
working demo:http://jsfiddle.net/HarishBoke/S6z8Z/
Hope this is what you are looking for!
Simple and optimized solution:
HTML Code:
<!-- Fieldset Wrap: begins -->
<div class="fieldset-wrap">
<!-- Fieldset: begins -->
<span class="fieldset orange">
Label 1
</span>
<!-- Fieldset: ends -->
<!-- Fieldset: begins -->
<span class="fieldset green">
Label 2
</span>
<!-- Fieldset: ends -->
</div>
<!-- Fieldset Wrap: ends -->
CSS:
.fieldset-wrap {
overflow: hidden;
font-size:0px;
}
.fieldset {
display: inline-block;
width: 200px;
padding: 5px 0;
text-align: center;
cursor: pointer;
font-family: verdana;
font-size: 14px;
}
.fieldset { margin-left: 1px; }
.fieldset:first-child { margin-left: 0px; }
.orange,
.green,
.checked{ color: #fff; }
.orange { background-color : orange; }
.green { background-color : green; }
.checked { background-color : blue; }
jQuery:
$('.fieldset').on('click', function(){
$(this)
.addClass('checked')
.siblings()
.removeClass('checked');
});
DEMO

Categories