Below is my body in a jsp file. In my spring application, I wanna forward all the div values to my controller. I tried to access the data of one div (with name='atcId') which I am unable to do.
<body>
<br>
<div class="head" style="text-align:center; width:80px; float:left">
Route
</div>
<div class="head" style="text-align:center; width:300px; float:left">
Date
</div>
<div class="head" style="text-align:center; width:140px; float:left">
Time
</div>
<div class="head" style="text-align:right; width:100px; float:left">
Capacity
</div>
<div class="head" style="text-align:center; width:100px; float:left">
</div>
<br>
<div class="head" id="empty" style="text-align:center; width:80px; float:left">
</div>
<div class="head" style="text-align:center; width:150px; float:left">
From
</div>
<div class="head" style="text-align:center; width:150px; float:left">
To
</div>
<div class="head" style="text-align:center; width:70px; float:left">
From
</div>
<div class="head" style="text-align:center; width:70px; float:left">
To
</div>
<div class="head" style="text-align:right; width:100px; float:left">
</div>
<div class="head" style="text-align:center; width:100px; float:left">
</div>
<br>
<br>
<form action='atc/edit.htm' method="post">
<c:forEach items="${atcMap}" var="atc" varStatus="status">
<div style='float:left'>
<div class="data" name="atcId" style="text-align:center; width:80px; float:left">
<c:out value="${atc.key.elements.name}"/>
</div>
<div class="data" style="text-align:center; width:150px; float:left">
<c:out value="${atc.key.id.fromDate}"/>
</div>
<div class="data" style="text-align:center; width:150px; float:left">
<c:out value="${atc.key.toDate}"/>
</div>
<div style='float:left'>
<c:forEach items="${atc.value}" var="atcSchedule" varStatus="status">
<div class="data" id="atcId" style="text-align:center; width:70px; float:left">
<c:out value="${atcSchedule.id.fromBlock}"/>
</div>
<div class="data" style="text-align:center; width:70px; float:left">
<c:out value="${atcSchedule.toBlock}"/>
</div>
<div class="data" style="text-align:right; width:100px; float:left">
<c:out value="${atcSchedule.capacity}"/>
</div>
<br>
<br>
</c:forEach>
</div>
<input type="image" width="25" height="25" name="action" id="image" value="modify" src="<c:url value="/resources/images/modify.png"/>" alt="Modify">
<input type="image" width="25" height="25" name="action" id="image" value="delete" src="<c:url value="/resources/images/delete.png"/>" alt="Delete">
</div>
<div style='clear:both'>
</div>
<hr id="rowbreak" style="text-align: center">
</c:forEach>
</form>
</body>
And below is my controller method:
#RequestMapping(value="/atc/edit", method=RequestMethod.POST)
public ModelAndView editATC(#ModelAttribute("message") String message, HttpServletRequest request, HttpServletResponse response) throws ServletException
{
System.out.println(request.getParameter("action"));
System.out.println(request.getParameter("atcId"));
ModelAndView mav = new ModelAndView();
mav.setViewName("view_ATCMaster");
mav.addObject("message", message);
return mav;
}
You need to set all JSTL values as input tag(of type hidden) with proper names/ids. Then you can able to access those hidden inputs in your controller by using
request.getParameterValues("hiddenInputId");
Related
Applogies for the question again. I'm new to laravel and this is my first project.
I'm trying to generate a pdf using DomPDF but before submitting my form to database, I dont know whether it is possible or not.
this is my create.blade.php code
#extends('layouts.main')
#section('content')
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Orders</h1>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-12">
<div>
<div class="card-header">{{ __('Creating Order') }}
Back
</div>
<div>
<form method="GET" action="{{ route('orders.create') }}" enctype="multipart/form-data">
#csrf
<div class="form-row align-items-center">
<div class="form-group col-md-6 col-lg-5">
<select id="customer_name" onchange="this.form.submit()" type="search" name="customer_id" class="form-control #error('customer_id') is-invalid #enderror" value="{{ old('customer_id') }}" required >
<option selected></option>
#foreach ($customers as $customer)
<option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
#endforeach
</select>
#error('customer_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="col-auto">
<input id="btn" type="button" class="btn btn-primary mb-3" value="Show Catalog" onclick="showDiv()">
</div>
</div>
<div class="m-3">
Displaying Catalog for: <strong> <span style="color: red" id="customerName"></span><span style="color: red">. {{$count_linkeds}}</span></strong> items found in this Catalog.
</div>
</form>
<form method="POST" action="{{ route('orders.store') }}" enctype="multipart/form-data">
#csrf
<main id="catalog" style="display: none" class="main">
<div class="container">
<div class="row s6 m3">
#foreach($linkeds as $lnkditem)
<div class="col s6 m3">
<div class="card item-images">
<div class="img-wrapper">
<img src="{{ asset('uploads/linkedItems/'.$lnkditem->item_image) }}" width= '50' height='50' class="img img-responsive" />
</div>
<div class="card-content mt-2 item">
<h6 style="font-size: 18px">
Product Name: <strong style="color: red">{{ $lnkditem->product->product_name}}</strong>
</h6>
<div style="float: right; margin-top: -30px">
<label hidden style="float: right;" for="linked_id">{{ __(': Linked ID') }}</label>
<textarea hidden style="text-align: center; resize: none; width:100px; height: 28px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" name="linked_id" id="linked_id" class="form-control"
value="{{ old('linked_id', $lnkditem->id) }}">{{ $lnkditem->id}}</textarea>
</div>
<p>
Product description: <strong style="color: red"> {{ $lnkditem->product->product_description}}</strong>
</p>
Item Name: <span readonly id="item_name" name="item_name" style="font-weight: bold; color: black" value="{{ $lnkditem->item->item_name}}">{{ $lnkditem->item->item_name}}</span>
<p>
Item description: <strong style="color: black"> {{ $lnkditem->item->item_description}}</strong>
</p>
<p>
Supplier Ref.: <strong style="color: black"> {{ $lnkditem->supplier_ref_no}}</strong>
</p>
<p>
Supplier Barcode: <strong style="color: black"> {{ $lnkditem->supplier_barcode}}</strong>
</p>
<div class="pass-quantity col-lg-3 col-md-4 col-sm-3 pl-0">
<label for="item_quantity" class="pass-quantity">Quantity:</label>
<input style="color: red" name="item_quantity" class="form-control" type="number" value="0" min="0">
</div>
<div>
<label for="pass-quantity" class="pass-quantity" style="color: red; font-weight: bold; float: right; margin-right: 45px !important; margin-top: -32px">Item Price: AED - </label>
<p type="number" name="item_cost" class="item_cost" style="color: red; font-weight: bold; float: right; margin-top: -32px">
{{ $lnkditem->item_cost}}
</p>
</div>
<div class="product-price d-none">{{ $lnkditem->item_cost}}</div>
<hr class="sidebar-divider">
<strong style="color: red"><p>Total Amount: AED:</p></strong>
<div class="product-line-price pt-4 pb-4 text-uppercase" style="color: red; font-weight: bold; float: right; margin-top: -67px">
<strong><span style="color: red" type="number" class="product-line-price">0.00</span></strong>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<div class="card card-action mb-3 pt-4" style="padding: 15px; height: 100%; width: 50%; margin-left: 25%">
<div class="mb-3" style="margin-left: 15px">
<label for="order_unq_id"></label>
Order UID: <textarea name="order_unq_id" style="color: red; font-weight: bold; width: 350px; resize: none; margin-left: 22%; margin-top: -31px !important; height: 38px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" id="order_unq_id" class="form-control #error('order_unq_id') is-invalid #enderror" value="{{ old('order_unq_id') }}">
</textarea>
</div>
<div style="margin-left: 20px">
Saving Order for - <strong> <span class="text-uppercase" style="color: red" id="order_save_customerName"></span></strong>
<input type="text" class="customerName_order_save_input" hidden id="customerName_order_save_input" value="">
</div><br>
<div class="col-xl-12 col-lg-4 col-md-5 totals">
<div class="border border-gainsboro mb-3 px-3">
<div class="border-bottom border-gainsboro">
<p class="text-uppercase mb-0 py-3 bg-primary text-white text-center"><strong>Order Summary</strong></p>
</div>
<p class="mt-3 text-uppercase">Subtotal AED:</p>
<div class="totals-item d-flex align-items-center justify-content-between"
style="float: right; margin-top: -40px">
<p class="totals-value" id="cart-subtotal"></p>
</div>
<div class="totals-item d-flex align-items-center justify-content-between">
<p class="text-uppercase">Aprox. VAT #5%</p>
<p class="totals-value tax" id="cart-tax"></p>
</div>
<div class="totals-item totals-item-total d-flex align-items-center justify-content-between mt-3 pt-3 border-top border-gainsboro">
<label for="total" class="text-uppercase" style="color: red;"><strong>grand Total</strong></label>
<input type="text" class="total_input" hidden id="total_input" name="total_input" value="0.00">
<textarea style="self-align: center; text-align: right; color: red; padding-top !important; 10px; resize: none; width:100px; height: 35px; overflow:hidden; border:none; background-color: white; font-size: 18px" readonly rows="1"
class="totals-value font-weight-bold cart-total" name="total" id="total" style="color: red;"></textarea>
</div>
</div>
</div>
<div>
<a type="submit" target="_blank" class="btn btn-success" href="{{route('mht_order_pdf')}}">Generate PDF</a>
</div>
<button type="submit" class="btn btn-primary" id="save_order" >Save Order</button>
</div>
</main>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
I dont want pdf to get data from database. I need to generate the pdf with form data before form gets submit to database. Is this possible to achive? Thank you in advance.
In terms of tecnicality, this is possible. Personally I've done something like this, only that the PDF is being generated after the form is stored to DB, but before the request is sent back to users.
So in the controller, you can do something like this:
// first validate request inputs..
// then generate the PDF
PDF::generate('order_pdf'); // or something, idk what's the actual syntax
// finally
return view('order_dashboard');
However you need to know that while the PDF::generate() line is being executed, the app will wait until it finished before moving to the next line, meaning that the execution is being done synchronously. Thus if the PDF generation takes too long, user will have to wait for it. To face this issue, you might want to look at Laravel's Queue so that the PDF generation can be executed asynchronously.
I'm trying to submit a POST request to a controller but controller does not respond to my request and no error has been thrown as well, however GET request works fine.
I'm using
<button type="submit" class="btn btn-primary">Submit</button>
to send my request at the controller and this the controller that will handle my request>>
#GetMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="~{layout}">
<body>
<div layout:fragment="content">
<br /> <br /> <br />
<div class="col-md-6 col-md-offset-3">
<h3 class="sub-title theme-font"></h3>
<div class="panel panel-primary theme-font">
<div class="panel-heading">
<h3 class="panel-title">Accounting Flexfield Key Segment</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form th:action="#{/flexfieldkeysegment/{keyFlexFieldSegmentId}(keyFlexFieldSegmentId=${keySegment.keyFlexFieldSegmentId})}"
th:object="${keySegment}" method="post"
enctype="multipart/form-data">
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}"
th:class="text-red">Incorrect data</p>
<!-- text input -->
<div class="form-group"
th:classappend="${#fields.hasErrors('keyFlexFieldSegmentCode')}? 'has-error'">
<label>Flexfield Segment Code <span style="color: red;">*</span></label>
<input type="text" class="form-control"
name="keyFlexFieldSegmentCode"
th:field="*{keyFlexFieldSegmentCode}"
placeholder="Enter Flexfield Key Segment Code" />
<p th:if="${#fields.hasErrors('keyFlexFieldSegmentCode')}"
th:errors="*{keyFlexFieldSegmentCode}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('name')}? 'has-error'">
<label>Flexfield Key Segment Name<span
style="color: red;">*</span></label> <input type="text"
class="form-control" name="name" th:field="*{name}"
placeholder="Enter Flexfield Key Segment Name" />
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="text-red">Incorrect data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('description')}? 'has-error'">
<label>Description<span style="color: red;">*</span></label> <input
type="text" class="form-control" name="description"
th:field="*{description}"
placeholder="Enter Flexfield Key Segment Description" />
<p th:if="${#fields.hasErrors('description')}"
th:errors="*{description}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('separatorId')}? 'has-error'">
<label for="segment_separator">Segment Separator <span
style="color: red;">*</span></label> <select name="name"
id="separator" th:field="*{separatorId}"
th:data-validation-message="#{msg.flexfieldkeysegment.separator.mandatory}"
class="form-control dropdown">
<option th:value="''" th:text="'Select'"></option>
<option th:each="separator : ${segment_separator}"
th:text="${separator.separatorName}"
th:value="${separator.separatorId}"></option>
</select>
<p th:if="${#fields.hasErrors('separatorId')}"
th:errors="*{separatorId}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group">
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeFlexfieldDefinition}"
th:value="${freezeFlexfieldDefinition}" /> <label>Freeze
Flexfield Definition</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{crossValidateSegment}"
th:value="${crossValidateSegment}" /> <label>Cross
Validate Segment</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeRollUpGroup}"
th:value="${freezeRollUpGroup}" /> <label>Freeze
Rollup Group</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{allowDynamicInsert}"
th:value="${allowDynamicInsert}" /> <label>Allow
Dynamic Insert</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{active}"
th:value="${active}" /> <label>Active</label>
</div>
</div>
</form>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-warning"
onclick="window.history.go(-1); return false;">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of #GetMapping, use #PostMapping. Also, annotate the 'Model' POJO with #RequestBody
#PostMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, #RequestBody Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
I am trying to create rows dynamically in a table using thymeleaf and spring boot.
I've looked at following urls but couldn't make it working for me.
http://forum.thymeleaf.org/I-have-problem-in-binding-the-list-of-objects-contained-inside-a-object-on-the-form-using-thymeleaf-td3525038.html#a3526497
http://stingh711.github.io/dynamic-form-with-springmvc-and-thymeleaf.html
when I click on the addCourse button, its not even going to StudentController.
please can someone help?
Student.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Students</title>
</head>
<body>
<div layout:fragment="content">
<form th:object="${student}" th:action="#{/student/create}" action="#" method="post">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Add New Student</h3>
</div>
<div class="panel-body">
<input type="text" th:field="*{studentId}" class="form-control" placeholder="Student Id" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{firstName}" class="form-control" placeholder="First Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{lastName}" class="form-control" placeholder="Last Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{city}" class="form-control" placeholder="City" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="submit" class="btn btn-success pull-right"
value="Save">
</div>
</div>
</div>
</div>
<!-- start of detail section -->
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-offset-2 col-md-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Student Courses</h3>
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="btn-success">
<th>Course</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr th:each="studentCourse, rowStat : *{studentCourses}">
<td></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].courseId}" placeholder="Course" /></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].endDate}" placeholder="End Date"/>
<span class="col-sm-1 row-delete-button">
<button class="btn btn-default" th:value="*{studentCourses[__${rowStat.index}__].studentCourseId}" name="removeStudentCourse">
<i class="glyphicon glyphicon-trash icon-white"></i>
</button>
</span>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-add" type="submit" name="addCourse">
<i class="glyphicon glyphicon-plus gs"></i> <b> Add</b>
</button>
</div>
</div>
</div>
<!-- end of detail -->
</form>
</div>
</body>
</html>
StudentController
#RequestMapping(value="/Student", params = {"addCourse"})
public String addCourse(Student student, BindingResult result) {
System.out.println("add new course");
student.getCourseList().add(new StudentCourse());
return "Student";
}
js.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
style.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<link rel="stylesheet" th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}" />
I built this mock-up:
I was wondering if this type of gallery is possible to build with bootstrap, I did not start to code yet because I think that it will not work because of the rows.
I would like some second opinions, from people who have worked with bootstrap for longer than me.
I found something that actualy works!! and it's responsive! :D
.poligono, .poligono div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.poligono {
transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
width: 100%;
height: auto;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.poligono:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>Projects</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
<p class="descricao">Cenas maradas acontecem</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
</div>
</div>
If you are asking if there is a default bootstrap for this the answer is no.
But yes this is possible with your own css.
I don't see why not you could not skew the image with something like the following:
img.tilted{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
If you want this "mask like behaviour" i don't see why you couldn't put all the images on a layer bellow and put a transparent image on the top
Or you can try to css clip it like this http://www.html5rocks.com/en/tutorials/masking/adobe/
I have used kendo UI mobile version in ASP.NET MVC to show changes in a iframe.
In my html i have several views in which i want header,contain area,footer area i need scroller in contain area for which I have used
" " in each view it's working only in one view but not other view so is there anything wrong which I have missed out .
<div data-role="header" class="header-home3" >
<span class="headerContent1"> Opening Hours </span>
</div>
<div id="divLayout" data-role="scroller" class="scroller-content middle-home3">
<div id="divOpeningHoursPageBackgroundImage" class="inner-container">
<div id="divOpeningHoursheaderImg" class="inner-imgheader"> <img id="OpeningHoursHeaderImage" style="width:100%;"/></div>
<div id="divOpeningHoursHeaderText" class="inner-txtheader"></div>
<div class="inner-midcontainer">
<div id="divOpeningHoursContainer" style="height:80%;min-height:400px;position:static;"></div>
<div id="div5" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divOpeningHoursFooterText" class="inner-txtfooter" > </div>
<div id="divOpeningHoursFooterImg" class="inner-imgfooter"> <img id="OpeningHoursFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-share">
<div data-role="header" class="header-map3" >
<span class="headerContent1"> Map & Direction </span>
</div>
<div id="div1" data-role="scroller" class="scroller-content middle-home3">
<div id="divMapPageBackgroundImage" class="inner-container">
<div class="inner-imgheader"> <img id="MapHeaderImage" style="width:100%;"/></div>
<div id="divMapHeaderText" class="inner-txtheader"></div>
<div id="divMapContainer" class="inner-midcontainer">
<div id="divgooglemap" style="height:80%;min-height:400px;position:static;"></div>
<div id="divMapRoute" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divMapFooterText" class="inner-txtfooter" > </div>
<div class="inner-imgfooter"><img id="MapFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Twitter">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Twitter </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-History">
<div data-role="header" class="header-history3" >
<span class="headerContent1"> Contact Form</span>
</div>
<div id="divContactFormMain" data-role="scrollview" class="scroller-content middle-home3">
<div id="divContactFormPageBackgroundImage" class="inner-container">
<div id="divContactFormheaderImg" class="inner-imgheader"> <img id="ContactFormHeaderImage" style="width:100%;"/></div>
<div id="divContactFormHeaderText" class="inner-txtheader"></div>
<div id="divContactFormContainer" class="inner-midcontainer">
<div id="div6" style="height:80%;min-height:400px;">
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Name</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlName" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Address</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlAddress" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Country</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlCountry" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Email</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlEmail" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Phone</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlPhone" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;text-align:center;margin-top:20%;">
<input type="button" id="btnHtmlSaveContactForm" class="newButton" value="SAVE"/>
</div>
</div>
</div>
<div id="divContactFormFooterText" class="inner-txtfooter" > </div>
<div id="divContactFormFooterImg" class="inner-imgfooter"><img id="ContactFormFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-news">
<div data-role="header" class="header-news3" >
<span class="headerContent1"> News & Articles </span>
</div>
<div id="divNewsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divNewsPageBackgroundImage" class="inner-container">
<div id="divNewsheaderImg" class="inner-imgheader"> <img id="NewsHeaderImage" style="width:100%;"/></div>
<div id="divNewsHeaderText" class="inner-txtheader"></div>
<div id="divNewsContainer" class="inner-midcontainer">
This is News and Article Page
</div>
<div id="divNewsFooterText" class="inner-txtfooter" > </div>
<div id="divNewsFooterImg" class="inner-imgfooter"><img id="NewsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-About">
<div data-role="header" class="header-about3" >
<span class="headerContent1"> About Page</span>
</div>
<div id="divAboutMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divAboutPageBackgroundImage" class="inner-container">
<div id="divAboutHeaderImg" class="inner-imgheader"> <img id="AboutHeaderImage" style="width:100%;"/></div>
<div id="divAboutHeaderText" class="inner-txtheader"></div>
<div id="divAboutContainer" class="inner-midcontainer">
This Is About Page
</div>
<div id="divAboutFootertext" class="inner-txtfooter" > </div>
<div id="divAboutFooterImg" class="inner-imgfooter"><img id="AboutFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Events">
<div data-role="header" class="header-event3" >
<span class="headerContent1">Events</span>
</div>
<div id="divEventsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divEventsPageBackgroundImage" class="inner-container">
<div id="divEventsHeaderImg" class="inner-imgheader"> <img id="EventsHeaderImage" style="width:100%;"/></div>
<div id="divEventsHeaderText" class="inner-txtheader"></div>
<div id="divEventsContainer" class="inner-midcontainer">
This is Events Page
</div>
<div id="divEventsFooterText" class="inner-txtfooter" > </div>
<div id="divEventsFooterImg" class="inner-imgfooter"><img id="EventsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Team">
<div data-role="header" class="header-team3" >
<span class="headerContent1"> Team Member </span>
</div>
<div id="divTeamMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divTeamPageBackgroundImage" class="inner-container">
<div id="divTeamheaderImg" class="inner-imgheader"> <img id="TeamMembersHeaderImage" style="width:100%;"/></div>
<div id="divTeamHeaderText" class="inner-txtheader"></div>
<div id="divTeamContainer" class="inner-midcontainer">
<div id="div2" style="height:80%;min-height:400px;">
This is team member page
</div>
<div id="div3" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divTeamFooterText" class="inner-txtfooter" > </div>
<div id="divTeamFooterImg" class="inner-imgfooter"><img id="TeamMembersFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Contacts">
<div data-role="header" class="header-contact3" >
<span class="headerContent1"> Contact Details</span>
</div>
<div id="divContactDetailsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divContactDetailsPageBackgroundImage" class="inner-container">
<div id="divContactDetailsHeaderImg" class="inner-imgheader"> <img id="ContactDetailsHeaderImage" style="width:100%;"/></div>
<div id="divContactDetailsHeaderText" class="inner-txtheader"></div>
<div id="divContactDetailsContainer" class="inner-midcontainer">
This is contact details Page
</div>
<div id="divContactDetailsFooterText" class="inner-txtfooter" > </div>
<div id="divContactDetailsFooterImg" class="inner-imgfooter"><img id="ContactDetailsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Facebook">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Facebook </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-miles">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Milestones </span>
</div>
<div id="divMilestonesMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divMilestonesPageBackgroundImage" class="inner-container">
<div id="divMilestonesHeaderImg" class="inner-imgheader"> <img id="MilestoneHeaderImage" style="width:100%;"/></div>
<div id="divMilestonesHeaderText" class="inner-txtheader"></div>
<div id="divMilestonesContainer" class="inner-midcontainer">
this is Milestones page
</div>
<div id="divMilestonesFooterText" class="inner-txtfooter" > </div>
<div id="divMilestonesFooterImg" class="inner-imgfooter"><img id="MilestoneFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<!--3rd layout ends here-->
<script>
var subMenuVal = parent.document.getElementById("selectedSubMenu").value;
if ((subMenuVal == "") || (typeof subMenuVal === "undefined")) {
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
}
else {
console.log(subMenuVal);
var app = new kendo.mobile.Application(document.body, { transition: "slide", initial: subMenuVal });
}
</script>
</body>
Thanks in advance