I am not a programmer but try to do my best with my own website. I have an online apparel store and I want to display on the item description just the values available for the item, now I have a table with some rows that I want to hide and compress the table if there is not a value for it. for example...
<tr>
<td style="width:30%"><b>· Hip:</b> {{HIP}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Inseam:</b> {{INSEAM}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Rise:</b> {{RISE}}</td>
</tr>
it should display...
· Hip: {{HIP}}
· Inseam: {{INSEAM}}
· Rise: {{RISE}}
I want that if I didn't have the "inseam" value on my inventory file this row will hide and just display...
· Hip: {{HIP}}
· Rise: {{RISE}}
I can not use javascript as eBay don't allow it. Sorry if I do not express myself in the right programming language. Hope someone can help me. Thanks to all!!!
https://css-tricks.com/almanac/selectors/e/empty/
With a little bit of refactoring your code and the :empty pseudoselector:
HTML:
<table>
<tr>
<td class="hip" style="width:30%">{{HIP}}</td>
</tr>
<tr>
<td class="inseam" style="width:30%"></td>
</tr>
<tr>
<td class="rise" style="width:30%">{{RISE}}</td>
</tr>
</table>
CSS:
.hip:before {
content: '· Hip: ';
font-weight: bold;
}
.inseam:before {
content: '· Inseam: ';
font-weight: bold;
}
.rise:before {
content: '· Rise: ';
font-weight: bold;
}
.inseam:empty {
display: none;
}
fiddle: http://jsfiddle.net/3fL1y0mg/2/
try adding {{INSEAM}} into that table row
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
The code I wish to learn how to code with HTML <Math> is in the table below
They want more details:
Coding parenthesis around fractions
Coding fractions
Coding radical signs (third root in the example)
Coding exponential notation (I used x<sup>y</sup>)
…
<!DOCTYPE html>
<html>
<head>
<style>
.M {
vertical-align: middle
}
OLi {
text-decoration: overline;
display: inline
}
/* used for top of radical sign */
BF {
font-size: 180%
}
/* for large parentheses around fractions */
.TF {
border-bottom: 2px solid black
}
/* to put fraction line below numerator */
.C {
text-align: center
}
</style>
</head>
<body>
<table style="font-size: 14pt; font-family; New Times Roman">
<colgroup>
<col span='2' style='min-width:4in'>
</colgroup>
<tr>
<td class='M'>
<table class='MATH'>
<tr>
<td rowspan='2'>log<sub>b</sub>
<BF>(</BF>
</td>
<td class='TF C'>√<sup>3</sup>
<OLi><i>x</i></OLi><i>y</i><sup>4</sup>
</td>
<td rowspan='2'>
<BF>)</BF> = log<sub>b</sub> √<sup>3</sup>
<OLi><i>x</i></OLi> + log<sub>b</sub> <i>y</i><sup>4</sup> -
log<sub>b</sub> <i>z</i><sup>5</sup>
</td>
</tr>
<tr>
<td class='C'><i>z</i><sup>5</sup></td>
</tr>
</table>
</td>
<td class='M' style="position:relative; top:8px">
<table>
<tr>
<td rowspan='2'>since log<sub>b</sub></td>
<td class='TF C'><i>mn</i></td>
<td rowspan='2'> = log<sub>b</sub> <i>m</i> +
log<sub>b</sub> <i>n</i></sup> - log<sub>b</sub> <i>p</i></td>
</tr>
<tr>
<td class='C'>
<i>p</i></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
Well, I haven't done much of maths in html. But, I can suggest you to use a javascript library, you can try https://www.mathjax.org/ . Its pretty cool from the docs. You should be able to use reading docs.
Is there a simple way to remove or make invisible two characters from the beginning of a string using just html and css? You can keep for yourself the downvotes to the questions... I know it's a hack.
I'm using mailchimp to send abandoned cart reminder mails. The price of a product is displayed as
zl123
but I need to display it as
123 zl
I tried to change the settings of the money format, but I haven't found a solution, so I'll try to hack it in some other way. Mailchimp replaces automatically a placeholder so I have to process what they put instead of the price placeholder, I have no control on that.
I have an html mail template and I can use css with it but no javascript. If you know how to solve the format problem in the mailchimp settings directly it will also work of course. Any help is very appreciated.
This is the product list code and the tag is *|PRODUCT:PRICE|*:
*|ABANDONED_CART:[$total=3]|*
<table>
<tbody>
<tr>
<td rowspan="3" style="vertical-align:top" valign="top" width="80"><img src="*|PRODUCT:IMAGE_URL|*" /> </td>
<td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
</tr>
<tr>
<td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
</tr>
<tr>
<td style="padding: 10px 30px">
<table cellpadding="0" cellspacing="0" style="background:#bed22c;">
<tbody>
<tr>
<td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
<td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
*|END:ABANDONED_CART|*
A hacky way will be fixing and repeating the word twice!
p {
font-size: 20px;
}
.hide-first-two {
text-indent: -0.75em;
overflow: hidden;
display: inline-block;
}
.show-first-two {
width: 0.75em;
overflow: hidden;
display: inline-block;
}
<p>
<span class="hide-first-two">zl123</span>
<span class="show-first-two">zl123</span>
</p>
Or using inline style:
<p style="font-size: 20px;">
<span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
<span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>
Considering your text lz123 comming form server and appened in
<p>lz123</p>
You can add text in this <p> by using ::after and ::before css selectors
But if is not possible to remove or manipulate that text in <p> using css
For string manipulation i suggest to use Javascript or Jquery
I am just starting with PHP and having trouble of getting my page result to print right. I call the page below from index.php. It looks ok if I displayed the page on a monitor but when I print the page and it is more than one page, the section at the end of the page got cut off and continue on the second page. I am looking for a way so that when I print the page, it will look if the section (each item number) will fit the whole section (repair desc, common cause, etc) in that page. If it does not then just print on the next page.
I also included the CSS file. Basically what it does is forcing the width of page to fit a letter-size paper. Thank you in advance.
<?php include_once $_SERVER['DOCUMENT_ROOT'] .
'/fms/includes/helpers.inc.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<link rel='stylesheet' type='text/css' href='/fms/css/letter-size.css' />
</head>
<body>
<div id="page-wrap">
<table>
<tr>
<td rowspan = "3" id="logo"><img src="/fms/images/flex_no_address_256.jpg" /></td>
<td rowspan = "3" id="address">Address<br />
City, State Zipcode <br />
Phone number <br />
website address
</td>
<td>
<table>
<tr>
<td id="repairinfo" class="theading" colspan = "2">Repair Detail</td>
</tr>
<tr>
<td><?php htmlout($custno); ?></td>
<td width="100px">WO: <?php htmlout($wonum); ?></td>
</tr>
<tr>
<td><?php htmlout($custname); ?></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<?php foreach($items as $item): ?>
<table border ="1">
<tr>
<td class="theading">Type of Repair</td>
<td class="theading">Repair ID</td>
<td class="theading">Fault Picture</td>
</tr>
<tr>
<td class="tablepadding"><?php htmlout($item['repairtype']); ?></td>
<td class="tablepadding"><?php htmlout($item['itemno']); ?></td>
<td rowspan="7" align="center">
<img src="/fms/images/wo_items/<?php htmlout($item['filename']); ?>" width="256" />
</td>
</tr>
<tr>
<td class="theading" colspan="2">Repair Description</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['repairdesc']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Common Causes</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['commoncause']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Preventive Measures and Maintenance</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['maintenance']); ?>
</td>
</tr>
</table>
<br />
<?php endforeach; ?>
</div>
</body>
</html>
CSS:
* { margin: 0; padding: 0;}
body {
font: 12px/1.4 Georgia, serif;
}
a img {
border: none;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
table {
width:100%;
}
#logo {
width: 256px;
}
#address {
width: 170px;
}
#repairinfo {
border-bottom: solid 1px;
text-align: center;
}
.theading {
font-weight: bold;
padding: 3px;
}
table tr td.tablepadding {
padding: 3px;
}
It should be achieved through CSS and no PHP, although you can use php as well as a workaround, google for css media.
There are some tricks for the CSS of your printing: http://slodive.com/web-development/css-print-page-tricks/
Can't give you specific details because I haven't worked too much with printings but it all comes to testing the total height that fits on the paper, and looking for a measure in php (maybe lines?) so if the size is bigger than the one you set, it creates another Table.
You could also use Javascript as you can detect element's (for example a table's) height, and call some function when the max height is reached.
Also I want to suggest you not using tables if it's not totally necesary, It's a very old-school approach and troublesome to modify, with more different behaviour across browsers, and with a lot more of unnecesary code.
Your issue is not with PHP but with CSS.
You need to include a print specific stylesheet as this will be different to your computer monitor styles.
Here's a good blog post about print CSS
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
In your html the print stylesheet <link> element will need a media="print" attribute
Then in your print stylesheet you can specify a width
I have an HTML table in my web page and there may be many rows in it as it is generated dynamically. The problem i am facing is that When the row data overflows the available width, the whole table css is disturbed.
I need a solution such that if the row data overflows it should be split into multiple rows, as required to fit all the data.
The HTML is as follows:
<table>
<tr>
<td class='first' >From :</td>
<td class='second'>Gaurav Sachdeva <gauravs23#ymail.com></td>
</tr>
<tr>
<td class='first' >To :</td>
<td class='second' >nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com></td>
</tr>
<tr>
<td class='first'>Date :</td>
<td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
</tr>
</table>
The css is as follows:
.first{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
}
All css gurus out there....please help!
The problem as I see it is really that “From :” and “To :” and “Date :” may each get split to two lines. To fix this, add
.first { white-space: nowrap; }
To fix another layout issue, which you did not ask about, consider adding this, too:
td { vertical-align: top; }
If the email recipient list in the data is really of the format in the example, it’s a bit odd and will be rendered oddly, as a line break may be inserted by a browser at any space but not after “>”. It is more normal to separate addresses by a comma or a semicolon and a space. If you cannot use spaces the, the practical choice is to insert <wbr> tags at allowable breakpoints, as in John Doe <foo#example.com><wbr>Jane Doe <bar#example.com>.
just replace this css with the below one
Or Set Width For Your Table I Can See That There To Width defiened For Your Table. Width May Fix The Problem
.first
{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second
{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
overflow:hidden;
}
ok check here now
<style>
.first{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
overflow:hidden;
}
</style>
<table cellspacing="5px" cellpadding="5px" style="width:525px;">
<tr>
<td class='first' style="width:57px;">From :</td>
<td class='second'>Gaurav Sachdeva <gauravs23#ymail.com></td>
</tr>
<tr>
<td class='first' style="width:57px;">To :</td>
<td class='second' >nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com></td>
</tr>
<tr>
<td class='first' style="width:57px;">Date :</td>
<td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
</tr>
</table>
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>