I'm working on an export tool to Excel format. To reduce the generating time, I don't want to use PHPExcel.
This is a part of my code : http://ideone.com/HCleMO
I like to hide the first column A named ID. I tested the following code in my HTML,
CSS :
style="display:none"
HTML :
hidden="hidden"
No results with these tests. Do you know if this is possible?
Thanks in advance!
Use either of the following:
CSS
tr td:first-child{ display:none; }
jQuery
$("tr td:first-child").hide();
$("tr td").first().hide();
or if you dont want to use the psuedocodes :first-child, add same class in all first of each row and hide them using CSS/JS
For tables, you have to perform the same operation on all the elements in the same row/column. So if you want to hide the first column, give all the elements the same CSS class and then say style=display:none
Related
I have coded PHP script to generate PDF with text contents using TCPDF library. First, the script gets the contents from database and creates temporary .html file. Then the script gets the contents from the .html file and writes to create PDF document.
However, the problem here is it doesn't know when to break a page. So, it looks something like in the image.
I want the script to break the page when the title comes at the bottom of the page and move it to the next page.
There is a function called $pdf->AddPage(); that breaks the page.
Is there any solution to this? Please help.
Have you tried page-break-after CSS property ? Add this to the DIV which is just above the title. So the style of the above DIV will look something like this.
.DIV_CLASS {
page-break-after: always;
}
The page-break-after property sets whether a page break should occur
AFTER a specified element or not.
always value of the property inserts a page break after the element.
Update:
To make sure your particular section/DIV doesn't get divided between pages. You can make use of page-break-inside property.
Use it like this,
.DIV_CLASS {
page-break-inside: avoid;
}
Above CSS will make sure that DIV with class DIV_CLASS will never get divided among pages.
The page-break-inside property sets whether a page break is allowed
inside a specified element.
avoid value of property avoids page break inside the element (if possible)
I am working on mpdf and it is a good library to convert html page to pdf, but when I put block element e.g <div><p> inside table cell it doesn't behave like a block element, it behaves like inline element.
code:
<td><div>Block Element</div></td>
or
<td><p>Block Element</p></td>
Is there a way to make it block element?
Or should I use other library?
Thanks in advance.
Looking for solutions to the same problem I just realized that according to the documentation, it's not a bug, it's a feature limitation:
Block-level tags (DIV, P etc) are ignored inside tables, including any
CSS styles - inline CSS or stylesheet classes, id etc. To set text
characteristics within a table/cell, either define the CSS for the
table/cell, or use in-line tags e.g. <SPAN style=”…“>
Seems like there's currently no way around it.
In my case I had to use s to indent (fake-center) a <h4> headline.
See https://mpdf.github.io/tables/tables.html
I have many trs which have the same class name - sectiontableentry1.
I want this tr to be hidden only if it contains a keyword, such as "recommended".
Here is an example http://jsfiddle.net/aQfQK/1/
If I am not misstaken, you are looking for something like this :
$('.sectiontableentry1').each(function(){
if($(this).html().indexOf('recommended') != -1){
$(this).hide()
}
})
Since what you want is a little blurry to me, tell me if I am wrong.
There are no CSS selectors which select elements based on content. The only way to solve this problem without modifying the HTML is to use Javascript.
The best solution is to modify the HTML to include a 'recommended' class on table rows than add the CSS:
tr.recommended {display: none;}
Using PHP, I need to read in a csv file of id's...
0123,0456,0789
... then load a SVG XML graphics file and change the color attribute of those specific id's.
Each polygon in the SVG file has records like below. I need to change the fill: values in every matching record from #d0d0d0 to #FF0000. Outer loop will be the ids of course, inner will be each record of the SVG file.
style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel"
d="M 131.85275,310.64335 L 131.85275,311.08435"
id="0123"
For my hobbyist level of programming skill, a general PHP structure of the loops needed plus tips how to access specific attributes of style would be very helpful!
Thanks!
Brian
The DOMDocument object has getelementbyid, getAttribute and setAttribute, which should let you change the xml.
This example looks similar to what you're wanting, once you get the styles you can explode with ';' to get the array of styles, then join with the new styles.
I'd recommend a different approach: Use CSS for changing the color. No looping over SVG elements required there. To be able to do this, you should clean up the SVG file a little, which also will make it more compact.
As I understand it, all your to-be-colored elements have the same style attribute with content
font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel
Delete those attributes, replace them with a sensible class attribute. Let's say those paths are countries on a map, then lets give them an attribute class="country". Then style all of those using one CSS rule, like:
.country {
fill: #d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
I left away the font-size property as this is irrelevant for a <path> element. (Probably you can simplify this further because a lot of properties repeat the default values, and unless you change those properties in a parent element of your paths, fill-rule, stroke-opacity, stroke-miterlimit, stroke-dasharray, stroke-linecap and marker-start are redundant, but don't hurt anyone.)
There is one more problem: If the IDs in your file look indeed like 0123, 0456 or 0789, those are invalid because they need to follow the rules for XML names, which must not start with a number. You should expect problems when trying to style those elements using their IDs or when trying to use getElementById() on them. So, you might want to change them to something like id0123, id0456 and id0789
Now, you can dynamically add some CSS from your CSV data.
0123,0456,0789
would become
#id0123,#id0456,#id0789 {fill:#FF0000}
and you're done. The CSS can be added to a <style> element of your SVG file, or you create a separate CSS file and reference this from the SVG. This way, you don't have to do any changes to the SVG when dynamically changing the colors. If you use the SVG data inline in HTML, you can also add this to a <style> element in your HTML page or a CSS file that's referenced by the HTML.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.