My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?
Related
I have a Spring Boot REST application, in which one of the REST API sends mail to the respective users.
I have designed a mailer template in Html and my rest API has data in an array which I am binding to an Html table using and tags.
How can I bind an array of data to Html table using Spring Boot REST application and not by Spring MVC
1. HTML code
<tr>
<td style="padding: 20px 18px 0; color: #888686; font-size: 15px; font-family: 'Open Sans';">
<table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
DATE</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
AVAILABILITY</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK END TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK END TIME</th>
</tr>
<c:forEach var="oldList" items="${scheduleDetailsOld}">
<tr>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.day}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.availability}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workEndTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakEndTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
2.email sender method
public void shiftUpdatedMailForEditor(Staff staff) {
new Thread(() -> {
try {
Map<String, String> values = new HashMap<>();
values.put("getName", staff.getName());
values.put("getSubject", "Work schedule details have been modified.");
mailerService.sendStaffShiftUpdatedForEditorEmail(values, staff.getEmail());
} catch (PaperTrueException e) {
e.printStackTrace();
}
}).start();
}
3. get HTML temlate service
protected void sendStaffShiftUpdatedForEditorEmail(Map<String, String> valuesMap, String receiverEmail)
throws PaperTrueJavaException {
// concerned Editor (receiverEmail)
System.out.println("Inside sendStaffShiftUpdatedForEditorEmail");
mailer.sendMail("xyz#gmail.com", "xyz#gmail.com", valuesMap.get("getSubject"),
formatHtml(getHTMLBody(HtmlTemplateURL), valuesMap));
}
4. here is my controller
#PostMapping("/update-schedule-details")
public ResponseEntity<StatusResponse> updateScheduleDetails(#Valid #RequestBody addScheduleDetailsBody body,
Model model) {
StatusResponse statusResponse = new StatusResponse();
try {
util.isStaffLoggedIn(request, response, List.of(StaffRole.EDITOR, StaffRole.HR_MANAGER));
Iterator<AddScheduleDetails> iterator = body.getScheduleDetails().iterator();
ArrayList<ScheduleDetails> scheduleDetailsNew = new ArrayList<ScheduleDetails>();
ArrayList<ScheduleDetails> scheduleDetailsEarlier = new ArrayList<ScheduleDetails>();
while (iterator.hasNext()) {
AddScheduleDetails addScheduleDetails = (AddScheduleDetails) iterator.next();
if (scheduleDetailsService.getShift(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId())) {
addScheduleDetails(addScheduleDetails);
} else {
scheduleDetailsEarlier = updateScheduleDetails(addScheduleDetails, scheduleDetailsEarlier);
}
ScheduleDetails scheduleDetails = scheduleDetailsService.get(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId());
scheduleDetailsNew.add(scheduleDetails);
}
model.addAttribute("scheduleDetailsOld", scheduleDetailsEarlier);
model.addAttribute("scheduleDetailsNew", scheduleDetailsNew);
emailSender.shiftUpdatedMailForEditor(util.getLoggedInStaff(request));
statusResponse.setStatus(new Status("Editor Schedule Details Updated Successfully"));
} catch (PaperTrueException e) {
util.logException(e, LogType.GET_JOBS);
statusResponse.setStatus(new Status(e.getCode(), e.getMessage()));
}
return ResponseEntity.ok(statusResponse);
}
If you use some standard library like Datatables, it will be much easier. See this,
https://datatables.net/reference/option/ajax.data
This way, you can just send json data from your REST API in response
I am trying to generate pdf from HTML having CSS.
Below is the code snippet
Document document = new Document();
PdfWriter pdfWriter = PdfWriter.getInstance(document, new FileOutputStream(outFileName));
document.open();
String htmlTxt = FileUtils.readFileToString(new File(dirPath + inpFileName), "UTF-8");
ByteArrayInputStream fis = new ByteArrayInputStream(htmlTxt.getBytes("UTF-8"));
XMLWorkerHelper worker = XMLWorkerHelper.getInstance();
// worker.parseXHtml(pdfWriter, document, fis);
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName),
new FileInputStream(CSS));
// close the document
document.close();
// close the writer
pdfWriter.close();
I tried generating pdf using
worker.parseXHtml(pdfWriter, document, fis);
PDF gets generated without
which worked fine then used
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName), new FileInputStream(CSS));
In this case pdf gets generated but without any content .
I also tried how to use CSS resolver as suggested in iText Parse HTML with CSS Example
IMPORTANT Note -- The HTML has been generated from jTidy API.
Here is the HTML and CSS file
#pdfPreview { font-family: arial }
#pdfPreview .page_1 {position:relative; overflow: hidden;padding: 0px;border: none;width: 90%;margin:0 auto;}
#pdfPreview .page_1 .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 100%;overflow: hidden;}
#pdfPreview .page_1 .id_2 {border:none;margin: 107px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview .page_1 #dimg1 {position:absolute;top:181px;left:0px;z-index:-1;width:736px;height:677px;}
#pdfPreview .page_1 #dimg1 #img1 {width:736px;height:677px;}
#pdfPreview .page_1 #inl_img1 {position:relative;width:7px;height:17px;}
#pdfPreview #page_2 {position:relative; overflow: hidden;margin: 41px 0px 37px 40px;padding: 0px;border: none;width: 776px;}
#pdfPreview #page_2 #pdfPreview .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 776px;overflow: hidden;}
#pdfPreview #page_2 .id_2 {border:none;margin: 28px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview #page_2 #dimg1 {position:absolute;top:7px;left:0px;z-index:-1;width:741px;height:935px;}
#pdfPreview #page_2 #dimg1 #img1 {width:741px;height:935px;}
#pdfPreview .vehicleDescriptionTable{
border: black 1px solid;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(1){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(2){
width: 57%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(3){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(4){
width: 37%;
}
#pdfPreview td{
vertical-align: top;
}
#pdfPreview tr{
/* line-height: 0em; */
}
#pdfPreview html {
font: 13px 'Arial';
}
#pdfPreview p.sectionHead {
text-align: center;
font: 16px 'Arial' bold;
background-color: #ccc;
height: 2em;
padding-top: .5em;
margin-bottom: 0;
border-top: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
/* width: 774px; */
}
#pdfPreview p.subSectionHead {
font-size: 14px;
font-weight: bold;
background-color: #eee;
margin-top: 0;
height: 1.5em;
padding-left: 2%;
padding-top: .2em;
margin-bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
/* border-bottom: none; */
/* border-right: black 1px solid; */
/* width: 100%; */
}
#pdfPreview table {
/* border: 1px solid black; */
border-bottom: 4em;
width: 100%;
}
#pdfPreview td:nth-child(3) {
border-left: black 1px solid;
}
#pdfPreview tbody {
border-bottom: black 1px solid;
/* padding-bottom: 1em; */
}
#pdfPreview p {
margin-top: 0;
margin-bottom: .2em;
}
#pdfPreview .floatright{
float: right;
text-align: right;
}
#pdfPreview .floatleft{
float:left;
text-align: left;
}
#pdfPreview .topmargin{
margin-top:.4em;
}
/*Melissa Page2*/
#pdfPreview #page2, #vehicleListTable, #table3 {
width: 90%;
margin: 0 auto;
border-spacing: 0px;
}
#pdfPreview #page2 thead {
background-color: #eee;
}
#pdfPreview #page2 thead th:first-child {
padding-bottom: 2rem;
text-align: left;
}
#page2 thead th:nth-child(2) {
padding-bottom: 2rem;
text-align: right;
}
#pdfPreview #page2 tbody .simple td {
font-weight: bold;
}
#pdfPreview #page2 tbody .simple td p {
font-weight: normal;
}
#pdfPreview #page2 tbody .header {
width: 15%;
padding: .3rem;
background-color: #eee;
font-weight: bold;
}
#pdfPreview #page2 tbody .subheader {
width: 10%;
padding: .3rem;
}
#pdfPreview #page2 tbody .subtableheader {
text-align: center;
}
#pdfPreview #page2 tbody .fillout {
padding: .3rem;
text-align: center;
color: #E6E6E6;
}
#pdfPreview #page2 tbody .filledout {
padding: .3rem;
text-align: center;
color: black;
}
#page2 tbody .bottomrow {
padding-bottom: 6rem;
text-align: left;
}
#pdfPreview .border-top {
border: 1px solid black;
}
#pdfPreview .border-top-left{
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-left {
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-fix{
border-bottom: 1px solid black;
}
#pdfPreview .border-middle {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-left {
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-right {
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .footer1{
margin-bottom:4em;
}
#pdfPreview td.topmargin{
width:50%;
}
#pdfPreview .footerClass{
width:90%;
margin:0 auto;
padding-bottom:4em;
}
#pdfPreview .mainBodyHeadArea{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
}
#pdfPreview .submissionCellLeft{
width:50%;
padding:1em;
}
#pdfPreview .submissionCellRight{
width: 50%;
padding:1em;
border-left: 1px solid black;
}
#pdfPreview td.addressCity {
width: 40%;
}
#pdfPreview td.addressZip {
width: 20%;
}
#pdfPreview td.addressState {
width: 20%;
}
#pdfPreview td.addressCountry {
width: 20%;
border-left:none;
}
#pdfPreview table{
border-spacing: 0;
}
#pdfPreview .addressRow{
padding: 0;
}
#pdfPreview #vehicleListTable th, #pdfPreview #vehicleListTable td {
padding:.5em;
font-weight: bold;
}
#pdfPreview .filloutHeight{
height:1em;
}
#pdfPreview .borderLeft{
border-left:1px solid black;
}
#pdfPreview .fillAddressCity,.fillAddressState,.fillAddressCountry,.fillAddressZip{
margin-left: 3em;
}
#pdfPreview .center{
text-align: center;
}
#pdfPreview #vehicleListTable, #pdfPreview #table3 {
width:90%;
margin:0 auto;
}
#pdfPreview td {
padding:.5em;
}
#pdfPreview {
width: 800px;
}
#pdfPreview p, td{
font-size:12px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml-stylesheet href="foo.css" media="all" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" />
<meta charset="UTF-8" />
<title>PDF HTML Title</title>
<link rel="Stylesheet" type="text/css" href="previewStylesPDF.css" />
</head>
<body>
<div id="pdfPreview">
<table id="page2">
<thead>
<tr>
<th colspan="2" class="border-top-left">Table Title</th>
<th colspan="6" class="border-top">Author Name</th>
</tr>
</thead>
<tbody>
<tr class="simple">
<td colspan="8" class="border-middle-left">Single or Multiple
Vehicle Registration for a Single Customer</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p>Instructions for members only: Scan and upload this
completed and <b><ins style="font-weight: bold">signed</ins> form
to the mail-id myName#Company.com</b></p>
</td>
</tr>
<tr>
<td class="header border-middle-left">Dealer</td>
<td class="subheader border-middle-fix">Dealer Name</td>
<td colspan="4" class="border-middle fillDealerName filledout">
Mercedez</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="border-middle fillDealerPhone filledout">
(###)###-####</td>
</tr>
<tr>
<td class="subheader border-middle-left">Name Dealer Code</td>
<td class="border-middle-fix fillDealerCode filledout">BorderLand</td>
<td class="subheader border-middle">Dealer Contact Name</td>
<td colspan="3" class="border-middle fillDealerContact filledout">
</td>
<td class="subheader border-middle">Email</td>
<td class="border-middle fillDealerEmail filledout"></td>
</tr>
</tbody>
</table>
<table id="vehicleListTable">
<thead>
<tr>
<th class="header border-middle-left">Serial Number</th>
<th colspan="4" class="subtableheader border-middle-fix">COL TITLE #1</th>
<th colspan="2" class="subtableheader border-middle borderLeft">COL TITLE #2</th>
<th colspan="2" class="subtableheader border-middle">COL TITLE #3</th>
</tr>
</thead>
<tbody>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
</tbody>
</table>
<table id="table3">
<tbody>
<tr>
<td class="header border-middle-left">Customer</td>
<td class="subheader border-middle-fix">Name</td>
<td colspan="3" class="border-middle fillCustomerName filledout">
Atlantis City</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="fillout border-middle">Phone</td>
</tr>
<tr>
<td class="subheader border-middle-left" colspan="2">Authorized
Representative Name</td>
<td class="fillout border-middle" colspan="6">Name</td>
</tr>
<tr>
<td class="subheader border-middle-left">Email</td>
<td class="fillout border-middle" colspan="7">Email</td>
</tr>
<tr>
<td class="subheader border-middle-left">Address</td>
<td class="border-middle filladdress1 filledout" colspan="7">Street Address</td>
</tr>
<tr>
<td colspan="8" class="addressRow">
<table>
<tbody>
<tr>
<td class="subheader border-middle-left addressCity">City <span
class="fillAddressCity filledout">ATLANTIS</span></td>
<td class="subheader border-middle addressState">State/Province
<span class="fillAddressState filledout">EE</span></td>
<td class="subheader border-middle addressCountry">Country</td>
<td class="subheader border-middle addressZip">Zip/Postal Code
<span class="fillAddressZip filledout">99999</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="subheader border-middle-left">The above
vehicles will be used for the following vocation / applications
only:</td>
<td class="fillout border-middle" colspan="4">Vocation</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p><b>Customer Certification:</b> All information to go here.</p>
</td>
</tr>
<tr>
<td colspan="4" class="subheader bottomrow bottom-left">Customer
Authorized customer representative signature (REQUIRED)</td>
<td colspan="4" class="subheader bottomrow bottom-right">Date</td>
</tr>
</tbody>
</table>
<div class="footerClass">
<div class="floatleft topmargin">
<p class="">PDF (Rev: 4/2/2014)</p>
</div>
<div class="floatright topmargin">
<p class="">Page 2 of 2</p>
</div>
</div>
</div>
</body>
</html>
Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?
In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}
The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.
I have an
IFrameElement fie;
for which I need to apply the css style:
p{
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
But I just find a way to GET the style and not SET it
Style s = fie.getContentDocument().getBody().getStyle();
How can I apply the css for this IFrameElement?
Try this:
fie.getContentDocument().getBody().setId("myframe");
and in the css file:
p, .myframe p {
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this:
#navmenu {
width: 1000px;
height: 42px;
margin: 0px auto 30px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
font-size: 21px;
background-color: #000000
}
#navmenu li {
display: inline;
}
#navmenu a {
color: #eee;
display: inline;
line-height: 2em;
padding: 0.375em 0.5em;
text-decoration: none;
}
#navmenu a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
color: #000000;
background-color: #ffff33;
padding: 0.375em 0.5em;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. Random or not I don't care. I created a js file that is wired correctly.
I have tried several bits of code I found, but nothing works. Now I tried to do this to see if I can change the color at all:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. I am new to all this programming and I would greatly appreciate any help. It would be super nice if you could answer for dummies, so that I can understand.
Use:
$("#navmenu").hover(function(){
You missed the ID # selector.
You need to properly address the div using # for an ID or a . for a class:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});
You could give something like this a try as it will pick a random color on hover and switch back to the #EEE background on the hover out event:
jQuery:
$(function () {
$("#navmenu a").hover(function () {
var newColor = Math.floor(Math.random() * 16777215).toString(16);
$(this).css('background-color', '#' + newColor);
}, function () {
$(this).css('background-color', '#EEE')
});
});
Working Example: http://jsfiddle.net/Qc4R7/