My code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="../../assets/jquery-bar-rating121/dist/themes/fontawesome-stars.css">
<select id="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"> </script>
<script src="../../assets/jquery-bar-rating121/dist/jquery.barrating.min.js"></script>
jquery :
$('#example').barrating({
theme: 'fontawesome-stars'
});
The stars arent showing, its only showing option selection dropdown. Jquery and jquery.barrating.min.js already included, fontawesome-stars.css also already included at the top, no error. Anything wrong with the code? why arent the stars displaying?
Do I only need these 2 files jquery.barrating.min.js and fontawesome-stars.css for this plugin to work?
Make sure you load the scripts and CSS in the following order. This is the bare minimum files needed to make it work.
Do I only need these 2 files jquery.barrating.min.js and fontawesome-stars.css for this plugin to work?
Yes, along with it, you need to have font-awesome.css and jquery.js. Also, finally, don't forget to use the $(function () { }) to execute the code after the document is ready.
Works for me:
$(function() {
$('#example').barrating({
theme: 'fontawesome-stars'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="http://antenna.io/demo/jquery-bar-rating/jquery.barrating.js"></script>
<link href="http://antenna.io/demo/jquery-bar-rating/dist/themes/fontawesome-stars.css" rel="stylesheet"/>
<select id="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Related
I have this simple select html field, i am learning JS, I just want to have a autocomplete kind of thing in this field, so when user type it should have this kind of functionality, can It be done?
<html>
<body>
<select>
<option>USA</option>
<option>India</option>
<option>Canada</option>
<option>UK</option>
</select>
</body>
</html>
I have used this library and modified it for my needs. I had modified it to have search clear and custom styling of dropdown. Easy to do. You can also give it a try. https://davidstutz.github.io/bootstrap-multiselect/
Below is the example
<!-- Initialize the plugin: -->
$(document).ready(function() {
$('#example-getting-started').multiselect({
enableFiltering: true,
includeFilterClearBtn: false
});
});
.hide
{
display:none;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" integrity="sha512-fp+kGodOXYBIPyIXInWgdH2vTMiOfbLC9YqwEHslkUxc8JLI7eBL2UQ8/HbB5YehvynU3gA3klc84rAQcTQvXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<select id="example-getting-started" class="hide">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</body>
The previous answer is working fine, but one little more addition to the searchbox is sensiability to lower cas.
so this more accurate code for your issue.
<div class="container my-5">
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
NB: i'm using bootstrap v4
here is also a link to the source code
https://mdbootstrap.com/snippets/jquery/mdbootstrap/921549#html-tab-view
I am using multi select option(pillbox) using select2.
Using the above code just gives me a basic dropdown box .
Q: I am not able to get the search box where the user can type.
Thank you for taking time and looking into my query!
Here is the code.
<html>
<head>
<title>multiple select</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>Multiple select example
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration -->
<select id="multipleSelectExample" data-placeholder="Select an option" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$("#multipleSelectExample").select2();
}
);
</script>
Please try the following i think you need to place the jQuery script tag before the select2. And also i think you need to use a more recent version of jQuery.
<html>
<head>
<title>multiple select</title>
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<p>Multiple select example</p>
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration-->
<select class="" id="multipleSelectExample" data-placeholder="Select an option" multiple="">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$('#multipleSelectExample').select2();
}
);
</script>
</html>
<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
</select>
How to trigger an alert on clicking bootstrap select live search input box ?
I tried with this, but its not working.
$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
alert("live searching ..");
})
Any suggestions would be appreciated.
Thanks in advance.
Here is probably the correct Solution (probably):
Since the select-Tag is replace later(after the onload Event), so to be on the save side, so that it can be found "better" with a timeout.
I replace the alert call to a config.info call.
setTimeout(function(){
var newBox = $("#selectControl").get(0).parentNode;
$(newBox).find("input").on("click",function(){
console.info("live searching ..");
});
}, 1000);
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
<div class="container">
<div>
<select class="selectpicker" data-live-search="true" id="selectControl">
<option data-tokens="Option 1">Option 1</option>
<option data-tokens="Option 2">Option 2</option>
<option data-tokens="Option 3">Option 3</option>
<option data-tokens="Option 4">Option 4</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
</script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
</script>
</body>
btw.: details to te Control can be found in this Github, found it while google-ing
I am looking for help in putting a cookie into this script so the browser remembers the background image selected when the browser is closed or changed page. Any help would be much appreciated!
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
<body id="shelf">
<select id="themes" onChange="changeTheme()" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
It looks like the only piece you are missing is the setting and getting of the cookie. Here is a post about setting and getting cookies using both jquery and javascript.
This is jquery but it gets the job done.
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--download jquery.cookie from here http://plugins.jquery.com/cookie -->
<script type="text/javascript" src="images/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$("#themes").change(function() {
theme = $(this).val();
$.cookie("backgroundImage", theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
});
});
</script>
</head>
<body id="shelf">
<!--<select id="themes" onChange="changeTheme()" name="ChangeBG">-->
<select id="themes" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
</body>
</html>
I have a question about my project.
We want to let the user select a value in a select form and then import that value in a sparql Query. We're are not using php or something like that. the value should be in the sparql query.This is what i've tried:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" id="sgvzlr_script" src="../sgvizler.js"></script>
<script type="text/javascript">
sgvizler
.defaultEndpointURL("http://lod.xdams.org/sparql#")
.prefix('default','http://cdec.opendams.org/lod/shoah/')
.prefix('persecution','http://cdec.opendams.org/lod/shoah/persecution/');
//// Leave this as is. Ready, steady, go!
$(document).ready(sgvizler.containerDrawAll);
</script>
<h1>TEST</h1>
<html>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<h2>gTable</h2>
<div id="sgvzl_example19"
data-sgvizler-query="SELECT *
WHERE
{ persecution:'value' ?b ?c
}
LIMIT 10"
data-sgvizler-chart="google.visualization.Table"
data-sgvizler-log="2"
style="width:800px; height:600px;"
></div>
Thanks in advance,
Jelle