I have a calender control on my page. It is a popup control, meaning when I click on calender image then it opens up. But the problem is when I am changing the month, it becomes invisible due to stylesheet rule. which is following. -
#datePicker
-
{
-
display:none;
-
position:absolute;
-
border:solid 2px black;
-
background-color:white;
-
}
-
and the calender is following -
<img src="Calendar.gif" onclick="displayCalendar()" />
-
-
<div id="datePicker">
-
<asp:Calendar
-
id="calEventDate"
-
OnSelectionChanged="calEventDate_SelectionChanged"
-
Runat="server" />
-
</div>
-
-
function displayCalendar()
-
{
-
var datePicker = document.getElementById('datePicker');
-
datePicker.style.display = 'block';
-
}
-
Can I change style sheet rule dynamically in the page load postback event, so when the month changes I can make display:"block" instead of "none".
4 2319
You can do one thing, create another CSS class for display image and assign that css class using javascript to datePicker
Frinavale 9,735
Recognized Expert Moderator Expert
Change the <div> that contains the Calendar into a Panel.
When the month is changed set the style of the panel to display:block.
You'll have to change your JavaScript so that it uses the Panel's ClientID. Sometimes when the Panel is rendered in the browser (as a <div>) it's given a different ID than the one you gave it in your .NET code. The reason is because the ID has to be unique....so if you're using MasterPages or User Controls this is changed in order to meet this requirement.
Please note that I'm using VB.NET in the following example...let me know if you're using C#... -
<img src="Calendar.gif" onclick="displayCalendar()" />
-
-
<asp:Panel Id="datePicker" runat="server">
-
<asp:Calendar
-
id="calEventDate"
-
OnSelectionChanged="calEventDate_SelectionChanged"
-
Runat="server" />
-
</asp:Panel>
-
-
function displayCalendar()
-
{
-
var datePicker = document.getElementById('<%= datePicker.ClientID %>');
-
datePicker.style.display = 'block';
-
}
-
In your .net code you'd have: -
Private displayCalEventDate As Boolean = False 'indicates whether or not to display the panel containng the calendar on postback
-
-
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
-
-
If IsPostBack = True Then
-
'Retrieving whether or not to display the panel containing the calanedar
-
'from ViewState... it's saved there in the PreRender event.
-
displayCalEventDate = Ctype(ViewState("displayCalEventDate"), Boolean)
-
End If
-
-
End Sub
-
-
Protected Sub calEventDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) Handles calEventDate.SelectionChanged
-
displayCalEventDate = True
-
End Sub
-
-
Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
-
'The PreRender event happens just before the page is sent to the browser
-
'Here Check to see if the calendar's style should be changed to display
-
'And save the value for next time (I'm using ViewState here but you don't have to)
-
-
ViewState("displayCalEventDate") = displayCalEventDate
-
If displayCalEventDate Then
-
datePicker.style.Remove("display")
-
datePicker.style.Add("display", "block")
-
End If
-
End Sub
Cheers!
-Frinny
This is what I have and it is working. -
<img alt="" src="<%=Page.resolveUrl("~/images/Calendar.gif")%>" onclick="displayCalendar('startDate')" />
-
<div id="startDate">
-
<asp:Calendar
-
id="calEventDate"
-
OnSelectionChanged="calEventDate_SelectionChanged"
-
Runat="server" BackColor="#6DB523" BorderColor="#FFCC66" BorderWidth="1px"
-
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
-
ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px" >
-
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
-
<SelectorStyle BackColor="#FFCC66" />
-
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
-
<OtherMonthDayStyle ForeColor="white" />
-
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
-
<DayHeaderStyle BackColor="#41498A" Font-Bold="True" Height="1px" ForeColor="White" />
-
<TitleStyle BackColor="#FC5B04" Font-Bold="True" Font-Size="9pt"
-
ForeColor="#FFFFCC" />
-
</asp:Calendar>
-
</div>
-
-
<img alt="" src="<%=Page.resolveUrl("~/images/Calendar.gif")%>" onclick="displayCalendar('endDate')" />
-
<div id="endDate">
-
<asp:Calendar
-
id="calEndDate"
-
OnSelectionChanged="calEventDate_SelectionChanged"
-
Runat="server" BackColor="#6DB523" BorderColor="#FFCC66" BorderWidth="1px"
-
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
-
ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px" >
-
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
-
<SelectorStyle BackColor="#FFCC66" />
-
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
-
<OtherMonthDayStyle ForeColor="white" />
-
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
-
<DayHeaderStyle BackColor="#41498A" Font-Bold="True" Height="1px" ForeColor="White" />
-
<TitleStyle BackColor="#FC5B04" Font-Bold="True" Font-Size="9pt"
-
ForeColor="#FFFFCC" />
-
</asp:Calendar>
-
</div>
-
-
<!-- Following conditional statement is used to check which calender month was changed -->
-
<%
-
If Session("calName") = "calEndDate" Then
-
%>
-
<script type="text/javascript">
-
var datePicker = document.getElementById("endDate");
-
datePicker.style.display = "block";
-
</script>
-
<%
-
ElseIf Session("calName") = "calStartDate" Then
-
%>
-
<script type="text/javascript">
-
var datePicker = document.getElementById("startDate");
-
datePicker.style.display = "block";
-
</script>
-
<%
-
End If
-
%>
-
-
<!-- This is what I have in vb file -->
-
-
Protected Sub calEndDate_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calEndDate.VisibleMonthChanged
-
Session("calName") = "calEndDate"
-
End Sub
-
-
Protected Sub calEventDate_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calEventDate.VisibleMonthChanged
-
Session("calName") = "calStartDate"
-
End Sub
-
And this is in the javascript -
function displayCalendar(calID) {
-
var datePicker = document.getElementById(calID);
-
var notClickedCalenderName = (calID == "startDate" ? notClickedCalenderName = "endDate" : notClickedCalenderName = "startDate");
-
var notClickedCalender = document.getElementById(notClickedCalenderName);
-
-
if (datePicker.style.display.indexOf("block") > -1) {
-
datePicker.style.display = 'none';
-
}
-
else {
-
datePicker.style.display = 'block';
-
notClickedCalender.style.display = 'none';
-
}
-
}
-
Please let me know if there is difference in our approach.
Frinavale 9,735
Recognized Expert Moderator Expert
Well that works too :)
My solution uses less JavaScript than yours does but both will get the job done :)
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Jeff Thies |
last post by:
I have a number of elements of "some-class".
I'd like to change the styles of some-class:
from
..some-class{color: red; display: block}
to
|
by: Raghuram Banda |
last post by:
Hi all,
I've created a table with Table Header and the table may or may not
contain any rows initially.
I've included a .css file in <head> section of my HTML script and I'm
creating rows to the table
dynamically using JavaScript (using DOM), and the problem is those
created bby DOM are not
following style sheet rules applicable for table rows and cells. But the
rows created from within
|
by: Jacqueline |
last post by:
Hi,
I would like to be able to write some code in Javascript preferably
(PHP is also all right) which allows the admin of a website to be able
to change stylesheet attributes from a GUI browser interface without
having them to change the text file themselves. (i.e., working on the
supposition that the admin is IT illiterate). Simple things like
table heading colours, backgrounds, font sizes need to be changed this
way.
|
by: Andrew Poulos |
last post by:
I'm trying to change a style in a stylesheet. The following code works
in FF, MZ, and IE6 but IE 5 gives the error of "invalid procedure call
or argument":
var oStyleSheet = window.document.styleSheets.imports;
oStyleSheet.addRule("td","font-size:1.2em;");
Is there a way to do this with IE 5?
Andrew Poulos
|
by: Valerian John |
last post by:
Hi, folks:
I am looking for a way to switch stylesheets for our webforms.
We want to have a default stylesheet and then allow the user to pick from a
list of pre-defined stylesheets.
The user's choice will be stored in the database in the user's profile and
all the pages/webforms must use the user's stylesheet selection.
TIA,
Val
| |
by: RAM |
last post by:
Hello,
I am learning .NET 2.0. I have written simple ASP.NETapplication. I would
like to change password rules, so I added to web.config:
<membership defaultProvider="AspNetSqlMembershipProvider"
userIsOnlineTimeWindow="20">
<providers>
|
by: Jeff |
last post by:
Often, a page will have more than one stylesheet. Some external and
some embedded.
If there are multiple rules that have *identical* selectors, will the
last one always take precedence? Any known instances where this is not true?
#section_1 DIV{color: red}
^^^^^^^^^^^^^^
By selector I meant that part. And I mean identical selectors.
|
by: Shalini Bhalla |
last post by:
How can I modify external stylesheet by valuses i m getting from any oher page
<style type="text/css">
.heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #666699;
text-decoration: none;
font-style: normal;
font-weight: bolder;
|
by: _Who |
last post by:
I use the code below to change to a style sheet that has:
body
{
....
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
| |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |