I'm trying to do a hover effect on an: <a href... class.
I have 2 <a href, one is a standard link and the other one has to be a button.
.btnMail:hover
#btn:hover
This works on GMAIL, but not on Outlook Web. The only way I got the :hover effect to work on outlook was doing just an a:hover but this affects all <a tags.
MimeMessage mimeMessage = mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, false, "utf-8");
String htmlMsg = ""
+ "<style type=\"text/css\">" +
" .btnMail {\r\n" +
" background-color: #007bff;\r\n" +
" cursor: pointer;\r\n" +
" border: none;\r\n" +
" border-radius: 4px;\r\n" +
" text-decoration: none;\r\n" +
" text-decoration-color: white !important;" +
" color: white !important;\r\n" +
" padding: 15px 32px;\r\n" +
" text-align: center;\r\n" +
" display: inline-block;\r\n" +
" font-size: 18px;\r\n" +
" }\r\n" +
" .btnMail:hover{\r\n" +
" background-color: #0069d9 !important;\r\n" +
" }\r\n"
+ "</style>"
+ "<div style=\"width:100%;height:100%;\">"
+ "<div style=\"margin-left:auto;margin-right:auto;width:550px;\">"
+ "<h3>" + messages.getMessage("mail.reset", null, locale) + "</h3>"
+ "<div>" + messages.getMessage("mail.hello", null, locale) + " " + restoreUser.getUsername() + ", <br><br>"
+ messages.getMessage("mail.body", null, locale) + "</div><br>"
+ "<a id=\"btn\" class=\"btnMail\" style=\"cursor: pointer;\" href=\"" + tokenLink +"\">"
+ messages.getMessage("mail.button", null, locale) + "</a><br>"
+ "<div>" + messages.getMessage("mail.validtime", null, locale) + "<br><br>"
+ messages.getMessage("mail.thanks", null, locale) + "<br>"
+ messages.getMessage("header.companyname", null, locale) +"</div>"
+ "<br>"
+ "<hr/>"
+ "<div style=\"font-size:12px;\">" + messages.getMessage("mail.link", null, locale) +"<br>"
+ "" + tokenLink +"</div>"
+ "</div>"
+ "</div>"
+ "";
mimeMessage.setContent(htmlMsg, "text/html");
https://gyazo.com/e8f3a7105b66e6da61ed957e2437cc4d
There are many css elements that do not perform well in email clients.
Hover is one if the elements without a broad support.
This element along with support information for other ones can be found here, amongst other resources.
As for your html in your example. Keep in mind that many spam filters are looking for poor html syntax as a sign of spammy content. You should consider adding html, head and body tags to your message.
Related
I'm developing an app with Tradingview widget on Android 6.0 (Marshmallow)
I am running the tradingview code in WebView but it is not showing the chart.
This is my TradingView Widget code;
WebView webView = findViewById(R.id.webviewer);
String symbol = getIntent().getStringExtra("symbol");
String interval = getIntent().getStringExtra("interval");
String data = "<!-- TradingView Widget BEGIN -->\n" +
"<div class=\"tradingview-widget-container\">\n" +
" <div id=\"tradingview_357eb\"></div>\n" +
" <div class=\"tradingview-widget-copyright\"><span class=\"blue-text\">"+symbol+" Chart</span></div>\n" +
" <script type=\"text/javascript\" src=\"https://s3.tradingview.com/tv.js\"></script>\n" +
" <script type=\"text/javascript\">\n" +
" new TradingView.widget(\n" +
" {\n" +
" \"width\": 300,\n" +
" \"height\": 200,\n" +
" \"symbol\": \"BINANCE:"+symbol+"\",\n" +
" \"interval\": \""+interval+"\",\n" +
" \"timezone\": \"Europe/Istanbul\",\n" +
" \"theme\": \"light\",\n" +
" \"style\": \"1\",\n" +
" \"locale\": \"en\",\n" +
" \"toolbar_bg\": \"#f1f3f6\",\n" +
" \"enable_publishing\": false,\n" +
" \"hide_side_toolbar\": false,\n" +
" \"save_image\": false,\n" +
" \"studies\": [\n" +
" \"BB#tv-basicstudies\",\n" +
" \"RSI#tv-basicstudies\",\n" +
" \"StochasticRSI#tv-basicstudies\"\n" +
" ],\n" +
" \"container_id\": \"tradingview_357eb\"\n" +
"}\n" +
" );\n" +
" </script>\n" +
"</div>\n" +
"<!-- TradingView Widget END -->";
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(data, "text/html", "utf-8");
I tried it on Android 8.0 and it works but not on 6.0. Why? Am I missing something?
I created an app that uses Leaflet in it.
In the screen where the map is, there is also a progressBar where I allow uses to search in a specific radius.
The moment they change the value in the progressBar, it changes the size of the circle marker inside the map.
I had like that my map will change its zoom to fit that circle in it.
My code for loading the map is:
String Map_HTML = "<html>\n" +
"<head>\n" +
"\n" +
" <title>Quick Start - Leaflet</title>\n" +
"\n" +
" <meta charset=\"utf-8\" />\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
"\n" +
" <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"docs/images/favicon.ico\" />\n" +
"\n" +
" <link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet#1.4.0/dist/leaflet.css\" integrity=\"sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\" crossorigin=\"\"/>\n" +
" <script src=\"https://unpkg.com/leaflet#1.4.0/dist/leaflet.js\" integrity=\"sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\" crossorigin=\"\"></script>\n" +
"\n" +
"\n" +
"\n" +
"<style>\n" +
"body {\n" +
"padding: 0;\n" +
"margin: 0;\n" +
"}\n" +
"html, body, #map {\n" +
"height: 100%;\n" +
"width: 100%;\n" +
"}\n" +
"</style>\n" +
"</head>\n" +
"<body>\n" +
"\n" +
"\n" +
"\n" +
"<div id=\"mapid\" style=\"width: " + dpWidth + "px; height: " + dpHeight * 0.3 + "px;\"></div>\n" +
"<script>\n" +
"\n" +
"var mymap = L.map('mapid',{zoomControl: false}).setView([" + Lat + ", " + Lon + "], 10);\n" +
"\n" +
" L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n" +
" minZoom: 7,\n" +
" maxZoom: 17,\n" +
" attribution: '© OpenStreetMap contributors' \n" +
" }).addTo(mymap);\n" +
"\n" +
"mymap.attributionControl.setPosition('topleft')\n" +
"L.control.zoom({\n" +
"position: 'bottomright'\n" +
"}).addTo(mymap);\n" +
"L.marker([" + Lat + ", " + Lon + "]).addTo(mymap)\n" +
" .bindPopup(\"<b>My Location</b>\").openPopup();\n" +
"\n" +
"L.circle([" + Lat + ", " + Lon + "], " + Radius + ", {\n" +
" color: 'red',\n" +
" fillColor: '#8275FE',\n" +
" fillOpacity: 0.4,\n" +
" weight: '0'\n" +
"}).addTo(mymap);\n" +
"\n" +
"\n" +
"var popup = L.popup();\n" +
"\n" +
"</script>\n" +
"\n" +
"</body>\n" +
"</html>";
where Radius is a parameter I insert based on the value of the progressBar.
Right now it always initializes the map with zoom: 10 because I don't know how to change it dynamically as I want.
Any way to do so?
Thank you
the map can fit to the bounds of the circle with mymap.fitBounds(circle.getBounds());.
Change your code to:
"var circle = L.circle([" + Lat + ", " + Lon + "], " + Radius + ", {\n" +
" color: 'red',\n" +
" fillColor: '#8275FE',\n" +
" fillOpacity: 0.4,\n" +
" weight: '0'\n" +
"}).addTo(mymap);\n" +
"mymap.fitBounds(circle.getBounds());\n" +
I developed an android application and need to put split data rows inside HTML table to send it to the printer
but I can't handle how to put the for loop to get all rows.
I searched many times but maybe I couldn't describe my problem because of my native language, not English.
private void doWebViewPrint() {
// Create a WebView object specifically for printing
WebView webView = new WebView(this);
final Cursor c = mDatabase.rawQuery("SELECT * FROM " +
Contract.Entry.TABLE_NAME + "", null);
int count = c.getCount();
for (int i = 1; i <= count; i++) {
enter code here
c.moveToPosition(i);
}
String name =
c.getString(c.getColumnIndex(Contract.Entry.COLUMN_NAME));
String amount =
c.getString(c.getColumnIndex(Contract.Entry.COLUMN_AMOUNT));
String dose =
c.getString(c.getColumnIndex(Contract.Entry.COLUMN_DOSE));
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
#RequiresApi(api = Build.VERSION_CODES.KITKAT)
#Override
public void onPageFinished(WebView view, String url) {
Log.i(patintNametv.getText().toString(), "page finished loading " + url);
createWebPrintJob(view);
mWebView = null;
}
});
// Generate an HTML document on the fly:
String htmlDocument =
"<html><body><!-- Required meta tags -->\n" +
"<p> </p>\n" +
"<div>\n" +
"<div class=\"head\" style=\"direction: rtl; text-
align: center; width: 70%;\">\n" +
"<h5 style=\"padding: -20px;\">Doctor</h5>\n" +
"<h4>soso al asoli</h4>\n" +
"<h5>example</h5>\n" +
"<h5> example</h5>\n" +
"<ul style=\"list-style-type: circle;\">\n" +
"<li>الاسم</li>\n" +
"<li>العمر</li>\n" +
"<li>التاريخ\n" +
"<table>\n" +
"<tbody>\n" +
"<tr>\n" +
"<td>الاسم</td>\n" +
"<td>الكمية</td>\n" +
"<td>الجرعة;</td>\n" +
"</tr>\n" +
//here i want the for loop make the table for all rows
"<tr>\n" +
"<td>" + name + "</td>\n" +
"<td>" + amount + "</td>\n" +
"<td>" + dose + "</td>\n" +
"</tr>\n"+
"</tbody>\n" +
"</table>\n" +
"</li>\n" +
"</ul>\n" +
"</div>\n" +
"<div> </div>\n" +
"<div>\n" +
"<div>phone:0780801245</div>\n" +
"<div>location:location</div>\n" +
"<div>some note here</div>\n" +
"</div>\n" +
"</div></body></html>";
webView.loadDataWithBaseURL(null, htmlDocument, "text/HTML", "UTF-8", null);
mWebView = webView;
}
any help is appreciated
you may put a link or any git-hub project do the same concept
Thanks in advance.
for using for loop in html tag, create one method and add each row in <tr><td> str 1 .....</td></tr> and return where you want.
See Example ..
fun returnPaymentValue(data: BidInvoiceRsponse): String {
var str11 : String = ""
for(i in 0 until data.data.buyerpayments.size) {
var strn = "<tr><td class=\"no\">" + (i+1).toString() + "</td><td class=\"desc\">" + data.data.buyerpayments.get(i).name + "</td><td class=\"unit\">" + roundToDecimals(data.data.buyerpayments.get(i).amount, 1) + "</td>"
if (TextUtils.isEmpty(data.data.buyerpayments.get(i).paymentMode)) {
strn += "</td><td class=\"desc\">" + "-" + "</td>"
} else {
strn += "</td><td class=\"desc\">" + data.data.buyerpayments.get(i).paymentMode + "</td>"
}
if (TextUtils.isEmpty(data.data.buyerpayments.get(i).paymentDate)) {
strn += "</td><td class=\"desc\">" + "-" + "</td>"
} else {
strn += "</td><td class=\"desc\">" + dateconvert(data.data.buyerpayments.get(i).paymentDate) + "</td>"
}
strn += "</tr>"
str11 += strn
println("****** ggg "+ strn)
}
println("****** kk "+ str11)
return str11!!
}
---------------------- where i want ----------------
.html("<!DOCTYPE`enter code here` html>\n" +
"<html lang=\"en\">\n" +
" <head>\n" +
" <meta charset=\"utf-8\">\n" +
" <title>Farmx Invoice</title>\n" +
:
:
:
:// . Calling method in html tag
<tbody>\n" +
returnPaymentValue(data)+""+
" </tbody>\n" +
:
:
:
:
:
:
" \n" +
" </body>\n" +
"</html>"
I am trying to implement a view only HTML pane for some specific project. I am using JTextPane to render HTML using content type as "text/html". I was having tables in my input HTML so in order to give these tables border, i thought of using css styling, but unfortunately it did not work out.
If I put border property as part of table itself then it works but not
with css styling.
Here is the sample code i created to recreate issue. content1 does not creates border for my table but content2 creates it. I want to use content1 approach as i have plenty of html files with tables. Thanks for your time, any help will be much appreciated.
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextPane;
public class TestTextPane {
private static int X = 200;
private static int Y = 200;
private static int W = 600;
private static int H = 400;
public static final String content1 = "<html>\r\n" +
" <head>\r\n" +
" <style type=\"text/css\">\r\n" +
" <!--\r\n" +
" table,th, td { border: 1px solid black }\r\n" +
" body, p { font-family: Courier; font-size: 14 }\r\n" +
" -->\r\n" +
" </style>\r\n" +
" \r\n" +
" </head>\r\n" +
" <body>\r\n" +
" <div align=\"left\">\r\n" +
" <b>Q: What is the difference between GET and POST method? </b>\r\n" +
" </div>\r\n" +
" <p>\r\n" +
" A:\r\n" +
" </p>\r\n" +
" <table>\r\n" +
" <tr>\r\n" +
" <th width=\"50%\">\r\n" +
" GET\r\n" +
" </th>\r\n" +
" <th>\r\n" +
" POST\r\n" +
" </th>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" GET is a safe method (idempotent)\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" POST is non-idempotent method\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" We can send limited data with GET method and it’s sent in the header \r\n" +
" request URL\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" we can send large amount of data with POST because it’s part of the \r\n" +
" body.\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" </table>\r\n" +
" <br>\r\n" +
" <br>\r\n" +
" \r\n" +
" </body>\r\n" +
"</html>";
public static final String content2 = "<html>\r\n" +
" <head>\r\n" +
" <style type=\"text/css\">\r\n" +
" <!--\r\n" +
" body, p { font-family: Courier; font-size: 14 }\r\n" +
" -->\r\n" +
" </style>\r\n" +
" \r\n" +
" </head>\r\n" +
" <body>\r\n" +
" <div align=\"left\">\r\n" +
" <b>Q: What is the difference between GET and POST method? </b>\r\n" +
" </div>\r\n" +
" <p>\r\n" +
" A:\r\n" +
" </p>\r\n" +
" <table border=1>\r\n" +
" <tr>\r\n" +
" <th width=\"50%\">\r\n" +
" GET\r\n" +
" </th>\r\n" +
" <th>\r\n" +
" POST\r\n" +
" </th>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" GET is a safe method (idempotent)\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" POST is non-idempotent method\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" We can send limited data with GET method and it’s sent in the header \r\n" +
" request URL\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" we can send large amount of data with POST because it’s part of the \r\n" +
" body.\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" </table>\r\n" +
" <br>\r\n" +
" <br>\r\n" +
" \r\n" +
" </body>\r\n" +
"</html>";
/**
* #param args
*/
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setBounds(X, Y, W, H);
JTextPane pane = new JTextPane();
pane.setContentType("text/html");
pane.setEditable(false);
JScrollPane scrollPane = new JScrollPane(pane);
scrollPane.setBounds(X,Y,W,H);
frame.getContentPane().add(scrollPane);
pane.setText(content2); // change content here
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}
I removed the comment notation from the style and added units for the size of the font.
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextPane;
public class TestTextPane {
private static int X = 200;
private static int Y = 200;
private static int W = 600;
private static int H = 400;
public static final String content1 = "<html>\r\n" +
" <head>\r\n" +
" <style type=\"text/css\">\r\n" +
" table, th, td { border: 2px solid #FF0000; }\r\n" +
// be sure to add a unit to the font size, otherwise it is invalid
" body, p { font-family: Courier; font-size: 14px; }\r\n" +
" </style>\r\n" +
" \r\n" +
" </head>\r\n" +
" <body>\r\n" +
" <div align=\"left\">\r\n" +
" <b>Q: What is the difference between GET and POST method? </b>\r\n" +
" </div>\r\n" +
" <p>\r\n" +
" A:\r\n" +
" </p>\r\n" +
" <table>\r\n" +
" <tr>\r\n" +
" <th width=\"50%\">\r\n" +
" GET\r\n" +
" </th>\r\n" +
" <th>\r\n" +
" POST\r\n" +
" </th>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" GET is a safe method (idempotent)\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" POST is non-idempotent method\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" <tr>\r\n" +
" <td>\r\n" +
" We can send limited data with GET method and it’s sent in the header \r\n" +
" request URL\r\n" +
" </td>\r\n" +
" <td>\r\n" +
" we can send large amount of data with POST because it’s part of the \r\n" +
" body.\r\n" +
" </td>\r\n" +
" </tr>\r\n" +
" </table>\r\n" +
" <br>\r\n" +
" <br>\r\n" +
" \r\n" +
" </body>\r\n" +
"</html>";
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setBounds(X, Y, W, H);
JTextPane pane = new JTextPane();
pane.setContentType("text/html");
pane.setEditable(false);
JScrollPane scrollPane = new JScrollPane(pane);
scrollPane.setBounds(X,Y,W,H);
frame.getContentPane().add(scrollPane);
pane.setText(content1); // change content here
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}
This is what I tried for content1 and its working fine.
I added this line
body table { border: 1px solid red }
sample code:
public static final String content1 = "<html>\r\n"
+ " <head>\r\n"
+ " <style type=\"text/css\">\r\n"
+ " <!--\r\n"
+ " table, th, td { border: 1px solid black }\r\n"
+ " body table { border: 1px solid red }\r\n"
+ " body, p { font-family: Courier; font-size: 14; }\r\n"
+ " -->\r\n"
+ " </style>\r\n"
I tried all the above solutions but unfortunately any of these did not work for me. I was searching for the solution and i got into this post
And i tried table, th, td { border-width: 1px solid black } voila it worked for me. I dont know why the plain border property did not work for me but it worked for others.
Thanks a lot for all you help Guys.
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+
The column having name 'title' (class name) needs to be affected by style sheet to decrease the width of column. Only that single column needs to be affected. There are more columns.
This is CSS:
td.title{
width:18%;
}
But this CSS affects all the columns in the table. The width of rest columns affected , but some of them has the width different than specified by CSS. I tried inline style sheet, but still it affects all columns.
What is the problem? Cheers
Additional details:
private String getBeginning(int tableNumber)
{
return "<html><head><title>"+ (tableNumber - 1)+"</title>"
+ "</head><body>"
+ "<table id='example' class='tablesorter' cellpadding='3' >" // border='1' cellpadding='1' cellspacing='2'
+ "<thead>"
+ "<tr class='tHead'>"
+ "<th/>"
+ "<th>Title</th>"
+ "<th>Total Price</th>"
+ "<th>Currency</th>"
+ "<th>Condition</th>"
+ "<th>Location</th>"
+ "<th>End Time</th>"
+ "<th>Map</th>"
+ "</tr>"
+ "</thead>"
+ "<tbody>";
}
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("total") +""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("currency")+""
+ "</td>"
+ "<td>"
+ ""+condition+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("location")+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("endTime").split("T")[0]+""
+ "</td>"
+ "<td>"
+ "<a href='" + getMap(location, postCode, "0") + "'>"
+ "<img src='" + getMap(location, postCode, "1") + "'> "
+"</a>"
+ "</td>"
+ "</tr>";
String end ="";
I am running this Web app on Firefox 3.6.11. Did not try to run it on different browsers.
The important thing to note here is that percentage values relate to the amount of space available to the table, not to the page or containing div. Try using an absolute value like 200. It might also complicate things if you already have width set on the table meaning you're not letting the browser decide how wide it will end up.
Without seeing the rest of your code and knowing what context the table is in, or whether you have width set on the table itself, I can tell you that setting a width on a single column when the table itself has a width set on it will change the width of the other columns as they bump about to fill up space. In this situation it is generally a good idea to let the size of the cells sort themselves out, as the algorithm used to set the width is very dynamic. Alternatively you could be very strict and set the width on each column exactly as you will want it to appear.
To read up on the subject, see the HTML specification.