Dummy image when the datalist column is empty - datalist

Am using a datalist to show the product details. In this time i want to show the image, but it displayed when the image filed having the image path, otherwise it's empty. I want to show the dummy image when the field is empty..
Here is my code:
<asp:DataList ID="DataList1" CaptionAlign="Right" runat="server" Width="100%" Visible="true" >
<ItemTemplate>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="2%">
</td>
<td>
<div class="Curved_box">
<div class="curved_Top">
<div class="curved_TopLft">
</div>
<div class="curved_TopRft">
</div>
</div>
<div class="CurvedContent">
<a href="#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 14px; height: 65px;">
</td>
<td style="width: 113px; height: 65px;">
<asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: " runat="server"
Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>' />
</td>
<td width="80%" align="right" style="height: 65px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="height: 20px" align="left">
<asp:Label ID="lbl_name" runat="server" Font-Bold="true" Text='<%#Bind("name") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 247px; height: 20px;" align="left">
<asp:Label ID="lblProd_Keywd" runat="server" Text='<%# Bind("Desig") %>' Font-Bold="True"></asp:Label>
</td>
<td align="left" style="height: 20px">
<asp:Label ID="lblProd_Code" runat="server" Text='<%# Bind("fldempid") %>'
Font-Bold="True"></asp:Label>
</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
</a>
</div>
<div class="curved_Btm">
<div class="curved_BtmLft">
</div>
<div class="curved_BtmRft">
</div>
</div>
</div>
</td>
<td width="2%">
</td>
</tr>
</table>
</ItemTemplate>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" HorizontalAlign="Left" ForeColor="White" />
</asp:DataList>

add onerror attribute on <asp:Image> tag like onerror="this.src = 'url of dummy image'"
change this mark up
<asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: "
runat="server" Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>' />
to
<asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: "
runat="server" Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>'
onerror="this.src = 'url of dummy image'" />

Related

Prevent paging on custom "batch edit" radgrid if changes haven't been saved

We have a pretty customized "batch edit" type screen. Out users frequently make changes, then forget to hit Save before moving on to the next page. I have tried the solutions found here:
[a link] http://www.telerik.com/support/code-library/prevent-losing-batch-editing-changes-on-paging-or-any-other-postback
[a link] http://www.telerik.com/forums/prevent-losing-batch-editing-changes-on-paging-or-any-other-postback
But I end up with errors like "RecordNumber" is neither a DataColumn nor a DataRelation. Here's my code. I'm thinking our grid is just too complicated for these straightforward solutions...?
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="AssignTeacherAdvisor2.aspx.cs" Inherits="AssignTeacherAdvisor2" Theme="LBL" %>
<%# Register Src="Controls/ActionBar.ascx" TagName="ActionBar" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderMainAppTop" runat="Server">
<div id="populateTchrIDs" runat="server">
<%-- <script type="text/javascript" language="javascript">
function KGCalChange(sender, eventArgs) {
//debugger;
if (sender.value == "KG") {
showHideLayer('<%= labelKGCal_Search.ClientID %>', 'show');
showHideLayer('<%= comboKGCal_Search.ClientID %>', 'show');
}
else {
showHideLayer('<%= labelKGCal_Search.ClientID %>', 'hide');
showHideLayer('<%= comboKGCal_Search.ClientID %>', 'hide');
}
}
</script>--%>
<script type="text/javascript">
function clientItemChecking(sender, args)
{
if (sender.get_checkedItems().length == 3 && (args.get_item().get_checked() == false))
{
alert("count exceeded");
args.set_cancel(true);
}
}
function clientItemCheckingC(sender, args) {
if (sender.get_checkedItems().length == 5 && (args.get_item().get_checked() == false)) {
alert("count exceeded");
args.set_cancel(true);
}
}
</script>
</div>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<uc1:ActionBar ID="ActionBarTop" runat="server" CancelVisible="True" ExportVisible="True"
SaveVisible="True" Text="Assign Teacher/Advisor" HelpVisible="True" ExportURL="~/DataExport.aspx?frm=AssignTeacherAdvisor2"
OnSaveClick="ActionBar_SaveClick" OnCancelClick="ActionBar_CancelClick" />
<table class="six" style="width: 100%">
<tr>
<td>
<div class="padded header">
Search and Sort
</div>
</td>
<td align="right">
<asp:HyperLink ID="HyperLinkAdvancedSearch" runat="server" NavigateUrl="javascript:ToggleAdvanced();"
class="advancedSearchLink">
Advanced Search</asp:HyperLink>
</td>
</tr>
</table>
<br />
<asp:HiddenField ID="hiddenField" runat="server" />
<asp:Panel ID="PanelSaveSuccess" runat="server" CssClass="infoMessage" Visible="false">
<asp:Label ID="LabelSaveSuccess" runat="server" Text="Information saved successfully." />
</asp:Panel>
<asp:ValidationSummary ID="ValidationSummaryMain" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" Display="None" ErrorMessage="CustomValidator"></asp:CustomValidator>
<asp:Panel ID="PanelInputs" runat="server" DefaultButton="WebButtonSearch">
<table class="eight" style="width: 100%">
<tr><td colspan = "8" style="text-align: right;">
<sis:InputLabel ID="lblRunReport" runat="server" Text="Report:" Visible="False" />
<telerik:RadComboBox ID="ddlRunReport" runat="server" Width="160px" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="RadComboBoxReport_SelectedIndexChanged">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
<td>
<sis:WebButton ID="wbtnRunReport" runat="server" CausesValidation="true" ImageUrl="~/App_Themes/LBL/wbtnRunReport.gif"
AutoTipKey="Run Report" UseCssHover="True" OnClick="wbtnRunReport_Click" Visible="False" />
</td></tr>
<tr>
<td class="start">
<sis:InputLabel ID="lblLastName_Search" runat="server" Text="Last Name:" />
</td>
<td class="start data">
<telerik:RadTextBox ID="txtLastName_Search" runat="server">
</telerik:RadTextBox>
</td>
<td class="start">
<sis:InputLabel ID="lblFirstName_Search" runat="server" Text="First Name:" />
</td>
<td class="start data">
<telerik:RadTextBox ID="txtFirstName_Search" runat="server">
</telerik:RadTextBox>
</td>
<td class="start">
<sis:InputLabel ID="lblGrades_Search" runat="server" Text="Grade Level:"></sis:InputLabel>
</td>
<td>
<telerik:RadComboBox ID="lstGrades_Search" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Width ="100px" ></telerik:RadComboBox>
<asp:Literal ID="Literal3" runat="server" />
</td>
<td class="end">
<sis:InputLabel ID="lblTeacherAssigned_Search" runat="server" Text="Teacher Assigned:" />
</td>
<td class="end data">
<telerik:RadComboBox ID="cmbTeacherAssigned_Search" runat="server" Width="75px">
<Items>
<telerik:RadComboBoxItem runat="server" Selected="True" Text=" " />
<telerik:RadComboBoxItem runat="server" Text="Yes" Value="Yes" />
<telerik:RadComboBoxItem runat="server" Text="No" Value="No" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
</table>
<table class="six" style="width: 100%">
<tr>
<td class="start">
<%-- <div id="labelKGCal_Search" runat="server">
<sis:InputLabel ID="lblKGCal_Search" runat="server" Text="KG Calendar:" />
</div>--%>
</td>
<td class="start data">
<%-- <div id="comboKGCal_Search" runat="server" style="width: 301px">
<telerik:RadComboBox ID="cmbKGCal_Search" runat="server" Width="249px" Height="31px">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</div>--%>
</td>
<td class="end">
</td>
<td class="end data">
</td>
</tr>
</table>
<div id="DivAdvancedSearch" class="advancedSearch" runat="server">
<table class="eight" style="width: 100%">
<tr>
<td class="start">
<sis:InputLabel ID="lblCurrentYearTeacher_Search" runat="server" Text="Current Year Teacher/Advisor:"></sis:InputLabel>
</td>
<td>
<telerik:RadComboBox ID="lstCurrentYearTeacher_Search" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="false" Width ="250px" OnClientItemChecking="clientItemCheckingC" ></telerik:RadComboBox>
<asp:Literal ID="Literal1" runat="server" />
</td>
<td class="start">
<sis:InputLabel ID="lblPriorYearTeacher_Search" runat="server" Text="Prior Year Teacher/Advisor:"></sis:InputLabel>
</td>
<td>
<telerik:RadComboBox ID="lstPriorYearTeacher_Search" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="false" Width ="250px" OnClientItemChecking="clientItemCheckingC"></telerik:RadComboBox>
<asp:Literal ID="Literal2" runat="server" />
</td>
<td class="start">
<sis:InputLabel ID="lblGender" runat="server" Text="Gender:"></sis:InputLabel>
</td>
<td class="start data">
<telerik:RadComboBox ID="cmbGender_Search" runat="server" Width="85px">
<Items>
<telerik:RadComboBoxItem runat="server" Selected="True" Text=" " />
<telerik:RadComboBoxItem runat="server" Text="Male" Value="Male" />
<telerik:RadComboBoxItem runat="server" Text="Female" Value="Female" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
<td class="end">
<sis:InputLabel ID="lblRowsToDisplay_Search" runat="server" Text="Rows to Display:" />
</td>
<td class="end data">
<telerik:RadComboBox ID="cmbRowsToDisplay_Search" runat="server" Width="65px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
<telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
<telerik:RadComboBoxItem runat="server" Text="30" Value="30" />
<telerik:RadComboBoxItem runat="server" Text="50" Value="50" />
<telerik:RadComboBoxItem runat="server" Text="100" Value="100" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td class="start">
<sis:InputLabel ID="lblFlags_Search" runat="server" Text="Flags (up to 3):"></sis:InputLabel>
</td>
<td>
<telerik:RadComboBox ID="lstFlags_Search" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="false" Width ="250px" OnClientItemChecking="clientItemChecking"></telerik:RadComboBox>
<asp:Literal ID="itemsClientSide" runat="server" />
</td>
<td class="start">
<sis:InputLabel ID="lblIncludeFlag_Search" runat="server" Text="Include Flag:"></sis:InputLabel>
</td>
<td class="start data">
<telerik:RadComboBox ID="cmbIncludeFlag_Search" runat="server" Width="85px">
<Items>
<telerik:RadComboBoxItem runat="server" Selected="True" Text=" " />
<telerik:RadComboBoxItem runat="server" Text="All Flags" Value="A" />
<telerik:RadComboBoxItem runat="server" Text="One or more" Value="O" />
<telerik:RadComboBoxItem runat="server" Text="None of These" Value="N" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
<td class="start">
<sis:InputLabel ID="InputLabelCY" runat="server" Text="Cohort Year:" />
</td>
<td class="start data" align="left" style="width: 138px">
<telerik:RadComboBox ID="RadComboBoxCY_Search" runat="server" TabIndex="4" Width="100px">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</td>
<td class="end">
</td>
<td class="end data">
</td>
</tr>
</table>
<table style="width: 100%" class="six">
<tr>
<td style="width: 121px" class="start" valign="top">
<sis:InputLabel ID="lblDOBFrom_Search" runat="server" Text="DOB Range - From:"></sis:InputLabel>
</td>
<td style="width: 99px" class="start data" valign="top">
<telerik:RadDatePicker ID="dateDOBFrom_Search" runat="server" Width="100px">
<DateInput InvalidStyleDuration="100">
</DateInput>
</telerik:RadDatePicker>
</td>
<td align="right" style="width: 37px" class="start" valign="top">
<sis:InputLabel ID="lblDOBTo_Search" runat="server" Text="To:"></sis:InputLabel>
</td>
<td align="left" style="width: 113px" class="start data" valign="top">
<telerik:RadDatePicker ID="dateDOBTo_Search" runat="server" Width="100px">
<DateInput InvalidStyleDuration="100">
</DateInput>
</telerik:RadDatePicker>
</td>
<td>
</td>
</tr>
</table>
</div>
<table class="eight" style="width: 100%">
<tr>
<td>
<sis:WebButton ID="WebButtonSearch" runat="server" UseCssHover="true" ImageUrl="~/App_Themes/LBL/wbtnSearch.gif"
AutoTipKey="Search" OnClick="WebButtonSearch_Click" AllowLoadBox="True" />
<sis:WebButton ID="WebButtonReset" runat="server" UseCssHover="true" ImageUrl="~/App_Themes/LBL/wbtnReset.gif"
AutoTipKey="Reset" OnClick="WebButtonReset_Click" />
</td>
</tr>
</table>
<asp:Label ID="lblReturnExceedMax" runat="server" CssClass="ListPageStatus"></asp:Label>
</asp:Panel>
<asp:HiddenField ID="HiddenFieldAdvanced" runat="server" />
<br />
<div class="hr">
<hr />
</div>
<table style="width: 100%">
<tr>
<td align="left" style="width: 90px">
<div id="totals" class="padded header" style="width: 93px">
Students
</div>
</td>
<td align="left">
<sis:WebButton ID="WebButtonTotals" runat="server" ImageUrl="~/App_Themes/LBL/wbtnViewTotals.gif"
AutoTipKey="View totals" OnClick="WebButtonTotals_Click" UseCssHover="true" />
</td>
<td><sis:WebButton ID="WebButtonVerify" runat="server"
ImageUrl="~/App_Themes/LBL/wbtnVerify.gif" AutoTipKey="Verify" onclick="WebButtonVerify_Click"
UseCssHover="True" AlertEnabled="True" AlertIcon="Question"
AlertText="You have requested to verify Teacher/Advisor assignments. Would you like to continue?"
AlertTitle="Verify" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<telerik:RadGrid ID="grdResults" runat="server" AutoGenerateColumns="False"
AllowCustomPaging="True" AllowPaging="True" OnNeedDataSource="grdResults_NeedDataSource"
OnItemDataBound="grdResults_ItemDataBound" OnItemEvent="grdResults_ItemEvent"
VirtualItemCount="999999" GroupingEnabled="False" >
<ExportSettings>
<Pdf PaperSize="Letter" FontType="Subset"></Pdf>
<Csv RowDelimiter="NewLine" ColumnDelimiter="Comma"></Csv>
</ExportSettings>
<MasterTableView CurrentResetPageIndexAction="SetPageIndexToFirst" Dir="LTR" Frame="Border"
TableLayout="Auto" CommandItemDisplay="None" DataKeyNames="RecordNumber" VirtualItemCount="999999"
AllowCustomPaging="true" EditMode="InPlace" PagerStyle-Position="TopAndBottom">
<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
Visible="False" Resizable="False">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="StudentName.FullName" CurrentFilterFunction="NoFilter"
HeaderText="Preferred Name" UniqueName="Name" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Grade" CurrentFilterFunction="NoFilter" HeaderText="Grade"
ReadOnly="true">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="KindergartenCalendar" UniqueName="KGCal" CurrentFilterFunction="NoFilter"
HeaderText="KG Calendar" Display="False" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Current Year Teacher/Advisor" UniqueName="CurrentTchrID"
DataField="CurrentTeacherID" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<telerik:RadComboBox ID="RadComboBoxTeacher" runat="server" Height="350px">
</telerik:RadComboBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="NextTeacherID" UniqueName="NextTchrID" CurrentFilterFunction="NoFilter"
HeaderText="Prior Year Teacher/Advisor" ReadOnly="true">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
</EditColumn>
<PopUpSettings ScrollBars="None" />
</EditFormSettings>
<NoRecordsTemplate>
No Records Returned
</NoRecordsTemplate>
<PagerStyle Position="TopAndBottom" />
</MasterTableView>
<SortingSettings EnableSkinSortStyles="False" />
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder" Resizing-ShowRowIndicatorColumn="False">
<Resizing ResizeGridOnColumnResize="True"
AllowColumnResize="True"></Resizing>
</ClientSettings>
</telerik:RadGrid>
<uc1:ActionBar ID="ActionBarBottom" runat="server" CancelVisible="True" ExportVisible="True"
SaveVisible="True" Text="Assign Teacher/Advisor" HelpVisible="True" ExportURL="~/DataExport.aspx?frm=AssignTeacherAdvisor2"
OnSaveClick="ActionBar_SaveClick" OnCancelClick="ActionBar_CancelClick" />
</telerik:RadAjaxPanel>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderFooter" runat="Server">
</asp:Content>

ASP.NET updatepanel not refreshing the dropdownlist controls

I have recently added a updatepanel in my aspx page. My controls are inside a HTML table, labels, dropdownlist etc. And i want the dropdown lists to refresh only.. but no hope at all.. any help..
The sample code is below
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
<ContentTemplate>
<table id="Table5" height="50" cellspacing="3" cellpadding="3" width="200" border="1">
<tr>
<td width="110" height="21">
<p align="left">
<asp:Label ID="lblDomain" runat="server" CssClass="reportOption" Width="51px">Domain</asp:Label></p>
</td>
<td width="110" height="21">
<p align="left">
<asp:Label ID="lblSystem" runat="server" CssClass="reportOption" Width="51px">System</asp:Label></p>
</td>
<td style="width: 86px" nowrap width="86" height="21">
<p align="left">
<asp:Label ID="lblVendor" runat="server" CssClass="reportOption" Width="88px">Select Vendor</asp:Label></p>
</td>
<td>
<asp:Label ID="lblRegion" runat="server" CssClass="reportOption" Width="77px">Select Region</asp:Label>
</td>
<td>
<asp:Label ID="lblNode" runat="server" CssClass="reportOption" Width="80px">Select Node</asp:Label>
</td>
<td>
<asp:Label ID="lblRouteType" runat="server" CssClass="reportOption" Width="91px"
Visible="False">Select Route Type</asp:Label>
</td>
<td>
<asp:Label ID="lblRoute" runat="server" CssClass="reportOption" Width="80px">Select Route</asp:Label>
</td>
<td>
<asp:Label ID="lblUtil" runat="server" CssClass="reportOption" Width="80px">Enter Utilization > than</asp:Label>
</td>
</tr>
<tr>
<td width="51">
<asp:DropDownList ID="ddlDomain" runat="server" CssClass="reportOption" Width="89px"
AutoPostBack="True">
<asp:ListItem>National</asp:ListItem>
<asp:ListItem>International</asp:ListItem>
<asp:ListItem>[All]</asp:ListItem>
</asp:DropDownList>
</td>
<td width="51">
<asp:DropDownList ID="ddlSystem" runat="server" CssClass="reportOption" Width="55px"
AutoPostBack="True">
<asp:ListItem>NNN</asp:ListItem>
<asp:ListItem>III</asp:ListItem>
<asp:ListItem>TTT</asp:ListItem>
</asp:DropDownList>
</td>
<td width="50">
<asp:DropDownList ID="ddlVendor" runat="server" CssClass="reportOption" Width="91px"
AutoPostBack="True">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlRegion" runat="server" CssClass="reportOption" Width="80px"
AutoPostBack="True">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlNode" runat="server" CssClass="reportOption" Width="80px"
AutoPostBack="True">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlRouteType" runat="server" CssClass="reportOption" Width="80px"
Visible="False">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlRoute" runat="server" CssClass="reportOption" Width="80px">
</asp:DropDownList>
</td>
<td>
<asp:TextBox ID="tbUtil" runat="server" CssClass="reportOption" Height="20px" Width="51px">0.0</asp:TextBox>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
And yes the script manager is there too..
<asp:ScriptManager ID="AjaxScriptManagerforDDL" runat="server">
</asp:ScriptManager>
This code is fine, you have placed your dropdowns in update panel, and all your dropdowns are Autopostback=true.
Clearly when you select any value from dropdownlist, page should not get refreshed. Thats what is happening with this code.
I created a aspx page, added a script manager, and then added your code, its working fine.

How to keep Content inside Image Map Area

So here's what I'm working with: http://shaneboland.com/ms2/contact.html
but this is what I want: http://shaneboland.com/ms2/test.jpg
I have one div that contains my form:
<div id="wrapper">
<div id="content-pad">
<div id="mid-col-wide">
<form name="contactform" method="post" action="contact/send_form_email.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Message *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div><!-- //mid-col -->
</div><!-- //content-pad -->
</div><!-- //wrapper -->
and then I have a separate div that contains an image map with multiple links:
<div align="center">
<img name="emp" src="contact/main.jpg" usemap="#ep" alt="Mammal Swag" width="940" height="801" border="0"/>
<map name="ep">
<area shape="poly" coords="20,144,176,159,183,222,42,223,20,144" href="about.html" onMouseOver="changeabout()" onMouseOut="changemain()"/>
<area shape="poly" coords="49,228,184,228,192,289,118,315,36,265,49,228" href="index.html" onMouseOver="changecontact()" onMouseOut="changemain()"/>
<area shape="poly" coords="675,639,692,607,773,607,754,713,693,712,675,639" href="http://www.facebook.com/MammalSwag" onMouseOver="changefacebook()" onMouseOut="changemain()"/>
<area shape="poly" coords="185,159,370,149,320,243,199,285,185,159" href="index.html" onMouseOver="changehome()" onMouseOut="changemain()"/>
<area shape="poly" coords="821,536,877,626,766,694,779,606,821,536" href="http://www.twitter.com/MammalSwag" onMouseOver="changetwitter()" onMouseOut="changemain()"/>
</map>
</div>
I want to make it so that my contact form div, stays positioned inside that big green space. So when the window is resized, the contact form div, is still in the same spot INSIDE of the green space.
How do I make my contact form div resize with my image map?

Images in an email is not displaying in IE

I have created an HTML email for a client, who then asked me to post it to their server for viewing on the web. It is a basic table layout with images and some links.
Everything appears to work in all major email clients, as well as Chrome, Safari, and Firefox. However, All versions of IE simply do not display the images. You can see the site here.
http://poweredbyprofessionals.com/email/2012-10-MRF/
I verified that the images are RGB and not CMYK, as well as ran it through a validator. Nothing seems to fix the issue. Any ideas?
Solution
Replace width="auto" and height="auto" by the real width and height.
Demo
http://jsfiddle.net/yrVsL/1/
Code modified
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">
<font color="#005697" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:36px;">
<strong> Join Us!! <br/></strong>
</font>
<font color="#008754" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;">
<strong>Wings of Hope for Melanoma</strong><br />
a fundraising gala to benefit the <br />
Melanoma Research Foundation<br /><br />
</font>
<font color="#000" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;">
<strong> Thursday, October 11, 2012<br/>
6:00 PM to 10:00 PM<br />
Gotham Hall <br />
1356 Broadway, New York<br /><br />
</strong>
<strong>Click here for more information, to purchase tickets or make a donation!</strong>
</font>
</td>
</tr>
<tr>
<td>
<a href="http://www.poweredbyprofessionals.com/melanoma/Purchase.html" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-1.jpg" alt="Slice-1" width="550" height="257" />
</a>
</td>
</tr>
<tr>
<td>
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-2.jpg" alt="Slice-2" width="550" height="446" />
</td>
</tr>
<tr>
<td>
<table style="border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-4.jpg" alt="Slice-4" width="275" height="99" />
</td>
<td>
<a href="http://www.poweredbyprofessionals.com/melanoma/Purchase.html" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-3.jpg" alt="Slice-3" width="275" height="99" />
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-5.jpg" alt="Slice-5" width="550" height="319" />
</td>
</tr>
<tr>
<td>
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-6.jpg" alt="Slice-2" width="550" height="99" />
</td>
</tr>
<tr>
<td>
<a href="http://www.poweredbyprofessionals.com/melanoma/Purchase.html" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-7.jpg" alt="Slice-1" width="550" height="99" />
</a>
</td>
</tr>
<tr>
<td>
<table style="border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.poweredbyprofessionals.com" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-8.jpg" alt="Slice-3" width="180" height="87" />
</a> </td>
<td>
<a href="http://www.melanoma.org" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-9.jpg" alt="Slice-3" width="180" height="87" />
</a>
</td>
<td>
<a href="http://www.stanadler.com" target="_blank">
<img style="display: block;" src="http://poweredbyprofessionals.com/email/2012-10-MRF/images/Slice-10.jpg" alt="Slice-3" width="180" height="87" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

PrimeFaces Ajax

I am trying to make login with jsf.
I want to hide login panel when user registered.
I did this with jsf ajax.
When I try to do this with primefaces. I am failed.
I triy in jsf ajax like this.
<h:form id="register">
<table style="width: 49%; margin-right: auto; margin-left: auto;">
<tr>
<td colspan="3">
All fields are required.</td>
</tr>
<tr>
<td class="style2" style="height: 51px">Username</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regusername" style="width:155px;height:24px;"
value="#{userRegister.regUser.username}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Name</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regname" style="width:155px;height:24px;"
value="#{userRegister.regUser.name}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Mail</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regmail" style="width:155px;height:24px;"
value="#{userRegister.regUser.mail}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Password</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px">
<h:inputSecret
id="regpassword" style="width:155px;height:24px;"
value="#{userRegister.regUser.password}">
</h:inputSecret></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="style3"><h:commandButton
style="width:76px;height:26px" value="Clear" type="reset">
</h:commandButton> <h:commandButton style="width:75px;height:26px"
value="Register" action="#{userRegister.register()}"
method="post">
<f:ajax execute="regname regusername regpassword regmail"
render="registermessage" />
</h:commandButton></td>
</tr>
<tr>
<td colspan="3"><h:outputText id="registermessage"
value="#{userRegister.message}"></h:outputText></td>
</tr>
</table>
</h:form>
</h:panelGroup>
<h:panelGroup rendered="#{userLogin.isLoggedin()== true}"
layout="block">
You are already loggedin !!
</h:panelGroup>
When ı try this in primefaces like this:
<p:panel id ="registerPanel" header="User Registration" align="center"
style="text-align:center;">
<table style="width: auto; margin: auto;">
<tr>
<td style="text-align: right;"><h:outputLabel for="regname"
value="Name Surname : * " /></td>
<td style="text-align: left"><p:inputText id="regname"
value="#{userRegister.regUser.name}" size="40" required="true"
label="Name and Surname">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regname" value="Name Surname" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regname" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel
for="regusername" value="Username : * " /></td>
<td style="text-align: left"><p:inputText id="regusername"
value="#{userRegister.regUser.username}" size="40"
required="true" label="Username">
<f:validateLength minimum="3" />
</p:inputText> <p:watermark for="regusername" value="Username" /></td>
</tr>
<tr>
<td style="text-align: riht" colspan="2"><p:message
for="regusername" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="regmail"
value="E-Mail : * " /></td>
<td style="text-align: left"><p:inputText id="regmail"
value="#{userRegister.regUser.mail}" size="40" required="true"
label="Mail">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regmail" value="mail#example.com" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regmail" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="paswword"
value="Password : * " /></td>
<td style="text-align: left"><p:password id="regpassword"
value="#{userRegister.regUser.password}" size="40"
required="true" label="Password">
<f:validateLength minimum="5" />
</p:password> <p:watermark for="regpassword" value="Password" /></td>
</tr>
<tr>
<td style="text-align: left" colspan="2"><p:message
for="regpassword" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
</td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
<p:commandButton value="Clear" image="ui-icon ui-icon-arrowrefresh-1-w"
type="reset"/>
<p:commandButton value="Register" image="ui-icon ui-icon-disk"
action="#{userRegister.register()}" method="post">
<f:ajax
render="registerpaneli" />
</p:commandButton>
</td>
</tr>
</table>
-->
</h:panelGroup>
I registraion panel cant hiden.
What is the problem ?
Remove the
<p:commandButton ....>
<f:ajax render="what-ever">
</p:commandButton>
By
<p:commandButton update="what-ever" ../>
Furthermore, you can read Primefaces' Document and its demo.
Because in Primefaces, most components are compatible with Ajax, especially <p:commandButton/> because it has Ajax turned on by default.
In PrimeFaces, <p:commandButton> already has built-in ajax functionality. You don't need to use <f:ajax>. In fact, <f:ajax> cannot be used with PrimeFaces. If you really need to use it, you must use <p:ajax> instead.
To fix your issue, I think you should change you button like this:
<p:commandButton value="Register" actionListener="#{userRegister.register}" update="registerPanel" />

Resources