Parsing an email for the first few lines of content? - iphone

I have an email's HTML contained inside an NSString, and want to show the first few lines of text as a preview. I've tried numerous different things to try and get the meaningful content out of that, but can't seem to find a solution that works. I notice that iOS does this well, on the views which show a list of your messages and on the lock screen.
I was wondering if there was a way to parse an email for it's content, like this?
Alright, for a simple test email I sent to myself, with no intentional html formatting:
<div style="padding-bottom: 20px;"><div style="background-color:#eee"> <div><b>From:</b> Andrew <my#emailaddress.com></div> <div><b>To:</b> Andrew <My#emailaddress.com></div> <div><b>Subject:</b> This is an email</div> <div><b>Date:</b> 14 June 2013 16:44:00 BST</div> </div></div><div><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 (experimental) for Mac OS X https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<div dir="ltr">Hey Andrew,
<div><br /></div>
<div>I haven't seen you in so long. Anyway, i wanted to ask you
about something.</div>
<div><br /></div>
<div style="">It's really important.</div>
</div>
</body>
</html>
</div>
On Mail app, Apple shows a preview of:
Hey Andrew, I haven't seen you in so long. Anyway, I wanted to ask you
about somet...
Then from a subscription email:
<div style="padding-bottom: 20px;"><div style="background-color:#eee"> <div><b>From:</b> Sidebar <hello#sidebar.io></div> <div><b>To:</b> Me#emailaddress.com</div> <div><b>Subject:</b> Front-End Design Conf, iOS 7, Secret Handshake, NSA Slides, Award-Winning Work</div> <div><b>Date:</b> 14 June 2013 08:59:30 BST</div> </div></div><div><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 (experimental) for Mac OS X https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title>Front-End Design Conf, iOS 7, Secret Handshake, NSA Slides,
Award-Winning Work</title>
<style type="text/css">
/*<![CDATA[*/
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
margin:0;
padding:0;
}
//Loads of css stuff here
/*]]>*/
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"
offset="0" style="margin: 0;padding: 0;background-color: #F4F4F4;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%"
width="100%" id="bodyTable" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;background-color: #F4F4F4;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<!-- // BEGIN PREHEADER -->
<table border="0" cellpadding="10" cellspacing="0" width="100%" id=
"templatePreheader" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #f36c3d;border-bottom: 0;">
<tr>
<td align="center" valign="top" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<table border="0" cellpadding="0" cellspacing="0" width="600"
style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" class="preheaderContent" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #FFFFFF;font-family: Helvetica;font-size: 10px;line-height: 125%;text-align: left;">
The 5 best design links every day, curated by a selection of great
editors.</td>
<!--
-->
<td valign="top" width="220" class="preheaderContent" style=
"padding-left: 20px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #FFFFFF;font-family: Helvetica;font-size: 10px;line-height: 125%;text-align: left;">
Email not displaying correctly?<br />
<a href=
"http://us2.campaign-archive2.com/?u=b5af47765edbd2fc173dbf27a&id=c214e283a3&e=4fa588f2fc"
target="_blank" style=
"color: #FFFFFF;font-weight: normal;text-decoration: underline;">View
it in your browser</a>.</td>
<!--
--></tr>
</table>
</td>
</tr>
</table>
<!-- END PREHEADER \\ -->
<!-- // BEGIN TEMPLATE SECTIONS -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td align="center" valign="top" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<!-- // BEGIN HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td align="center" valign="top" id="templateHeader" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600"
class="templateContainer" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td class="headerContent" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 20px;font-weight: bold;line-height: 100%;padding-top: 20px;padding-right: 0;padding-bottom: 20px;padding-left: 0;text-align: left;vertical-align: middle;">
<br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=9b41202aa5&e=4fa588f2fc"
target="_self" style=
"text-decoration: none;color: #26ABE2;font-weight: normal;"><span style="color:#f36c3d; font-size:48px;">
Sidebar</span></a><br />
<br />
<h2 style=
"margin-bottom: 0px;padding: 0px;border: 0px;font: inherit;font-size: 18px;vertical-align: baseline;font-weight: 500;line-height: 1;color: rgb(170, 170, 170);font-family: chaparral-pro, Georgia, serif;display: block;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-left: 0;text-align: left;">
The 5 best design links, every day.</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END HEADER \\ --></td>
</tr>
<tr>
<td align="center" valign="top" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<!-- // BEGIN BODY -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td align="center" valign="top" id="templateBody" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #ffffff;border-top: 0;border-bottom: 0;padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="600"
class="templateContainer" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" class="bodyContent" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 13px;line-height: 150%;text-align: left;">
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=675cf30f66&e=4fa588f2fc"
class="post-title" target="_blank" style=
"color: #333333;font-weight: normal;text-decoration: none;"><span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">
Help Us Record the Front-End Design Conf Videos</span></a>
<a style="margin-top: -5px;vertical-align: middle;border-radius: 3px;background: #eee;font-size: 10px;text-transform: uppercase;font-weight: regular;color: #aaa;padding: 1px 5px;display: inline-block;text-decoration: none;"
href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=9750bb83aa&e=4fa588f2fc">
Sponsored</a><br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=eb029eb24a&e=4fa588f2fc"
style=
"color: #a9a9a9;font-weight: normal;text-decoration: none;">www.indiegogo.com</a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=76bc52b512&e=4fa588f2fc"
style=
"color: #333333;font-weight: normal;text-decoration: none;"><img src="http://twitter.com/api/users/profile_image/dandenney"
height="20px" width="20px" style=
"vertical-align: middle;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
</a> Added by <a style=
"font-weight: bold;color: #f36c3d;text-decoration: none;" href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=a28f0f360a&e=4fa588f2fc">
#dandenney</a> <span style="color:#a9a9a9">|</span> <a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=9f046689f0&e=4fa588f2fc"
style="color: #a9a9a9;font-weight: bold;text-decoration: none;"
target="_blank"><img src=
"http://sidebar.io/img/twitter-icon-grey.png" style=
"height: 12px;width: 12px;border: 0;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
Tweet</a><br />
<br />
<br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=cc1961954d&e=4fa588f2fc"
class="post-title" target="_blank" style=
"color: #333333;font-weight: normal;text-decoration: none;"><span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">
iOS 7</span></a><br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=d7d7251559&e=4fa588f2fc"
style=
"color: #a9a9a9;font-weight: normal;text-decoration: none;">mattgemmell.com</a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=0c03fe4e92&e=4fa588f2fc"
style=
"color: #333333;font-weight: normal;text-decoration: none;"><img src="http://twitter.com/api/users/profile_image/leemunroe"
height="20px" width="20px" style=
"vertical-align: middle;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
</a> Added by <a style=
"font-weight: bold;color: #f36c3d;text-decoration: none;" href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=7bebad29c7&e=4fa588f2fc">
#leemunroe</a> <span style="color:#a9a9a9">|</span> <a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=d6f24f0007&e=4fa588f2fc"
style="color: #a9a9a9;font-weight: bold;text-decoration: none;"
target="_blank"><img src=
"http://sidebar.io/img/twitter-icon-grey.png" style=
"height: 12px;width: 12px;border: 0;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
Tweet</a><br />
<br />
<br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=69dbcd64c1&e=4fa588f2fc"
class="post-title" target="_blank" style=
"color: #333333;font-weight: normal;text-decoration: none;"><span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">
The Secret Handshake</span></a><br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=50506839ec&e=4fa588f2fc"
style=
"color: #a9a9a9;font-weight: normal;text-decoration: none;">learnthesecrethandshake.com</a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=cc0b484a05&e=4fa588f2fc"
style=
"color: #333333;font-weight: normal;text-decoration: none;"><img src="http://twitter.com/api/users/profile_image/SachaGreif"
height="20px" width="20px" style=
"vertical-align: middle;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
</a> Added by <a style=
"font-weight: bold;color: #f36c3d;text-decoration: none;" href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=ce4cb421c7&e=4fa588f2fc">
#SachaGreif</a> <span style="color:#a9a9a9">|</span> <a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=62fcb6bfdf&e=4fa588f2fc"
style="color: #a9a9a9;font-weight: bold;text-decoration: none;"
target="_blank"><img src=
"http://sidebar.io/img/twitter-icon-grey.png" style=
"height: 12px;width: 12px;border: 0;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
Tweet</a><br />
<br />
<br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=aa3c1c59f3&e=4fa588f2fc"
class="post-title" target="_blank" style=
"color: #333333;font-weight: normal;text-decoration: none;"><span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">
Dear NSA, let me take care of your slides.</span></a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=cc73a11a9f&e=4fa588f2fc"
style=
"color: #a9a9a9;font-weight: normal;text-decoration: none;">slideshare.net</a><br />
<a href=
"http://sidebar.us2.list-manage2.com/track/click?u=b5af47765edbd2fc173dbf27a&id=ff1a04a456&e=4fa588f2fc"
style=
"color: #333333;font-weight: normal;text-decoration: none;"><img src="http://twitter.com/api/users/profile_image/StarBurst1977"
height="20px" width="20px" style=
"vertical-align: middle;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
</a> Added by <a style=
"font-weight: bold;color: #f36c3d;text-decoration: none;" href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=e9a5a5d7c6&e=4fa588f2fc">
#StarBurst1977</a> <span style="color:#a9a9a9">|</span> <a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=d399b19267&e=4fa588f2fc"
style="color: #a9a9a9;font-weight: bold;text-decoration: none;"
target="_blank"><img src=
"http://sidebar.io/img/twitter-icon-grey.png" style=
"height: 12px;width: 12px;border: 0;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
Tweet</a><br />
<br />
<br />
<a href=
"http://sidebar.us2.list-manage1.com/track/click?u=b5af47765edbd2fc173dbf27a&id=daeecc8e56&e=4fa588f2fc"
class="post-title" target="_blank" style=
"color: #333333;font-weight: normal;text-decoration: none;"><span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">
How award-winning work can make or break you</span></a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=576c592751&e=4fa588f2fc"
style=
"color: #a9a9a9;font-weight: normal;text-decoration: none;">blog.f-i.com</a><br />
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=8ee8c5f303&e=4fa588f2fc"
style=
"color: #333333;font-weight: normal;text-decoration: none;"><img src="http://twitter.com/api/users/profile_image/allfordesign"
height="20px" width="20px" style=
"vertical-align: middle;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
</a> Added by <a style=
"font-weight: bold;color: #f36c3d;text-decoration: none;" href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=f2c7ff1a5f&e=4fa588f2fc">
#allfordesign</a> <span style="color:#a9a9a9">|</span> <a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=b2af1fdd83&e=4fa588f2fc"
style="color: #a9a9a9;font-weight: bold;text-decoration: none;"
target="_blank"><img src=
"http://sidebar.io/img/twitter-icon-grey.png" style=
"height: 12px;width: 12px;border: 0;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 600px;" />
Tweet</a><br />
<br />
<br /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BODY \\ --></td>
</tr>
<tr>
<td align="center" valign="top" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<!-- // BEGIN FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td align="center" valign="top" id="templateFooter" style=
"padding-bottom: 40px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-top: 0;padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="600"
class="templateContainer" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td colspan="3" valign="top" class="footerContent" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #808080;font-family: Helvetica;font-size: 10px;line-height: 150%;text-align: left;">
<a href=
"http://sidebar.us2.list-manage.com/track/click?u=b5af47765edbd2fc173dbf27a&id=e281d1415a&e=4fa588f2fc"
style=
"color: #606060;font-weight: normal;text-decoration: underline;">Follow
on Twitter</a> <a href=
"http://us2.forward-to-friend.com/forward?u=b5af47765edbd2fc173dbf27a&id=c214e283a3&e=4fa588f2fc"
style=
"color: #606060;font-weight: normal;text-decoration: underline;">Forward
to Friend</a> <a href=
"http://us2.campaign-archive2.com/?u=b5af47765edbd2fc173dbf27a&id=c214e283a3&e=4fa588f2fc"
target="_blank" style=
"color: #606060;font-weight: normal;text-decoration: underline;">View
in Browser</a></td>
</tr>
<tr>
<td valign="top" class="footerContent" style=
"padding-top: 20px;padding-bottom: 20px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #808080;font-family: Helvetica;font-size: 10px;line-height: 150%;text-align: left;">
<em>Copyright © 2013 Sacha Greif, All rights reserved.</em><br />
You're receiving this because you signed up on
http://sidebar.io<br />
<br />
<strong>Our mailing address is:</strong><br />
<div class="vcard"><span class="org fn">Sacha Greif</span>
<div class="adr">
<div class="street-address">---</div>
<span class="locality">Paris</span> <span class=
"postal-code">-</span>
<div class="country-name">France</div>
<br />
<a href=
"http://sidebar.us2.list-manage2.com/vcard?u=b5af47765edbd2fc173dbf27a&id=9abeab36bb"
class="hcard-download">Add us to your address book</a></div>
<br />
<br /></div>
</td>
</tr>
<tr>
<td colspan="3" valign="top" class="footerContent" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #808080;font-family: Helvetica;font-size: 10px;line-height: 150%;text-align: left;">
<a href=
"http://sidebar.us2.list-manage.com/unsubscribe?u=b5af47765edbd2fc173dbf27a&id=9abeab36bb&e=4fa588f2fc&c=c214e283a3"
style=
"color: #606060;font-weight: normal;text-decoration: underline;">unsubscribe
from this list</a> <a href=
"http://sidebar.us2.list-manage.com/profile?u=b5af47765edbd2fc173dbf27a&id=9abeab36bb&e=4fa588f2fc"
style=
"color: #606060;font-weight: normal;text-decoration: underline;">update
subscription preferences</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END FOOTER \\ --></td>
</tr>
</table>
<!-- END TEMPLATE SECTIONS \\ --></td>
</tr>
</table>
</center>
<img src=
"http://sidebar.us2.list-manage.com/track/open.php?u=b5af47765edbd2fc173dbf27a&id=c214e283a3&e=4fa588f2fc"
height="1" width="1" />
</body>
</html>
</div>
And again, Apple gives the preview of:
The 5 best design links every day, curated by a selection of great
editors.
I've been trying to use HTMLParser to parse it, but each email is different, so this isn't easily achievable.

Related

Protractor. DragAndDrop doesn't work

DragAndDrop doesn't work for me. I try to move item of list and it moves a little bit, but still at the same place.
When I move element a new item of list is creates, look at the image.
Have you any ideas?
Here is my code:
var dragElement = element(by.id("i3"));
var dropElement = element(by.id("i1"));
browser.actions().dragAndDrop(dragElement, dropElement).perform();
And here is my page:
<ol ui-tree-nodes="" ng-model="$ctrl.items" class="list-group canSorting ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes ng-not-empty">
<!-- ngRepeat: item in $ctrl.items --><li collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i0" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 1
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i1" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 2
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i2" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел c пройденным тестом
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i3" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 3
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items -->
</ol>
screenshot
can you try the below code and check whether it works,
browser.actions().mouseMove(dragElement).mouseDown().mouseMove(dropElement).mouseUp().perform();

How to get rid of warnings such as "attrs cannot be resolved as a member of cc"?

How can I get rid of warnings for tags having "cc.attrs.onCompleteJS", "cc.attrs.updateAjax" and "cc.attrs.imageValue"? Each warning has same explanation as "attrs cannot be resolved as a member of cc". I use JSF 2.x as a framework and Eclipse as an editor.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<composite:interface>
<composite:attribute name="imageValue"></composite:attribute>
<composite:attribute name="updateAjax"></composite:attribute>
<composite:attribute name="onCompleteJS"></composite:attribute>
</composite:interface>
<composite:implementation>
<h:outputStylesheet library="css" name="regionTreeComponent.css"></h:outputStylesheet>
<table style="width: 100%" cellspacing="0" cellpadding="5">
<tr>
<td style="width: 100%">
<p:autoComplete forceSelection="true" id="sTxtRegionName" value="#{regionTreeBean.sRegionName}"
completeMethod="#{regionTreeBean.completeRegionName}" styleClass="sTxtRegionName" />
</td>
<td>
<p:commandButton styleClass="rSearchButton" id="iconOnly" icon="ui-icon-search" actionListener="#{regionTreeBean.searchSelectNode}"
oncomplete="#{cc.attrs.onCompleteJS}" update=":mainForm:treeComponent:regionTree #{cc.attrs.updateAjax}"/>
</td>
</tr>
</table>
<hr style="width: 100%;"></hr>
<div style="text-align: center;">
<h:graphicImage styleClass="headerImage" library="images" name="#{cc.attrs.imageValue}"></h:graphicImage>
<p:outputLabel styleClass="headerLabel" value="#{msgs['treeComponent.regions']}"></p:outputLabel>
</div>
<p:tree value="#{regionTreeBean.rootNode}" var="node"
animate="true" selection="#{regionTreeBean.selectedNode}"
selectionMode="single" styleClass="tree" id="regionTree">
<p:ajax event="select" listener="#{regionTreeBean.onNodeSelect}" update="#{cc.attrs.updateAjax}" oncomplete="#{cc.attrs.onCompleteJS}" />
<p:treeNode styleClass="slTreeNode" icon="region">
<h:outputText value="#{node.REGION_NAME}"/>
</p:treeNode>
</p:tree>
</composite:implementation>
</html>

Jenkins Email template not working

I am trying to customize jenkins email template by adding jelly script. The script is working fine , but i am not getting the colour balls in mail, the balls are greyed out.
Below is the script. Can anyone please assist what changes needs to be done to the script so that colour balls will appear in jenkins emails.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
<STYLE>
BODY, TABLE, TD, TH, P {
font-family:Verdana,Helvetica,sans serif;
font-size:11px;
color:black;
}
h1 { color:black; }
h2 { color:black; }
h3 { color:black; }
TD.bg1 { color:white; background-color:#0000C0; font-size:120% }
TD.bg2 { color:white; background-color:#4040FF; font-size:110% }
TD.bg3 { color:white; background-color:#8080FF; }
TD.test_passed { color:blue; }
TD.test_failed { color:red; }
TD.console { font-family:Courier New; }
</STYLE>
<BODY>
<j:set var="spc" value="&nbsp;&nbsp;" />
<!-- GENERAL INFO -->
<TABLE>
<TR><TD align="right">
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<IMG SRC="${rooturl}static/e59dfe28/images/32x32/blue.gif" />
</j:when>
<j:when test="${build.result=='FAILURE'}">
<IMG SRC="${rooturl}static/e59dfe28/images/32x32/red.gif" />
</j:when>
<j:otherwise>
<IMG SRC="${rooturl}static/e59dfe28/images/32x32/yellow.gif" />
</j:otherwise>
</j:choose>
</TD><TD valign="center"><B style="font-size: 200%;">BUILD ${build.result}</B></TD></TR>
<TR><TD>Build URL</TD><TD>${rooturl}${build.url}</TD></TR>
<TR><TD>Project:</TD><TD>${project.name}</TD></TR>
<TR><TD>Date of build:</TD><TD>${it.timestampString}</TD></TR>
<TR><TD>Build duration:</TD><TD>${build.durationString}</TD></TR>
</TABLE>
<BR/>
<!-- CHANGE SET -->
<j:set var="changeSet" value="${build.changeSet}" />
<j:if test="${changeSet!=null}">
<j:set var="hadChanges" value="false" />
<TABLE width="100%">
<TR><TD class="bg1" colspan="2"><B>CHANGES</B></TD></TR>
<j:forEach var="cs" items="${changeSet}" varStatus="loop">
<j:set var="hadChanges" value="true" />
<j:set var="aUser" value="${cs.hudsonUser}"/>
<TR>
<TD colspan="2" class="bg2">${spc}Revision <B>${cs.commitId?:cs.revision?:cs.changeNumber}</B> by
<B>${aUser!=null?aUser.displayName:cs.author.displayName}: </B>
<B>(${cs.msgAnnotated})</B>
</TD>
</TR>
<j:forEach var="p" items="${cs.affectedFiles}">
<TR>
<TD width="10%">${spc}${p.editType.name}</TD>
<TD>${p.path}</TD>
</TR>
</j:forEach>
</j:forEach>
<j:if test="${!hadChanges}">
<TR><TD colspan="2">No Changes</TD></TR>
</j:if>
</TABLE>
<BR/>
</j:if>
<!-- ARTIFACTS -->
<j:set var="artifacts" value="${build.artifacts}" />
<j:if test="${artifacts!=null and artifacts.size()>0}">
<TABLE width="100%">
<TR><TD class="bg1"><B>BUILD ARTIFACTS</B></TD></TR>
<TR>
<TD>
<j:forEach var="f" items="${artifacts}">
<li>
${f}
</li>
</j:forEach>
</TD>
</TR>
</TABLE>
<BR/>
</j:if>
<!-- MAVEN ARTIFACTS -->
<j:set var="mbuilds" value="${build.moduleBuilds}" />
<j:if test="${mbuilds!=null}">
<TABLE width="100%">
<TR><TD class="bg1"><B>BUILD ARTIFACTS</B></TD></TR>
<j:forEach var="m" items="${mbuilds}">
<TR><TD class="bg2"><B>${m.key.displayName}</B></TD></TR>
<j:forEach var="mvnbld" items="${m.value}">
<j:set var="artifacts" value="${mvnbld.artifacts}" />
<j:if test="${artifacts!=null and artifacts.size()>0}">
<TR>
<TD>
<j:forEach var="f" items="${artifacts}">
<li>
${f}
</li>
</j:forEach>
</TD>
</TR>
</j:if>
</j:forEach>
</j:forEach>
</TABLE>
<BR/>
</j:if>
<!-- JUnit TEMPLATE -->
<j:set var="junitResultList" value="${it.JUnitTestResult}" />
<j:if test="${junitResultList.isEmpty()!=true}">
<TABLE width="100%">
<TR><TD class="bg1" colspan="2"><B>JUnit Tests</B></TD></TR>
<j:forEach var="junitResult" items="${it.JUnitTestResult}">
<j:forEach var="packageResult" items="${junitResult.getChildren()}">
<TR><TD class="bg2" colspan="2"> Name: ${packageResult.getName()} Failed: ${packageResult.getFailCount()} test(s), Passed: ${packageResult.getPassCount()} test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)</TD></TR>
<j:forEach var="failed_test" items="${packageResult.getFailedTests()}">
<TR bgcolor="white"><TD class="test_failed" colspan="2"><B><li>Failed: ${failed_test.getFullName()} </li></B></TD></TR>
</j:forEach>
</j:forEach>
</j:forEach>
</TABLE>
<BR/>
</j:if>
<!-- COBERTURA TEMPLATE -->
<j:set var="coberturaAction" value="${it.coberturaAction}" />
<j:if test="${coberturaAction!=null}">
<j:set var="coberturaResult" value="${coberturaAction.result}" />
<j:if test="${coberturaResult!=null}">
<table width="100%"><TD class="bg1" colspan="2"><B>Cobertura Report</B></TD></table>
<table width="100%"><TD class="bg2" colspan="2"><B>Project Coverage Summary</B></TD></table>
<table border="1px" class="pane">
<tr>
<td>Name</td>
<j:forEach var="metric" items="${coberturaResult.metrics}">
<td>${metric.name}</td>
</j:forEach>
</tr>
<tr>
<td>${coberturaResult.name}</td>
<j:forEach var="metric" items="${coberturaResult.metrics}">
<td data="${coberturaResult.getCoverage(metric).percentageFloat}">${coberturaResult.getCoverage(metric).percentage}%
(${coberturaResult.getCoverage(metric)})
</td>
</j:forEach>
</tr>
</table>
<j:if test="${coberturaResult.sourceCodeLevel}">
<h2>Source</h2>
<j:choose>
<j:when test="${coberturaResult.sourceFileAvailable}">
<div style="overflow-x:scroll;">
<table class="source">
<thead>
<tr>
<th colspan="3">${coberturaResult.relativeSourcePath}</th>
</tr>
</thead>
${coberturaResult.sourceFileContent}
</table>
</div>
</j:when>
<j:otherwise>
<p>
<i>Source code is unavailable</i>
</p>
</j:otherwise>
</j:choose>
</j:if>
<j:forEach var="element" items="${coberturaResult.childElements}">
<j:set var="childMetrics" value="${coberturaResult.getChildMetrics(element)}"/>
<table width="100%"><TD class="bg2" colspan="2">Coverage Breakdown by ${element.displayName}</TD></table>
<table border="1px" class="pane sortable">
<tr>
<td>Name</td>
<j:forEach var="metric" items="${childMetrics}">
<td>${metric.name}</td>
</j:forEach>
</tr>
<j:forEach var="c" items="${coberturaResult.children}">
<j:set var="child" value="${coberturaResult.getChild(c)}"/>
<tr>
<td>
${child.xmlTransform(child.name)}
</td>
<j:forEach var="metric" items="${childMetrics}">
<j:set var="childResult" value="${child.getCoverage(metric)}"/>
<j:choose>
<j:when test="${childResult!=null}">
<td data="${childResult.percentageFloat}">${childResult.percentage}%
(${childResult})
</td>
</j:when>
<j:otherwise>
<td data="101">N/A</td>
</j:otherwise>
</j:choose>
</j:forEach>
</tr>
</j:forEach>
</table>
</j:forEach>
</j:if>
<BR/>
</j:if>
<!-- CONSOLE OUTPUT -->
<j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result"/>
<j:if test="${build.result==resultFailure}">
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR><TD class="bg1"><B>CONSOLE OUTPUT</B></TD></TR>
<j:forEach var="line" items="${build.getLog(100)}"><TR><TD class="console">${line}</TD></TR></j:forEach>
</TABLE>
<BR/>
</j:if>
</BODY>
</j:jelly>
change the img src to a website address..something like :
img src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/war/src/main/webapp/images/32x32/green.gif"

Email Cross browser and cross client bugs

I'm creating an email template for a client. There are so many small bugs.
I can't get the side images to line up without having space between them and the tables width won't match up.
Check out the cross client previews here:
[removed]
and here is my code:
<table width="600" bgcolor="000000" style="padding-left: 14xpx;">
<tr>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 5px 0 0 0;margin-bottom: 0;">
<ul style="padding:0;">
<li style="list-style: none;">
<span><img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span><singleline /></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
</ul>
</td>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 10px 0 0 0; position: relative; left: -5px;">
<span>
<a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;">
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" /></a>
</span>
</td>
<td align="left">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
</table>
<table width="605" bgcolor="000000" style="margin-top: -20px;">
<tr>
<td align="left"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
</table>
<table width="606" bgcolor="000000" style="">
<tr>
<td align="left"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
There are so many problems in what you posted it's hard to tell exactly what it is you were trying to do.
The following is meant to be harsh:
First off, get everything laid out in the right spot before you start randomly adding negative positioning styles; there was no reason for that. Second, you might want to pick up a book on html and css before you take on another client. You have quite a bit to learn. Pay attention to text layout, image alignment and cell positioning.
The following gets rid of most of the garbage.
<table width="600" bgcolor="000000" style="padding-left: 14px;">
<tr>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;" /><br />
<img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/><br />
<img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/>
</td>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<span>
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" style="border:0px;" />
</span>
</td>
<td align="left" valign="top">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
99% of the time there are spaces between images, it is because people forget display:block; on the image tags. In this case though, you are floating your images, which is the rare case where display block is not needed. I wouldn't recommend this technique in html email however, unless there is a lot of spare room, as different clients have slightly different spacing between images.
Put each of your images in their own table cell, and it should fix the problems:
<td width="">
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
If you still have issues, repost your code and I'll take another look at that point.

overlapping of panels (ascx) in IE7

I have the problem of panel overlapping in IE7 whereas the same code works in IE8.
Has anyone faced this kind of problem?
In the code below, i have a link button, on clicking this, the products frame would be displayed. But this overlaps with the "client products" :
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ClientSummary.ascx.cs" Inherits="ClientSummary" %>
<%# Register Src="~/Controls/ClientSession/CounselorMenuFrame.ascx" TagName="CounselorMenuFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ProductsFrame.ascx" TagName="ProductsFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ProductDetailFrame.ascx" TagName="ProductDetailFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ClientDetailFrame.ascx" TagName="ClientDetailFrame" TagPrefix="UCC" %>
<asp:Panel ID="pnlClntSummary" runat="server" EnableViewState="true" >
<asp:Panel ID="pnlClientDetailFrame" runat="server" Style="width: 950px;" >
<UCC:ClientDetailFrame id="clientDetailFrame" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlProductDetailFrame" runat="server" Style="width: 950px;" >
<UCC:ProductDetailFrame id="productDetailFrame" runat="server"/>
</asp:Panel>
<div id="slider" style="width:950px;">
asp:Panel ID="pnlProductsFrame" runat="server" Style="width: 950px;" >
<table style="width:900px;" >
<tr><td></td><td>
<asp:LinkButton Text="Client Information" ID="clientDetail" Font-Underline="true"
Font-Bold="true" Font-Names="Calibri" Font-Size="Medium" runat="server"
onclick="clientDetail_Click"/>
</td>
</tr>
<tr>
<td valign="top" style="float:left" align="left">
<div style="float:left;vertical-align:top;">
<div id="content" class="contentMenu">
<UCC:ProductsFrame id="productsFrame" runat="server" />
</div>
</div>
</td>
<td valign="top" style="width:900px;" align="left">
<div id="header1" style="float:left;position:relative;width:45px;">
<table border="0">
<tr>
<td valign="top" style="width:30px;"
onclick="verticalprocessClick(document.getElementById('header1'))">
<div style="padding: 2px; cursor: pointer; vertical-align: top;">
<div style="float: left; vertical-align: bottom;">
<table>
<tr onclick="ImageChangePFrame(imgPF)">
<td class="VerticalLine">
</td>
<td>
<img id="imgPF" src="../Images/icon_expand.png" alt="(Show Details...)"
onload="ProductFrameHide(this)"/>
<div id="divClientProducts" runat="server"
style="float:left;font-family:Calibri;top:1%;left:25%;position:relative;font-size:13px;
color:Gray;text-align:center;">
C<br />
L<br />
I<br />
E<br />
N<br />
T<br />
<br />
P<br />
R<br />
O<br />
D<br />
U<br />
C<br />
T<br />
S<br />
</div>
</td>
<td class="VerticalLine">
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="divTransactionDesktop" style="float:left;width:600px; height:100px;" >
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:PlaceHolder ID="MainFrameHolder" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:HiddenField ID="hdnRowValue" runat ="server" Value="0" />
</div>
</td>
</tr>
</table>
</asp:Panel>
</div>
<asp:HiddenField ID="hdnLastFocus" runat="server" />
<asp:HiddenField ID="hdnKeyMapping" runat="server" />
</asp:Panel>
I found a solution for overlapping of panels in IE7. It was the height attribute which made a difference. Removing the height attribute or mentioning the exact value in pixels, solves this problem.