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>
Related
Im trying to create this for my current code,how do i do this ?This is for a price calculator and i need an example before i start coding it
[1]: https://i.stack.imgur.com/2xE4f.png
<div class="grid-item">
<thead>
<td>App-Benutzer</td><br>
<td>pro 7,50€</td><br>
<td>Backend-Benutzer</td><br>
<td>pro 35,50€</td><br>
</thead>
<hr>
<span class='summe'>0.00</span><br>
</div>
Try the below code. You can create your details as a table
<!DOCTYPE html>
<html>
<style>`
table, th, td {
border:1px solid black;
}
</style>
<body>
<table style="width:100%">
<tr>
<td>App-Benutzer
</td>
<td>75,00€</td>
</tr>
<tr>
<td>Backend-Benutzer</td>
<td>175,00€</td>
</tr>
</table>
</body>
</html>
Unable to place image even with the signature in table. The top pf the image should be the same level as the top of the text
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Email Signature</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 560px">
<tr>
<td width="5%" valign="middle">
<img href="https://www.pravoconstruction.com/" src="https://media-exp1.licdn.com/dms/image/C4E0BAQGQicp-n_FWzw/company-logo_200_200/0/1530564205372?e=2159024400&v=beta&t=OdxbaYftUNG_-cf8lLTWVA-voPANK8goWs3hiafOo84" style="width: 30%;min-width: 62px;
display: block;">
</td>
<td width="70%" valign="top">
<h4 style="margin:0 0 5px; font-size: 9px;font-family: arial;color:#99A3A4; line-height:1.2"><strong>test email</strong></h4>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">job role | 123.456.7890</h5>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">1234 anywhere lane | Texas,TX 77777</h5>
</td>
</tr>
</table>
</body>
</html>
Looks like your photo has some space inside the image which probably causes it to look not lined up. If you want to compensate for that I would suggest adding some padding to the top of the h4.
Also, you could crop the image so it doesn't have this space on the top.
I'v created a prestashop module in which it obtains airway bill numbers from an external API, This number I then add on a webpage and let users to print.
This bar code only appears on HTML page but does not visible on print preview dialog box
I use Smarty for html part since its by default uses by Prestashop.
Hear is my code,
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
any idea why this is happening? is there any solution for this?
UPDATE
{literal}
<style>
table { border-collapse: collapse;font-family:arial;}
td {padding: 8px;}
body { margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma"; }
* {box-sizing: border-box;-moz-box-sizing: border-box; }
.page { width: 21cm;min-height: 29.7cm;padding: 1cm;margin: 0.5cm auto;border: 1px #D3D3D3 solid; border-radius: 5px;
background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.subpage { padding: 0cm;border: 0px black solid;height: 256mm; }
#page { size: A4; margin: 0; }
#media print {.page {margin: 0;border: initial;border-radius: initial;width: initial;min-height: initial;box-shadow: initial;
background: initial;page-break-after: always;}}
</style>
{/literal}
{foreach from=$orders_array item=order}
<div class="page">
<div class="subpage">
<table border="3" style="border-style: solid;width:100%">
<tr>
<td>
<table border="0" style="border-style: solid;width:100%">
<tr>
<td><img src="{$order.other_data.logo}" alt="logo" height="100" width="300"></td>
<td>
<h3><u>{$order.other_data.service}</u></h3><br>
{$order.other_data.ppaddress}
<br>www.postaplus.com</td>
</tr>
</table>
<table border="1" style="border-style: solid;width:100%">
<tr>
<td style="width:40%"><b>From</b></td>
<td>
<b>{$order.other_data.shipper_name}</b>
<br>
{$order.other_data.shipper_address},<br>
{$order.other_data.shipper_country_code},<br>
Phone: {$order.other_data.shipper_phone},
</td>
</tr>
<tr>
<td><b>To</b></td>
<td>
<b>
</b><br>
{$order.params.SHIPINFO.Consignee.ToName},<br>
{$order.params.SHIPINFO.Consignee.ToAddress},
<br>
<b>Phone:</b> {$order.params.SHIPINFO.Consignee.ToMobile} / {$order.params.SHIPINFO.Consignee.ToTelPhone} <br>
<b>Civil Id:</b><br>
</td>
</tr>
<tr>
<td><b>Pay Type: {$order.params.original_order_array.payment_method}</b></td>
<td>Amount: {$order.params.original_order_array.total} - Currency - {$order.params.original_order_array.codcurrency} </td>
</tr>
<tr>
<td><b>Reference 1</b></td><td>{$order.params.original_order_array.reference} </td></tr>
<tr>
<td><b>Reference 2</b></td><td></td></tr>
<tr>
<td><b>Service</b></td><td>{$order.other_data.service}</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td><b>Pieces:</b></td> <td>1</td> <td><b>Weight:</b></td> <td>{$order.other_data.total_weight} Kg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><b>Remarks</b></td>
<td></td>
</tr>
<tr>
<td>
<b>Note 2</b></td><td>{$order.other_data.original_order_data.notes2}</td></tr>
<tr>
<td><b>Shipper Order Number:</b></td>
<td>
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
</td>
</tr>
<tr>
<td><b>Shipment Date:</b></td><td>{$order.other_data.awb_date}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
{/foreach}
<script>
window.print();
</script>
screen shots
html view
print preview
Thanks in advance.
Roshan
Roshan save the below code in html format and check whether it shows barcode in your print preview . if it works than you should try changing your font or check your code again..it will be very helpful if you upload your code here as well.also check display background graphics checkbox in print preview menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fontlibrary.org/face/idautomationhc39m-code-39-barcode'
rel='stylesheet'>
<style>
p.serif {
font-family: 'IDAHC39M Code 39 Barcode', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Look for the link to the font itself in the header. It should look like this:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
Change the media="screen" to media="screen, print".
I would also recommend you try using 'IDAHC39M Code 39 Barcode' instead of IDAutomationHC39M for font family. (Make sure the quotes are there.)
My table keeps show up in one cell, not sure what i did wrong. anyone willing to look and let me know where i went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>
<body>
<div style="width:1020px; height:1020px; float:center; background- image:url(images/zombie_5k_TM_AP_stripped.png)">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="sponsors">
<table>
<tr>
<td align="center" width="250">Seth Jackson - Edward Jones</td>
<td align="center" width="250">Heritage Mechanical </td>
</tr>
<tr>
<td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
<td align="center" width="250"> </td>
</tr>
</table>
</div>
<div class="sform">
< p align="center">
<a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
</body>
</html>
here is the css that covers the class .sponsors
.sponsors {
position: absolute;
top: 280px;
left: 340px;
}
here is the link to see what i am talking about, http://www.ifdauxzx5k.com/sponsors.html
Your table doesn't show up in one cell.
But all the cells are on top of eachother, because you have position: absolute; on your TD in your main.css line 62.
td{
color: #D91D1F;
position: absolute;
}
This is why every TD is going to the left top position of the table. Remove this line and it will behave correctly.
I've got 5 images I'd like to organize in an ASP.NET MVC view. So what I need is an HTML+CSS solution (I prefer not to use jQuery for this, for maximal compatibility).
I want to organize the images like so:
Image1 Image2
Image3 Image4
Image5
At first I tried using tables, with the HTML being:
<div class="table1">
<table border=1>
<tbody>
<tr>
<td>
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table2">
<table border=1>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
</p>
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table3">
<table border=5>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
and the css part:
.mainArticleImage {
height: 95px;
width: 120px;
}
.ImageCenterContainer {
margin: 0 auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
}
but that doesn't work on IE.
This approach also didn't work too well either.
What is the best, simplest, cross-browser way to carry out what would seem to be an easy task?
How about this: http://jsfiddle.net/um6d7/
#Brian Flanagan
(this reply was too long for a comment)
I'm using IE8, but this solution should work for older IE versions as well. Shouldn't it to be fairly simple to organize 5 pictures on a screen? :-P
I should also mention that I didn't copy and paste your solution "as is", since I didn't want my css to refer to general tags such as img and div, but the changes are meaningless in terms of logic. The actual code I used:
HTML:
<div id="imagesContainer">
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>
CSS:
#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}
any suggestions?