For some decoration, I need to insert an upper margin at the beginning of the document which represent 34% of the whole height of the page (margin included).
My page < body> start like this:
<body bgcolor="#dedede" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="-webkit-text-size-adjust:none;">
<tbody>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#dedede">
<tr>
<td>
<table class="premier-tableau" width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr height="500" /> <!-- I need to use this line as a margin -->
</thead>
<tbody>
<tr>
<td width="35" />
<td width="530">
<font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
This is for using in e-mails.
Of course it is possible to calculate manually the number of pixel, and add the static result to the < tr> tag. But, It is part of a semi-automated process, and I would like to avoid that.
Also note that the destination SMTP server may have a strict policy and refuse attachments. So, I don't see how to use externals libraries (such as JQuery). As a modern ecmascript is available, I would like to avoid using them...
Any embeddable solutions (css;javascript;svg ...) are accepted.
document.body.parentNode.offsetHeight but - javascript isn't going to run in emails :) I therefore think that you need to do this manually.
since you have no margins on the body, a simple height should do it.
document.getElementsByTagName("body")[0].height
There is the viewports Units which have been designed for that. Few browser support it actually, but using height="34vh" will be the right way to proceed in some years.
It will take some years for clients to comply with the standard. An actual way to proceed now, is to compute the size (in px) manually each time the document is edited.
Related
I'm working with a really outdated site that's giving me issues. What I'm trying to do is select the "Judgement/Lien Search" tab as seen on: page
The issue is that there are no identifiers. No name, ID, etc.
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><font size="+1"><b>Property/Lis Pendens Search</b></font></td>
</tr>
</tbody>
I've tried using xpath, css selector, and even just executing the script. I've been using ChroPath to get the correct info. When <b><font size="+1">Judgment/Lien Search</font></b> is selected ChroPath gives me these options:
Rel XPath: //td[2]//a[1]
Abs Xpath: /html[1]/body[1]/table[1]/tbody[1]/tr[1]/td[2]/a[1]
CSS Selector: table:nth-child(5) tbody:nth-child(1) tr:nth-child(1) td:nth-child(2) > a:nth-child(1)
None of which have actually worked when using driver.find options
When I try to just execute the javascript driver.execute_script("javascript:submitJudgementSearch();") I get error: "selenium.common.exceptions.JavascriptException: Message: javascript error: submitJudgementSearch is not defined".
Any ideas on other ways to select it? Or am I looking at something wrong? This bump in the road really has me stumped. Thanks!
What about using Attribute Starts With Selector ?
Since your anchors seems to have unique href values this could work as a selector for the anchor itself. From there you could move up the dom to the parent if the <td> is indeed what you need.
$('a[href^="http://example.com/external/link"]').click(function() {});
You could use document.querySelector to get the job done potentially, refer to the snippet below. I was able to select that element using document.querySelector
document.querySelector('td a b').style.color = "red";
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap="">
<a href="javascript:submitPropertySearch();" target="_self">
<font size="+1"><b>Property/Lis Pendens Search</b></font>
</a>
</td>
</tr>
</tbody>
Theres another example here
And the Mozilla docs
I have a website that is built using NetSuite, meaning I don't have control of he source html. The code that's output looks like this. I would like to remove the piece of code that starts with "I want to remove starting here".
</td>
<!-- end new category page -->
<!-- I want to remove starting here -->
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="top">
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<!-- I want to remove ending here -->
<!-- start Category Page Item List SubCategories -->
<td width="65%" style="font-family: 'Lato', sans-serif; font-weight:400;">
Your question is essentially the same as in this post
You are asking to access the comments in the DOM using javascript.
I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.
I've got an implementation of CK Editor that uses the SCAYT / GRAYT plugin, and I've found what I think might be a bug in CK Editor itself.
I'm using version 4.5.11
Consider this HTML:
<tr>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial;">Content</span></td>
<td align="left" bgcolor="#f8f9f3" height="30" id="table_column2" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial; ">Content</span></td>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1_2" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial;">Content</span></td>
</tr>
When my editor loads and the HTML content is rendered, the SCAYT and GRAYT plugins start doing their magic and checking the contents for spelling and grammar issues.
The problem is with GRAYT. It mistakes the text of two of the <td> elements as one sentence or phrase, and attempts to place a <span> around them that's supposed to simply tell the user to correct their grammar.
Instead, it produces this result:
<tr>
<span class="gramm-problem" data-grayt-phrase="Content Content">
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial;">Content</span>
</td>
<td align="left" bgcolor="#f8f9f3" height="30" id="table_column2" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial; ">Content</span>
</td>
</span>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1_2" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial;">Content</span>
</td>
</tr>
Obviously, this is invalid HTML, and is undesired. The real problem is that it breaks the layout of the table in the editor.
Does anybody know what I can do to fix this? Checking the CK Editor / Web Spell Checker documentation yielded almost no information on how to control this functionality. At best, I can disable it, which I believe is also undesired.
The issue that you described is known issue and we plan to work on it in a few weeks. Now GrammarAsYouType (GRAYT) is only available as a plug-in for CKEditor 4+ and it is the Alpha version. Currently, our team is working on its improvement.
As a workaround, at this moment we can suggest turning off the GRAYT functionality on the SCAYT startup:
config.grayt_autoStartup = false;
As an alternative, you can turn off grammar check in the table (td, tr). But note that it will affect both SCAYT and GRAYT (no spelling check in <tr> or <td> tags).
config.scayt_elementsToIgnore = 'tr,td';
More details about all SCAYT parameters for CKEditor 4+ that can be changed, you can find on our website:http://wiki.webspellchecker.net/doku.php?id=scayt_parameters_ckeditor4
We´re using ext3.4.0 to display database output as grid. When a lot of rows are generated some browsers run into script timeout. I´m suggesting it´s because of a quite complex generated dom structure:
<div class="x-grid3-row row-einfach" style="width:1718px;">
<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" style="width:1718px;">
<tbody>
<tr>
<td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " tabindex="0" style="width: 78px;">
<div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">4</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-1 " tabindex="0" style="width: 78px;">
<div class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">4</div>
</td>
…
would be the output for this:
where every row is a div with a table in it. Can this be simplified f.e. by writing / Using a thiner template?
thanks,
t book
I think you cannot simplify this markup. Even when you would succeed, it would probably be at the price of loosing functionality of the grid.
Are you sure there is not another issue with your code ? Did you find where it hangs exactly, using the console ?
Maybe it's not an option for you, but it seems ExtJs 4 is more efficient. The markup will not be simpler, but it should not make the browser hang, even with grids that have hundreds of rows.