I am trying to get the selection box below the canvas. I have tried a number of combinations but have not prevailed. I am using paper.js for the canvas. Also, I know that having the names of colors like I have them is bad but this is a rough prototype site so cut me some slack please. Thank you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/themes/classic.min.css" /> <!-- 'classic' theme -->
<link rel="stylesheet" type="text/css" href="WEBSITE.css">
<!-- Load the Paper.js library -->
<script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>
</head>
<body>
<script src="displayTable.js"></script>
<canvas id="mycanvas" resize></canvas>
<label for="backgroundTable">Color for background of table:</label>
<form action="website.php" method="post">
<div class="form">
<select name="userBackgroundSelect" id="userBackgroundSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
Related
I am using bootstrap 5 and bootstrap-select .
I have a PSD like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div class="col-md-6 mx-auto">
<label for="color_id">Colors</label>
<select class="form-control selectpicker" id="color_id" name="color_id[]" data-live-search="true">
<option value="1" data-content="<span class=badge bg-danger>Red</span>">
Red
</option>
<option value="2" data-content="<span class=badge bg-warning>Warning</span>">
Warning
</option>
</select>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</body>
</html>
When I open the inspact I see this code
I see that these codes are missing
bg-danger
But I see this demo.
[3
Both the text color is white and the background color is white. Nothing is clear.
Use this for multiple classes:
<option value="1" data-content="<span class='badge bg-danger'>Red</span>">
Red
</option>
You didn't use the quotation marks here:
class="badge bg-danger"
I need to create a filter form which only shows year option. The input can be be a dropdown list of year or datepicker that only shows year option.
Do you know how to create it? please let me know, I am a beginner,
I have tried to find solution, but didn't find any.
Thank you, I appreciate any helps.
Thanks #Reystleen for answer in the comment!
ANSWER: https://itsolutionstuff.com/post/bootstrap-year-picker-example-using-datepicker-jsexample.html
CODE:
<html lang="en">
<head>
<title>Bootstrap - year picker only example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container text-center">
<h2>Bootstrap - year picker only example</h2>
<input class="date-own form-control" style="width: 300px;" type="text">
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</body>
</html>
Something like this:
<select name="birthyear">
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
etc.
</select>
I am using basic materialize css and for some reason even if I copy it straight from the materializecss.com website my select option just shows the label and nothing else is there.
EDIT added index.hjs page for reference of scripts.
In my index.hjs here are all my imports for the materialize css:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript" src="/build/bundle.js"></script>
</body>
</html>
Here is the code:
<div>
<div className="row">
<div className="input-field col s12 m6">
<input
onChange={this.updateTask.bind(this)}
id="title"
type="text"
/>
<label htmlFor="title">Title</label>
</div>
</div>
<div className="row">
<div className="input-field col s12 m6">
<input
onChange={this.updateTask.bind(this)}
id="description"
type="text"
/>
<label htmlFor="description">Description</label>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<select id="category" onChange={this.updateTask.bind(this)}>
<option value="" disabled selected>
Choose your category
</option>
<option value="delivery">Delivery</option>
<option value="dog walking">Dog Walking</option>
<option value="house cleaning">House Cleaning</option>
</select>
<label>Category</label>
</div>
</div>
<div className="row">
{/* <button
onClick={this.submitTask.bind(this)}
className="btn waves-effect waves-light"
>
Submit
<i className="material-icons right">send</i>
</button> */}
</div>
</div>
Materialize.css overrides browser defaults to enable select tag.
To avoid this, you can use "browser-default" class in select tag.
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
You can also use the "react-materialize" package to get materialize into your react app. Once you've set it up, it lets you do select without any wonky hacks like changing your componentDidMount() or removing styling like so:
<Row>
<Input type="select" value={}>
<option value={} key={}> your option here</option>
</Input>
<Row>
see https://react-materialize.github.io/#/forms for more
This seems a bit much to have to do for a select input, but after some research I found out how to solve this.
First you need to go into the component in which you have the select input.
In that component in the componentDidMount() you will add the following:
componentDidMount() {
const element = ReactDOM.findDOMNode(this.refs.dropdown);
$(element).ready(function() {
$('select').material_select();
});
}
Make sure you import ReactDOM at the top from react-dom
After this you will need to make a ref value in your select like so:
<select
ref="dropdown"
id="category"
defaultValue="1"
onChange={this.updateTask.bind(this)}
>
Note that the ref matches from the this.refs.dropdown.
Now since we are using jQuery we need to make sure it will function and in order to do so you will need to go to your webpack.config.js file and add the following plugin.
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"Hammer": "hammerjs/hammer",
createDayLabel: "jquery",
createWeekdayLabel: "jquery",
activateOption: "jquery",
leftPosition: "jquery"
})
]
Now you are all set and should be ready to go.
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
I am trying to create a bootstrap select list in a html file using Dreamweaver CS6 preview. I have the following code that should work, but it doesn't show the select box as it should - when you select an item a tick should appear next to that item. Also the appearance of the box looks different to the example on http://silviomoreto.github.io/bootstrap-select/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script>
<script> $('.selectpicker').selectpicker(); </script>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br> <input type="submit">
</form>
</body>
</html>
I don't see any problem with your code. Here's a working fiddle:
http://jsfiddle.net/cuovoqzw/
HTML:
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="POST">
Name: <input type="text" name="name">
<br />
E-mail: <input type="email" name="email">
<br />
<input type="submit">
</form>
JS:
$('.selectpicker').selectpicker();
The most probable reason I see is that you've included multiple instances of Bootstrap CSS files in your code. Just include only the required ones and delete the rest.