I am trying to develop an Image Picker following these tutorials http://jsfiddle.net/huanlin/mgvrc/ and http://rvera.github.io/image-picker/#
Here is the code I have tried so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Image Picker</title>
<link rel="stylesheet" type="text/css" href="image-picker.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="image-picker.js"/> </script>
<script type="text/javascript" src="image-picker.min.js"/> </script>
<script>
$(document).ready(function () {
$("#selectImage").imagepicker({
hide_select: true
});
var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
$container.masonry({
columnWidth: 30,
itemSelector: '.thumbnail'
});
});
});
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<select id="selectImage" class="image-picker">
<option value=""></option>
<option data-img-src="o.png" value="1"> Image 1 </option>
<option data-img-src="aa.png" value="2"> Image 2 </option>
<option data-img-src="ee.png" value="3"> Image 3 </option>
</select>
<br>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
But no image is showing in the browser. All CSS, JS scripts and images have been linked properly. Can you suggest what am I doing wrong here?
This is jQuery plugin. I see it's missing in your html head.
Related
I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
Im trying to dynamically update the CSS-Stylesheet of my page using jQuery and everything seems to be working fine in Chrome, but sadly in IE11 doesnt seems to do the trick.
The following code shows the HTML and JS Files:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="default-style" content="style-02">
<title>Stylesheet Switcher</title>
<!-- CSS -->
<link rel="stylesheet" href="style-01.css" title="style-01">
<link rel="stylesheet" href="style-02.css" title="style-02">
<link rel="stylesheet" href="style-03.css" title="style-03">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello World</h1>
Change style
<select id="styleChanger">
<option value="style-01">style-01</option>
<option value="style-02">style-02</option>
<option value="style-03">style-03</option>
</select>
<br/>
<img src="icons.gif" alt="Smiley face">
</body>
</html>
And the JS File:
$(document).ready(function()
{
var theme = localStorage.getItem('style');
if (!theme) {
localStorage.setItem('style', 'style-01');
};
updateTheme();
$("#styleChanger").val(theme);
$("#styleChanger").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
localStorage.setItem('style', selectedValue);
updateTheme();
});
});
function updateTheme()
{
currentTheme = localStorage.getItem('style');
$('meta[http-equiv=default-style]')[0].content = currentTheme;
};
Does anybody knows, why after updating the "content" in the META tag IE doesnt loads the new CSS File?
Thanks for your help
How to check if select2.js has at least one option selected?
The code bellow shows the message 'Please select at least one item in the list.' even after selecting one item.
$('form.validate-form').validator({
disable: false
});
$( "select.validate" ).each(function() {
$(this).validator();
$(this).get(0).setCustomValidity('Please select at least one item in the list.');
});
How can I make the message 'Please select at least one item in the list.' disappear after selecting at least one option?
I am using Bootstrap validator plugin.
jsfiddle
SOMETHING LIKE THIS
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<form id="myform">
<select multiple="true" class="mySelect" name="item" required>
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="submit" name='submit' value="Submit">
</form>
<script>
$(document).ready(function() {
$(".mySelect").select2();
$("#myform").validate(
{
rules:
{
item:
{
required: true
}
}
});
});
</script>
</body>
</html>
I am using dojo.js to make dropdown box with scroll functionality, something not native to standard select statement.
I have managed to create the dropdown menu but I am having difficulty getting it to execute a function using the standard onchange attribute of the select statement. onchange = "updateData()" in this case.
Grateful for any help.
<html>
<head>
<title>drop down</title>
<link rel="stylesheet" href="d3/dijit/themes/claro/claro.css">
<script type="text/javascript" src="d3/d3.js"></script>
<script>dojoConfig = {async: true}; </script>
<script src='d3/dojo/dojo.js'></script>
<script src='d3/dijit/dijit.js' ></script>
<script>
var djConfig = {
isDebug: true}; </script>
<script type="text/javascript">
require(["dojo/widget/Select"]);</script>
<script>
require(["dojo/parser"], function(parser) {
parser.parse();});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
#dropdown{
font-size: 22px;
font-family: serif;
color: grey;}
</style>
</head>
<body>
<div class="claro">
<select
id="dropdown" data-dojo-type="dijit/form/Select" data-dojo-props="maxHeight:50"
style="width: 100px" onchange= "updateData()" >
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<script type="text/javascript">
//The following is used to reset the dropdown box to original value on pg refresh
document.getElementById("dropdown").selectedIndex = 0;
function updateData() {alert("hello")}
</script>
</body>
</html>
var dropDown = new Select({
name: "select2",
id: "projectDropDown",
onChange: function (value)
{
//console.log("project Id: ", this.get("value"))
reScopeProjectContext(value,satpcontext);
},
store: projectStore,
labelAttr: "name",
value: projectInContext,
}).placeAt(win.body()).startup();
The updatedata function is defined after the declaration of the select widget. This will not work
Try the below code.
<!DOCTYPE html>
<html>
<head>
<link href="dojo/dojo-release-1.9.3-src/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
<script type="text/javascript" src="dojo/dojo-release-1.9.3-src/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/parser", "dijit/form/Select"],function(parser){
parser.parse();
});
function updateData(){
alert("Onchange function called");
}
</script>
</head>
<body class="claro">
<select name="select1" data-dojo-type="dijit/form/Select" onchange="updateData()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</body>
</html>
I have the following code for a widget. The widget is a searchpod. The file is searchPod.html
<select class="search-by" id="searchBy">
<option value="search_by">Search By</option>
<option value="lastname">Employee Last Name</option>
<option value="ssn">Employee SSN</option>
<option value="eeid">Employee EEID</option>
<option value="claim_number">Claim Number</option>
<option value="leave_number">Leave Number</option>
</select>
I have another file called SPTest.js which tries to use that select above. This function is inside a test function since we are also using QUnit to do unit tests.
define(
['../Widget/SearchPod/searchPod'],
function () {
function checkSearchBy()
{
test('check if select has "Search By" text', function () {
alert($("#searchBy option[value='search_by']").text());
alert($('#searchBy23').find('option:selected').text());
var expected = "Search By";
deepEqual($("#searchBy option[value='search_by']").text(), expected,
"We expect dropdown text to display 'Search By' by default");
});
}
return {
runny: runny,
checkSearchBy: checkSearchBy,
};
I can't figure out why my .js file can't find the select by its id.
I'll put the HTML output below for those who'd like to see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLR Javascript Unit Test</title>
<link rel="stylesheet" href="Style/qunit.css">
<link rel="stylesheet" href="Style/cupertino/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" href="Style/jquery.jscrollpane.css" />
<link rel="stylesheet" href="Style/jquery.dataTables.css" />
<link rel="stylesheet" href="Style/Report.css" />
<link rel="stylesheet" href="Style/GlobalReportStyles_10_css.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Scripts/Lib/qunit.js"></script>
<script type="text/javascript">
QUnit.config.autostart = false;
</script>
<script data-main="Scripts/App" src="Scripts/Lib/require.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Test Results<button id="test">Test DOM</button></li>
<li>Report Viewer<button id="btnSPTest">
Test Search Pod</button></li>
<li>Transactional</li>
</ul>
<div id="tabs-1">
Testing is fun!
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div id="tabs-2">
<iframe width="100%" height="600px" src="ViewReportPage.aspx"
id="viewreport"></iframe>
</div>
<div id="tabs-3">
<iframe width="100%" height="600px" src="BuildReport.aspx" id=""></iframe>
</div>
</div>
</body>
</html>
Any explanation would help. Thank you.