I have a html for email and i would like to send it using PHP. But saving it in a variable it gives me a lot of errors.
How can I save so mutch html and css in php variable, is there any way?
Here is the code, it is not complete:
<?php
$corpo='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- NAME: 1 COLUMN - BANDED -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
body,#bodyTable,#bodyCell{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
table{
border-collapse:collapse;
}
img,a img{
border:0;
outline:none;
text-decoration:none;
}
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
p{
margin:1em 0;
padding:0;
}
a{
word-wrap:break-word;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
table,td{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
#outlook a{
padding:0;
}
img{
-ms-interpolation-mode:bicubic;
}
body,table,td,p,a,li,blockquote{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
#bodyCell{
padding:0;
}
.mcnImage{
vertical-align:bottom;
}
.mcnTextContent img{
height:auto !important;
}
/*
#tab Page
#section background style
#tip Set the background color and top border for your email. You may want to choose colors that match your companys branding.
*/
body,#bodyTable{
/*#editable*/background-color:#F2F2F2;
}
h3{
/*#editable*/color:#606060 !important;
display:block;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:18px;
/*#editable*/font-style:normal;
/*#editable*/font-weight:bold;
/*#editable*/line-height:125%;
/*#editable*/letter-spacing:-.5px;
margin:0;
/*#editable*/text-align:left;
}
/*
#tab Page
#section heading 4
#tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
#style heading 4
*/
h4{
/*#editable*/color:#808080 !important;
display:block;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:16px;
/*#editable*/font-style:normal;
/*#editable*/font-weight:bold;
/*#editable*/line-height:125%;
/*#editable*/letter-spacing:normal;
margin:0;
/*#editable*/text-align:left;
}
/*
#tab Preheader
#section preheader style
#tip Set the background color and borders for your emails preheader area.
*/
#templatePreheader{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Preheader
#section preheader text
#tip Set the styling for your emails preheader text. Choose a size and color that is easy to read.
*/
.preheaderContainer .mcnTextContent,.preheaderContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:11px;
/*#editable*/line-height:125%;
/*#editable*/text-align:left;
}
/*
#tab Preheader
#section preheader link
#tip Set the styling for your emails header links. Choose a color that helps them stand out from your text.
*/
.preheaderContainer .mcnTextContent a{
/*#editable*/color:#606060;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Header
#section header style
#tip Set the background color and borders for your emails header area.
*/
#templateHeader{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Header
#section header text
#tip Set the styling for your emails header text. Choose a size and color that is easy to read.
*/
.headerContainer .mcnTextContent,.headerContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:15px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
}
/*
#tab Header
#section header link
#tip Set the styling for your emails header links. Choose a color that helps them stand out from your text.
*/
.headerContainer .mcnTextContent a{
/*#editable*/color:#6DC6DD;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Body
#section body style
#tip Set the background color and borders for your emails body area.
*/
#templateBody{
/*#editable*/background-color:#FFFFFF;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Body
#section body text
#tip Set the styling for your emails body text. Choose a size and color that is easy to read.
*/
.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:15px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
}
/*
#tab Body
#section body link
#tip Set the styling for your emails body links. Choose a color that helps them stand out from your text.
*/
.bodyContainer .mcnTextContent a{
/*#editable*/color:#6DC6DD;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
/*
#tab Footer
#section footer style
#tip Set the background color and borders for your emails footer area.
*/
#templateFooter{
/*#editable*/background-color:#F2F2F2;
/*#editable*/border-top:0;
/*#editable*/border-bottom:0;
}
/*
#tab Footer
#section footer text
#tip Set the styling for your emails footer text. Choose a size and color that is easy to read.
*/
.footerContainer .mcnTextContent,.footerContainer .mcnTextContent p{
/*#editable*/color:#606060;
/*#editable*/font-family:Helvetica;
/*#editable*/font-size:11px;
/*#editable*/line-height:125%;
/*#editable*/text-align:left;
}
/*
#tab Footer
#section footer link
#tip Set the styling for your emails footer links. Choose a color that helps them stand out from your text.
*/
.footerContainer .mcnTextContent a{
/*#editable*/color:#606060;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
#media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote{
-webkit-text-size-adjust:none !important;
}
} #media only screen and (max-width: 480px){
body{
width:100% !important;
min-width:100% !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnTextContentContainer]{
width:100% !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnBoxedTextContentContainer]{
width:100% !important;
}
}
}
} #media only screen and (max-width: 480px){
td[class=mcnImageCardTopImageContent]{
padding-top:18px !important;
}
} #media only screen and (max-width: 480px){
table[class=mcnCaptionLeftContentOuter] td[class=mcnTextContent],table[class=mcnCaptionRightContentOuter] td[class=mcnTextContent]{
padding-top:9px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnCaptionBlockInner] table[class=mcnCaptionTopContent]:last-child td[class=mcnTextContent]{
padding-top:18px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnBoxedTextContentColumn]{
padding-left:18px !important;
padding-right:18px !important;
}
} #media only screen and (max-width: 480px){
td[class=mcnTextContent]{
padding-right:18px !important;
padding-left:18px !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Preheader Visibility
#tip Set the visibility of the emails preheader on small screens. You can hide it to save space.
*/
table[id=templatePreheader]{
/*#editable*/display:block !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Preheader Text
#tip Make the preheader text larger in size for better readability on small screens.
*/
td[class=preheaderContainer] td[class=mcnTextContent],td[class=preheaderContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:14px !important;
/*#editable*/line-height:115% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Header Text
#tip Make the header text larger in size for better readability on small screens.
*/
td[class=headerContainer] td[class=mcnTextContent],td[class=headerContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:18px !important;
/*#editable*/line-height:125% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section Body Text
#tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
td[class=bodyContainer] td[class=mcnTextContent],td[class=bodyContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:18px !important;
/*#editable*/line-height:125% !important;
}
} #media only screen and (max-width: 480px){
/*
#tab Mobile Styles
#section footer text
#tip Make the body content text larger in size for better readability on small screens.
*/
td[class=footerContainer] td[class=mcnTextContent],td[class=footerContainer] td[class=mcnTextContent] p{
/*#editable*/font-size:14px !important;
/*#editable*/line-height:115% !important;
}
} #media only screen and (max-width: 480px){
td[class=footerContainer] a[class=utilityLink]{
display:block !important;
}
}</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="headerContainer" style="padding-top:10px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding:9px" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer">
<tbody><tr>
<td class="mcnImageContent" valign="top" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0;">
<img align="left" alt="" src="https://gallery.mailchimp.com/09dc4b1b18f3f16d3f259eb11/images/803e3bf6-65ed-46f0-8786-cfd7b1a84e4e.png" width="500" style="max-width:500px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="bodyContainer" style="padding-top:10px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" class="mcnTextBlockInner">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="600" class="mcnTextContentContainer">
<tbody><tr>
<td valign="top" class="mcnTextContent" style="padding-top:9px; padding-right: 18px; padding-bottom: 9px; padding-left: 18px;">
<h1>Designing Your Email</h1>
<h3>Creating an elegant email is simple</h3>
<p>Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>
<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowBlock">
<tbody class="mcnFollowBlockOuter">
<tr>
<td align="center" valign="top" style="padding:9px" class="mcnFollowBlockInner">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContentContainer">
<tbody><tr>
<td align="center" style="padding-left:9px;padding-right:9px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContent" style="border: 1px solid #EEEEEE;background-color: #FAFAFA;">
<tbody><tr>
<td align="center" valign="top" style="padding-top:9px; padding-right:9px; padding-left:9px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-96.png" alt="Facebook" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
Facebook
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-96.png" alt="Twitter" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
Twitter
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:10px; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-96.png" alt="LinkedIn" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:10px; padding-bottom:9px;">
LinkedIn
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked">
<tbody><tr>
<td align="center" valign="top" class="mcnFollowIconContent" style="padding-right:0; padding-bottom:5px;">
<img src="http://cdn-images.mailchimp.com/icons/social-block-v2/color-link-96.png" alt="Website" class="mcnFollowBlockIcon" width="48" style="width:48px; max-width:48px; display:block;">
</td>
</tr>
<tr>
<td align="center" valign="top" class="mcnFollowTextContent" style="padding-right:0; padding-bottom:9px;">
Website
</td>
</tr>
</tbody></table>
<!--[if gte mso 6]>
</td>
<td align="left" valign="top">
<![endif]-->
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>' ;
?>
Use PHP's output buffering for such things. If you turn on output buffering, everything you print out will be "buffered" (= stored) instead of printed out to the user. You can then get the buffer and save it in e.g. a variable.
Why should you do this?
With output buffering you can use PHP as a "simple template engine". What that means is, that you can create template files containing HTML and even PHP.
A simple example:
email_template.php (Using short_open_tag):
<!DOCTYPE html>
<html>
<body>
<h1>My name is <?=$test?></h1>
</body>
</html>
And in your script where you render the e-mail bodies:
$test = "Pedro Piloto";
ob_start();
require('email_template.php');
$body = ob_get_clean();
The h1 tag would then contain "My name is Pedro Piloto".
Related
I have created html which after conversion to pdf has 6 pages. I have fixed footer and want to add there page number. I have tried all code I have found #page{#bottom: content :counter(page)} and it is not working I have also tried to write js code but it also didn't work.
footer{
position:fixed;
z-index:1;
bottom:0;
font-size:11px;
background-color: white;
color:#A2A2A2;
padding-left: 80px;
padding-right: 60px;
width:910px;
box-sizing: border-box}
<footer>
<table id="footer" class="t_f1 pf">
<tbody>
<tr >
<td width="280" align="left">some text</td>
<td width="450" align="right">some text</td>
</tr>
<tr>
<td class="section" align="left">some text</td>
<td align="right">Page number </td>
</tr>
</tbody>
</table>
</footer>
Do you have any idea how to add page number to this footer?
Thank you for any response
How can I wrap every 3rd <td> with a <tr> using Kentico email template?
I wrote the following code in jQuery, but do not have knowledge or idea how to write this loop logic in Kentico.
var td = $("#myTable tr td"); // Getting all td
td.each(function(i) { // Looping the td
if (i % 3 == 0) { // Splitting td as multiple of 3
td.slice(i, i + 3).wrapAll('<tr/>') // Wrapping it inside tr
}
}).parent('tr').unwrap();
I want the same logic using Kentico.
Are you trying to replace the JS with Kentico Macro which can be used in email template or email widget?
If so, and you have Kentico 11+, then you can go to Email marketing application > Email widgets and open the "Latest Article" sample widget and look at how the logic works.
Here is the HTML/macro for the sample widget
{% /*
The Latest articles email widget dynamically obtains four latest articles from the Dancing Goat demo site at the time when the email issue is generated.
It achieves so by using macros that access pages with the given attributes.
*/ #%}
{%
articles = Documents["/Articles"]
.CultureVersions["en-US"]
.Children
.ClassNames("dancinggoat.article")
.OrderBy("DocumentPublishFrom DESC")
.TopN(4)
.WithAllData;
return;
#%}
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">
{%
i = 0;
isFirstItemInRow = false;
foreach (article in articles) {
%}
{%
isFirstItemInRow = (Modulo(i, 2) == 0);
articleUrl = UTMContent == String.Empty ? article.RelativeURL : article.RelativeURL + "?utm_content=" + UTMContent;
articleTeaserUrl = GetAttachmentUrlByGUID(article.ArticleTeaser, "teaser", "teaser");
articleLinkText = LinkText == String.Empty ? "Continue reading" : LinkText;
return;
%}
{% if (isFirstItemInRow) { %}
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0 15px 0" class="padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<![endif]-->
{% } /* END if */ #%}
<!--[if (gte mso 9)|(IE)]>
<td align="left" valign="top" width="240">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="{% isFirstItemInRow ? "max-width:240px;" : "max-width:240px; float:right;" %}" class="wrapper">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 20px 0 30px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="middle"><img src="{% articleTeaserUrl #%}" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></td>
</tr>
<tr>
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;">{% article.ArticleTitle #%}</td>
</tr>
<tr>
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;">{% article.ArticleSummary #%}</td>
</tr>
<tr>
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;">{% articleLinkText #%} →</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
{% if (isFirstItemInRow) { %}
<!--[if (gte mso 9)|(IE)]>
<td width="20" style="font-size: 1px;"> </td>
<![endif]-->
{% } /* END if */ #%}
{% if (!isFirstItemInRow) { %}
<!--[if (gte mso 9)|(IE)]>
</tr>
</table>
<![endif]-->
</td>
</tr>
{% } /* END if */ #%}
{% i++; return; %}
{% } /* END foreach */ #%}
</table>
Hello im working on a game fan guide page but now I will not go any further and search for help.
I need a way to get the next or/and previous img on click a previous arrow and next arrow.
All this is new for me and i have test many but nothing have work, i hope anyone can help me out.
now i have see my html have make issus but i have fix and now i can post my html.
I have the CSS style and HTML for a better view split but in my html it is alle in one and a meta for viewport.
edit: sry, but i have make thinking errors. it is not enough to change the pic i have to change the wohle div content.
explane on click next have to change div id="card1" class="card_content" to div id="card2" class="card_content"
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
background-color: black;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}
<table>
<tr>
<td>
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</td>
</tr>
</table>
<div id="card1" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="card2" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png">
</td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="fade" class="card_overlay"></div>
The code below may help you.
// index.html
<img src="01.png" id="pic">
// script.js
document.getElementById("pic").setAttribute("src", "02.png")
Got it done with
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off">
But how do i make the javascript: void with a script.js
i'm doing a webapplication for android and iOS
i'm resizing every object in my html file by Javascript
but there's a problem, the first table it's perfect
but when i copy it down the image of the second table doesn't resize, can you help me please?
this is the site
http://bestparty.altervista.org/IOS/IOS/eventi.php
this is .JS file
$(document).ready(function() {
$("body").css("height", ((($(window).height() * 100) / 100)));
$("#evntfoto").css("height", ((($(window).height() * 20) / 100)));
$("#evntfoto").css("width", ((($(window).width() * 40) / 100)));
document.ontouchstart = function(e) {
e.preventDefault();
};
});
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta content="on" http-equiv="cleartype">
<link href="css/stile.css" rel="stylesheet" type="text/css">
<meta content="width=320, initial-scale=0.7, user-scalable=no" name=
"viewport">
<script src="JS/jquery-1.11.1.js.js"></script><!--PER EVENTI-->
<script src="JS/func.js"></script><!--PER EVENTI-->
<title>BParty</title>
</head>
<body>
<div id="navigation">
<table width="100%">
<tr valign="middle">
<td align="center" valign="middle" width="25%"><</td>
<td align="center" valign="middle" width="50%">BPARTY</td>
<td align="center" width="25%">></td>
</tr>
</table>
</div>
<div id="evntprg">
EVENTI IN PROGRAMMA
</div>
<div id="container" style="overflow:scroll;">
<div style=
"width:90%; display:block; margin:0 auto; padding-top:10px; margin-top:10px; padding-left:10px; background-color:#FFF; padding-bottom:10px;">
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
</div>
</div>
</body>
</html>
You are using ID's. ID's in HTML are unique there only can be one.
Change id="eventfoto" to class="eventfoto" in your HTML. Then in jQuery change your selectors to be $(".evntfoto"). Some knowledge about HTML ID'S. The reason why you would use classes is because you can use more than one on the HTML page.
Change below td width as 80%.
Static Html code :
<td valign="middle" align="center" id="evntfoto" style="height: 119px; width: 80%; background-image: url(http://bestparty.altervista.org/IOS/IOS/IMG/fnky.jpg); background-size: cover; background-position: 50% 50%;">
</td>
Dynamic code using jquery :
$("#evntfoto").css("width","80%");
I have a list which has one primary list name, and 10 sublists under it, which i don't want to display on my html page at a time. I want to display 4 sublists on the page and a link as "more". The moment I hover my mouse on the "more" link, it should show the rest sublinks.
This is my complete code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script >
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
a:link {color:#03F; text-decoration:none; text-emphasis:none} /* unvisited link */
a:visited {color:#03F; text-decoration:none} /* visited link */
a:hover {color:#F30; text-decoration:none} /* mouse over link */
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
.style2 {font-size: 13px;
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.style4 {
font-size: 18px;
font-weight: bold;
color: #FF6600;
}
.style44 {
background-image:url('Background.jpg');
}
.style45 { border-left-style: solid; border-left-color: #F60; border-left-width:thin; }
.style46 { position:relative; top: 50px; }
.style6 {color: #000000}
.auto-style1 {
color:#039;
}
-->
</style>
</head>
<body>
<div align="center">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base">
<table width="800" border="0" cellspacing="0" cellpadding="5" height="627" class="style44">
<tr>
<td colspan="2" height="11" width="790">
</td>
</tr>
<tr>
<td width="263" valign="top" height="602" align="left">
<table class="style46">
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Planning</font></td></tr>
<tr><td>web-ecommerce--where-to-begin</td></tr>
<tr><td>introduction-to-ecommerce</td></tr>
<tr><td>web-site-analysis----a-study-in-damag</td></tr>
<tr><td>set-up-your-own-blog-free</td></tr>
<tr id="planning_more"><td align="right">More...</td></tr><br>
<div id="planning_panel">
planning
</div>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Designing & Hosting</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Marketing</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Technology</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
</table></td>
<td width="537" valign="top" height="602" class="style45">
<h1 align="center"><span class="auto-style1"><font size="5">eCommerce: What is it?</font></span><br>
</h1>
<p class="MsoNormal" align="left" height="12" class="style45"><span class="style2">my text
</span>
</p>
</tr>
</table>
<hr width="800" noshade>
<span class="style6"><br>
<span class="style2"></span></span></div>
</body>
</html>
But this is not working. Kindly help.
Checkout the working code here: http://jsfiddle.net/loesch/rhTNC/
Your missing </table> tag seems to be causing issues. Try
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
-->
</style>
<table class="style46">
<tr>
<td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4">Planning</font></td>
</tr>
<tr>
<td>web-ecommerce--where-to-begin</td>
</tr>
<tr>
<td>introduction-to-ecommerce</td>
</tr>
<tr>
<td>web-site-analysis----a-study-in-damag</td>
</tr>
<tr>
<td>set-up-your-own-blog-free</td>
</tr>
<tr id="planning_more">
<td align="right">More...</td>
</tr>
<br />
</table>
<div id="planning_panel">
planning
</div>