HTML email template solution to javascript link in table TD? - javascript

This is my current code:
<td height="150" style="background: url(bg.jpg); cursor: pointer;" onClick="document.location.href='http://www.youtube.com';">
Now obviously with JavaScript this isn't likely to work in email clients (is it?). What is an HTML solution? Thanks in advance! I've tried wrapping link tags around but that doesn't seem to do the trick.

Why not just style a link to take up the width and height of the td:
<td height="150" style="background: url(bg.jpg);"></td>

Given the information you have posted (and your comment on #PAM's answer), I think this will solve your problem:
<td width="150" style="background-color:rgb(128,128,128); background-image:url('http://www.yoursite.com/yourpicture.gif'); cursor:pointer;">
<a href="http://www.youtube.com">
...Text...
</a>
</td>
I've added the background-color attribute to the td so that users have a fallback if their email client does not display background images. Of course, you should set this to a colour which is similar to the background image.

Can't you just type like that:
<td height="150"><img src="bg.jpg" /></td>

Related

GRAYT plugin is breaking HTML in editor

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

A base64 image in svg does not display at the first time

I'm developing a hybrid application using cordova.
For some reason, I need to save an SVG image in witch there is a base64 image and some text in my SQLite. I saved the text of SVG source in a format like this:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" style="margin-top:5px;text-align:center" class="ng-scope">
<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width: 390px;height: 290px;background-color: #2B6E44;padding: 4px">
<table style="width:100%;height:100%;border-collapse:collapse;border:2px solid white;color:white;font-size:1em">
<tbody>
<tr>
<td colspan="2">
<div class="forImg" style="height:100%;width:50%;float:right">
<img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/.............
..........................................
L0JEX//Z" style="display:block;max-width:180px;max-height:170px;width:auto;height:auto;" />
</div>
</td>
</tr>
</tbody>
</table>
</foreignObject>
</svg>
but when I get this value from database and set it as the src of img like this:
JS:
$scope.blackboard.svgSource = "data:image/svg+xml;utf8," + res.rows.item(i).svg_source;
HTML:
<img ng-src="{{blackboard.svgSource}}"/>
the table in SVG will display normally, but the base64 image will not show until it has been display once in the other pages (there is a page of all the pictures can put into the SVG).
As the image in the SVG can be shown after it has been showed in another page, the base64 data is right I think.
But why can't it show in the first time?
Any help is appreciated!
I'm sorry to ask this question which now I solved by myself.
It seems not good to use SVG, which has a base64 image in it, in the src attribute of <img>.
I finally found that the ng-bind-html directive in angularJS is really fit for my situation, which can create in-line SVG. And in this way, the base64 image will display at the first time.
If you have an interest in this question, please take a look at this:AngularJS : Insert HTML into view

html <object data> using a non link to navigate to a page I click on from a page with multiple pages

Right now I have 4 search pages being pulled into one page using a table and the object tag. If I click on a link anywhere with anyone of the search pages I can go to that link.
How can I go to that systems home page by clicking in an area without a link? For instance I can click on anything at Google.com and even insert my cursor into the search area, but I would like to click it so it is the only page on the screen too.
I don't want to lose the functionality of being able to click on links when multiple webpages are up..
<table style="width:100%">
<tr>
<td style="height:800px">
<object data='http://google.com' width='100%' height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://bing.com' width=100% height='100%'>
<pr>Browser won't retrieve the forecast</pr>
</object>
</td>
</tr>
<tr>
<td style="height:800px">
<object data='http://lycos.com' width=100% height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://ask.com' width=100% height='100%'>
</object>
</td>
</tr>
</table>
Why is it needed to use object tag? You can store your url in a data attribute by using simply a div and you can add a simple click eventhandler to it. When you click on it just get the stored url from the data and give it to the window.location.

How to make whole table row clickable?

I have searched this site for a better solution on this but it seems that I can't find the right one.
I want to make my whole table row clickable in case of PC and also same thing should happen when user touches anywhere inside the row in case of tablet.
So far I have the following code and I would prefer a Html or JavaScript solution or anything along those lines.
<tr onclick="window.document.location='';">
<td><img src="/chemsolver/images/help.jpeg" alt="" width="36" height="36" id="Synthesis2" style="background-color: #996633" align="right" /></td>
<td> Help With Table </td>
</tr>
Set display: block on the anchor tag. And then set your height on the anchor.
http://jsfiddle.net/u2qLC/
Alternatively use an onclick event on the tr and have cursor: pointer set on the tr. Instead of using anchor tag.

Highlight image on tab change

I need your help. I need to highlight image just by dotted line on tab change means through tab when i will reach on that image it should be highlight.
I have code like:
<td><img src="../images/sign-in-btn.jpg" alt="" width="78" height="25" /></td>
it is a image which is solving the purpose of button. When use tab it is not highlighting this image. So i need help for this.
Waiting for early response.
Thanks in Advance:
Tanu
You can achieve this with jQuery, put this line when you reach the img tab
jQuery("#imgId").animate( { backgroundColor: '#65A6D1' }, 500).animate( { backgroundColor: 'white' }, 1000);
If you just want your image to behave like a standard button when focused, showing the same dotted border, you just need to set the .tabIndex property on it:
<td>
<a href="javascript:doSubmit();">
<img src="../images/sign-in-btn.jpg" tabindex="0" alt="" width="78" height="25" />
</a></td>
OK, I found another way. Instead of an img element, try using an input element which type is "image":<td>
<a href="javascript:doSubmit();">
<input type="image" src="../images/sign-in-btn.jpg" alt="" width="78" height="25" />
</a></td>
These input elements normally behave like buttons when clicked or focused.

Categories

Resources