Changing Header Colour on Scroll - java

I am using VS on a Mac. I've just started coding two days ago so I am a noob. I am trying to make a fixed header change colours on scroll although it is not working. I don't think it's a problem with my settings etc as when I ran it online the header didn't change from grey to black either.
function changeRectangle() {
const header = document.getElementById('header');
var scrollValue = window.scrollY;
if (scrollValue < 150) {
header.classList.remove('header.active');
} else {
header.classList.add('header.active');
}
window.addEventListener('scroll', changeRectangle);
}
* {
margin: 0;
padding: 0;
}
.header.active {
background: rgb(0, 0, 0);
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.header {
position: fixed;
height: 100px;
width: 100%;
z-index: 4;
top: 0px;
left: 0px;
padding: 0;
transition: all 1s;
right: 0px;
background-color: gray;
}
.lowerbackground {
height: 1000px;
width: 100%;
background: white;
position: absolute;
top: 5000px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript"></script>
</head>
<body>
<div id="header" class="header"></div>
</body>
<script src="index.js"></script>
<body>
<div class="lowerbackground"></div>
</body>
</html>


You have issues with your JavaScript code (you are using wrong syntax)
header.classList.remove('header.active');
Correct syntax is
header.classList.remove('active');
similarly with .add()
Here is your final JS code
function changeRectangle() {
const header = document.getElementById('header');
var scrollValue = window.scrollY;
if (scrollValue < 150) {
header.classList.remove('active');
} else {
header.classList.add('active');
}
}
window.addEventListener('scroll', changeRectangle);
Hope this helps...


There are some issues
addEventListener inside the event handler
Too many body tags
You change the header.active, you just need to change active
You can toggle the active using the test, that is more elegant
function changeRectangle() {
const header = document.getElementById('header');
var scrollValue = window.scrollY;
header.textContent = scrollValue; // for visual testing
header.classList.toggle('active',scrollValue >= 150);
}
window.addEventListener('scroll', changeRectangle);
* {
margin: 0;
padding: 0;
}
.header.active {
background: #AA0000;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.header {
position: fixed;
height: 100px;
width: 100%;
z-index: 4;
top: 0px;
left: 0px;
padding: 0;
transition: all 1s;
right: 0px;
background-color: gray;
}
.lowerbackground {
height: 1000px;
width: 100%;
background: white;
position: absolute;
top: 5000px;
}
<div id="header" class="header">Header</div>
<div class="lowerbackground">Lower</div>
Suggested HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title is mandatory</title>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="index.js"></script>
</head>
<body>
<div id="header" class="header"></div>
<div class="lowerbackground"></div>
</body>
</html>


Probably these actions will solve your issue.
First of all move window.addEventListener('scroll', changeRectangle); out of function changeRectangle.
Secondly, header.active is not a valid class name when is added to the DOM by JS. Rename it to active and change it in JS and CSS files accordingly.
Lastly, you have to set !important to background to give it high specificity
to overwrite the background in .header class.
HTML tips:
html element is good to have lang attribute.
Here are two body elements, which is not good.
head element should have title element inside.
Final code
function changeRectangle() {
const header = document.getElementById('header');
var scrollValue = window.scrollY;
if (scrollValue < 150) {
header.classList.remove('active');
} else {
header.classList.add('active');
}
}
window.addEventListener('scroll', changeRectangle);
* {
margin: 0;
padding: 0;
}
.active {
background: rgb(0, 0, 0) !important;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.header {
position: fixed;
height: 100px;
width: 100%;
z-index: 4;
top: 0px;
left: 0px;
padding: 0;
transition: all 1s;
right: 0px;
background-color: gray;
}
.lowerbackground {
height: 1000px;
width: 100%;
background: white;
position: absolute;
top: 5000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<script type="text/javascript"></script>
</head>
<body>
<div id="header" class="header"></div>
<div class="lowerbackground"></div>
</body>
<script src="index.js"></script>
</html>

Related

Selenium Webdriver Firefox vs Safari

I posted:
Seleniun Webdriver difference between Firefox/Chrome and Safari a month or so earlier.
I was asked to post tests. I finally got around to setting up a better test case. This is my test webpage.
My test code:
#Test
#Order (2)
void getDataFromFirefox() {
Optional<Path> browserPath = WebDriverManager.firefoxdriver().
getBrowserPath();
WebDriver driver = null;
if (browserPath.isPresent()) {
FirefoxOptions firefoxOptions = new FirefoxOptions();
firefoxOptions.setHeadless(true);
WebDriverManager.firefoxdriver().setup();
driver = new FirefoxDriver(firefoxOptions);
}
driver.get("file:///.../ghinTest-1.html/");
System.out.println(driver.findElement(By.xpath("//*[#id=\"main-content\"]")).getText());
driver.close();
}
#Test
#Order (3)
void getDataFromSafari() {
Optional<Path> browserPath = WebDriverManager.safaridriver().
getBrowserPath();
WebDriver driver = null;
if (browserPath.isPresent()) {
SafariOptions safariOptions = new SafariOptions();
WebDriverManager.safaridriver().setup();
driver = new SafariDriver(safariOptions);
}
driver.get("file:///.../ghinTest-1.html/");
System.out.println(driver.findElement(By.xpath("//*[#id=\"main-content\"]")).getText());
driver.close();
}
I get significantly different results when using Firefox vs Safari:
***** Firefox *****
Michael Erickson
Follow
NCGA TEST CLUB
!
6.6
HANDICAP
INDEX ®
LOW H.I.
2.9
Scores
9-Hole Score waiting to be combined
Score
Date
C.R./Slope
PCC info
Differential
Recent Scores
56 H
01/2022
34.0/120
PCC
info-
20.7
Revision Scores
93 C
12/2021
69.3/124
PCC
info-
21.6
* 78 H
11/2021
72.4/139
PCC
info-
4.6
* 83 C
10/2021
71.1/128
PCC
info-
10.5
91 C
10/2021
70.5/131
PCC
info-
17.7
* 73 E
10/2021
73.8/135
PCC
info-
-1.7
!
93 C
10/2021
69.6/126
PCC
info-
20.0
!
84 C
10/2021
65.1/108
PCC
info-
18.8
!
100 C
09/2021
70.7/128
PCC
info-
24.9
!
85 C
09/2021
70.7/128
PCC
info-
11.6
!
90 H
09/2021
72.4/139
PCC
info-
13.3
!
87 C
09/2021
69.8/129
PCC
info-
14.1
!
92 C
09/2021
69.8/129
PCC
info-
18.4
!
* 84 C
09/2021
69.8/129
PCC
info-
11.4
!
88 C
09/2021
69.8/129
PCC
info-
14.9
!
* 79 H
09/2021
70.1/123
PCC
info-
7.2
!
* 85 H
09/2021
72.4/139
PCC
info-
9.2
!
93 C
09/2021
68.1/118
PCC
info-
22.8
!
94 H
09/2021
70.7/133
PCC
info-
18.8
!
* 85 C
09/2021
71.6/128
PCC
info-
10.8
!
* 79 H
08/2021
71.3/133
PCC
info-
5.5
!
Score Type: H - Home, A - Away, C - Competition, N - Combined 9-Hole Rounds, P - Penalty, E - Exceptional
***** Safari *****
Michael Erickson FollowNCGA Test Club!
.t819258eb-c684-4596-816b-d1c31a7a7c10 {
color: #fff;
background: #222;
border: 1px solid transparent;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-top {
margin-top: -10px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-top::before {
border-top: 8px solid transparent;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-top::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: -6px;
left: 50%;
margin-left: -8px;
border-top-color: #222;
border-top-style: solid;
border-top-width: 6px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-bottom {
margin-top: 10px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-bottom::before {
border-bottom: 8px solid transparent;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-bottom::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -6px;
left: 50%;
margin-left: -8px;
border-bottom-color: #222;
border-bottom-style: solid;
border-bottom-width: 6px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-left {
margin-left: -10px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-left::before {
border-left: 8px solid transparent;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-left::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
right: -6px;
top: 50%;
margin-top: -4px;
border-left-color: #222;
border-left-style: solid;
border-left-width: 6px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-right {
margin-left: 10px;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-right::before {
border-right: 8px solid transparent;
}
.t819258eb-c684-4596-816b-d1c31a7a7c10.place-right::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
left: -6px;
top: 50%;
margin-top: -4px;
border-right-color: #222;
border-right-style: solid;
border-right-width: 6px;
}
6.6HANDICAP INDEX ®LOW H.I.2.9Scores9-Hole Score waiting to be combinedScoreDateC.R./SlopePCC   infoDifferential
.t355f1439-aec2-49f8-b07d-321cb48fbbf4 {
color: #fff;
background: #222;
border: 1px solid transparent;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-top {
margin-top: -10px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-top::before {
border-top: 8px solid transparent;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-top::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: -6px;
left: 50%;
margin-left: -8px;
border-top-color: #222;
border-top-style: solid;
border-top-width: 6px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-bottom {
margin-top: 10px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-bottom::before {
border-bottom: 8px solid transparent;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-bottom::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -6px;
left: 50%;
margin-left: -8px;
border-bottom-color: #222;
border-bottom-style: solid;
border-bottom-width: 6px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-left {
margin-left: -10px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-left::before {
border-left: 8px solid transparent;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-left::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
right: -6px;
top: 50%;
margin-top: -4px;
border-left-color: #222;
border-left-style: solid;
border-left-width: 6px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-right {
margin-left: 10px;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-right::before {
border-right: 8px solid transparent;
}
.t355f1439-aec2-49f8-b07d-321cb48fbbf4.place-right::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
left: -6px;
top: 50%;
margin-top: -4px;
border-right-color: #222;
border-right-style: solid;
border-right-width: 6px;
}
Recent Scores56 H01/202234.0/120PCC   info-20.7Revision Scores93 C12/202169.3/124PCC   info-21.6* 78 H11/202172.4/139PCC   info-4.6* 83 C10/202171.1/128PCC   info-10.591 C10/202170.5/131PCC   info-17.7* 73 E10/202173.8/135PCC   info--1.7!93 C10/202169.6/126PCC   info-20.0!84 C10/202165.1/108PCC   info-18.8!100 C09/202170.7/128PCC   info-24.9!85 C09/202170.7/128PCC   info-11.6!90 H09/202172.4/139PCC   info-13.3!87 C09/202169.8/129PCC   info-14.1!92 C09/202169.8/129PCC   info-18.4!* 84 C09/202169.8/129PCC   info-11.4!88 C09/202169.8/129PCC   info-14.9!* 79 H09/202170.1/123PCC   info-7.2!* 85 H09/202172.4/139PCC   info-9.2!93 C09/202168.1/118PCC   info-22.8!94 H09/202170.7/133PCC   info-18.8!* 85 C09/202171.6/128PCC   info-10.8!* 79 H08/202171.3/133PCC   info-5.5!Score Type: H - Home, A - Away, C - Competition, N - Combined 9-Hole Rounds, P - Penalty, E - Exceptional
My expected result is what I get with Firefox (and Chrome). What am I doing wrong with Safari?
EDIT: Changed test webpage link to my pastebin since ancillary HTML files are not needed, and I can get rid of dropbox link.

Mandelbrot set struggle with JSP

I have to make jsp project painting Mandelbrot set. Now im writing in jsp for the tests. And i have struggle, ive never seen before. Instead of Mandelbrot set, my jsp shows me this:
[1]: https://i.stack.imgur.com/hTdN3.png
A lot of dots, which supposted to be in the square 100x100. And these dots lasts long way down. Where is the problem??? Im sorry for my english, but i only speak a little. Please help me..
I cant use java script!
Examples of my code:
algorithm for drawing..
for (int row = 0; row < 100; row++) {
for (int col = 0; col < 100; col++) {
double c_re = (col - 100/2)*4.0/100;
double c_im = (row - 100/2)*4.0/100;
double x = 0, y = 0;
int iterations = 0;
while (x*x+y*y < 4 && iterations < max) {
double x_new = x*x-y*y+c_re;
y = 2*x*y+c_im;
x = x_new;
iterations++;
}
if(iterations>max)
{
obrazek = Rysuj.narysuj(col, row);
akcja2+= obrazek;
akcja2+=col;
}
}
}
Function in Rysuj.narysuj:
public class Rysuj {
public static String narysuj(int x, int y) {
String obraz = "";
obraz+= "<svg width=\"" + x +"\" height=\"" + y +"\">";
obraz+= "<circle cx=\"" + x +"\" cy=\"" + y +"\" r=\"1\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\" />";
obraz+= "</svg>";
return obraz;
}
}
some html:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Rysowanie kwadratów</title>
<link href="NewSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<jsp:useBean id="item" class="lyszczewska_weronika1.Lyszczewska"
scope="session"></jsp:useBean>
<jsp:setProperty property="x" name="item" />
<jsp:setProperty property="y" name="item" />
<jsp:setProperty property="akcja" name="item" />
<jsp:setProperty property="komunikat" name="item" />
<div class="wybory">
<form action="index1.jsp" method="post">
<p>
X lewego boku <input type="text" name="x"
value=<jsp:getProperty property="x" name="item"/>>
</p>
<p>
Y gornego boku <input type="text" name="y"
value=<jsp:getProperty property="y" name="item"/>>
</p>
<p>
<input type="submit" name="akcja" value="rysuj"> <input
type="submit" name="akcja" value="czysc"> <input
type="submit" name="akcja" value="cofnij"> <input
type="submit" name="akcja" value="powtorz">
</p>
</form>
<jsp:getProperty property="komunikat" name="item" />
</div>
<div style="position: absolute; width: 900;
height: 500px; left: 150px; top: 300px">
<jsp:getProperty property="obrazek" name="item" />
</div>
</body>
</html>

Java - String value is getting break when doing a concat

I am preparing a mail content using HTML (I am using spring mime message for sending mails) with embedded images in it. The HTML is as follow.
<html><body><div><div style='margin-top: 0; margin-bottom: 0;'><font face='Times New Roman' size='3'> </font></div><div style='margin-top: 0; margin-bottom: 0;'><table width='100%' style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='100%'style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='600' align='left'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0;border: 0 none black;'><table width='600' align='left'style='border-collapse:collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width:600px; padding:0; border: 0 none black;'><div align='center' style='text-align:center;'><a href='http://www.e-XXXXbank.com/'target='_blank'> <img src='cid:logo' 'align='top' alt='logo' style='display:inline;'></a></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'<tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560'style='width: 560px; padding: 0; border: 0 none black;'><table width='100%'style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='558'style='width: 558px; background-color: #F0F0F0; padding: 0; border: 1px solid #ECECED;'><span style='background-color: #F0F0F0;'><div align='center' style='text-align: center;'><font face='Arial' size='4' color='#104160'><b>XXXX Portfolio Confirmation</b></font></div></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'><img src='cid:space' align='top'alt='space' style='display: inline;'></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560'style='width: 560px; padding: 0; border: 0 none black;'><table width='550' align='right'style='border-collapse: collapse; width: 550px;'><tbody><tr height='8' style='height: 8px;'><td width='550'style='width: 550px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='550'style='width: 550px; padding: 0; border: 0 none black;'><table width='550' align='left'style='border-collapse: collapse; width: 550px;'><tbody><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 none black;'><font face='Arial' size='4' color='#C21212'><b>Dear Customer</b></font></td></tr><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 none black;'><font face='Arial' size='4' color='#104160'><br>Following your instructions we have created your XXXX. The document attached enable you to view the details of your portfolio. You can save, print and store it for your records.</font><font face='Arial' size='4' color='#104160'><br></font><font face='Arial' size='4' color='#104160'><br>For security reasons, the document is protected with a password that has been sent to your mobile by SMS.</font><font face='Arial' size='4' color='#104160'><br></font><font face='Arial' size='4' color='#104160'><br>Many thanks for trusting us to help you manage your finances.</font></td></tr><tr height='8' style='height: 8px;'><td width='510' style='width: 510px; padding: 0; border: 0 none black;'></td><td width='39' style='width: 39px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 noneblack;'><font face='Arial' size='4' color='#C21212'><b>XXXX YYYYY Customer Service</b></font></td></tr><tr height='8' style='height: 8px;'><td width='510' valign='top'style='width: 510px; padding: 0; border: 0 none black;'><table width='510' align='left'style='border-collapse: collapse; width:510px;'><tbody><tr height='8' style='height: 8px;'><td width='510'style='width: 510px; padding:0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='510'style='width: 510px; padding:0; border: 0 none black;'><font face='Times New Roman' size='2'> </font> <div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Arial' size='2'color='#104160'>Please add </font><a href='mailto:XXXXYYYYY#XXXXbank.com.kw'target='_blank'><font face='Arial'size='2'>XXXXYYYYY#XXXXbank.com.kw</font></a><font face='Arial' size='2'color='#104160'> to your email address book to ensure your statements are not redirected to the junk folder.If there are any questions, please contact directly with your XXXX Bank manager.</font></div></td></tr><tr height='8' style='height: 8px;'><td width='510' style='width: 510px; padding: 0; border: 0 none black;'></td></tr></tbody></table></td><td width='39' style='width: 39px; padding: 0; border: 0 none black;'></td></tr></tbody></table> </td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table> </td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border-width: 0 0 1px 0; border-style: none none solid none; border-color: black;'></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'></td></tr></tbody></table> <br></td></tr><tr height='8' style='height: 8px;'><td style='background-color: #F0F0F0; padding: 0; border: 0 none black;'><span style='background-color: #F0F0F0;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border-width: 1px 0 0 0; border-style: solid none none none; border-color: #E6E6E6;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560' style='width: 560px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='560' style='width: 560px; padding: 0; border: 0 none black;'><table width='500' align='center' style='border-collapse: collapse; width: 500px;'><tbody><tr height='8' style='height: 8px;'><td width='300' style='width: 300px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><font face='Arial' size='2' color='#C21212'>© 2016 XXXX Bank. All rights reserved. </font><font face='Arial' size='2' color='#004080'> </font></div></td><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='https://XXX/XXXX?_rdr' target='_blank'><img src='cid:facebook' alt='facebook' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='http://XXXX.com/XXXX' target='_blank'><img src='cid:twitter' align='top' alt='twitter' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='http://XXXXX.com/XXXX' target='_blank'><img src='cid:Instagram' align='top'alt='Instagram' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='https://www.youtube.com/XXX/YYYY' target='_blank'><img src='cid:youtube' align='top' alt='youtube' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='https://www.linkedin.com/company/XXXX?trk=hb_tab_compy_id_202412' target='_blank'><img src='cid:linkedIn' align='top' alt='linkedIn' style='display:inline;'></a></div></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td width='560'style='width: 560px; padding: 0; border: 0 none black;'></td></tr></tbody></table> </td></tr></tbody></table></span></td</tr></tbody></table></div><div style='margin-top: 0; margin-bottom: 0;'><font face='Times New Roman' size='3'> </font></div><div style='margin-top: 0; margin-bottom: 0;'><img src='cid:tree' alt='http://XXXX/tree-small.jpg' style='display:inline;'><font face='Arial' size='1' color='green'>Please consider theenvironment & Print only if necessary</font></div><hr></div></body></html>
I have prepared the mail content using string and embedded the images using CID
String htmltext1=mailContentStart.concat(mailContentLogo).concat(mailContentHeading).
concat(mailContentSpace).concat(mailContentBody);
String htmltext12=(mailContentImages).concat(mailEnd);
When I contact htmltext 1 and htmltext2 am ending up with the below results
<html><body><div><div style='margin-top: 0; margin-bottom: 0;'><font face='Times New Roman' size='3'> </font></div><div style='margin-top: 0; margin-bottom: 0;'><table width='100%' style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='100%'style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='600' align='left'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0;border: 0 none black;'><table width='600' align='left'style='border-collapse:collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width:600px; padding:0; border: 0 none black;'><div align='center' style='text-align:center;'><a href='http://www.e-XXXXbank.com/'target='_blank'> <img src='cid:logo' 'align='top' alt='logo' style='display:inline;'></a></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'<tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560'style='width: 560px; padding: 0; border: 0 none black;'><table width='100%'style='border-collapse: collapse; width: 100%;'><tbody><tr height='8' style='height: 8px;'><td style='width: 100%; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='558'style='width: 558px; background-color: #F0F0F0; padding: 0; border: 1px solid #ECECED;'><span style='background-color: #F0F0F0;'><div align='center' style='text-align: center;'><font face='Arial' size='4' color='#104160'><b>XXXX Portfolio Confirmation</b></font></div></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'><img src='cid:space' align='top'alt='space' style='display: inline;'></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center'style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600'style='width: 600px; padding: 0; border: 0 none black;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560'style='width: 560px; padding: 0; border: 0 none black;'><table width='550' align='right'style='border-collapse: collapse; width: 550px;'><tbody><tr height='8' style='height: 8px;'><td width='550'style='width: 550px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='550'style='width: 550px; padding: 0; border: 0 none black;'><table width='550' align='left'style='border-collapse: collapse; width: 550px;'><tbody><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 none black;'><font face='Arial' size='4' color='#C21212'><b>Dear Customer</b></font></td></tr><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 none black;'><font face='Arial' size='4' color='#104160'><br>Following your instructions we have created your XXXX. The document attached enable you to view the details of your portfolio. You can save, print and store it for your records.</font><font face='Arial' size='4' color='#104160'><br></font><font face='Arial' size='4' color='#104160'><br>For security reasons, the document is protected with a password that has been sent to your mobile by SMS.</font><font face='Arial' size='4' color='#104160'><br></font><font face='Arial' size='4' color='#104160'><br>Many thanks for trusting us to help you manage your finances.</font></td></tr><tr height='8' style='height: 8px;'><td width='510' style='width: 510px; padding: 0; border: 0 none black;'></td><td width='39' style='width: 39px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td colspan='2' width='550'style='width: 550px; padding: 0; border: 0 noneblack;'><font face='Arial' size='4' color='#C21212'><b>XXXX YYYYY Customer Service</b></font></td></tr><tr height='8' style='height: 8px;'><td width='510' valign='top'style='width: 510px; padding: 0; border: 0 none black;'><table width='510' align='left'style='border-collapse: collapse; width:510px;'><tbody><tr height='8' style='height: 8px;'><td width='510'style='width: 510px; padding:0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='510'style='width: 510px; padding:0; border: 0 none black;'><font face='Times New Roman' size='2'> </font> <div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Times New Roman' size='2'> </font></div><div style='margin-top: 0;margin-bottom: 0;'><font face='Arial' size='2'color='#104160'>Please add </font><a href='mailto:XXXXYYYYY#XXXXbank.com.kw'target='_blank'><font face='Arial'size='2'>XXXXYYYYY#XXXXbank.com.kw</font></a><font face='Arial' size='2'color='#104160'> to your email address book to ensure your statements are not redirected to the junk folder.If there are any questions, please contact directly with your XXXX Bank manager.</font></div></td></tr><tr height='8' style='height: 8px;'><td width='510' style='width: 510px; padding: 0; border: 0 none black;'></td></tr></tbody></table></td><td width='39' style='width: 39px; padding: 0; border: 0 none black;'></td></tr></tbody></table> </td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table> </td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><br><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border-width: 0 0 1px 0; border-style: none none solid none; border-color: black;'></td></tr></tbody></table></td></tr><tr height='8' style='height: 8px;'><td style='padding: 0; border: 0 none black;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border: 0 none black;'></td></tr></tbody></table> <br></td></tr><tr height='8' style='height: 8px;'><td style='background-color: #F0F0F0; padding: 0; border: 0 none black;'><span style='background-color: #F0F0F0;'><table width='600' align='center' style='border-collapse: collapse; width: 600px;'><tbody><tr height='8' style='height: 8px;'><td width='600' style='width: 600px; padding: 0; border-width: 1px 0 0 0; border-style: solid none none none; border-color: #E6E6E6;'><table width='560' align='center'style='border-collapse: collapse; width: 560px;'><tbody><tr height='8' style='height: 8px;'><td width='560' style='width: 560px; padding: 0; border: 0 none black;'></td></tr><tr height='8' style='height: 8px;'><td width='560' style='width: 560px; padding: 0; border: 0 none black;'><table width='500' align='center' style='border-collapse: collapse; width: 500px;'><tbody><tr height='8' style='height: 8px;'><td width='300' style='width: 300px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><font face='Arial' size='2' color='#C21212'>© 2016 XXXX Bank. All rights reserved. </font><font face='Arial' size='2' color='#004080'> </font></div></td><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='https://XXX/XXXX?_rdr' target='_blank'><img src='cid:facebook' alt='facebook' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='http://XXXX.com/XXXX' target='_blank'><img src='cid:twitter' align='top' alt='twitter' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='http://XXXXX.com/XXXX' target='_blank'><img src='cid:Instagram' align='top'alt='Instagram' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='https://www.youtube.com/XXX/YYYY' target='_blank'><img src='cid:youtube' align='top' alt='youtube' style='display:inline;'></a><td width='30' style='width: 30px; padding: 0; border: 0 none black;'><div align='center' style='text-align: center;'><a href='htt.....
Can anyone suggest to resolve the same. Because of this my HTML is not getting rendered properly in MAIL.

I would recommend you using the StringBuilder here instead of the concat.
Or if not that, simple use + operator here instead of concat.
The concat() method only accepts String values while the + operator will silently convert the argument to a String (using the toString() method for objects). So the concat() method is more strict in what it accepts.
To use the StringBuilder you can replace the above two lines in your code with this snippet:
StringBuilder html = new StringBuilder();
html.append(mailContentStart)
.append(mailContentLogo)
.append(mailContentHeading)
.append(mailContentSpace)
.append(mailContentBody)
.append(mailContentImages)
.append(mailEnd);
And you can return the String value of this StringBuilder by doing this:
return html.toString();

Use a StringBuilder and append the content as you create the email, if the funstion takes a String, just pass the StringBuilder with toString()

There is a missing ' in your html:
<table width='600' align='center' style='border-collapse: collapse; width: 600px;>

JavaFX - Border radius <-> Background color

If I add -fx-border-radius and -fx-border-width CSS to a simple GridPane, in its corner the background will not be "cut down".
The CSS:
.payload {
-fx-hgap: 20px;
-fx-padding: 40px;
-fx-background-color: #2969c0;
-fx-border-radius: 50px;
-fx-border-width: 5px;
-fx-border-color: black;
-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 10, 0, 0, 0);
}
The picture about the result:
How do I fix this ?

You need to add the radius property as well to define the background fill. Otherwise it will asume a zero value, as shown in your picture.
You can check the CSS specs here.
You just need to add the -fx-background-radius property:
.payload {
-fx-hgap: 20px;
-fx-padding: 40px;
-fx-background-color: #2969c0;
-fx-background-radius: 50px;
-fx-border-radius: 50px;
-fx-border-width: 5px;
-fx-border-color: black;
-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 10, 0, 0, 0);
}

Screen size layout android

anyone can help? I have a coding which is nearing completion. the problem is when run in nexus 5. The applications that run lag, and the position is not appropriate. please help. need performance fix. i have html,but.... the character here not enough. curenntly i using nexus 5
sorry but i put my full code at mega
https://mega.nz/#!6sBz0ARL!9qpQKW5rr-PQ8Lpedyanyqm7NS1RM-IsQ6lOIEb989s
this is my code
css androidtab7
#charset "utf-8";
/* CSS Document */
#body {
width:100%;
margin:0 auto;
font-family:'MelbourneRegular',Helvetica,sans-serif,Arial;
font-size:12px;
background-color:#186185;
color:#333;
}
#wrapper {
width:1024px;
height:600px;
margin:0 auto;
}
#top{
width:1024px;
height:490px;
margin:0 auto ;
}
#itemlist {
float: left;
margin: 0;
margin-left:5px;
padding:0;
}
#itemlist.box {
background:url("../images/bg.png") repeat scroll left top transparent;
margin: 8px 0px 0 5px;
overflow: hidden;
width: 322px;
height: 476px;
border-radius:6px 0 0 6px;
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
-moz-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
-webkit-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
}
#itemlist.box .top {
overflow: hidden;
text-align: justify;
top: 0;
width: 287px;
}
#containerscroll {
font-size: 13px;
margin: 0 auto;
padding: 0;
width: 100%;
}
#scrollbox {
border: medium none;
margin: 5px 5px 0;
overflow-x: hidden;
overflow-y: auto;
width: auto;
}
#contentscroll {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
margin: 0;
width: 100%;
height: 420px;
overflow: auto;
}
.itemlist {
margin: 0;
padding: 0;
}
.itemlist table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
#amount {
background: none repeat scroll 0 0 #CCCCCC;
font-size: 13px;
font-weight: lighter;
line-height:normal;
letter-spacing:normal;
margin: -1px 5px 0;
padding: 0;
text-align: right;
text-shadow: 0 1px 0 #FFFFFF;
width: auto;
height: 47px;
}
#amount .total {
font-weight:bold;
color:#ddd;
text-shadow: 1px 1px #060;
letter-spacing:0.1em;
background:#390;
height:43px; padding:0 5px 0 0;
margin:0;
border-left:1px solid #fff;
}
#menu{
width:690px;
margin-top:8px;
margin-right:5px;
height:84px;
background:url("../images/bg.png") repeat scroll left top transparent;
float:right;
position:relative;
border-radius:0px 6px 0px 0px;
-moz-border-radius:0px 6px 0px 0px;
-webkit-border-radius:0px 6px 0px 0px;
-moz-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
-webkit-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
}
#text_info{
width:690px;
margin-top:2px;
margin-right:5px;
height:16px;
background:url("../images/bg.png") repeat scroll left top transparent;
float:right;
position:relative;
/*border-radius:0px 6px 6px 0px;
-moz-border-radius:0px 6px 6px 0px;
-webkit-border-radius:0px 6px 6px 0px;
-moz-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
-webkit-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;*/
}
#main_menu{
width:690px;
margin-top:2px;
margin-right:5px;
height:372px;
background:url("../images/bg.png") repeat scroll left top transparent;
float:right;
position:relative;
border-radius:0px 0px 6px 0px;
-moz-border-radius:0px 0px 6px 0px;
-webkit-border-radius:0px 0px 6px 0px;
-moz-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
-webkit-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
}
#bottom{
bottom:0;
width:1014px;
overflow:hidden;
height:100px;
margin:0 5px 5px ;
position:fixed;
background:url("../images/bg-foot.png") repeat scroll left top transparent;
border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
-moz-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
-webkit-box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
box-shadow:inset rgba(172,204,255,0.2) 0 1px 0,#333 0 1px 5px,#333 0 1px 5px;
}
{
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}
it's almost done

Categories