so i wanna insert 2 buttons after every first td where the img is. i wanna do this with a script. so i get the table from a server and the site should automatically add the buttons with a script
<html>
<body>
<tr style="background:#EEE;line-height:1.4em">
<td width="50%">
<div class="extra_info" style="padding: 2px 0 0;">
<img class="detach_prop_or_tag" title="entfernen"
name="prop_id=656|page_id=10280|confirm_text=: 1108"
src="/theme/frontend/prinvision/style/prinvision/image/layout/cancel_button.png">
Adressat (Angebot)
</div>
</td>
<td width="50%" id="propId_656_profilePageId_10280" class="editable_prop">
<span class="extra_info" title="Adressat (Angebot): example6">
exampletext4</span>
</td>
</tr>
<tr style="background:#FFF;line-height:1.4em">
<td width="50%">
<div class="extra_info" style="padding: 2px 0 0;">
<img class="detach_prop_or_tag" title="entfernen"
name="prop_id=838|page_id=10280|confirm_text=: 1108"
src="/theme/frontend/prinvision/style/prinvision/image/layout/cancel_button.png">
Absender (Angebot)
</div>
</td>
<td width="50%" id="propId_838_profilePageId_10280" class="editable_prop">
<span class="extra_info" title="Absender (Angebot): exampletext3">
exampletext2</span>
</td>
</tr>
<\body>
<\html>
i have tryd multiple scripts but i cant figure out the right one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td,tr,div{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello1</td>
<td>hello1</td>
</tr>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello2</td>
<td>hello2</td>
</tr>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello3</td>
<td>hello3</td>
</tr>
</table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// this way you can select every image and add button with it
// i hope your issue is slove if not can explian more like
add button in next td or after image
var img= $('.imgdiv');
$.each(img, function (indexInArray, valueOfElement) {
console.log(indexInArray, valueOfElement);
$(this).parent().find('.imgdiv').html(`<button>button-${indexInArray}</button><button>btn-${indexInArray}</button>`)
});
</script>
</html>
Where exactly do you need to add the buttons - in the second td, or after the row? Depending on your answer, you can the below approach:
Either add buttons in a new td after every image td
<td>
<button onclick="performAction">Action</button>
</td>
Or, add a new row below your image tr, and insert a full-width td containing the buttons.
<tr>
<td colspan="2">
<button onclick="performAction">Action</button>
</td>
</tr>
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 have an index.html page (homepage), where the word "login" is supposed to be linked to the login page (login.html). However, when I click "login", it shows the "file not found" message. I can't figure out why.
<!DOCTYPE html>
<html>
<body>
<header>
<p>Login
Sign Up </p>
<br/>
<h1 align="center"> Prototype Name </h1>
<h2 align="center"> Prototype Slogan </h2>
</header>
<nav>
<table id="menu">
<tr>
<td> Home </td>
<td > About Us </td>
<td> Support </td>
</tr>
</table>
</nav>
</body>
</html>
Edit: Somehow it started working after I erased the href and wrote exactly the same thing again.
Change href to if they are in the same folder.
<p>Login
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>
I am creating pdf using HTML
i want to give style to input type but it is not working.
I have following code
$data='<!DOCTYPE html>
<html>
<head>
<style>
.formcontent{margin:0 auto;width:800px;}
.inputType{border-top:0px;border-bottom:1px solid black;border-left:0px;border-right:0px;width:25%;}
.custom_para{display:inline;}
.content{
margin-top: 4%;
text-align:justify;
text-justify:inter-word;
}
</style>
</head>
<body>
<div class="formcontent">
<table width="800px">
<tr>
<td>
<table width="800px">
<tr>
<td colspan="3">
<h1 style="text-align:center;">LEASE</h1>
<h2 style="text-align:center;"> LEASE LEASE LEASE LEASE</h2></td>
</tr>
<tr>
<td colspan="3">
<p class="custom_para">This Rental Agreement or Residential Lease shall evidence the complete terms and conditions under which the parties</p>
<p class="custom_para">whose signatures appear below have agreed. Landlord/Lessor/Agent,<input type="text" class="inputType">,shall be</p>
<p class="custom_para">referred to as "OWNER" and Tenant(s)/Lessee,<input type="text" class="inputType">,shall be referred to as</p>
<p class="custom_para">"RESIDENT." As consideration for this agreement, OWNER agrees to rent/lease to RESIDENT and RESIDENT</p>
<p class="custom_para">agrees to rent/lease from OWNER for use solely as a private residence, the premises located at <input type="text" class="inputType"></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>';
require_once('mpdf.php');
$mpdf = new mPDF();
$b=stripslashes($data);
$mpdf->WriteHTML($b);
$mpdf->Output();
i am giving style on html input type it is working on html page but
when I put it to mpdf for styling its not working
please help
I had the same issue for designing the page through MPDF library
but unfortunatelly mpdf library does not supports all designing(css/tags)
it supports basic html tags and styling to design mPDF.