i'm using image-picker.js
How to make the image as default?
<!-- / select number of pet-->
<div class="select-pets text-center">
<p>Select Your Pet</p>
<div>
<select multiple="multiple" class="image-picker show-labels show-html">
<option data-img-src="assets/img/pets/cat1.png" data-img-class="first" data-img-alt="Ricky" value="1" class="stretched-link "> Ricky </option>
</select>
</div>
</div>
<!--/ select number of pet -->
https://rvera.github.io/image-picker/
before tick
after tick
Related
Value showing in span but I need to get value in the input field.
There will also be Product 3, 4, and so on.
The input field name, price, id, class is being populated dynamically from a database so they are the same for different Items.
If one product exists then it's fine however with multiple products and their options the price for the first ID only changes. As an example, if I change the select from Product 2 then the price of Product 1 changes only. How can I get it to stick to its own Product and change the price for that one only?
$(".readers").change(function() {
var productParent = $(this).parent().parent();
var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
productParent.find(".readers option:selected").each(function() {
newPrice += +$(this).attr('data-price')
});
productParent.find(".price").html("£" + newPrice.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><span data-name="product_name">Addon Product</span></p>
<p data-name="product_desc"> Addon product descriptions</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
<div>
<p><span data-name="product_name">2nd Product</span></p>
<p data-name="product_desc">2nd Addon product description</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
</div>
I have the following code.
$("#duration").on("click", function() {
$('#duration .select-selected').addClass('select-arrow-active');
$('#duration .select-items').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4 custom-select" id="duration">
<p class="label-title">How much time do you have?</p>
<label for="duration">
<select name="duration" class="passes-buscador-select">
<option value="">NOT SURE </option>
<option value="less-than-1-week"> Less than 1 week </option>
<option value="1-week-to-2-weeks"> 1 week to 2 weeks </option>
<option value="more-than-2-weeks"> More than 2 weeks </option>
<option value="daytrips"> Day trips </option>
</select>
</label>
<div class="select-selected">NOT SURE </div>
<div class="select-items select-hide">
<div> Less than 1 week </div>
<div> 1 week to 2 weeks </div>
<div> More than 2 weeks </div>
<div> Day trips </div>
</div>
</div>
When the user clicks the element the class is not added, after checking it with the inspector I noticed the element blinks which means is being targeted properly more so when I execute.
$('#duration .select-selected').addClass('select-arrow-active');
On the console the class gets added, so I have no idea what could be happening. Am I missing something?
Edit:
I created a snipet with a CSS class editing the element's color, showing that the class is being added. Look:
$("#duration").on("click", function() {
$('#duration .select-selected').addClass('select-arrow-active');
$('#duration .select-items').toggle();
});
#duration .select-selected {
color: blue;
}
#duration .select-selected.select-arrow-active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4 custom-select" id="duration">
<p class="label-title">How much time do you have?</p>
<label for="duration">
<select name="duration" class="passes-buscador-select">
<option value="">NOT SURE </option>
<option value="less-than-1-week"> Less than 1 week </option>
<option value="1-week-to-2-weeks"> 1 week to 2 weeks </option>
<option value="more-than-2-weeks"> More than 2 weeks </option>
<option value="daytrips"> Day trips </option>
</select>
</label>
<div class="select-selected">NOT SURE </div>
<div class="select-items select-hide">
<div> Less than 1 week </div>
<div> 1 week to 2 weeks </div>
<div> More than 2 weeks </div>
<div> Day trips </div>
</div>
</div>
I am making a calculator for our company but we are running into a problem.
We are dealing with certain widths. I have that under control.
For example, a width of 100 must be rounded to 98.4 by a certain formula, that has all been achieved!
Now that 98.4 must be used after choosing an option.
For example, that 98.4 must be divided by 12.3 when option
<option id = "222"> 20 cm, hooks overlap 2 </option>
is chosen. And so on with all options.
This is what we have got, please help.
If you need to see for real;
http://calculator.verfuurden.com/
<button class="open-button" onclick="openForm()">Strokencalculator</button>
<div class="form-popup" id="myForm">
<div class="calc-container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-sm-12 col-md-12">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<strong class="logo">
<img src="/img/logo_enkel_lisoflex_logo.jpg" width="270" height="auto">
</strong>
<div class="form-group">
<label for="breedte" class="text-info">Width in cm</label><br>
<input type="text" name="breedte" id="firstNumber" class="form-control">
</div>
<div class="form-group">
<label for="breedte" class="text-info">the exacte width will be;</label><br>
<label class="form-control" id="result"></label>
</div>
<div class="form-group">
<label for="strookmaat" class="text-info">Required strip size and overlap:</label><br>
<select class="form-control select2">
<option id="102">10cm, hooks overlap 0</option>
<option id="212">20cm, hooks overlap 1</option>
<option id="222">20cm, hooks overlap 2</option>
<hr>
<option id="313">30cm, hooks overlap 1</option>
<option id="333">30cm, hooks overlap 3</option>
<hr>
<option id="414">40cm, hooks overlap 1</option>
<option id="424">40cm, hooks overlap 2</option>
<option id="434">40cm, hooks overlap 3</option>
<option id="444">40cm, hooks overlap 4</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" onClick="divideBy()" Value="Calculate" /><br><br>
<label for="aantal" class="text-info">Needed number of strips;</label> <strong><span id="result2"></span></strong>
</div>
</form>
<button type="button" class="btn cancel" onclick="closeForm()">Close calculator</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function divideBy() {
var num1 = document.getElementById("firstNumber").value;
document.getElementById("result").innerHTML = Math.round(Math.floor(num1 / 4.1) * 4.1 * 10) / 10;
}
</script>
In the program below I am using fee head id and trying to access dynamic data but when I select or click on any element of the first list it does not go to the next list.
After clicking on any element in first list, the element should disappear from first list and display in the second list. I am using a theme which has built-in classes in JS and JSP.
<div class="panel-body">
<div class="form-group">
<div class="col-lg-12">
<div class="leftBox">
<select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
<!-- <option value="1">Spain</option>
<option value="2">Germany</option>
<option value="3">Uruguay</option>
<option value="4" selected="selected">Brazil</option>
<option value="5" selected="selected">England</option>
<option value="6" selected="selected">Portugal</option>
<option value="7">Argentina</option>
<option value="8">Italy</option>
<option value="9">Croatia</option>
<option value="10">Denmark</option>
<option value="11">Russia</option>
<option value="12">Greece</option>
<option value="13">Chile</option>
<option value="14">Côte d'Ivoire</option>
<option value="15" selected="selected">France</option>
<option value="16">Sweden</option>
<option value="17">Switzerland</option>
<option value="18">Republic of Ireland</option>
<option value="19">Australia</option>
</select> -->
<br/>
<span id="box1Counter" class="count"></span>
<div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
</div>
<div class="dualBtn">
<button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
<button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
<button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
<button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
</div>
<div class="rightBox">
<select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
<br/>
<span id="box2Counter" class="count"></span>
<div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>
</div>
</div><!-- End .form-group -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->
When you click on the firstList's option remove it from there and append it to the secondList. I've created a simple demo that might go with your scenario.
HTML :
First :
<select id="firstList">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>
jQuery :
$("#firstList").on("change", function(){
var selectedItem = $(this).children("option:selected").val();
$(this).children("option:selected").remove();
$("#secondList").append($("<option> </option>").text(selectedItem));
});
jsFiddle
Note : It's just an overview of how you can implement it. But what you want is entirely upto you.
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.