I want the user to choose one image from the predefined set of icons and then the image will be saved in the database after submitting the form. (I also want to know what is the best data type I'll be using in saving it in the database).
I want to do it this way cause I don't want the user to upload images.
Also, I'm still new to php and jQuery so I kind of needed help in that too...
CODE:
/*add new task button*/
.add-btn-dark
{
color:black;
/*float:right;*/
display:inline-block;
vertical-align:middle;
border:1px solid black;
margin-right:0;
}
.add-btn-dark i, .add-btn-dark span
{
display:inline-block;
vertical-align:middle;
}
.add-btn-dark:hover
{
cursor:pointer !important;
color:white;
background-color:black;
}
.add-btn-dark:focus
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*Icon Set*/
.iconSet
{
margin-left:2%;
display: inline-block;
vertical-align: middle;
border:1px solid black;
padding:5px;
width:60%;
}
.iconSet img
{
padding:5px;
margin-left:5px;
margin-right:5px;
display:inline-block;
vertical-align: middle;
}
.iconSet img:hover
{
cursor:pointer !important;
/*padding:5px;*/
border:0.5px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<html>
<head>
<title>Sample Task Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Change these to the lastest -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
/*add new task button*/
.add-btn-dark
{
color:black;
/*float:right;*/
display:inline-block;
vertical-align:middle;
border:1px solid black;
margin-right:0;
}
.add-btn-dark i, .add-btn-dark span
{
display:inline-block;
vertical-align:middle;
}
.add-btn-dark:hover
{
cursor:pointer !important;
color:white;
background-color:black;
}
.add-btn-dark:focus
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*Icon Set*/
.iconSet
{
margin-left:2%;
display: inline-block;
vertical-align: middle;
border:1px solid black;
padding:5px;
width:60%;
}
.iconSet img
{
padding:5px;
margin-left:5px;
margin-right:5px;
display:inline-block;
vertical-align: middle;
}
.iconSet img:hover
{
cursor:pointer !important;
/*padding:5px;*/
border:0.5px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button href="#" title="Add New Task" id="add" class="add-btn-dark btn" style="margin-left:45%;margin-top:10%;display: inline-block;vertical-align: middle;" data-toggle="modal" data-target="#addNewTaskModal"><i class="material-icons icon_dark" style="display: inline-block;vertical-align: middle;">assignment</i> Add New Task</button>
</body>
<!-- ADD NEW TASK Modal -->
<div id="addNewTaskModal" class="modal fade" style="margin-top:0%;">
<div class="modal-dialog modalcreateUser modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="avatar">
<img src="https://image.flaticon.com/icons/png/512/839/839986.png" style="width:25px;height:25px;display: inline-block;vertical-align: middle;" alt="Avatar">
</div>
<h4 class="modal-title" style="display: inline-block;vertical-align: middle;">Add New Task</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h6 style="font-size:14px;color:red;margin-top:1%;text-align: center;margin-bottom:0;padding-bottom:0;">* required fields</h6>
<div id="">
<form method="post" class="needs-validation" novalidate>
<br>
<div class="form-group">
<div class="input-group" >
<label><small style="font-size:15px;color:red;">*</small> Task Name: <small>/ No more than 50 characters /</small></label>
<div class="input-group">
<input type="text" id="taskNameField" class="form-control" maxlength="50" name="" placeholder="e.g. Mop, Trash, Broom, etc." required>
</div>
</div>
<div class="invalid-feedback">
Empty field!
</div>
<small style="font-weight:normal;color:black;font-style: italic;float:right;"><span class="name-char-count" style="font-weight:bold;">50</span> characters remaining</small>
</div>
<div class="form-group">
<!-- <div class="" > -->
<label style="display: inline-block;vertical-align: middle;margin-right:2%;"><small style="font-size:15px;color:red;">*</small> Task Location:</label>
<!-- </div> -->
<!-- <div class="input-group">
<select class="custom-select" name="" id="" required>
<option value="">-Select One-</option>
<option value="MainTask">Main</option>
<option value="RooftopTask">Rooftop</option>
</select>
</div> -->
<div class="custom-control custom-radio custom-control-inline" style="display: inline-block;vertical-align: middle;margin-right:2%;">
<input class="custom-control-input" type="radio" name="taskLocation" id="inlineCheckbox1" value="option1" checked>
<label class="custom-control-label" for="inlineCheckbox1">Main</label>
</div>
<div class="custom-control custom-radio custom-control-inline" style="display: inline-block;vertical-align: middle;">
<input class="custom-control-input" type="radio" name="taskLocation" id="inlineCheckbox2" value="option2">
<label class="custom-control-label" for="inlineCheckbox2">Rooftop</label>
</div>
<div class="invalid-feedback">
Empty field!
</div>
</div>
<div class="form-group">
<label><small style="font-size:15px;color:red;">*</small> Task Description: <small>/ No more than 800 characters /</small></label>
<textarea class="form-control taskDescArea" name="" maxlength="800" placeholder="Enter detailed description here..." required></textarea>
<div class="invalid-feedback">
Empty field!
</div>
<small style="font-weight:normal;color:black;font-style: italic;float:right;"><span class="char-count" style="font-weight:bold;">800</span> characters remaining</small>
<!-- <div id="wct_embed_result"></div>
<div id="wct_powered_by"></div> -->
</div>
<div class="form-group">
<label style="display: inline-block;vertical-align: middle;"><small style="font-size:15px;color:red;">*</small> Task Icon:</label>
<!-- <input type="text" class="form-control" name="" placeholder="" required>
<div class="invalid-feedback">
Empty field!
</div> -->
<!-- <div class="iconSet" style="">
<img class="img-responsive" src="..\images\chore-icons\mop-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\toilet-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\pc-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\broom-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\trash-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\water-dispenser-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\air-conditioner-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\rag2-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\sink-logo.png" style="color:#cc0000;height:50px;width:50px;">
</div> -->
<div class="iconSet" style="">
<!-- <select class="custom-select" name="emp-type" id="emp-type" required>
<option value="">-SelectOne-</option>
<option value="1"><img class="img-responsive" src="..\images\chore-icons\mop-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
<option value="2"><img class="img-responsive" src="..\images\chore-icons\toilet-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
<option value="3"><img class="img-responsive" src="..\images\chore-icons\pc-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
</select> -->
<!-- <input type="radio" id="broom" name="icon" value="broom"> <label for="broom"><img src="broom.png"></label> -->
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/79/79492.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/64/64022.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/1284/1284231.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/261/261277.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/1059/1059269.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/15/15222.png" style="color:#cc0000;height:50px;width:50px;">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-block add-btn-dark" name="">Add Task</button>
<button type="button" class="btn btn-lg btn-block add-btn-dark" data-dismiss="modal" >Cancel</button>
</div>
</form>
</div>
</div> <!-- end of modal body -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
// CHARACTER COUNT AND LIMIT TO TASK DESCRIPTION OR TEXT AREA
$(".taskDescArea").keyup(function(){
var maxLength = 800;
var length = $(this).val().length;
length = maxLength-length;
$(".char-count").text(length);
});
// CHARACTER COUNT AND LIMIT TO TASK NAME
$("#taskNameField").keyup(function(){
var maxLength = 50;
var length = $(this).val().length;
length = maxLength-length;
$(".name-char-count").text(length);
});
</script>
<!-- END OF ADD NEW TASK Modal -->
</html>
If it's a predefined list of icons, you probably want to store only a unique identifier of the selected icon - which could be a name or a number - as long as it allows you to display the correct image based on that identifier.
In your case, it looks like the filename could serve that purpose (eg. 'trash-icon' or 'sink-logo'). Or if you have an ordered list of all the icon filenames somewhere defined, you could also store the numeric index within that list.
by using base64_encode
$img = addslashes(base64_encode(file_get_contents('THE_IMAGE_PATH')));
save to database
INSERT INTO `table` (`emp_image`) VALUES ('$img'); //datatype => LONGTEXT
load the images from database:
$saved_img = $results['emp_image'];
<img src="data:image/jpeg;base64,<?=$saved_img;?>"/>
but the better way is to convert the images into icons from Icomoon
convert png to svg
load svg to icomoon
generate the fonts and ...
Related
I am across a little bit confusing problem. I want to display an alert message on the top of the screen when the account is activated. but problem is that when messages shows, the welcome blue box moves down which I don't want. When I close the alert message the content comes in their real position.
This is the html code
<!DOCTYPE html>
<html>
<head>
<?php include_once('head.php'); ?>
<title>Sign Up</title>
</head>
<body>
<?php
if(isset($_SESSION['act'])) ?>
<div class="text-center alert alert-primary alert-dismissible fade show" role="alert">
<?php echo $_SESSION['act']; ?>
<button type="button" class="close" data-dismiss="alert" aria-label="close">
×
</button>
</div> <?php
?>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="message-container">
<div class="message-inner-box">
<div class="title-container clearfix">
<p class="heading"> Welcome back, </p>
<p class="subheading"> Log In!</p>
</div>
</div>
</div>
<div class="image-header">
<img src="../image/sign up.png" alt="file not found" class="signUp-image">
</div>
</div>
<div class="col-md-5">
<div class="signuUp-header">
<div class="signUp-inner">
<form>
<div class="form-header">
<input type="text" class="input-field" placeholder="Enter Email">
</div>
<div class="form-header">
<div class="input-group">
<input type="password" id="password" class="input-field" placeholder="Password" />
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-lock" id="passwordSeen"> </i></span>
</div>
</div>
</div>
<div class="form-header">
<div class="forgetPassword text-right">
forget Password
</div>
</div>
<div class="form-header rememberMe">
<input type="checkbox" class="" />
<label class="form-check-label"> Remember me </label>
</div>
<div class="form-header">
<input type="submit" class="signUpButton" name="submit"/>
</div>
</form>
<div class="signUpFooter text-center">
<span> I'm a new member Sign Up</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../javascript/app.js"> </script>
</body>
</html>
This is the css code
/*Message box*/
.message-inner-box{
height: 300px;
width: 300px;
border-radius: 50%;
margin-top: -3.2em;
margin-left: -5em;
background-color: var(--message-box-color);
display: flex;
justify-content: center;
align-items: center;
}
.title-container {
margin-top: 50px;
color: var(--message-color);
}
.title-container p {
margin: 0;
}
.heading {
font-size: 1.3em;
font-weight: 600;
}
.subheading {
font-size: 2em;
font-weight: 800;
}
/*Sign Up page*/
.signUp-image {
height: 60%;
width: 60%;
}
.signuUp-header {
padding-top: 5rem;
}
.form-header {
margin-bottom: 2.5em;
}
.input-field {
height: 3em;
width: 80%;
padding: .3rem 2rem;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--input-field-color);
border-radius: 5px;
}
You can add the style property to the alert div to include a negative bottom margin that repositions the element under this alert box.
<div style="margin-bottom: -50px" class="text-center alert alert-primary alert-dismissible fade show" role="alert">
I am trying to generate a bill for my system in Laravel, for which I have created a blade with my bill format as below:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css" media="all">
body { font-family: "Roboto", serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
.table { color: #000; }
.table td, .table th { border-top: 1px solid #000;
border-bottom: 1px solid #000;}
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
.small-heading{
font-size: 0.8rem;
border: groove;
}
#sign {
position: relative;
min-height: 150px;
}
#sign-content {
position: absolute;
bottom: 0;
}
#thankyou{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col text-center text-left mb-3">
<p>Counter</p>
</div>
<div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
<h2 class="mb-1"> DIAMOND </h2>
</div>
<div class="col text-center text-md-right">
<p>Phone: 78787878789
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<div class="table-responsive-xl" style="min-height: 500px">
<table class="table" style="margin-bottom: 0; width:100%;">
<thead>
<tr>
<th>क्र.सं.<br>S.N </th>
<th>Description of Goods</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Tilhari</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col-md mt-0 text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
<div class="row">
<div class="col-md-6 text-md-center">
24 Carat 100 <br>
</div>
<div class="col-md-6 text-md-center">
24 Carat 100<br>
</div>
</div>
</div>
<div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
</div>
<div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
</div>
<div class="col" style="padding-left: 0">
<table class="table" style="margin: 0">
<tbody>
<tr>
<td colspan="12">
</td><td class="text-right">Total</td>
<td>$2,400.00</td>
</tr>
</tbody>
</table>
<div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
<span id="thankyou">Thank you!</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md">
<div class="row">
Email: <u></u>
</div>
</div>
<div class="col-md">
On Sale!
</div>
<div class="col-md text-center ml-5" >
<p style="text-align: left">981111111
</p>
</div>
</div>
</div>
</div>
</div>
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I have used dompdf to generate the bills but upon generating the bill, it is generated succesfully but the layout is all messed up. It is not as it seem in the browser.
In the browser:
pdf generated:
How can I fix the issue?
Through my research, I found out that Dompdf does not yet support Bootstrap grid system, due to which my contents were getting overlapped. I re-wrote all the css and the issue got fixed.
I want to create the same of that html style with wordpress contact form 7 , i just need to make that design work functional with wcf 7
Link
and my example html code :
<div class="form-group">
<label>Destination(s)</label>
<ul class="tags">Fes</ul>
<ul class="tags">Hight Atlas Mountains</ul>
<ul class="tags">Marrakech</ul>
<div class="destinations-wrap">
<input type="text" class="form-control icon icon-location" name="locations_search" placeholder="e.g. Iceland"
autocomplete="false">
<input type="text" class="destinations-suggestion" disabled>
</div>
<button class="btn btn-primary destinations-wrap-btn" tabindex="-1">+ Add Another</button>
</div>
This my example
You can use only html, and pure javascript. Bellow My Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="foundlose/vendor/meotip/style.css">
<meta charset="UTF-8">
<style type="text/css">
*{
font-family: "Raleway";
}
span{
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 15px;
background-color: #E13547;
color:#FAFAFA;
font-weight: bold;
display:inline-block;
cursor: pointer;
}
#destination-list{
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="indef">
<h1>Travel Information</h1>
<h6>Destiantion(s)</h6>
</div>
<div id="destination-list">
</div>
<div class="indef">
<input type="text" name="" id="destination-input">
</div>
<div class="indef">
<button id="add">Add</button>
</div>
</div>
<script type="text/javascript">
var destinationList = document.getElementById('destination-list'),
destinationInput = document.getElementById('destination-input'),
add = document.getElementById('add');
add.onclick = function(){
var addInput = document.createElement('span'), list = destinationList.getElementsByTagName('span');
addInput.setAttribute("class",destinationInput.value);
addInput.textContent = destinationInput.value + " ❌";
destinationList.appendChild(addInput);
for(var i = 0; i < list.length; i++){
list[i].onclick = function(){
this.parentNode.removeChild(this);
}
}
}
</script>
</body>
</html>
Here is your Solution with bootstrap 4
HTML
<div class="container">
<div class="jumbotron">
<h4>
Travel Information
</h4>
<br>
<h6>
Destination(s)
</h6>
<span class="badge badge-secondary">New <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">High Atlas Mountains <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Marrakesh <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Moroccan Sahara <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Morocco <i class="fa fa-times"></i></span>
<div class="row">
<div class="col-lg-8">
<br>
<div class="search">
<span class="fa fa-map-marker"></span>
<input type="text" placeholder="e.g Iceland" class="form-control">
</div>
</div>
<div class="col-lg-4">
<br>
<button type="button" class="btn btn-orange">
<i class="fa fa-plus"></i>
Add Another
</button>
</div>
</div>
</div>
</div>
CSS
.badge-secondary{
border-radius: 0px;
font-size: 15px;
}
.form-control{
border-radius: 0px;
height: 50px
}
.btn-orange{
background-color: #d17841;
margin-top: 5px;
color: white;
}
.search { position: relative; }
.search input { text-indent: 30px;}
.search .fa-map-marker {
position: absolute;
top: 10px;
left: 20px;
font-size: 25px;
color: #8e8e8e;
}
You Can Edit or Preview Code Here On JsFiddle
I have 3 divs ( Tables, Restaurants, Serveurs ( Waiters) )
so the scenario is :
1)create a table
2) drag it to restaurant div
3) drag waiters to the table
I use drag and drop functionality of html..
I wanted to sort the list of the waiters that are affected to a specific table.. I used Jquery plugin for that.. it worked properly
now I'm facing another issue that I couldn't remove a waiter from a table ( drop it back to list of waiters) just after adding that plugin...
This is the code..
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#for($i=1;$i<=count($tables);$i++)
<div id="table_{{$tables[$i-1]->id}}" style="height: {{count($tables[$i-1]->waitersAvailableTable)*80}}px;" class="table_restaurant sortable" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event,this)">Table {{$tables[$i-1]->num_table}}
#foreach($tables[$i-1]->waitersAvailableTable as $waiterTable)
<div id="{{$waiterTable->waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_{{$tables[$i-1]->id}}"><img src="{{asset($waiterTable->waiter->user->image)}}" height="40px;" />{{$waiterTable->waiter->user->name}} {{$waiterTable->waiter->user->surname}}</div>
#endforeach
</div>
#endfor
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#if(count($waiters)>0)
#foreach($waiters as $waiter)
<div id="{{$waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" ><img src="{{asset($waiter->user->image)}}" height="40px;" />{{$waiter->user->name}} {{$waiter->user->surname}}</div>
#endforeach
#else
<li><span>Ajouter un serveur</span></li>
#endif
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
} );
</script>
The sortable widget has a lot of drag and drop functionality built in, if you're using the widget, you should remove your own drag and drop code. Use the connectWith option to determine which lists should be allowed to have items drag and drop between them. You can use the events to hook in your own code to do things when items move between lists if necessary.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table_restaurant,
.waiters
{
min-height: 30px;
border: 1px solid #000;
}
.waiter
{
border: 1px solid #000;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table_1" class="table_restaurant sortable connectedSortable" draggable="true""
ondrop="drop(event,this)">Table 1
<div id="waiter_1" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Bob</div>
<div id="waiter_2" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Alice</div>
</div>
</div>
<div id="table_2" class="table_restaurant sortable connectedSortable" draggable="true"">Table 1
<div id="waiter_3" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Jim</div>
<div id="waiter_4" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Zoe</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters sortable connectedSortable" ondrop="drop(event,this)">
<div id="waiter_5" class="waiter" draggable="true" ondragstart="drag(event)">John</div>
<div id="waiter_6" class="waiter" draggable="true" ondragstart="drag(event)">Emily</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$(".sortable").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
});
</script>
</body>
</html>
Consider the following example. If you really need to use <div> elements, you will have to adjust the items option for your Sortable.
$(function() {
$(".waiters").sortable({
connectWith: "ul.waiters",
placeholder: "target-drop"
});
$(".sortable").disableSelection();
});
.waiters {
list-style-type: none;
margin: 0;
padding: 0;
background: #eef;
min-height: 82px;
min-width: 82px;
}
.waiter {
height: 80px;
width: 80px;
text-align: center;
background: #CCCCCF;
margin: 1px;
padding: 4px 2px;
float: left;
}
.target-drop {
height: 78px;
width: 78px;
background: #EEE;
border: 1px dashed #ccc;
float: left;
margin: 1px;
padding: 4px 2px;
}
.waiter .waiter-name {
font-weight: normal;
font-size: .65em;
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.r-table {
min-height: 90px;
border: 1px solid #CCC;
display: inline-block;
padding: 3px;
text-align: center;
}
.top4 {
width: 90px;
}
.top8 {
width: 172px;
}
.r-table .table-name {
font-weight: normal;
font-size: .65em;
line-height: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table-0" class="r-table top4">
<label class="table-name">Table 1</label>
<ul class="waiters">
</ul>
</div>
<div id="table-1" class="r-table top4">
<label class="table-name">Table 2</label>
<ul class="waiters">
</ul>
</div>
<div id="table-2" class="r-table top8">
<label class="table-name">Table 3</label>
<ul class="waiters">
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs</span>
</div>
<ul id="waiters" class="waiters" style="padding: 2px; min-height: 86px;">
<li id="waiter-1" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Bart Simpson</label>
</li>
<li id="waiter-2" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Lisa Simpson</label>
</li>
<li id="waiter-3" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Milhouse Van Houten</label>
</li>
<li id="waiter-4" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Martin Price</label>
</li>
</ul>
<p style="clear: both;">
<span>Ajouter un serveur</span>
</p>
</div>
This allows you to assign, move, or unassigned servers to tables. You did mention if you need to assign the same server to multiple tables or not.
Hope that helps.
Hello i have a difficulty in setting up the width for the input radio button.
As you can see i'm using a ui-grid-b. the problem here is in the ui-block-c.. where in block-c i'm insert the control group for the radio button. I want to set the width for radio button for id 'full' is 60%, radio button id'half' is 20% and for the radio button id'one' is 20%.. which mean it total 100% that equal to the width for the ui-controlgroup-controls. i want to use the maximum width for the ui-controlgroup-controls with the different width for each radio button
<style>
.ui-grid-b>.ui-block-a {
width: 25%;
}
.ui-grid-b>.ui-block-b, .ui-grid-b>.ui-block-c {
width: 15%;
}
.ui-grid-b>.ui-block-c {
width: 60%;
}
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);">
<h1 align="center">
Header
</h1>
</div>
<div data-role="content" class="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<input type="text" value="Input"/>
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<input type="radio" name="full" id="full" value="" />
<label for="full" >Full</label>
<input type="radio" name="half" id="half" value="" />
<label for="radio-view-b" >Half</label>
<input type="radio" name="one" id="one" value="" />
<label for="one" >One</label>
</fieldset>
</div>
</div>
</div>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<h1 align="center"><i>Footer</i></h1>
</div>
</div>