JavaScript - Create Calendar Textfields Onclick Problem In Firefox

Hello all,

I'm trying to set up a web page to display a video when a user clicks on a link. So far, it works fine in IE and Chrome, but it won't work in Firefox. Any ideas?

http://tinyurl.com/6u3jnq5

I am using the following script to have a calander displayed in my form. It displays a calender on which a user can select a date. If the date is a friday, something else should happen in the form than when selecting other days (see final 15 lines, no need to be specific).

The problem is that the code only works for months with 30 days in it.
E.g. The september month works fine, when a friday is selected (javascript:setCalendarControlDate(2009,9,25)) the correct changes occur.

For the October month (31 days) the same changes that occur correct in september occur in october when selecting thursday, but these should be when selecting friday instead!

For November (30 days) everything works fine again, but then for December (31 days) the changes occur again at thursday instead of friday

For February (2010) I need to select sunday to get the needed changes.

Like I said, I think it has something to do with the amount of days in a month. Since the code works fine on months with 30 days, but not on months with other amounts of days.

Can anyone tell me what's wrong in the code?

Code:

function positionInfo(object)
{	var p_elm = object;

	this.getElementLeft = getElementLeft;
	function getElementLeft()
	{	var x = 0;
		var elm;
		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		while (elm != null)
		{	x+= elm.offsetLeft;
			elm = elm.offsetParent;
		}
		return parseInt(x);
	}

	this.getElementWidth = getElementWidth;
	function getElementWidth()
	{	var elm;
		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		return parseInt(elm.offsetWidth);
	}

	this.getElementRight = getElementRight;
	function getElementRight()
	{	return getElementLeft(p_elm) + getElementWidth(p_elm);
	}

	this.getElementTop = getElementTop;
	function getElementTop()
	{	var y = 0;
		var elm;
		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		while (elm != null)
		{	y+= elm.offsetTop;
			elm = elm.offsetParent;
		}
		return parseInt(y);
	}

	this.getElementHeight = getElementHeight;
	function getElementHeight()
	{	var elm;
		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		return parseInt(elm.offsetHeight);
	}

	this.getElementBottom = getElementBottom;
	function getElementBottom()
	{	return getElementTop(p_elm) + getElementHeight(p_elm);
	}
}


function CalendarControl()
{	var calendarId = 'CalendarControl';
	var currentYear = 0;
	var currentMonth = 0;
	var currentDay = 0;

	var selectedYear = 0;
	var selectedMonth = 0;
	var selectedDay = 0;

	var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	var dateField = null;

	function getProperty(p_property)
	{	var p_elm = calendarId;
		var elm = null;
		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		if (elm != null)
		{	if(elm.style)
			{	elm = elm.style;
				if(elm[p_property])
				{	return elm[p_property];
				}
				else
				{	return null;
				}
			}
			else
			{	return null;
			}
		}
	}

	function setElementProperty(p_property, p_value, p_elmId)
	{	var p_elm = p_elmId;
		var elm = null;

		if(typeof(p_elm) == "object")
		{	elm = p_elm;
		}
		else
		{	elm = document.getElementById(p_elm);
		}
		if((elm != null) && (elm.style != null))
		{	elm = elm.style;
			elm[ p_property ] = p_value;
		}
	}

	function setProperty(p_property, p_value)
	{	setElementProperty(p_property, p_value, calendarId);
	}

	function getDaysInMonth(year, month)
	{	return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
	}

	function getDayOfWeek(year, month, day)
	{	var date = new Date(year,month-1,day)
		var DayOfWeek = date.getDay();
		if(DayOfWeek == 0)
			DayOfWeek = 6;
		else
			DayOfWeek--;
		return DayOfWeek;
	}

	this.setDate = setDate;
	function setDate(year, month, day)
	{	if (dateField)
		{	if (month < 10)	{	month = "0" + month;	}
			if (day < 10)	{	day = "0" + day;		}
			var dateString = day+"-"+month+"-"+year;
			dateField.value = dateString;
			hide();
		}
		return;
	}

	this.changeMonth = changeMonth;
	function changeMonth(change)
	{	currentMonth += change;
		currentDay = 0;
		if(currentMonth > 12)
		{	currentMonth = 1;
			currentYear++;
		}
		else if(currentMonth < 1)
		{	currentMonth = 12;
			currentYear--;
		}
		calendar = document.getElementById(calendarId);
		calendar.innerHTML = calendarDrawTable();
		
	}

		function getCurrentYear()
	{	var year = new Date().getYear();
		if(year < 1900) year += 1900;
		return year;
	}

	function getCurrentMonth()
	{	return new Date().getMonth() + 1;
	} 

	function getCurrentDay()
	{	return new Date().getDate();
	}

	function calendarDrawTable()
	{	var dayOfMonth = 1;
		var validDay = 0;
		var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
		var daysInMonth = getDaysInMonth(currentYear, currentMonth);
		var css_class = null; //CSS class for each day

		var table = "<table cellspacing='0' cellpadding='0' border='0'>";
		table = table + "<tr class='header'>";
		table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a></td>";
		table = table + "  <td colspan='3' class='caltitle'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
		table = table + "  <td colspan='2' class='next'> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
		table = table + "</tr>";
		table = table + "<tr><th>Mon.</th><th>Tues.</th><th>Wed.</th><th>Thurs.</th><th>Fri.</th><th>Sat.</th><th>Sun.</th></tr>";

		for(var week=0; week < 6; week++)
		{	table = table + "<tr>";
			for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++)
			{	if(week == 0 && startDayOfWeek == dayOfWeek)
				{	validDay = 1;
				}
				else if (validDay == 1 && dayOfMonth > daysInMonth)
				{	validDay = 0;
				}
				
				if(validDay)
				{	if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth)
					{	css_class = 'current';
					}
					else if (dayOfMonth == getCurrentDay() && currentYear == getCurrentYear() && currentMonth == getCurrentMonth())
					{	css_class = 'today';
					}
					else if ((dayOfWeek == 5 || dayOfWeek == 6) && (dayOfMonth  > getCurrentDay() || currentMonth > getCurrentMonth() || currentYear > getCurrentYear()))
					{	css_class = 'weekend';
					}
					else
					{	css_class = 'weekday';
					}
					if (((dayOfMonth < getCurrentDay() && currentMonth <= getCurrentMonth()) && currentYear <= getCurrentYear()) || currentYear < getCurrentYear())
					{
					table = table + "<td><span class='dayinpast'>"+dayOfMonth+"</span></td>";
					}
					else
					{
					table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
					}
					dayOfMonth++;
				}
				else
				{	table = table + "<td class='empty'>&nbsp;</td>";
				}
			}
			table = table + "</tr>";
		}

		table = table + "<tr class='header'><th colspan='7' style='padding: 3px; text-align:center;'><a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
		table = table + "</table>";

		return table;
	}

	this.show = show;
	function show(field)
	{	if (dateField == field)
		{	hide();
			return;
		}
		else
		{	dateField = field;
		}
		if(dateField)
		{	try
			{	var dateString = new String(dateField.value);
				var dateParts = dateString.split("-");
        
				selectedDay = parseInt(dateParts[0],10);
				selectedMonth = parseInt(dateParts[1],10);
				selectedYear = parseInt(dateParts[2],10);
			}
			catch(e)
			{}
		}
		if (!(selectedYear && selectedMonth && selectedDay))
		{	selectedMonth = getCurrentMonth();
			selectedDay = getCurrentDay();
			selectedYear = getCurrentYear();
		}
		currentMonth = selectedMonth;
		currentDay = selectedDay;
		currentYear = selectedYear;
		
		
		
		if(document.getElementById)
		{	calendar = document.getElementById(calendarId);
			calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
			setElementProperty('display', 'block', 'CalendarControlIFrame');
			setProperty('display', 'block');
			var fieldPos = new positionInfo(dateField);
			var calendarPos = new positionInfo(calendarId);
			var x = fieldPos.getElementLeft() - document.getElementById('table_left').scrollLeft;
			var y = fieldPos.getElementBottom() - document.getElementById('table_left').scrollTop;
			var w = calendarPos.getElementWidth();
			var h = calendarPos.getElementHeight();
			var ch = document.getElementById('table_left').style.height;
			ch = parseInt(ch.substring(0, ch.length-2)) + 143;
			var cw = document.getElementById('table_left').style.width;
			cw = parseInt(cw.substring(0, cw.length-2)) + 150;
			if(y+h > ch) y = ch - h;
			if(x+w > cw) x = cw - w;
			setProperty('left', x + "px");
			setProperty('top', y + "px");
			setElementProperty('left', x + "px", 'CalendarControlIFrame');
			setElementProperty('top', y + "px", 'CalendarControlIFrame');
			setElementProperty('width', w + "px", 'CalendarControlIFrame');
			setElementProperty('height', h + "px", 'CalendarControlIFrame');
		}
	}

	this.hide = hide;
	function hide()
	{	if(dateField)
		{	setProperty('display', 'none');
			setElementProperty('display', 'none', 'CalendarControlIFrame');
			dateField = null;
		}
		getSelectedDate('cd_pickup_date')
	}
}

var calendarControl = new CalendarControl();
function showCalendarControl(textField)
{	calendarControl.show(textField);
}

function hideCalendarControl()
{	calendarControl.hide();
}

function setCalendarControlDate(year, month, day)
{	calendarControl.setDate(year, month, day);
}

function changeCalendarControlMonth(change)
{	calendarControl.changeMonth(change);
}


document.write("<div id='CalendarControl'></div>");

function getSelectedDate(value)
{

	var selectedDate = document.getElementById('cd_pickup_date').value;
	var selectedDateArray = selectedDate.split("-");
	var convertedDate = new Date(selectedDateArray[2],selectedDateArray[1],selectedDateArray[0]);
	var selectedDay = convertedDate.getDay();
	var weekDay = new Array("Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday");

	
	if(weekDay[selectedDay] == "Friday")
	{
		document.collectionform.cd_saturday[0].checked = true;
		document.collectionform.cd_saturday[0].disabled = false;
		document.collectionform.cd_saturday[1].disabled = true;
		getAlternateAddress('Yes');
	}
	else
	{
		document.collectionform.cd_saturday[1].checked = true;
		document.collectionform.cd_saturday[1].disabled = false;
		document.collectionform.cd_saturday[0].disabled = true;
		getAlternateAddress('No');
	}

}

First of all, thanks for looking!

I'm doing this nonprofit site for a students club in my college, and it needs an event calendar. I just have a bit of touch on javascript, and the only way this is going to be done in is javascript so I'm stuck with it.

I took one of my assignments and modded it to the requirements of them.

1. A 6 month calendar.
problem - I have to get thismonth, check whether its <July,then display Jan to June. Else July to December.(A semester calendar)
figured it out.

2.Want to highlight a specific date, and place a link in it, so when somebody click the date, say a textarea in a form, displays the event details.
problem - Have no idea on how to do it.

Any help on this is warmly welcome !

My calendar.htm file
Code:

<html>
   <head>
   <title>Calendar</title>
      <link href="calendar.css" rel="stylesheet" type="text/css" />
      <script src="calendar.js" type="text/javascript"></script>
   </head>

<body>  
   <div id="main">
      <script type="text/javascript">
	   yearly();
	  </script>
   </div> 
</body>
</html>

My css file

Code:

#yearly_table      {border: 1px solid black; font-size: 8pt; width: 500px;
                    font-family: Arial, Helvetica, sans-serif; background-color: white}

#yearly_title      {color: white; background-color: rgb(223,29,29); letter-spacing: 6; font-size: 12pt}

.yearly_months     {vertical-align: top; border: solid 1px black}

.monthly_table     {font-size: 8pt; width: 100%; background-color: white}

.monthly_title     {background-color: rgb(223,29,29); color: white; letter-spacing: 4}

.monthly_weekdays  {border-bottom: 1px solid black}

.monthly_dates     {text-align: right}

#today             {font-weight: bold; color: rgb(223,29,29); background-color:#999;
                    border: 1px solid black; text-align: center}

My .js file

Code:

tes the month name in the monthly table

   writeDayNames()
      Writes the weekday title rows in the calendar table

   daysInMonth(calendarDay)
      Returns the number of days in the month from calendarDay

   writeMonthDays(calendarDay, currentTime)
      Writes the daily rows in the monthly table, highlighting
      the date specified in the currentTime parameter.

   writeDay(weekDay, dayCount, calendarDay, currentTime)
      Write the opening and close table row tags and the table
      cell tag for an individual day in the calendar.

*/



function yearly(calDate) {
   if (calDate == null) calendarDay=new Date();
   else calendarDay = new Date(calDate);

   var currentTime = calendarDay.getTime();
   var thisYear = calendarDay.getFullYear();
   document.write("<table id='yearly_table'>");
   document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>");

var semMonth=calendarDay.getMonth();
    var monthNum;
   if (semMonth <6) {
	   monthNum = -1 }
	   else {
		   monthNum = 5; }

   for (var i=1; i<=2; i++) {
      document.write("<tr>");
      for (var j=1; j<=3; j++) {
         monthNum++;
         calendarDay.setDate(1);
         calendarDay.setMonth(monthNum);
         writeMonthCell(calendarDay, currentTime);
         }
         document.write("</tr>");
      }
   document.write("</table>");   
}

function writeMonthCell(calendarDay, currentTime) {
   document.write("<td class='yearly_months'>");
   writeMonth(calendarDay, currentTime);
   document.write("</td>");
}

function writeMonth(calendarDay, currentTime) {
   document.write("<table class='monthly_table'>");
   writeMonthTitle(calendarDay);
   writeDayNames()
   writeMonthDays(calendarDay, currentTime);
   document.write("</table>");
}

function writeMonthTitle(calendarDay) {
   var monthName = new Array("January", "February", "March", "April", "May", 
   "June", "July", "August", "September", "October", "November", "December");

   var thisMonth=calendarDay.getMonth();

   document.write("<tr>");
   document.write("<th class='monthly_title' colspan='7'>");
   document.write(monthName[thisMonth]);
   document.write("</th>");
   document.write("</tr>");
}

function writeDayNames() {
   var dayName = new Array("S", "M", "T", "W", "R", "F", "S");  
   document.write("<tr>");
   for (var i=0;i<dayName.length;i++) {
      document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
      }
   document.write("</tr>");
}

function daysInMonth(calendarDay) {
   var thisYear = calendarDay.getFullYear();
   var thisMonth = calendarDay.getMonth();
   var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
   if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
         dayCount[1] = 29;
         }
   return dayCount[thisMonth];
}

function writeMonthDays(calendarDay, currentTime) {

   var weekDay = calendarDay.getDay();

   document.write("<tr>");
   for (var i=0; i < weekDay; i++) {
      document.write("<td></td>");
   }

   var totalDays = daysInMonth(calendarDay);
   for (var dayCount=1; dayCount<=totalDays; dayCount++) {

      calendarDay.setDate(dayCount);
      weekDay = calendarDay.getDay();
      writeDay(weekDay, dayCount, calendarDay, currentTime);
      }
   
   document.write("</tr>");
}

function writeDay(weekDay, dayCount, calendarDay, currentTime) {
   if (weekDay == 0) document.write("<tr>");
   if (calendarDay.getTime() == currentTime) {
      document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
   } else {
      document.write("<td class='monthly_dates'>"+dayCount+"</td>");
      }
   if (weekDay == 6) document.write("</tr>");
}

Hello all, my second post!

I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari.

What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers.

Here is the header code:
Code:

<SCRIPT type="text/javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>

Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
Code:

<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>

</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%;  background-color: #f0f0f0; 	border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';

As always, any input is greatly appreciated!

Hello Everyone! I have one link that I need to do two onclick events at once. At first I just tried writing them both but that obviously didn't work b/c I'm here! This would result in the first onclick event tacking place and not the second. So my question is could someone tell me how to write this code in javascript, so both events will take plack onclick, and then how I should reference that script within my link? Thank you for taking a look

Code:

<a href = "javascript:void(0)" 

onclick = "document.getElementById('light<?php echo $count;?>').style.display='none';document.getElementById('fade<?php echo $count;?>').style.display='none'"
            
onclick = "document.getElementById('light<?php echo $count + 1;?>').style.display='block';document.getElementById('fade<?php echo $count + 1;?>').style.display='block'"> Previous 

</a>

PHP Code:
var deck = new Array (52);

for (var ind = 0, face = 1; ind < 52; ind+=4, face++) {
    deck[ind] = face + "c";
    deck[ind + 1] = face + "d";
    deck[ind + 2] = face + "h";
    deck[ind + 3] = face + "s";
}

for (var a = 0, b = 0, c = 0; a < 19; a++, b+=2) {
    document.write("<img src='cards/placeholder.gif' name='" + deck[b] + "' width='53' height='68' onClick='alert(" + deck[b] + ")'>");
} 


I have this code for my Go Fish game, however it will not show an alert when you click the image. I've also tried onClick='alert(deck[" + b + "])' but that does not work either. Can someone help me please?

I guess it is because it is 2am and had a few beers but i cannot get this to work and i know its pretty simple to do - see the code below:

Code:

{if ""|fn_needs_image_verification == true}
	{assign var="is" value="Image_verification"|fn_get_settings}
	
	<p{if $align} class="{$align}"{/if}>{$lang.image_verification_body}</p>
	{assign var="id_uniqid" value=$id|uniqid}
    
    {literal}
	<script language="javascript" type="text/javascript">
    function reloadCaptcha() {
        captcha = document.getElementById("captureURLID").src;
		return captcha += 'reload';
    }
    </script>
    {/literal}

	{if $sidebox}
		<p><img id="verification_image_{$id}" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&amp;`$id_uniqid`&amp;"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" /></p>
	{/if}

	<p><input class="captcha-input-text valign" type="text" name="verification_answer" value= "" autocomplete="off" />
	{if !$sidebox}
		<img id="verification_image_{$id} captureURLID" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&amp;`$id_uniqid`&amp;"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;"  width="{$is.width}" height="{$is.height}" />
	{/if}
    <img src="{$images_dir}/icons/icon_reload.png" height="25" width="25" alt="Reload Captcha Image" onclick="reloadCaptcha();" class="valign image-captcha" /></p>
{/if}

now the following works totally fine, when you click the captcha code changes..... "onclick="this.src += 'reload'" you will notice i have added a custom reload button image below this with a onclick calling a custom function "reloadCaptcha(); which i want to reload the captcha image above it - however it is not working, i have done the function so it grabs the src from the element ID, i have added 2 ID's to the IMG but cannot remember if you can have multiple IDs or not which if not could be causing the problem but not 100% sure how to include the smarty code for the generated ID on that image.

Any ideas on the code above from having a quick glimps? as the code stands i get the error:

Error: captureURL is null

Many Thanks

I finished this code, the full code is not here, but when I ran it as a diagnostic the action did not occur when i clicked on the "process item" button. I believe it may have something to do with the script, but i am new to javascript and cannot seem to figure it out, it is supposed to multiply the price by the number to give the value of sale (sale).
Any help would be much appreciated!!!
Code:

 <html>

<script language="javascript">
function test()
{
var Items,Price,Number,sale;


Items = parselfloat(document.victoria.secondnumber.value);
Price = parselfloat(document.victoria.price.value);
Number = parselfloat(document.victoria.num.value);

sale = Price*Number;
document.victoria.val.value=sale;
}
</script>
<body><form name ="victoria">  
<center>

<table border=40 bordercolor="yellow"> 
<tr><td>Customer Number <input name ="firstnumber" type="text" size="6" value="1" ></td>
<td>Home Delivery  <input name="customer_name" type="checkbox"Checked></td><tr>
<tr><td>Items Purchased</td><td><center><input name="secondnumber" type="text" size="12"></center></td></tr>
<tr><td>Item Number</td><td><center><input name="itemnum" type="text" size="12" value="1"></center></td></tr>
<tr><td>Price</td><td><center><input name="price" type="text" size="12"></center></td></tr>
<tr><td>Number Purchased</td><td><center><input name="num" type="text" size="12"></center></td></tr>
<tr><td>Value of Sale</td><td><center><input name="val" type="text" size="12" value="0"></center></td></tr>
<tr><td>Customer Total</td><td><center><input name="total" type="text" size="12" value="0"></center></td></tr>
<tr><td></td><td><input type="button" value="Process Item" onclick="test()"></td></tr>
</table>

 
</center></form>
</body></html>

I've been doing some research as to why this doesn't work but to no avail. I'm hoping someone here can lend a hand/brain. I'm relatively new to Javascript.

This works perfectly in FF and IE7 but not IE6. The very last "tdright" div at the bottom of this list (the item shown in the HTML I've provided is in the middle of 30+ rows of parameters) also gets out of whack in IE6 for some reason. FF is fine, of course.

Code:

var ie = (document.all) ? true : false;
function hideID(objID){
	var element = (ie) ? document.all(objID) : document.getElementById(objID);
	element.style.display="none"
}
function showID(objID){
	var element = (ie) ? document.all(objID) : document.getElementById(objID);
	element.style.display="block"
}
function toggleID(objID){
	var element = (ie) ? document.all(objID) : document.getElementById(objID);
	if (element.style.display=="none"){
		element.style.display="block"
	}
	else {
		element.style.display="none"
	}
}

Code:

				<div class="tdright">: <input type="text" size="1" name="x_label_angle" value="<?php echo $_SESSION['x_label_angle']; ?>"></div>
				<div class="tdleft"><p class="IEtop4px">Interval</p></div>
				<div class="tdright">: 
					<select name="x_label_interval" style="width:80px">
						<option value="First & Last" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "First & Last") { ?> selected<?php } ?>>First & Last
						<option value="Halfway" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Halfway") { ?> selected<?php } ?>>Halfway
						<option value="One-Third" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "One-Third") { ?> selected<?php } ?>>One-Third
						<option value="All" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "All") { ?> selected<?php } ?>>All
						<option value="Other" onClick="showID('x_label_other_left');showID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Other") { ?> selected<?php } ?>>Other
					</select>					
				</div>
				<div class="tdleft" id="x_label_other_left" style="display:none"></div>
				<div class="tdright" id="x_label_other_right" style="display:none">&nbsp;&nbsp;<input type="text" size="1" name="x_label_other_interval" value="<?php if (is_numeric($_SESSION['x_label_interval'])) { echo $_SESSION['x_label_interval']; } ?>"></div>

Thanks in advance!

hi
i have a problem coding a menu
i have 4 links on menu and clicking on items should expand a DIV and change the menu item image.
also rollover has to change the image too
i mean 3 conditions for every menu item: normal, rollover, clicked.
i have no problem with rollover
but when item is been clicked and image changes, image has to change on mouse over again, but has not to change to original image on mouse out.
also clicking on another menu item has to change the previous item image to original.


i'm confused enough
i tried by samples over and over.
but the main problem is that i dont know js syntaxes and coding
however, anybody could help???

i m very new to this thread so i will try to be as clear as possible

i m try to create a website where i n have inserted a menu (this menu template i found online which is free.)
Code:

<div id="menu">
  <ul class="menu">
	  <li><a href="#" class="parent"><span>Home</span></a>
	<li><a href="#"><span>Cities</span></a>
				<div><ul>
					<li><a href="#"><span>Pune</span></a></li>
					<li><a href="#"><span>Mumbai</span></a></li>
					<li><a href="#"><span>Delhi</span></a></li>
					<li><a href="#"><span>Madras</span></a></li>
				</ul></div>
	</li>
			<li><a href="#"><span>Login</span></a></li>
            <li><a href="#"><span>About Us</span></a></li>
			<li class="last"><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table.

What I am trying to achieve, is a button that calls a function that changes the onclick attribute of that button, so that when it is clicked again, it resets the onclick attribute to call the default function. here is what the stripped down code looks like:
Code:

<html>
<head>
<script type="text/javascript">
function remove_prep(a){
a.value="cancel";
a.onclick="cancel_remove(this);";
}
function cancel_remove(a){
a.value="remove";
a.onclick="remove_prep(this);";
}
</script>
</head>
<body>
<input type="button" value="remove" onclick="remove_prep(this);" />
</body>
</html>

for some reason, it only fires once, after which it ceases to work properly.


thanks for the help this part of my code is killing me.

So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay.

The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc.

I know IE6 doesn't support hover on anything except anchors.

This works in IE 7/8 FF 2/3 Safaris and most likely everything else:

http://www.muchomungo.com/CrowdTwist..._template.html

Relevant CSS
Code:

li {
	list-style:none;
	float:left;

}


ul {
	list-style:none;
	margin:0;
	padding:0;
}

ul#toolbar a {
	height: 111px;
	display:block;
	text-indent:-9999px;
	font-size:0px;
	line-height:0px;
	outline: none;
}

#toolbar li.unselected:hover {
background-position:0px 222px;
}


#toolbar li.selected {
	background-position: bottom;
	height: 111px; 
	z-index: 10;
	}
#toolbar li.unselected {
	background-position: top;
	margin-left:0px;
	}

CSS file


JS

Code:

var currentSection = 'dashboard';
	
	
var newpane = function(gotoLink){

	if (currentSection == gotoLink) {
		return;
	}
	lastSection = currentSection;
	currentSection = gotoLink;
	
	// Change the section highlight.
	// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state

    
    document.getElementById(currentSection).className = "selected";
    if (lastSection) {
	    document.getElementById(lastSection).className = "unselected";
	}
}

Thanks for any help!

Hi there,
I'm soo stuck on particular piece of code..

You see i have 2 radio buttons with values 12hr and 24hr; on clicking any of the above the time format should change automatically.

by default the time format comes in 12hr format against onload event of <body>.

I've tried using javascript but this problem is persisting...

Can anyone help me pleassssse..

Here is my script -- Applied in <head>

Code:

<script language="JavaScript">
var bgImage = new Array(); // don't change this

bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";

function changeBG(bgImage)
{
     document.body.background = backImage[bgImage];
}

</script>

And here is the code im using that is not working within <body>

Code:

<body>

     <div id="map"></div>
     <div id="bf_container" class="bf_container">
     <div id="bf_background" class="bf_background">
          <img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>

     <div class="bf_overlay"></div>
     <div id="bf_page_menu" class="bf_menu" >
          <h1 class="title">Fujiyama<span>Japanese</span></h1>
               <ul>
                    <li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
                    <li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>

this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1.

Any help would be greatly appreciated.

Thanks,

Cross