Develop Reference

How to switch src and onclick with previous and next buttons?

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='non‌​e';document.getEleme‌​ntById('fade').style‌​.display='none';docu‌​ment.getElementById(‌​'card2').style.displ‌​ay='block';document.‌​getElementById('fade‌​').style.display='bl‌​ock'" unselectable="off">
But how do i make the javascript: void with a script.js

How to override gmail viewport in html email template?

I'd developed a dating site in php which is having mobile version also. I'd designed an html email template and stored it in one folder with php variables which I'll replace while sending emails. What I want to do here is when any email which is sent from my site opens in mobile, it should not have an option to zoom the email. In my email template I'd below code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
The email template if I am viewing in browser in mobile, it doesn't have an option to zoom, but if I am viewing the email in gmail app and I am able to zoom the emails.
Please let me know how to stop zoom functionality in Gmail. Thanks in advance.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
</head>
<body style="-webkit-text-size-adjust:none;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#000000; height:52px;">
<tr>
<td align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600px" style="height:100%;">
<tr><td align="left" valign="middle" style="padding-left:20px;"><img src="SITENAME/images/logo.png" /></td></tr>
</table>
</center>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<center>
<table style="height:100%;" width="600px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding-left:20px; padding-bottom:20px" valign="bottom" align="left">
<div style="color: #444444; font-family: Open Sans; font-size: 15px; line-height: 150%;text-align: left;">
{{EMAILCONTENT}}
</div>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Put this code on your DIV with emailcontent, where you declare font-family, font-size, etc..
.no-zoom {
touch-action: manipulation;
}

Input button onclick do not work in JSP

I test my issue in Firefox. I click the save button(it is a input, and the type is button), it ought to execute:
onclick="checkchar()"
but it did not.
My part of code in jsp:
<script language="javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
...
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
I don't know why I click my save button, the method did not execute, some one can help me with this? and if is caused by the upload stylesheet (http://localhost:8080/css/Font.css)? I am not sure.
EDIT
Because the main framework is frameset, and the javascript methods and the input button is in my main page(you can see the below, which is in red rectangle I add). So use firebug it shows there do not contains any javascript code.
EDIT -2
The all code of my actingIndex.jsp:
<%# page language="java" pageEncoding="UTF-8"%>
<%--引入struts tags--%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>运行监控模块编辑</title>
<link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/showText.css" type="text/css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script>
<script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"/>
<script src="${pageContext.request.contextPath}/ckfinder/ckfinder.js"/>
<script type="text/javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
function addEnter(element){
document.getElementById(element).value = document.getElementById(element).value+"<br>";
}
function checkTextAreaLen(){
var stationRun = new Bs_LimitedTextarea('stationRun', 2500);
stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
stationRun.draw();
var devRun = new Bs_LimitedTextarea('devRun', 2500);
devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
devRun.draw();
}
window.onload=function(){
//checkTextAreaLen();
}
</script>
</head>
<body>
<form name="Form1" id="Form1" method="post">
<table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0">
<tbody>
<tr height=10><td></td></tr>
<tr>
<td>
<TABLE style="WIDTH: 105px; HEIGHT: 20px" border="0">
<TR>
<TD align="center" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15"></TD>
<TD class="DropShadow" background="${pageContext.request.contextPath }/images/cotNavGround.gif">运行监控列表</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe" colspan=3>
<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">
<tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">站点运行情况</td>
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">设备运行情况</td>
<td align="center" width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">创建日期</td>
</tr>
<div id="showInfomation" style="visibility: hidden"></div>
<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="stationRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="devRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="20%">
<s:date name="createDate" format="yyyy-MM-dd HH:mm:ss" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
<form name="Form2" id="Form2" method="post">
<table cellspacing="1" cellpadding="5" width="90%" align="center" bgcolor="#f5fafe" style="border:1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" colspan=2 align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
<font face="宋体" size="2"><strong>运行监控编辑</strong></font>
</td>
</tr>
<tr height=10><td></td><td></td></tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="stationRun" id="stationRun" cssstyle="width: 1000px; height: 160px; padding: 1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');"></s:textarea>
<!--<script type="text/javascript">
CKEDITOR.replace("stationRun", {height:200, width:800});
</script>-->
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssstyle="width:1000px; height: 160px; padding:1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<!-- <script type="text/javascript">
CKEDITOR.replace("devRun", {height:200, width:800});
</script> -->
</td>
</tr>
<tr>
<td class="ta_01" style="width: 100%" align="center" bgcolor="#f5fafe" colspan="2">
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
<input style="font-size:12px; color:black; height:20px; width:80px" id="BT_Export" type="button" value="导出设置" name="BT_Export"
onclick="openWindow('${pageContext.request.contextPath }/system/exportExcel.jsp?belongTo=5-3','700','400')">
</td>
</tr>
</table>
</form>
</body>
</html>

You open script tag , But it is not closed,and
it is important to insert the script at the END of the page. So that the page
can register the controls first.
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
//document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
//document.Form2.submit();
alert(" 待办事宜保存成功!");
}
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">

Try this checkchar() function
function checkchar(){
alert("Hello");
}

Write email php, escaping html characters

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".

Jquery problem with a table (.animate)

I want a minimize table button for my website so I was just messing around with some Jquery and i'm wondering why after the button is clicked (and it reduced its size)
it grows back to the default size? -Once the .animate has finished?
http://zombiewrath.com/maintest2.php
-Try it there,
Code:
<html>
<head>
<style type="text/css">
#tablemin {
height:inherit;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click Here" onClick="dostuff();">
<div id="tablemin">
<table bordercolor="#0000FF" width="670" border="1">
<tr>
<td class="style5" width="400" valign="top" style="width: 300px"><b><u>Personal Feed: </u></b><br>
</td>
<td class="style5" width="355" valign="top"><u><strong>Live Feed:</strong> </u><br>
<div id="ReloadTime3" style="width: 350px">
</div></td>
</tr>
<tr>
<td class="style5" valign="top" colspan="3" style="width: 488px"><b><u>Local news for Zone B-4...</u></b></td></tr>
</table>
</div>
<script type="text/javascript">
function dostuff() {
$("#tablemin").animate({
//opacity: "0.4",
height: "50px"
}, 1000 );
}
//$(document.body).click(function () {
//$('#tablemin').animate({height:'1px'}, 'slow');
//$('#tablemin').fadeOut(1);
//});
</script>
Hi
</body></html>
Thanks alot,

why after the button is clicked (and
it reduced its size) it grows back to
the default size?
with your current code, do this,
<style type="text/css">
#tablemin {
height:inherit;
overflow: hidden;
}
</style>

It does not grow back (in FF3.6 at least), the table just overflows it.

Try giving #tablemin the style overflow:hidden

Use following code for the animation:
$("#tablemin").animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 1500);
You might need to add 'toggle' in height.
<body>
<input type="button" value="Click Here" id="btn" onclick="dostuff();">
<div id="tablemin">
<table bordercolor="#0000FF" width="670" border="1">
<tr>
<td class="style5" width="400" valign="top" style="width: 300px">
<b><u>Personal Feed: </u></b>
<br>
</td>
<td class="style5" width="355" valign="top">
<u><strong>Live Feed:</strong> </u>
<br>
<div id="ReloadTime3" style="width: 350px">
</div>
</td>
</tr>
<tr>
<td class="style5" valign="top" colspan="3" style="width: 488px">
<b><u>Local news for Zone B-4...</u></b>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#btn").click(function() {
$("#tablemin").animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 1500);
});
</script>
</body>
As for the flicker problem, you might be able to find a solution with this link.