Develop Reference

Style aspx navigationmenu with submenu on hover

This is how my menu looks like:
I tried to change the width of the SUB1 button but failed. SUB2 has the right width but should be on the left. I think I'm missing a CSS class for the submenu. The menu should look like this:
I tried around changing the ul li and a in the site.css but can't reach the goal.
aspx:
<asp:Menu ID="StartMenu" runat="server" CssClass="menuStart" EnableViewState="false"
IncludeStyleBlock="true" Orientation="Horizontal" RenderingMode="List"
StaticEnableDefaultPopOutImage="false" StaticSelectedStyle-BackColor="#b90276">
<StaticMenuItemStyle HorizontalPadding="20" VerticalPadding="10" />
<Items>
<asp:MenuItem Text="ITEM1" >
<asp:MenuItem Text="SUB1"></asp:MenuItem>
<asp:MenuItem Text="SUB2"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="ITEM2"></asp:MenuItem>
</Items>
<StaticSelectedStyle BackColor="#B90276"></StaticSelectedStyle>
</asp:Menu>
div.menuStart {
padding: 16px 16px 16px 16px;
}
div.menuStart ul {
background-color: #cccccc;
}
div.menuStart a,
a:visited {
background-color: #7d8790;
border-top: 4px #ffffff solid;
border-right: 4px #ffffff solid;
border-bottom: 4px #ffffff solid;
border-left: 4px #ffffff solid;
color: #ffffff;
display: normal;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
font: "Verdana";
font-size: 20px;
}
div.menuStart li~li {
padding-left: 100px;
}
div.menuStart ul li a:hover {
background-color: #b90276;
color: #ffffff;
text-decoration: none;
}
div.menuStart ul li a:active {
background-color: #b90276;
color: #ffffff;
text-decoration: none;
}
<div class="menuStart" id="MainContent_StartMenu" style="float: left;">
<ul class="level1 static" tabindex="0" role="menubar" style="position: relative; width: auto; float: left;">
<li class="has-popup static" aria-haspopup="MainContent_StartMenu:submenu:21" role="menuitem" style="position: relative; float: left;"><a class="level1 static" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM1')" tabindex="-1">ITEM1</a>
<ul class="level2 dynamic" id="MainContent_StartMenu:submenu:21" style="display: none; position: absolute; top: 100%; left: 0px;">
<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dynamic" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM1\\SUB1')" tabindex="-1">SUB1</a></li>
<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dynamic" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM1\\SUB2')" tabindex="-1">SUB2</a></li>
</ul>
</li>
<li role="menuitem" class="static" style="position: relative; float: left;"><a class="level1 static" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM2')" tabindex="-1">ITEM2</a></li>
<li class="has-popup static" aria-haspopup="MainContent_StartMenu:submenu:26" role="menuitem" style="position: relative; float: left;"><a class="level1 static" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM3')" tabindex="-1">ITEM3</a>
<ul class="level2 dynamic" id="MainContent_StartMenu:submenu:26" style="display: none; position: absolute; top: 100%; left: 0px;">
<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dynamic" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM3\\SUB1')" tabindex="-1">SUB1</a></li>
<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dynamic" href="#" onclick="__doPostBack('ctl00$MainContent$StartMenu','ITEM3\\SUB2')" tabindex="-1">SUB2</a></li>
</ul>
</li>
</ul>
</div>

Only one UpdatePanel triggered by JavaScript updated the content

I have two update panel which I triggered in javascript. After I run the code, only the second Panel's content is updated. Here is MyCode.
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">
<div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox1TargetLabel" runat="server" />:
<asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox1TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">
<div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox2TargetLabel" runat="server" />:
<asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox2TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I triggered code behind using javascript, however, after run the code, only the second is updated.
<script>
$(document).ready(function () {
$("#ContentPlaceHolder1_PaperContent_Button1").click();
$("#ContentPlaceHolder1_WaterContent_Button1").click();
});
</script>
But I want both UpdatePanel be updated. What can I do to enable both updatepanel be updated?

If you can, change the UpdateMode of the 2nd panel:
UpdateMode="Always"
then remove the 2nd .click() in the javascript. The 2nd panel should update when the first panel updates (when a postback happens).
If you can't use Always, you can add an OnLoad event to the 2nd panel and move any code you have to that event. When a postback happens the 2nd panel will always reload and the code will fire.
Hth.

Complete border on page of print of Web page

I am having a web page and on button of print.
when i click on that button i am trying to print that web page
Here is my button
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="Cancel" AlternateText="Print"
ImageUrl="~/admin/images/print_btn.png" OnClientClick='javascript:window.print();' />
My web page contains more than 3 print page. I have set a border on Media Print.
but it is not working properly.
there is only one bottom border that is at the last page.
I need borders on each page of print.
Is it possible using javascript or jquery?
if it is possible using c# then also let me know
here is my code
<style type="text/css">
#media print
{
.TblBorder
{
border-collapse: collapse;
border: solid 1px black;
}
.TblBorder td
{
border: solid 1px black;
}
.TblBorder th
{
border: solid 1px black;
}
}
</style>
<table width="100%" cellpadding="8" cellspacing="2">
<tr class="printable">
<td colspan="3" align="center" style="color: Black; font-family: Calibri; font-size: 18px;
font-weight: bold">
<asp:Label ID="lblHeading" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr class="non-printable" visible="false" runat="server" id="trPrintPlantandMachinery">
<td colspan="3" align="left">
<asp:LinkButton ID="lnkbtnPlantMachinery" runat="server" CssClass="left_panel" Text="<b>1. Download & Print Plant & Machinery List</b>"
OnClick="lnkbtnPlantMachinery_Click" Font-Underline="true"></asp:LinkButton>
</td>
</tr>
<tr class="printable">
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="49%">
Date of Visit the Enterprise
</td>
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="1%">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="txtDateofVisit" runat="server"></asp:Label>
</td>
</tr>
<tr class="printable">
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="49%">
Application Number
</td>
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="1%">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="lblApplicationNo" runat="server" Text="-"></asp:Label>
</td>
</tr>
<tr class="printable">
<td width="49%" style="font-family: calibri; font-size: 14px; font-weight: bold;
color: Black;">
Scheme Name
</td>
<td width="1%" style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="lblSchemeName" runat="server"></asp:Label>
</td>
</tr>
<tr class="printable">
<td width="49%" style="font-family: calibri; font-size: 14px; font-weight: bold;
color: Black;">
Name of Enterprise
</td>
<td width="1%" style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="lblUnitName" runat="server" Text="-"></asp:Label>
</td>
</tr>
<tr class="printable">
<td width="49%" style="font-family: calibri; font-size: 14px; font-weight: bold;
color: Black;">
Enterprise Address
</td>
<td width="1%" style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="lblIndustryUnitAddress" runat="server" Text="-"></asp:Label>
</td>
</tr>
</table>
<table width="100%" cellpadding="5" cellspacing="2" border="0">
<tr>
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="49%">
Constitution of The Unit
</td>
<td style="font-family: calibri; font-size: 14px; font-weight: bold; color: Black;"
width="1%">
:
</td>
<td width="50%" style="font-family: calibri; font-size: 15px; font-weight: bold;">
<asp:Label ID="lblConstitutionUnit" runat="server" Text="-"></asp:Label>
</td>
</tr>
<tr>
<td style="font-family: calibri; font-size: 16px; font-weight: bold; color: Black"
colspan="3">
<u>Entrepreneur's Profile Details</u>
</td>
</tr>
</table>

How to Reopen pure CSS3 modal dialog

I have following Modal Dialog (popup) using only CSS3 in my asp page for user registration:
HTML :
<%-- Modal PopUp starts here--%>
<div id="openModal" class="modalDialog">
<div> X
<table style="width:100%;">
<tr>
<td style="text-align: center; width: 100%;"></td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<asp:Label ID="lblErrorMSG2" runat="server" Font-Bold="True" ForeColor="#FF3300" Text="Email ID Already Taken " Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustFName" name="txtCustFName" type="text" required placeholder="Enter Your First Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustLName" name="txtCustLName" type="text" required placeholder="Enter Your Last Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustREmail" name="txtCustREmail" type="email" required placeholder="Enter Valid Email ID" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRPwd" name="txtCustRPwd" type="password" required placeholder="Enter Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRePwd" name="txtCustRePwd" type="password" required placeholder="ReType Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustPh" name="txtCustPh" type="number" size="10" min="10" max="10" required placeholder="Enter Valid Mobile No" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td class="style1" style="text-align: center; width: 100%;" onclick="btnSignUp()">
<asp:Button ID="btnSingUp" runat="server" onclick="signUp" Text="Login" />
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;"> </td>
</tr>
</table>
</div>
</div>
<%--Modal PopUp Ends Here--%>
CSS :
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;}
.close:hover { background: #00d9ff;
}
In my asp page I've following anchor tag which is used to display the popup:
Register
Now the problem is:
As this is registration form, I want server side validation of existing email id .
If user entered email id already exist in DB I want to reopen the above modal dialog with an error message Email ID already exist.
I m not able to reopen that dialog box.
Is there any way to do this using js?
Plz help me.
The tutorial for modal dialog is on site:
click here
For visualizing modal dialog:
click here
Thanx in advance.

for server side validation I suggest you to use javascript web method for this. By using this web method your popup didn't close while page check server side validation.....

Change the :target to also accept a class:
.modalDialog:target, .modalDialog.target {
opacity:1;
pointer-events: auto;
}
And then when you find out the email is invalid, you can just do:
$('.modalDialog').addClass('target')
or the non-jquery equivalent.

Implement a html-widget (form) into an asp-site

I try to implement the following widget in my asp.net-site:
<div style="width: 175px; margin: 0px; padding: 0px; text-align: right; background-color:#FFFFFF;">
<img src="http://fahrplan.sbb.ch/img/igm-sbblogo.gif" width="110" height="18" alt="SBB|CFF|FFS" />
<h1 style="width:175px; background-color: #DDDDDD; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; padding: 2px 0px; margin: 0; height: 15px; text-align: left;clear:both;"> Fahrplan</h1>
<div style="width: 100%; background-color: #F8F8F8; margin: 0; padding: 0px;" summary="Layout">
<form action="http://fahrplan.sbb.ch/bin/query.exe/dn?externalCall=yes&DCSext.wt_fp_request=partner_mini" name="formular" method="post" style="display:inline" target="_blank">
<input type="hidden" name="queryPageDisplayed" value="yes">
<table cellspacing="0" cellpadding="4" style="width: 170px; margin: 2px;" class="ig">
<tr>
<th nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; font-weight:bold; width: 55px;">
Von:
</th>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;" colspan="2">
<input type="hidden" name="REQ0JourneyStopsSID" value="A=1#O=Stettbach, Bahnhof#X=8596132#Y=47397270#U=85#L=008591065#B=1#p=1338878028#">
<span style="font-weight:bold;">Stettbach, Bahnhof</span>
</td>
</tr>
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;">
<select name="REQ0JourneyStopsZA" style="background-color:#fff; border: 1px solid #7F9DB9; color: #000; width: 60px; font-size:11px; margin:0px 0px;">
<option selected="selected" value="7">Nach:</option>
<option value="1">Bhf./Haltest.</option>
<option value="2">Ort, Strasse Nr.</option>
<option value="4">Sehenswürdigkeit</option>
</select>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;" colspan="2">
<input type="text" name="REQ0JourneyStopsZG" value="" size="16" style="background-color:#fff; border: 1px solid #7F9DB9; color: #000; width: 100px; height: 18px; font-size: 11px" accesskey="t" tabindex="2">
<input type="hidden" name="REQ0JourneyStopsZID">
</td>
</tr>
<tr>
<th nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; font-weight:bold; width: 55px;">
Datum:
</th>
<td nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;">
<b>08.06.12</b>
<input type="hidden" name="REQ0JourneyDate" value="08.06.12" accesskey="d">
</td>
</tr>
<tr>
<th nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; font-weight:bold; width: 55px;">
Zeit:
</th>
<td nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;">
<input type="text" name="REQ0JourneyTime" value="11:02" size="5" maxlength="5" style="background-color:#fff; border: 1px solid #7F9DB9; color: #000; width: 100px; height: 18px; font-size: 11px" accesskey="c" tabindex="4">
</td>
</tr>
<tr>
<th> </th>
<td nowrap="nowrap" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; vertical-align:middle; padding:2px 3px 2px 0px;">
<input class="radio" type="radio" name="REQ0HafasSearchForw" value="1" checked style="margin-right:3px;">Abfahrt
<br /><input class="radio" type="radio" name="REQ0HafasSearchForw" value="0" style="margin-right:3px;">Ankunft
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;">
<input type="hidden" name="start" value="Suchen">
<input type="submit" name="start" value="Verbindung suchen" tabindex="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; width:130px; vertical-align: middle; cursor:pointer; -moz-border-radius: 3px 3px 3px 3px; background-color:#EE0000; border:1px solid #B20000; color:#FFFFFF; font-weight:bold; height:auto; line-height:20px; padding:0px 10px; text-decoration:none; white-space:nowrap;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;">
<a style="font-family:Arial,Helvetica,sans-serif; font-size:12px; text-align:left; margin-top:4px; color: #6B7786; text-decoration:none; display:block;" href="http://www.sbb.ch/166" target="_blank" title="Aktuelle Informationen zu Streiks und grösseren Unterbrüchen im Schienenverkehr."><img src="http://fahrplan.sbb.ch/img/one/icon_arrow_right.png" alt="" style="vertical-align:top; padding-right:2px; border:none;" />Bahnverkehrsinformation</a>
</td>
</tr>
</table>
</form>
</div>
</div>
<script language="JavaScript1.2" type="text/javascript">
/* <![CDATA[ */
var time=new Date();
var hour = time.getHours(); hour=(hour<10)? '0'+hour:hour;
var minute = time.getMinutes();minute=(minute<10)? '0'+minute:minute;
var travelTime = hour+':'+minute;
document.formular.REQ0JourneyTime.value=travelTime;
// /* ]]> */
</script>
Source of the code: http://fahrplan.sbb.ch/bin/help.exe/en?application=INPUTGEN&tpl=inputgen_start
When I create a normal HTML-site the widget works without problems.
But in an asp-site there is a problem with the javascript.
In the line "document.formular.REQ0JourneyTime.value=travelTime;" there comes this error-message:
"JScript runtime error: The property "REQ0JourneyTime" can not be retrieved value: The object is null or undefined."
I think the problem has something to do with the form-tag of the widget ands the post-action, but I doent know, what exactly it is :S
Does somebody know how to fix that issue? Thank you very much!
Michael

You should probably be accessing the form by document.forms.formular or document.forms['formular'], not document.formular.
Also, on the end of the <input ... name="REQ0JourneyTime" ... /> you have > not />.

I think you have nested an HTML form inside your ASPX server-side form tag.
Form tag on ASP.net page
You could try using AJaX within your widget rather than posting back via traditions form.
Read this article too: http://msdn.microsoft.com/en-us/magazine/cc164151.aspx