JavaScript - Javascript Issue - Sorting Tables (sorttable.js)

How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?

Hi,
I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me.
Thank You.

Hi there,

Not sure what sub category this falls under sorry, but I have an issue changing a table based menu to a css based menu.

This has been done however the javascript code no only partly works, I would like for it to completely work and am not sure whether I should use aspanel or <div> tags to get it to work as I have tried both and neather seem to work so there is something i am obviously missing!

here is the javascript:
Code:

$(function() {
    $('#mainCategories a').live('click', function() {
        $.ajax({
            type: "GET",
            contentType: "text/html; charset=utf-8",
            dataType: "html",
            url: "/ajax/menu.aspx?CategoryId=" + this.name,
            cache: false,
            success: function(newMenu) {
                $("#left-menu-control").replaceWith(newMenu);
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        });
        return false;
    });

    $('#left-menu-collapse-category').live('click', function() {
    $.ajax({
        type: "GET",
        contentType: "text/html; charset=utf-8",
        dataType: "html",
        url: "/ajax/menu.aspx",
        cache: false,
        success: function(newMenu) {
            $("#left-menu-control").replaceWith(newMenu);
        }
    });
    return false;
    });
});

and here is the page code:
Code:

<div id="menu-left">

<asp:Panel ID="pnlLeftMenuControl" runat="server">
	
	<asp:Panel ID="pnlCategories" runat="server">
			
			<asp:Panel ID="pnlCurrentlyViewing1" runat="server" Visible="false">
				<div id="menu-left-main-categories">
				<div id="menu-left-currently-viewing-title">Currently Viewing...</div>
				<div id="menu-left-currently-viewing-close"><a href="javascript:void(0);" title="Collapse category" id="left-menu-collapse-category"><img src="~/images/button-menu-left-currently-viewing-close.jpg" runat="server" border="0" /></a></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlCurrentlyViewing2" runat="server" Visible="false">
				<div id="menu-left-currently-viewing">
				<div id="menu-left-currently-viewing-text"><asp:Hyperlink ID="hlCategory" runat="server" CssClass="left-menu-viewing"></asp:Hyperlink></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlSubCategories1" runat="server" Visible="false">
				<asp:Repeater ID="rptSubCategories" runat="Server">
					<ItemTemplate>
						<div id="menu-left-currently-viewing">
						<div id="menu-left-currently-viewing-text">- <asp:HyperLink ID="hlSubCategory" runat="server" CssClass="left-menu-viewing"></asp:HyperLink></div>
						</div>
					</ItemTemplate>
				</asp:Repeater>
			</asp:Panel>
			
			<asp:Panel ID="pnlMainCategories" runat="server">
				<asp:Repeater ID="rptMainCategories" runat="server">
					<ItemTemplate>
					<div id="menu-left-main-categories"><div id="menu-left-main-categories-text"><asp:HyperLink ID="hlCategory" runat="server" CssClass="left-menu"></asp:HyperLink></div></div>
					</ItemTemplate>                
				  </asp:Repeater>
			</asp:Panel>
			
		</asp:Panel>
      
	<asp:Panel ID="pnlBrands" runat="server" Visible="false">
		
		<asp:Panel ID="pnlBCurrentlyViewing1" runat="server" Visible="false">
			Currently viewing...
		</asp:Panel>
		
		<asp:Panel ID="pnlBCurrentlyViewing2" runat="server" Visible="false">
			<asp:Label ID="lblBCurrentlyViewing" runat="server" CssClass="left-menu-viewing"></asp:Label>
		</asp:Panel>
	
		<asp:Repeater ID="rptBrands" runat="server">
			<ItemTemplate>
				<asp:HyperLink ID="hlBrand" runat="server" CssClass="left-menu"></asp:HyperLink>
			</ItemTemplate>                
		</asp:Repeater>
		
	</asp:Panel>
	  
</asp:Panel>
</div>

any help would be greatly appreciated

Hi
I am trying to build an application which has 6 small input fields and one numeric key pad. Initially the focus should be on the first inputfield and after entering the number from the numeric key pad, it should shift the focus to third input field and the user should be able to enter the number from the numeric key pad and then shift the focus to fifth input field and user should be able to enter the number in fifth through the key pad.

I have achieved till gaining the focus on the first input field and i could enter the number through the key pad and i was able to shift the focus to third input field but however whatever i enter the number is getting changed in first and third input field. the code i wrote is below

Code:

<html>

<head>
<script type="text/javascript">
function displaymessage(val)
{
document.getElementById('first').value = val;
alert(document.getElementById('first').value);
if(document.getElementById('first').value!=null)
{
alert("yes");

document.getElementById('third').focus();
document.getElementById('third').value = val;
}

}
</script>
</head>

<body onload="document.getElementById('first').focus();">
Enter your pin: 
<input type="text" id="first"   size="1" maxlength="1"></> &nbsp; 
<input type="text" id="second"  size="1" maxlength="1" /> &nbsp; 
<input type="text" id="third"  size="1" maxlength="1" /> &nbsp; 
<input type="text" id="fourth"  size="1" maxlength="1" /> &nbsp;
<input type="text" id="five"    size="1" maxlength="1" /> &nbsp; 
<input type="text" name="six"   size="1" maxlength="1" />

<table border="1">
<tr>
<td width="30px" align="center"><input type="button" value="1" onclick="displaymessage(1)"/> </td>
<td width="30px" align="center"><input type="button" value="2" onclick="displaymessage(2)"/> </td>
<td width="30px" align="center"><input type="button" value="3" onclick="displaymessage(3)"/> </td>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="4" onclick="displaymessage(4)"/> </td>
<td width="30px" align="center"><input type="button" value="5" onclick="displaymessage(5)"/> </td>
<td width="30px" align="center"><input type="button" value="6" onclick="displaymessage(6)"/> </td>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="7" onclick="displaymessage(7)"/> </td>
<td width="30px" align="center"><input type="button" value="8" onclick="displaymessage(8)"/> </td>
<td width="30px" align="center"><input type="button" value="9" onclick="displaymessage(9)"/> </td>
</tr>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="0" onclick="displaymessage(0)"/> </td>
<td width="30px" align="center"><input type="button" value="Reset"/> </td>
</tr>
</table> 
</body>

</html>

I know thats because I am filling the val variable again in the third input field and that is the reason it is getting changed in first and third. However I am not aware of what other best methods we could use on this.

Pleasee helpp..

hi,

i am trying to get some javascript working on a website i am making. the javascript changes the background image behind a photo. this simulates a user selecting a different frame from the drop down list
http://jimpicot.com/shop/index.php?m...&products_id=3

below is the link to another forum it have been using to get most of the website working.
http://www.zen-cart.com/forum/showthread.php?t=173765

I have a big issue.

I am doing this:


I have a menu and when you click tje linsk it loads content using jquery post into a div. It alway loads javascript with it. But I find when they click another menu item it loads a different section into the div along with different javascript. But the dom is still keeping the old javascript. After about 40 clicks the site wants to stop working. How can I resolve this?


Thanks

Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse.

For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated

Code:

<script type = "text/javascript">
	
	function dIM(Y, M) {
    with (new Date(Y, M, 1, 12)) {
        setDate(0);
        return getDate();
	}
}
	function dateDifference(birthdate1, birthdate2)
	{
		var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(),
		year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate();
		
			if (day1 < day2){
					month1--;
					day1 += dIM (year2, month2);day
			};
				if (month1 < month2) {
						year1--;
						month1 += 12;
					
					}
			
			return [year1 - year2, month1 - month2, day1 - day2];
		}
		
	function ageCalculator() {
	
		var day = document.age.inputdate.value;
		var month = (document.age.inputmonth.value - 1);
		var year = document.age.inputyear.value;
		
		var now = new Date();
		thisday = now.getDate();
		thismonth = now.getMonth();
		thisyear = now.getFullYear();
		
		var first = new Date(thisyear, thismonth - 1, thisday);
		var second = new Date(year, month - 1, day);
		var yourage;
		var datediff;
		
		if (day == "" || month == "" || year == "")
		{
			alert ("Please fill in all of the boxes before getting your age");
			}
	
		else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year)))
			{
				alert ("Please only enter digits in the day, month or year boxes"); return false;		
			}
		
		datediff = dateDifference(first,second);	

		if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;}
		
		yourage = thisyear-year;
		
		var next = parseInt(year)+datediff[0]+1;
		var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0);
		var daysleft = difference/1000/60/60/24;
		
		document.age.daysremaining.value = daysleft+" days left for your next birthday";
		document.age.ageoutput.value = yourage;
			
	}
	
		function clear(form){
			form.Result.value = "";
			
			}
</script>
    <center>
  <p>
  	<form name = age>
	<p>Day of birth&nbsp;&nbsp;&nbsp;&nbsp;
	  <input type="text" id="inputdate" size="2"><br/>
	  Month of birth&nbsp;
	  <input type="text" id="inputmonth" size="2"><br/>
	  Year of birth 
	  <input type="text" id="inputyear" size="4" ><br/>
      <input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/>
      <input type="reset" name="Reset" id="button" value="Reset" />
	
    </p>
	<p> You are
  <input type = "text" name = "ageoutput" size = "4" value = "0"> years old
  <input type = "text" name = "daysremaining" value = "0" />
	  </p>
  	</form>

Happy Star Wars Day!

Hopefully someone is strong in the force and can help.

I have a HTML form and I need to get the user to select one of 350 options.
I have broken down the options into "Major Group", "Sub-Major Group", "Minor Group" and "Unit"
I'm looking to create 4 dynamically changing drop down lists to point the user to their final choice.

All 350 options are in one database table with the following headings:
[Major Group][Major Group Title][SubMajor Group][SubMajor Group Title][Minor Group][Minor Group Title][Unit][Unit Title]

The 'groups' are numeric, and the title's alphanumeric.

I have used the MySQL database to achieve this as it makes it easier to update the 350 options in the future should I need to.

As far as the tutorial over at W3Schools.com has advised I need to use the following process:

HTML Form - <Select> onclick run Javascript function
Javascript function connects to server via PHP
PHP runs query on the MySQL database and returns results
Javascript then populates the 2nd drop down.

and so on through to the final drop down.
There are never more than 9 options in each drop down.

Please can someone help me set this up.

I have been using the code examples from W3Schools.com to put the following together.

I use the alerts to check it's progress. It seems to be getting stuck when checking that the "if (xmlhttp.readystate==4)" line.

Using Safari's built in Debug console the error I get back is that the php file cannot be found and there is a "500 Internal Server Error" - although I think (read as: assume) this is because the "if (xmlhttp.readystate==4)" isn't working.

Any help would be much appreciated.

Code:

function selectMajor(str)
	{
	// an alert box to show that both a value has passed and it is the right type
	alert(SOC_Major.value);
	// enable the next drop down - SOC_SubMajor
	document.getElementById('SOC_SubMajor').disabled=false;
	// clear the next select box?
	document.Add_Vacancy.SOC_SubMajor.options.length=0
	// POST to the php script
	// AJAX goes here
	
	if (str=="")
		{
		document.getElementById('SOC_SubMajor').innerHTML=" ";
		alert("str is empty");
		return;
		}
	
	if (window.XMLHttpRequest)
		{ // code for IE7+, Firefox, Chrome, opera, Safari
		xmlhttp=new XMLHttpRequest();
		alert("new XMLHttpRequest created");
		}
	else
		{ // code for IE6, IE5
		xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
		}
	xmlhttp.onreadystatechange=function()
		{
		if (xmlhttp.readystate==4)
			{ 
			alert("xmlhttp.readystate = 4");
			if(xmlhttp.status==200)
				{
				alert("xmlhttp.status = 200")
				document.getElementById('SOC_SubMajor').innerHTML=xmlhttp.responseText;
				}
			else
  				{ 
     			alert("There was a problem while using XMLHTTP:\n");
  				}
			}
		}
	xmlhttp.open("POST","scripts/SOCSubMajorSelect.php?q="+str,true);
	xmlhttp.send();
	}

I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines.

I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/#

Hi All,

I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below:

CSS & HTML (simplified and normally in head / body tags etc.):

Code:

#lastRow { display: none;}

<table>
	<tr>
		<td>Events Xtra:</td>
		<td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td> 
	</tr>
	
	<tr id="lastRow">
		<td>Xtra Description:</td>
		<td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td>
	</tr>
</table>

JS:

Code:

            function showHideRow(obj){
                oLastRow.style.display = (obj.checked)? 'block' : 'none';
            }
            window.onload=function(){
                var oChkBox = document.getElementById('upcoming');
                oLastRow = document.getElementById('lastRow');
                oChkBox.onclick=function(){showHideRow(this);}
                showHideRow(oChkBox);
            }

Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here?

For convenience I have uploaded two images:

IE (working fine):



Firefox (distorting across page)



Regards,
Neil

Hello there,

I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders
in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you.

Java Script Code:

// Time Slider
$("#time_slider").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
slide: slideTime
});

function slideTime(event, ui){
var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60);
var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24);
var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60);
var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24);
$("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1));
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = "AM";
}
else {
time = "PM";
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes + " " + time;
}
slideTime();

//-----------------------------
// Trip Duration
$("#duration_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slideDuration
});

function slideDuration(event, ui){
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);

if(hours.length == 1) hours = '0' + hours;
if(minutes.length == 1) minutes = '0' + minutes;

$("#duration").text(hours+'hrs. '+minutes+'mins. ');
}

slideDuration();

//-----------------------------
// Max Price
$("#price_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slidePrice
});

function slidePrice(event, ui){
var dollars = ui.value;
$("#maxprice").text('$'+dollars);
}

slidePrice();



HTML Code:

<head>
<style>
#slider-range{width:400px;}
#slider-range,#time,#duration,#maxprice {margin:10px;display:block;}
.ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;}
.flights-select {margin: -22px 0px 140px;}

</style>
</head>
<body>
<div class="flights-section-title">Flight Time</div>

<div class="flights-section">&nbsp;
<ul class="inline">
<li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li>
<li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li>
</ul>
<div class="leftnav-dot-divider">
<div id="time_slider"></div>
<span id="time"></span></div>

</div><!-- flight-section-slider -->
<div class="flights-section-title">Max Trip Duration</div>
<div class="flights-section">
<div class="leftnav-dot-divider">
<div id="duration_slider"></div>
<span id="duration">2hrs. 0mins.</span>
</div>
</div><br />


<div class="flights-section-title">Max Price</div>
<div class="flights-section"> &nbsp;
<div class="leftnav-dot-divider">
<div id="price_slider"></div><span id="maxprice">$100</span>
</div>
</div><br />
</body

Hey guys, I'm new to javascript and I'm trying to get this code to work.

It's a pretty basic system to start with, just wanting to calculate the total pay for employees and using the array so that I can key multiple employees at a time.

Can anyone help me adjust my code so that this system works?

Thanks for your help in advance, it's greatly appreciated.

Code:

var NoEmps
var PayRate= new Array();
var HrsWorked= new Array();
var EmpName= new Array();
var GrossPay= new Array();
var i
var j

NoEmps=prompt("Enter Number of Employees to process","")

i = 0;
while (i<NoEmps)
{
  EmpName[i]= prompt("Enter employee name","")
  PayRate[i]=prompt("Enter employee pay rate","")
  HrsWorked[i]= prompt ("Enter hours worked","")
  if ((isNaN(PayRate[i]))||(isNaN(HrsWorked[i])))
     {
      alert("Please enter numbers")
	  flag = "false"
      break
     }
  if PayRate[i]>25
     {
      alert ("Pay rate can only b $25 or less per hour")
	  flag == "false"
	  break
     }
//i = i +1
}
if (flag = "true")
{
for (j in EmpName)
{
     GrossPay[j]=PayRate[j] * HrsWorked[j]

}
 for (counter; counter<EmpName.length; counter++)
 {
   document.write ("Gross Pay for " + EmpName[counter] + " is $" + GrossPay[counter] + "<br>")
 }
}