which is used to listing book and when user clicks on "Edit" button need to show book details in model-fade form.
Am tried but new values are not showing in model.
var rootApp = angular.module('profileApp', ['bookList','EditBook']);
// menu bar items
var firstApp = angular.module('bookList', []);
firstApp.controller('bookListController',function($scope, $http,productService) {
//here am getting data from service
var obj1 = {Book_Title:"book1",Book_Category: "Comdedy"};
var obj2 = {Book_Title:"book2",Book_Category: "story"};
var totalArray=[];
totalArray.push(obj1);
totalArray.push(obj2);
$scope.UserBookList = totalArray;
//funcion call get from html directly
$scope.bookItemEditIndex = function(idx){
$("#EditBookModal").modal();
$scope.temp = $scope.UserBookList[idx];
productService.addProduct($scope.temp);
console.log( $scope.temp);
console.log( productService.getProducts()[0]);
}
});
//Edit book
var secondApp = angular.module('EditBook', []);
secondApp.controller('EditBookController', function($scope,productService) {
var products = productService.getProducts()[0];
console.log(products);
$scope.NGE_bookTitle = $scope.products;
});
rootApp.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<style type="text/css">
.navbar{
}
.modal-dialog {
width: 100%;
height: auto;
padding: 0;
margin:0;
}
#mid-containeer{
border: 1px #e4e4e4 solid;
height: 10%;
}
#footer-containeer{
height: 100px;
width:100%;
}
</style>
<script type="text/javascript" src="indexservice.js"></script>
</head>
<body>
<!-- user book list -->
<div class="container">
<h1 class="page-header">Book Details </h1>
<p>The table having your book deails</p>
<div ng-controller="bookListController" id="bookListControllerID">
<table class="table table-bordered table table-striped css-serial">
<thead>
<tr>
<th>Book Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody ng-repeat="book in UserBookList">
<tr>
<td> {{book.Book_Title}} </td>
<td><a class="btn mini blue-stripe btn-info" href="#" data-toggle="modal" data-target="" ng-click="bookItemEditIndex($index)">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- edit book module -->
<div class="modal fade " id="EditBookModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" data-backdrop="true">
<div ng-controller="EditBookController" id="EditBookControllerID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Book</h5>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="container" style="padding: 0px;">
<h1 class="page-header">Book Profile</h1>
<div class="row">
<!-- left column -->
<!-- edit form column -->
<div class="col-md-8 col-sm-6 col-xs-12 personal-info">
<div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
You can edit your <strong>Book</strong> here.
</div>
<h3>Edit book info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">Book title:</label>
<div class="col-lg-8">
<input class="form-control" value="jahn" type="text" name="E_bookTitle" ng-model="NGE_bookTitle">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" >
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
thanks advance.
Related
I'm developing a web-audio player, and I'm new to Bootstrap. At the moment, my player looks like this:
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Waveform -->
<div id="waveform"></div>
<!-- Progress -->
<div class="row">
<div id="progress" class="col-md-6">Loading audio...</div>
<div id="duration" class="col-md-6" style="text-align: right;"></div>
</div>
<br>
<div class="row">
<!-- Backward 5 s -->
<button id="bwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-backward"></i>
<div>Backward 5 s</div>
</button>
<!-- Play/Pause -->
<button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
<i id="icon-play-pause" class="fa fa-play"></i>
<div id="text-play-pause">Play</div>
</button>
<!-- Forward 5 s -->
<button id="fwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-forward"></i>
<div>Forward 5 s</div>
</button>
<!-- Stop -->
<button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
<i class="fa fa-stop"></i>
<div>Stop</div>
</button>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!-- Audio rate -->
<i class="fas fa-tachometer-alt"></i>
<input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
<div id="audio-rate_value" style="display: inline;">1x</div>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Volume -->
<i id="icon-volume" class="fas fa-volume-down"></i>
<input id="volume" type="range" min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Loop -->
<button id="loop" class="btn btn-outline-primary">Loop</button>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Low-pass filter -->
<button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
I've stumbled upon several issues.
The volume icon - It changes depending on the volume level, but in a "bad way":
How can I keep it fixed?
Shrinking the screen width - This is what happens when I shrink my window (I've drawn red rectangles to make the problem clearer):
How can I keep two elements inside the same row?
EDIT #1 - This is the code for changing the volume icon:
var controls = {
...
volume: document.getElementById("volume"),
...
}
controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);
// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});
I eventually managed to solve Issue #2 by adding the width attribute to the icon tag style:
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>
When the save button is clicked I am trying to display values from a textbox and button in a grid. I have written the html part and I have tried out something by myself. When the save button is clicked the values are not displayed in the table grid.
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="clear">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="headerCtrl">
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
Result: [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
});
</script>
</body>
</html>
There are few issues,
(i) Have only one ng-app and ng-controller common for both divs
(ii) There is no angular reference with your code
(iii) You need to push the values to the array on Save function,
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
DEMO
var app = angular.module('myApp', []);
app.controller('headerCtrl', function($scope) {
$scope.headerData = {};
$scope.headerData.Result = [];
$scope.clear = function(){
$scope.headerData.Result = [];
}
$scope.Save = function() {
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
};
});
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
You have got a number of issues in your code.
No Angular file. Please add an angular file as per your version.
You have defined two controllers one of them, clear, is not defined.
You have declared ng-app="myApp" at two places, which is a very very bad practice.
You are using Results without quotes in your scope. It's a json object, good to use quotes for key values.
I have rectified all the errors and following is your final code. Before copying, go through the changes and understand them.
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
"Result": [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
$scope.clear = function(){
$scope.headerData = {};
$scope.header = "";
$scope.status = "";
}
});
</script>
I am not sure where I can edit the bootstrap modal pop-up on my portfolio? It is the chili picture in the bottom on this site. At the moment it shows in 1000*600px, but I would like it bigger.
Link to my portfolio
HTML
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<div class="block-image">
<div class="overlay"></div>
<img
class="coursepic"
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
>
</div>
<div class="block-data">
<h3>
Test
</h3>
</div>
</article>
</div>
CSS
img.coursepic {
width: 100%;
height: 100%;
}
img.coursepic:hover{
cursor: pointer;
opacity: 0.5;
background: rgba(0,0,0,0.5);
border-radius: 2px;
width: 100%;
height: 100%;
}
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
Its working fine with modal-lg
add this snippet in your centerModal()
$dialog.addClass("modal-lg");
for data-target="#myModal1", the #myModel1 should get modal-lg class
and add class="coursepic modal-lg"
or use this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
<!-- Trigger the modal with a button -->
<img class="coursepic" data-toggle="modal" data-target="#myModal" src="http://placehold.it/350x150" />
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="coursepic" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap does have some built in styles to create modals of different sizes:
The important class here is modal-lg
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is what my table looks like right now:
I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
And here is the rest of the page for reference:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong></td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong></td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Set the p and checkbox inside the td element to be displayed inline.
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="images/title.png" class="img-responsive">
</div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong>
</td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have a drag and drop functionality on my html page. Once I drag a box from one column to another, I want that box to stay in the new column for that user. So, if the user signs in back, he should see the box in the new column.
Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="description" content="Drag and drop table content with JavaScript"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/stylesheets/bootstrap.min.js"></script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
<script type="text/javascript" src="/stylesheets/redips-drag-min.js"></script>
<script type="text/javascript" src="/stylesheets/redips-drag-source.js"></script>
<title>Kanban Model</title>
</head>
<body style="overflow-x:hidden">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kanbannew">Welcome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class = "container"
<!-- tables inside this DIV could have draggable content -->
<div id="redips-drag" style="padding-left: 100px;padding-top: 100px;width: 988px;">
<table id="table1" style="width: 950px; padding-bottom: 50px;">
<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
<tr>
<td class="redips-mark" style="text-align: center;">New Requests</td>
<td class="redips-mark" style="text-align: center;">Ready to Start</td>
<td class="redips-mark" style="text-align: center;">In Progress</td>
<td class="redips-mark" style="text-align: center;">Ready for Review</td>
<td class="redips-mark" style="text-align: center;">Recently Finished</td>
</tr>
<tr style="background-color: #eee">
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;">
<div id="d1" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Login Functionality</div>
<div id="d2" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Welcome Page</div>
<div id="d3" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Search Functionality</div>
</td>
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;">
<div id="d4" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Search Results Page</div>
</td>
</tr>
</table>
<table id="table3">
<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
<tr style="background-color: #eee">
<td id="message" class="redips-mark" title="You can not drop here"></td>
</tr>
<tr style="background-color: #eee">
<td class="redips-trash" title="Trash" ></td>
</tr>
</table>
<div><input type="hidden" class="checkbox" onclick="toggleDragging(this)" title="Enable dragging" checked="true"/><span class="message_line"></span></div>
</div>
</div>
<!--Footer-->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$('#myModal').on('show.bs.modal', function (event) {
var li = $(event.relatedTarget) // Button that triggered the modal
var recipient = li.data('whatever') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text(recipient)
})
</script>
</body>
</html>
Any help would really be appreciated. Thanks.