<form action="/key" method="POST">
<label>key_1:</label><br/>
<input type="text" name="a" pattern="^[a-zA-Z]+$" required/><br />
<label>key_2: </label><br />
<input type="text" name="b" pattern="^[a-zA-Z]+$" required/><br />
<input type="submit" name="submit" value="REQUEST" />
</form>
var socket = io.connect();
jQuery(function($) {
var aCounter = $('li.a'),
bCounter = $('li.b'),
aCounterPercentage = $('li.a span'),
bCounterPercentage = $('li.b span'),
aList = $('#a ul'),
bList = $('#b ul');
socket.on('percentages', function(data) {
aCounter
.css("width", data.a + '%');
aCounterPercentage
.text(Math.round(data.a * 10) / 10 + '%');
bCounter
.css("width", data.b + '%');
bCounterPercentage
.text(Math.round(data.b * 10) / 10 + '%');
});
socket.on('a', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
aList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
socket.on('b', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
bList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
});
body {
font: 100% Helvetica, Arial, sans-serif
}
ul.percentage {
width: 100%;
float: left
}
ul.percentage li {
display: block;
width: 0;
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
float: left;
clear: left
}
ul.percentage li.a {
background: #ff0066;
color: #fff
}
ul.percentage li.b {
background: #000;
color: #fff
}
ul.percentage li span {
float: right;
display: block
}
ul.tweets {
float: left;
clear: both
}
#stream {
float: left;
clear: both;
width: 100%
}
#stream ul {
list-style: none
}
#stream ul li {
float: left;
clear: left;
width: 100%;
border-bottom: 1px solid #ccc;
: 5px;
padding: 5px 0
}
#stream ul li:nth-child(even) {
background: #f8f5f6;
}
#stream ul li img {
float: left;
margin-right: 10px;
padding: 5px
}
#a {
width: 45%;
float: left
}
#b {
width: 45%;
float: right
}
<h1>GRAPH BASED ON THE KEYWORD</h1>
<ul class="percentage">
<li class="a">
a
<span>0</span>
</li>
<li class="b">
b
<span>0</span>
</li>
</ul>
<section id="stream">
<section id="a">
<h2>tweets of A</h2>
<ul></ul>
</section>
<section id="b">
<h2>tweets of B</h2>
<ul></ul>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
this is my code i am going to fetch the a and b value and will be assigned what i will give in my from.html input box can anybody help me how i have to do it. that variable should display in my ul and li class .
If you have some inputs let's say
<input type="text" id="inputA" name="inputA">
<input type="text" id="inputB" name="inputB">
and then you want to introduce the values in the list, I would recommend use some ids and classes.
<ul id="ab_list" class="percentage">
<li id="li_a">
<span class="val">a</span>
<span class="per">0</span>
</li>
<li id="li_b">
<span class="val">b</span>
<span class="per">0</span>
</li>
</ul>
So you can then easily use jQuery to do
<script>
var data_a = $("#inputA").val();
var data_b = $("#inputB").val();
$("#ab_list #li_a .val").html(data_a);
$("#ab_list #li_b .val").html(data_b);
<script>
Here you have an initial jsfiddle from where you can continue with your research/work http://jsfiddle.net/pfkx2nm7/. Of course you would need some kind of event (button click, key enter, form submit...etc) to submit your changes in the input box.
I hope it helps :)
Related
Hi so I have this "product" page (on Fiddle) where I have multiple radio boxes in two classes .choosesize and .choosetea. I want to set up my code where if the 8oz radio button is selected then one set of pictures will appear for all the tea selections and if the 16oz radio button is selected another set of pictures will appear for the tea selections.
I have assigned the small and big images to each tea option but I do not know how to show the small pictures if the small 8oz option is selected.
While you don't have all the "combined" images, I have added a possible solution.
var size = "small"
var teatype = "green"
$('.choosetea input').on('click', function() {
teatype = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
So this will comebine size and teatype, So each image will have the data-image where it should be size_teatype
$(document).ready(function() {
var size = "small"
var teatype = ""
$('.choosetea input').on('click', function() {
teatype = "_"+$(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
//local storage color
//local storage size
// add the value of the added radio boxes in the text box
$('.radios1').change(function(e) {
var selectedValue = parseInt($(this).val());
selectedValue += parseInt($(".radios2").val());
$('#amount').val('$' + selectedValue)
});
//add to cart
});
const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function validityCheck() {
let $size = $(`${sizeSelector}`);
let $color = $(`${colorSelector}`);
let size_flag = $size.is(':checked');
let color_flag = $color.is(':checked');
$('#itemdv1A').toggle(size_flag && color_flag) && $('#itemdv2A').toggle(size_flag && color_flag) && $('#yourbutton').toggle(size_flag && color_flag);
}
});
const sizeSelector1 = 'input:radio[id=small]';
const colorSelector1 = 'input:radio[id=chamomile]';
const cartSelector1 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const CHAMOMILE = 1;
function validityCheck() {
let $size1 = $(`${sizeSelector1}`);
let $color1 = $(`${colorSelector1}`);
let size_flag1 = $size1.is(':checked');
let color_flag1 = $color1.is(':checked');
$('#itemdv1B').toggle(size_flag1 && color_flag1) && $('#itemdv2B').toggle(size_flag1 && color_flag1) && $('#yourbutton').toggle(size_flag1 && color_flag1)
};
});
const sizeSelector2 = 'input:radio[id=small]';
const colorSelector2 = 'input:radio[id=oolong]';
const cartSelector2 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const OOLONG = 2;
function validityCheck() {
let $size2 = $(`${sizeSelector2}`);
let $color2 = $(`${colorSelector2}`);
let size_flag2 = $size2.is(':checked');
let color_flag2 = $color2.is(':checked');
$('#itemdv1C').toggle(size_flag2 && color_flag2) && $('#itemdv2C').toggle(size_flag2 && color_flag2) && $('#yourbutton').toggle(size_flag2 && color_flag2);
}
});
document.querySelector('#yourbutton').onclick = function() {
document.querySelector('#itemscart').style.display = "none"
};
/* Basic Styling */
.container {
width: 1200px;
top: 300px;
left: 50px;
padding: 15px;
display: flex;
position: absolute;
}
/* Columns */
.columnleft {
width: 220%;
position: relative;
margin-left: 30px;
}
.columnright {
width: 120%;
top: 10px;
margin-left: 80px;
display: block;
}
/* Left Column */
.columnleft img {
width: 100%;
position: absolute;
opacity: 0;
transition: all 0.3s ease;
}
.columnleft img.active {
opacity: 1;
}
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
/* Product Color */
.tea-type {
margin-bottom: 30px;
}
.choosetea div {
display: block;
margin-top: 10px;
}
.label {
width: 150px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosetea input {
display: none;
}
.choosetea input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosetea input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosetea input#green+label span {
background-color: #90978b;
}
.choosetea input#chamomile+label span {
background-color: #ffd4a1;
}
.choosetea input#oolong+label span {
background-color: #948e9e;
}
.choosetea input:checked+label span {
background-image: url(check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* SIZE */
.tea-type {
margin-bottom: 30px;
}
.choosesize div {
display: block;
margin-top: 10px;
}
.label {
width: 100px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosesize input {
display: none;
}
.choosesize input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosesize input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosesize input#small+label span {
background-color: #252525;
}
.choosesize input#big+label span {
background-color: #1d1d1d;
}
.choosesize input:checked+label span {
background-image: url(https://noychat.github.io/Folia-Website/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* Product Price */
.product-price {
margin-top: 40px;
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: black;
}
.cart-btn2 {
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
width: 20px;
position: absolute;
}
#amount {
margin-right: 10px;
display: inline-block;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 40px;
padding-left: 10px;
transition: all .5s;
}
#shoppingcart {
width: 360px;
height: 300px;
/* border: 1px solid red; */
}
.item {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 200px;
height: 30px;
padding-left: 10px;
transition: all .5s;
float: left;
}
.item1 {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 30px;
padding-left: 10px;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<!--close all header portion-->
<div class="container">
<!-- Left Column---Tea Images -->
<div class="columnleft">
<img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
<img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
<img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
<img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
<img data-image="big" src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">
<img data-image="small_chamomile" src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
<img data-image="small_oolong" src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
<img data-image="small_green" src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">
</div>
<!-- Right Column -->
<div class="columnright">
<!-- Product Description -->
<div class="product-description">
<span>Folia Tea Collection</span>
<h1>Signature Teas</h1>
<p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Tea Size -->
<div class="tea-type">
<h3>Size</h3>
<div class="choosesize">
<div>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">8 oz</div>
</div>
<div>
<input data-image="big" type="radio" id="big" name="size" value="40" class="radios1">
<label for="big"><span></span></label>
<div class="label">16 oz</div>
</div>
</div>
<!--CLOSE TEA Size-->
<!-- Tea Type -->
<div class="tea-type">
<h3>Tea Type</h3>
<div class="choosetea">
<div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
<label for="green"><span></span></label>
<div class="label">Green Tea</div>
</div>
<div>
<input data-image="chamomile" data-image1="small_chamomile" type="radio" id="chamomile" name="color" class="radios2" value="1">
<label for="chamomile"><span></span></label>
<div class="label">Chamomile Tea</div>
</div>
<div>
<input data-image="oolong" data-image1="small_oolong" type="radio" id="oolong" name="color" class="radios2" value="2">
<label for="oolong"><span></span></label>
<div class="label">Oolong Tea</div>
</div>
</div>
</div>
<!--CLOSE TEA TYPE-->
<h3>Product Pricing</h3>
<div class="product-price">
<input type="text" name="amount" id="amount">
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
</div>
</div>
</div>
<!--close CONTAINER-->
<div id="shoppingcart">
<h3>Shopping Cart</h3>
<h5>Item and Price</h5>
<div id="itemscart">
<div id="itemdv1A" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
<div id="itemdv2A" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1B" style="display: none"> <input type="text" name="amount" class="item" value="8oz Chamomile Tea"></div>
<div id="itemdv2B" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1C" style="display: none"> <input type="text" name="amount" class="item" value="8oz Oolong Tea"></div>
<div id="itemdv2C" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<button style="display: none" type="button" class="cart-btn2" id="yourbutton" name="remove" value="10">x</button>
</div>
</div>
I have created a vertical timeline. Now I have to set the background color of the circle when it is an active stage. You can check the below image first circle with text is an active stage and background color is red.
Example:
I have four form called as form1,form2,form3,form4.The first circle always in the red background when the page reloads. If the user is on form1 then background color of the circle with text is in the red color. After clicking on button1 the second circle is in red background and first circle in green. If the user clicked on form2 than the second circle is in the green and the third circle will be in red. If the user clicked on the third button3 then the third circle of background is in a green and four circle is in red.
I tried some code only first circle is working and if I click on the Button1 from form1 than all the circle showing in red color.
There is some issue with my script. Please check it. And also check my button name on click event because I set the same name of each button.
I update my code here.Now Issue is if the field is blank than also it showing the green circle even I am getting the validation error message .https://jsfiddle.net/Narendra2015/g2j1rtzn/
Would you help me out in this?
$(document).ready(function(){
$('.button-clicked').click(function(){
$('.info-timeline ul li span').removeClass("timeline-circle-active");
$('.info-timeline ul li a').removeClass("timeline-text-active");
$('.info-timeline ul li span').addClass("timeline-circle-active");
$('.info-timeline ul li a').addClass("timeline-text-active");
});
});
$(document).ready(function() {
$("form[name='form1']").validate({
rules: {
fname: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
//form.submit();
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form1']").serialize(),
success: function (data) {
//alert(data);
$('#first').hide();
$('#second').show();
}
});
}
})
});
$(document).ready(function() {
$("form[name='form2']").validate({
rules: {
mname: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
//form.submit();
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form2']").serialize(),
success: function (data) {
//alert(data);
$('#second').hide();
$('#third').show();
}
});
}
})
});
$(document).ready(function() {
$("form[name='form3']").validate({
rules: {
age: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
//form.submit();
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form4']").serialize(),
success: function (data) {
//alert(data);
$('#third').hide();
$('#four').show();
}
});
}
})
});
.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin:0 10px;}
.info-timeline ul li span{
position: relative;
border: 2px solid #000;
border-radius: 100%;
width: 45px;
line-height: 40px;
text-align: center;
margin-top: 30px;
color: #000;
z-index: 2;
display: inline-block;
}
.info-timeline ul li span.timeline-circle-active{
background-color: #ff0000;
color: #000;
border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active{
color: #ff0000 !important;
}
.info-timeline ul li:not(:first-of-type) span:before {
position: absolute;
border: 1px solid #000;
width: 0;
height: 30px;
display: block;
content: '';
left: 50%;
z-index: 1;
top: -32px;
margin-left: -1px;
}
.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}
.info-timeline ul li a{color: #000;margin: 10px;}
#second, #third, #four{
display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="info-timeline">
<ul>
<li><span class="timeline-circle-active">1</span>Button1</li>
<li><span>2</span>Button2</li>
<li><span>3</span>Button3</li>
<li><span>4</span>Button4</li>
</ul>
</div><!--info-timeline-->
<div id="first">
<form method="post" action="" name="form1">
<input type="text" name="fname" placeholder="first name">
<button type="submit" class="button-clicked">Button1</button>
</form>
</div>
<div id="second">
<form method="post" action="" name="form2">
<input type="text" name="mname" placeholder="middle name">
<button type="submit" class="button-clicked">Button2</button>
</form>
</div>
<div id="third">
<form method="post" action="" name="form3">
<input type="text" name="lname" placeholder="last name">
<button type="submit" class="button-clicked">Button3</button>
</form>
</div>
<div id="four">
<form method="post" action="" name="form4">
<input type="text" name="age" placeholder="age">
<button type="submit" class="button-clicked">Submit</button>
</form>
</div>
A working example:
(because of the submission, I'm afraid you have to try it on your own. But it works for me)
Note :
I added an ID attribute to the li (circle-1, circle-2, etc.)
Form use the GET method, not the POST (to have to next_indexin the URL)
Synopsis:
When you submit the form, a property next_index (circle) is send with the form. Thanks to this property, we know which LI have to be selected.
A smarter solution should exist (with sessionStorage for instance), though. But this one fits the need.
$(document).ready(function(){
// The next circle index (1-start))
let curr_index = getQueryParam('next_index') ;
if (curr_index == 'next_index'){ curr_index = 1 }
/* Here the condition on validation
if (validation is not ok due to x reasons)
{
curr_index -- ; // => stay at current step
}
*/
$('li#circle-'+curr_index).find('span').addClass("timeline-circle-active");
$('li#circle-'+curr_index).find('a').addClass("timeline-text-active");
});
//To get a param in the querystring
function getQueryParam(param) {
location.search.substr(1)
.split("&")
.some(function(item) { // returns first occurence and stops
return item.split("=")[0] == param && (param = item.split("=")[1])
})
return param
}
.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin:0 10px;}
.info-timeline ul li span {
position: relative;
border: 2px solid #000;
border-radius: 100%;
width: 45px;
line-height: 40px;
text-align: center;
margin-top: 30px;
color: #000;
z-index: 2;
display: inline-block;
}
.info-timeline ul li span.timeline-circle-active{
background-color: #ff0000;
color: #000;
border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active{
color: #ff0000 !important;
}
.info-timeline ul li:not(:first-of-type) span:before {
position: absolute;
border: 1px solid #000;
width: 0;
height: 30px;
display: block;
content: '';
left: 50%;
z-index: 1;
top: -32px;
margin-left: -1px;
}
.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}
.info-timeline ul li a{color: #000;margin: 10px;}
#second, #third, #four{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
<ul>
<li id="circle-1"><span>1</span>Button1</li>
<li id="circle-2"><span>2</span>Button2</li>
<li id="circle-3"><span>3</span>Button3</li>
<li id="circle-4"><span>4</span>Button4</li>
</ul>
</div><!--info-timeline-->
<div id="first">
<form method="get" action="" name="form1">
<input type="text" name="fname" placeholder="first name">
<input type="hidden" name="next_index" value="2" />
<button type="submit" class="button-clicked">Button1</button>
</form>
</div>
<div id="second">
<form method="get" action="" name="form2">
<input type="text" name="mname" placeholder="middle name">
<input type="hidden" name="next_index" value="3" />
<button type="submit" class="button-clicked">Button2</button>
</form>
</div>
<div id="third">
<form method="get" action="" name="form3">
<input type="text" name="lname" placeholder="last name">
<input type="hidden" name="next_index" value="4" />
<button type="submit" class="button-clicked">Button3</button>
</form>
</div>
<div id="fourth">
<form method="get" action="" name="form4">
<input type="text" name="age" placeholder="age">
<button type="submit" class="button-clicked">Submit</button>
</form>
</div>
I simplified your code ( deleted the code that is not for the question ) .
HTML
I added a relation between the buttons and the spans. With data-target id of span.
JQ
EDIT after op comment
First, you get the targeted span id ( when click on button2, span with id #button2 will be selected )
Second, get the span before the current selected one ( if there is one )
. Example when click on button2 , prevSelected will have value #button1
Then add and remove classes to the span and the links
See edited code below
CSS
add styles for the greenSpan class
Observation
No need to add multiple $(document).ready(function(){. Nest all your code inside only 1 function
Instead of giving active class to span and active class to a, you could give that active class to the li containing span and a and then just style in css, for example li.active > span {/*timeline-circle-active css*/} and li.active > a {/*timeline-text-active css*/}
See snippet below.
$(document).ready(function() {
$('.button-clicked').click(function() {
var TargetSpan = "#" + $(this).attr("data-target"),
prevSelected = $(TargetSpan).parents("li").prev("li").find("span")
prevSelected.addClass("greenSpan").removeClass("timeline-circle-active")
prevSelected.next("a").addClass("greenLink").removeClass("timeline-text-active")
$(TargetSpan).addClass("timeline-circle-active").removeClass("greenSpan")
$(TargetSpan).next("a").addClass("timeline-text-active")
});
});
.info-timeline ul {
list-style: none;
margin: 0;
padding: 0;
}
.info-timeline ul li {
margin: 0 10px;
}
.info-timeline ul li span {
position: relative;
border: 2px solid #000;
border-radius: 100%;
width: 45px;
line-height: 40px;
text-align: center;
margin-top: 30px;
color: #000;
z-index: 2;
display: inline-block;
}
.info-timeline ul li span.timeline-circle-active {
background-color: #ff0000;
color: #000;
border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active {
color: #ff0000 !important;
}
.info-timeline ul li a.greenLink {
color: green
}
.info-timeline ul li:not(:first-of-type) span:before {
position: absolute;
border: 1px solid #000;
width: 0;
height: 30px;
display: block;
content: '';
left: 50%;
z-index: 1;
top: -32px;
margin-left: -1px;
}
.info-timeline ul li:first-child {
margin-top: 0;
}
.info-timeline ul li:first-child:before {
display: none;
}
.info-timeline ul li a {
color: #000;
margin: 10px;
}
.info-timeline ul li span.greenSpan {
background: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
<ul>
<li><span id="button1" class=" timeline-circle-active">1</span>Button1</li>
<li><span id="button2">2</span>Button2</li>
<li><span id="button3">3</span>Button3</li>
<li><span id="button4">4</span>Button4</li>
</ul>
</div>
<!--info-timeline-->
<button type="submit" class="button-clicked" data-target="button1">Button1</button>
<button type="submit" class="button-clicked" data-target="button2">Button2</button>
<button type="submit" class="button-clicked" data-target="button3">Button3</button>
<button type="submit" class="button-clicked" data-target="button4">Button4</button>
I have a requirement to design the dropdown with multiselect option with checkbox using ASP.NET controls and also i need to select checkboxes while binding the values on the dropdown. Please help
you can use following open source library to get your goal its simple and really amazing
http://wenzhixin.net.cn/p/multiple-select/
Please check this, I developed this similar dropdown for my project.
//Multiple Dropdown Select
$('.multiDrop').on('click', function (e) {
e.stopPropagation();
$(this).next('ul').slideToggle();
});
$(document).on('click', function (){
if (!$(event.target).closest('.wrapMulDrop').length) {
$('.wrapMulDrop ul').slideUp();
}
});
$('.wrapMulDrop ul li input[type="checkbox"]').on('change', function () {
var x = $('.wrapMulDrop ul li input[type="checkbox"]:checked').length;
if (x != "") {
$('.multiDrop').html(x + " " + "selected");
} else if (x < 1) {
$('.multiDrop').html('Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>');
}
});
.wrapMulDrop {
width: 50%;
display: inline-block;
position: relative;
}
.multiDrop {
width: 100%;
padding: 5%;
background-color: transparent;
border: 1px solid #ccc;
color: #999;
text-align: left;
}
.multiDrop:focus {
outline: none;
}
.wrapMulDrop ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
z-index: 5;
display: none;
}
.wrapMulDrop ul li {
list-style-type: none;
background-color: #e5801d;
padding: 1% 6%;
}
.wrapMulDrop ul li:hover {
background-color: #33414e;
}
.wrapMulDrop ul li label {
width: 100% !important;
cursor: pointer;
margin: 0 !important;
color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapMulDrop">
<button type="button" class="multiDrop">Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>
</button>
<ul>
<li>
<input type="checkbox" id="list1">
<label for="list1">Template 1</label>
</li>
<li>
<input type="checkbox" id="list2">
<label for="list2">Template 2</label>
</li>
<li>
<input type="checkbox" id="list3">
<label for="list3">Template 3</label>
</li>
<li>
<input type="checkbox" id="list4">
<label for="list4">Template 4</label>
</li>
</ul>
</div>
I have jquery UI 1.7 and jquery 1.3.2 version. I want to have a combobox with multiple check list in it as shown in picture. Can someone please provide me some simple solution using pure HTML and javscript or JQuery. For the below one, I do not know how to use it
But I do not want any complex code or imports of libraries, preferably in simple javascript or jQuery e.g. jQuery("abcd").multipselect. Please also tell me how and where to put the files etc
Thank you
Aiden
i think this will meet what you want
<html>
<head></head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<style>
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #d3d3d3;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 25px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #bdbdbd;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
</style>
<body>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hide">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="All" />Select All</li>
<li>
<input type="checkbox" value="January" />January</li>
<li>
<input type="checkbox" value="February" />February</li>
<li>
<input type="checkbox" value="March" />March</li>
<li>
<input type="checkbox" value="April" />April</li>
<li>
<input type="checkbox" value="May" />May</li>
<li>
<input type="checkbox" value="June" />June</li>
<li>
<input type="checkbox" value="July" />July</li>
<li>
<input type="checkbox" value="August" />August</li>
<li>
<input type="checkbox" value="September" />September</li>
<li>
<input type="checkbox" value="October" />October</li>
<li>
<input type="checkbox" value="November" />November</li>
<li>
<input type="checkbox" value="December" />December</li>
</ul>
</div>
</dd>
</dl>
<script>
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
function appendToMultiSelect(title){
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.append(",") ;
}
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
}
$('.mutliSelect input[type="checkbox"]').change(function(){
if($(this).val() != "All")
{
var title = $(this).val() ;
if ($(this).is(':checked')) {
appendToMultiSelect(title);
$(".hide").hide();
} else {
$(".mutliSelect").find('li input[value=All]').prop('checked', false);
$('span[title="' + title + '"]').remove();
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.html(lastItem.html().replace(',','')) ;
}
else{
$(".hide").show();
}
var ret = $(".hide");
$('.dropdown dt a').append(ret);
}
}
else
{
//clear selected items
$('.multiSel').html('');
if ($(this).is(':checked')) {
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', true);
title = option.val() ;
appendToMultiSelect(title);
});
$(".hide").hide();
}
else{
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', false);
});
$(".hide").show();
}
}
});
</script>
</body>
</html>
I have a piece of code that I have called my "scroller" and it basically switches the user from one button to another and back with arrow buttons. It works fine when I don't use bootstrap but now that I am trying to use bootstrap it wont work. here is the code:
/*START MINE SCROLLER CONTROL*/
#containerms {
position: absolute;
margin: 0px;
padding: 0px;
width: 49%;
height: 100%;
overflow: hidden;
}
.boxms {
position: absolute;
width: 50%;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1ms {
left: 50%;
}
.movems {
position:fixed;
z-index:2;
top:50%;
margin-top:-20px;
text-align:center;
padding:20px;
background:#fff;
color: #000;
}
.leftms {
cursor:pointer;
left:50%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
.rightms {
cursor:pointer;
right:1%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
ul{
list-style: none;
}
span.namems{
width: 150px;
text-align: center;
background: #ABA38F;
color: #fff;
padding: 5px;
}
/*END MINE SCROLLER CONTROL*/
<div class="col-xs-6" id="green-line-l">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div class="row" style="height:100%;">
<div class="movems leftms circle" > < </div>
<div class="movems rightms circle" > > </div>
<div id="containerms">
<ul>
<li id="boxms1" class="boxms current"><span class="namems">Forest Floor</span>
<br>
<br>
<input type="button" id="forestfloor" onclick="mine1Click()"></input>
<br>
<br>
</li>
<li id="boxms2" class="boxms"><span class="namems">Forest Cave</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms3" class="boxms"><span class="namems">Cave Atrium</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms4" class="boxms"><span class="namems">Deep tunnles</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms5" class="boxms"><span class="namems">The Dark Roads</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms6" class="boxms"><span class="namems">Abandonded Mine</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms7" class="boxms"><span class="namems">King's Tomb</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms8" class="boxms"><span class="namems">Underground Kingdom</span>
<br>
<input id="forestfloor"></input>
</li>
<li id="boxms9" class="boxms"><span class="namems">Dragons Lair</span>
<br>
<input id="forestfloor"></input>
</li>
</ul>
</div>
<script>
debugger
var i = 1;
$('.rightms').click(function () {
if (i < $("#containerms ul li").length) {
$("#boxms" + i).animate({
left: '-50%'
}, 400, function () {
var $this = $("#boxms" + i);
$this.css('leftms', '150%')
.appendTo($('.containerms'));
});
$("#boxms" + i).next().animate({
left: '50%'
}, 400);
i++;
}
});
$('.leftms').click(function () {
if (i > 1) {
$("#boxms" + i).animate({
left: '150%'
}, 400, function () {
var $this = $("#boxms" + i);
$this.css('rightms', '-150%')
.appendTo($('.containerms'));
});
$("#boxms" + i).prev().animate({
left: '50%'
}, 400);
i--;
}
});
</script>
</div>
</div>
</div>
I have no idea what is wrong with this code and am looking for some help. thanks.
Ok so i figured it out. The row that contained the "scroller" was not expanding, vertically or horizontally enough to reveal the content, so I manually forced them to expand.