See the Image Section commented below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ORDER CONFIRMATION</title>
</head>
<body>
<h3>www.HobbyShop.com</h3>
<h3>Thank You for your purchase, <span th:utext="${purchase.getCustomer().getFirstName()}"></span></h3>
<h3>Order summary</h3>
<div>
<table>
<tr>
<th width="20%">Product Image</th>
<th width="50%">Product Detail</th>
<th width="30%"></th>
</tr>
<tr th:each="orderItem : ${purchase.getOrderItems()}">
<!-- Image section -->
<td>
<p> <span th:utext="${orderItem.imageUrl}"></span> </p>
<img th:src="#{orderItem.imageUrl}" width="150px"/>
</td>
<!-- end of image section -->
<td>
<p> <span th:utext="${ orderItem.name }"></span> </p>
<p>Unit Price: <span th:utext="${ orderItem.unitPrice}"></span> </p>
<p>Quantity: <span th:utext="${ orderItem.quantity}"></span> </p>
</td>
<td>
<p>Subtotal: <span th:utext="${ orderItem.quantity * orderItem.unitPrice }"></span> </p>
</td>
</tr>
</table>
</div>
<h5>Total Quantity: <span th:utext="${purchase.getOrder().getTotalQuantity()}"></span></h5>
<h5>Total Price: <span th:utext="${purchase.getOrder().getTotalPrice()}"></span></h5>
<h3>Order Details</h3>
<h5>Your order will ship to:</h5>
<h5 style="margin: 0" > <span th:utext="${purchase.getCustomer().getFirstName()}"></span> <span th:utext="${purchase.getCustomer().getLastName()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getStreet()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCity()}"></span>, <span th:utext="${purchase.getShippingAddress().getState()}"></span>, <span th:utext="${purchase.getShippingAddress().getZipCode()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCountry()}" ></span> </h5>
<h5>Your order Tracking Number: <span th:utext="${purchaseResponse.getOrderTrackingNumber()}"></span> </h5>
</body>
</html>
In <p> <span th:utext="${orderItem.imageUrl}"></span> </p> I can see the image url which is AWS s3 object url where image is stored.
Image URL: https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg
But In <img th:src="#{orderItem.imageUrl}" width="150px"/> image url is not found.
If i hardcode the image url like this:
<img th:src="#{https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg}" width="150px"/>
it works.
To me it seems like in img tag we are not getting the img url. but in th:utext image url is shown
The correct syntax for using a ${...} expression inside of a #{...} expression is:
<img th:src="#{${orderItem.imageUrl}}" width="150px" />
(See the standard URL syntax documentation.) In this case, however, there really is no reason to use the standard URL syntax at all. You can simply use the variable directly.
<img th:src="${orderItem.imageUrl}" width="150px" />
The reason #{orderItem.imageUrl} fails is because Thymeleaf is treating orderItem.imageUrl as a string, and not a variable (equivalent to #{'orderItem.imageUrl'} which will resolve to <img src="/context/orderItem.imageUrl" width="150px" /> -- you can see this by simply viewing the source and noticing that your variable wasn't parsed).
I am using this rating widget and I want to get the value for my star rating like 1 star or 2 stars so I can manipulate the image being shown. I want to get the value from the data-title not the name I stored for it.
data-title="stack"
which holds a 5 star rating. I want it to return 5 or 5 star on my console and not just stack.
This will give output Grey / Silver
But I want the integer value stored for it.
Is there any way I can achieve that ?
var data = $('.color-box').data('title');
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="value">
<div class="color-box grey-silver-color-gradient" data-title="Grey / Silver" data-toggle="tooltip" data-original-title="" title=""></div>
</div>
Do you mean this?
console.log($("[data-title^=walter]").find(".rw-ui-star-selected").length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card__side card__side--front card__side--front-1">
<div class="card__description">
<img src="images/Walter_White_S5B.png" class="imgcard">
</div>
</div>
<div class="card__side card__side--back card__side--back-bb">
<div class="card__description">
<p class="text-title drop drop-top">Bryan Cranston</p>
<p class="text-small pad-small drop">As</p>
<p class="text-title drop">Walter H. White</p>
<p class="text-small pad-small drop">A.K.A.</p>
<p class="text-title drop">Heisenberg,<br> Mr. Lambert,<br> Mr. Mayhew<br></p>
<p class="text-small drop"><q>I am the one who knocks.</q></p>
<p class="text-small drop"><q>Say my name.</q></p>
<p class="text-small"><q>All right, I've got the talking pillow now.</q></p>
<!-- <div class="rw-ui-container" data-title="walter bb rating"></div> -->
</div>
<div class="rater">
<div class="rw-ui-container rw-urid-17803414863255154888 rw-ui-star rw-size-medium rw-dir-ltr rw-halign-center rw-valign-bottom rw-style-oxygen1 rw-active" data-title="walter bb rating" data-urid="walter bb rating" style="">
<div class="rw-action-area">
<ul class="rw-ui-stars">
<li class="rw-ui-star-0 rw-ui-star-selected"></li>
<li class="rw-ui-star-1 rw-ui-star-selected"></li>
<li class="rw-ui-star-2 rw-ui-star-selected"></li>
<li class="rw-ui-star-3"></li>
<li class="rw-ui-star-4"></li>
</ul>
<a class="rw-report-link" target="_blank" href="https://rating-widget.com/my-rating-report/star/oxygen1/rating-0-5/" rel="nofollow"></a>
</div><span class="rw-ui-info-container" style="background-color: rgb(255, 255, 255);"><i aria-hidden="true" class="rw-ui-info-nub rw-ui-info-outer-nub" style="border-bottom-color: rgba(0, 0, 0, 0.5);"></i><i aria-hidden="true" class="rw-ui-info-nub rw-ui-info-inner-nub" style="border-bottom-color: rgb(255, 255, 255);"></i><span class="rw-ui-info-inner-container" style="border-color: rgba(0, 0, 0, 0.5);"><span class="rw-ui-info" style="color: rgb(0, 0, 0);">Rate this</span></span>
</span>
</div>
</div>
</div>
</div>
Here is the HTML code that I copy and pasted from Anki (Flashcard creation program). The code works fine. (Background: the flashcard is a programming question)
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?<div><div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"=""><pre style="line-height: 25px;"><table class="highlighttable" style="font-family: Arial;"><tbody><tr><td><div 10px"="" class="linenodiv" padding-right:=""><pre style="line-height: 125%">1</pre></div></td><td class="code"><div class="highlight"><pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #7D9029">http-equiv</span><span style="color: #666666">=</span><span style="color: #BA2121">"X-UA-Compatible"</span> <span style="color: #7D9029">content</span><span style="color: #666666">=</span><span style="color: #BA2121">"IE=edge"</span>></pre></div></td></tr></tbody></table></pre></div><div><center><br></center></div></div>
The code rendered on the browser:
Obviously, this code is not readable in its current format. To fix this, I added the appropriate indentations.
<meta content="width=window-width, initial-scale=1.0" name="viewport">
What does this code do?
<div>
<div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
<pre style="line-height: 25px;">
<table class="highlighttable" style="font-family: Arial;">
<tbody>
<tr>
<td>
<div 10px"="" class="linenodiv" padding-right:="">
<pre style="line-height: 125%">1</pre>
</div>
</td>
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span> <
span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
</tr>
</tbody>
</table>
</pre>
</div>
<div>
<center>
<br>
</center>
</div>
</div>
The strange part: the indents above are now appearing in the HTML document.
This shouldn't be happening, correct? I thought newlines in the HTML are not visible to users?
That's because the whitespace is pre (preserved by the browser). This is intended so that you can indent code. Usually, when you want to render code in HTML you take off the indentation:
<td class="code">
<div class="highlight">
<pre style="line-height: 125%"><<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>>
</pre>
</div>
</td>
Notice that you don't need to do it on the <pre> line itself (and that is why the meta part shows with your desired indentation).
If you are going to be using code snippets frequently, a library such as Prismjs will make your life much easier and be worth the overhead (it's a very lightweight library in fact):
<pre><code class="language-html">(... html code ...)</code></pre>
<tr ng-repeat="rows in CalendarBean.weekList">
<td ng-repeat="cellList in rows">
<div id="{{cellList.fullDate}}" ng-click="onDateSelect(cellList.fullDate)"
class=" {{cellList.timeClass}} {{cellList.leaveFlag}}+{{cellList.holidayFlag}}"
style="border:{{cellList.borderColor}}; background-color: {{cellList.ColorCode}}"
align='center'>
<div class="row">
<span style="color: {{cellList.dateNumberColor}}" class="class1">
{{cellList.date}}
</span>
</div>
</div>
</td>
</tr>
I have this code.
background-color: {{cellList.ColorCode}}
this part and some closing second braces are getting removed while I am formatting my code in eclipse Luna. Any suggestion how to stop this?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
This is the what the codes I already have looks like, but I want to set it to an exact width so everything looks neat:
I'm not very good with HTML and was hoping someone could tell me what to put where. Here's the code I have:
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span>
</span>
</p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u>
</big>
</span>
</h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
I wouldn't recommend a fixed width. On mobile devices your template wont show very well. I would recommend you look a simple responsive grid css layout like skeleton - it will resize it all to the width of the browser, works fine in eBay!
How about putting your entire page in a container, giving that container a width of how big you want it to be and centering it. In my snippet, I gave the container a width of 50vw (Which equals to 50% of the current viewport width)
#container{
width:50vw;
display:block;
margin:0 auto;
}
<div id="container">
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u></big></span></h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u></big></span></h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u></big></span></h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
</div>