JavaScript - For Statement To Create A New Table Row Not Working Properly

Hello,
We have jcarousel on our forum site which rotates automatically. It is vbulletine forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set.

But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller.

Our site URL is http://newtest.naturalparenting.com.au
Please go at any topic and post page finally, Below first post there is a scroller
e.g http://newtest.naturalparenting.com....ad.php?t=42713


While old site design is still active at
http://ninad.naturalparenting.com.au
Please go at any topic and post page finally, Below first post there is a scroller
e.g http://ninad.naturalparenting.com.au...ad.php?t=40745

At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally.

It is really very strange issue for me. I have tried all ways to fix it but alas !!!

Any help would be greatly appreciated.

Code:

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
 -moz-border-radius: 0px;
 background: transparent;
 border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
 direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
 width: 695px;
 padding: 20px 30px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
 width: 75px;
 height: 220px;
 padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
 height: 220px;
 margin-left: auto;
 margin-right: auto;
 width: 675px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
 width:  75px;
 height: 220px;
}
.jcarousel-skin-tango .jcarousel-item {
 width: 75px;
 height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-left: 0;
 margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
 margin-left: 10px;
 margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
 background: #fff;
 color: #000;
}
/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
 position: absolute;
 top: 83px;
 right: 5px;
 width: 32px;
 height: 32px;
 cursor: pointer;
/* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
 left: 5px;
 right: auto;
 background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
 position: absolute;
 top: 83px;
 left: 5px;
 width: 31px;
 height: 31px;
 cursor: pointer;
 /*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
 left: auto;
 right: 31px;
 /*background-image: url(images/checkout/nivo_nav.png);*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
 position: absolute;
 bottom: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
 position: absolute;
 top: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}

#upsell {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
}

#upsell li {
 border: 0 dashed #CCCCCC;
 float: left;
 height: 220px;
 list-style: none outside none;
 margin: 0 10px 0 0;
 padding: 2px;
 width: 125px;
}
</style>  
<script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>

I have 2 tables with Add/Remove Row buttons. The first table's Add Row button adds a row that belongs in the second table, and the Remove Row button gives me an Object Error. The second table works properly. The JavaScript for both tables is identical except for the ID's. When the tables are put into seperate html files both of the Add buttons work properly, but the remove row button from table one is still giving me the Object Error. Can someone point out what i'm doing wrong? Thanks.

Code for the first table
Code:

<SCRIPT language="javascript">
function addRow(kodaktable) {               
var table = document.getElementById(kodaktable);               
var rowCount = table.rows.length;             
var row = table.insertRow(rowCount);               
var cell1 = row.insertCell(0);             
var element1 = document.createElement("input");             
element1.type = "checkbox";             
cell1.appendChild(element1);               
var cell2 = row.insertCell(1); 
var element2 = document.createElement("input");             
element2.type = "text";             
cell2.appendChild(element2);                            
var cell3 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell3.appendChild(element2); 
var cell4 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell4.appendChild(element2);            
var cell5 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell5.appendChild(element2); 
var cell6 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell6.appendChild(element2); 
}
</script>
<script>                                        
function deleteRow(kodaktable) {             
try {             
var table = document.getElementById(kodaktable);             
var rowCount = table.rows.length;               
for(var i=0; i<rowCount; i++) {                 
var row = table.rows[i];                 
var chkbox = row.cells[0].childNodes[0];                 
if(null != chkbox && true == chkbox.checked) {                     
table.deleteRow(i);                     
rowCount--;                     
i--;                 
}               
}             
}catch(e) {                 
alert(e);             
}         
}       
</SCRIPT> 

<INPUT type="button" value="Add Row" onClick="addRow('kodaktable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('kodaktable')" />
<TABLE id="kodaktable" width="350px" border="1">         
<TR>             
             
<tr>
	<th></th>
    <th>Job Name</th>
    <th>Job Number</th>
    <th>Start Doc</th>
    <th>End Doc</th>
    <th>Total</th>
  </tr>             
<tr>
	<td><INPUT type="checkbox" name="chk"/></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
  </tr>
</TR>     
</TABLE>

code for the second table.
Code:

<SCRIPT language="javascript">
function addRow(incidenttable) {               
var table = document.getElementById(incidenttable);               
var rowCount = table.rows.length;             
var row = table.insertRow(rowCount);               
var cell1 = row.insertCell(0);             
var element1 = document.createElement("input");             
element1.type = "checkbox";             
cell1.appendChild(element1);               

var cell2 = row.insertCell(1); 
var element2 = document.createElement("input");             
element2.type = "text"; 
element2.size = "70";             
cell2.appendChild(element2);                            

var cell3 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";
element2.size = "20";             
cell3.appendChild(element2); 

var cell4 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";
element2.size = "20";             
cell4.appendChild(element2);
}                                        
function deleteRow(incidenttable) {             
try {             
var table = document.getElementById(incidenttable);             
var rowCount = table.rows.length;               
for(var i=0; i<rowCount; i++) {                 
var row = table.rows[i];                 
var chkbox = row.cells[0].childNodes[0];                 
if(null != chkbox && true == chkbox.checked) {                     
table.deleteRow(i);                     
rowCount--;                     
i--;                 
}               
}             
}catch(e) {                 
alert(e);             
}         
}       
</SCRIPT> 
<INPUT type="button" value="Add Row" onClick="addRow('incidenttable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('incidenttable')" />
<table id="incidenttable" width="790px" border="1">
<tr>
     <th></th>
     <th>Incident</th>
     <th>Kodak Downtime</th>
     <th>System Downtime</th>
</tr>
<tr>
     <td><INPUT type="checkbox" name="chk"/></td>
     <td><input type="text" name="name" size="70" /></td>
     <td><input type="text" name="name" size="20"></td>
     <td><input type="text" name="name" size="20"></td>
</tr>
</table>

Hi,

I am having a strange problem. I have a javascript that I am running on my system and on server(both in IE and FF). The problems I am encountering are as follows:

My system
IE - everything working fine
FF - Not able to set focus correctly. When focus() is called, it jumps to next field.

On Server
IE - Focus doesnt set as expected. No blinking cursor.Doesnt do anything.
FF- Same thing as above. When focus functionality is called, nothing happens.

It is a long javascript, but here is a snapshot of the code with problem. Please let me know if you want to know about any variables. The (fname,lname..)are all the Name attributes of textbox. userArray is a array containg the number of users whose information is not filled up correctly(ie. some reqd fields are left empty).

Code:

df=document.form;
for(var j=0;j< val;j++)
 {				                                                
                                                                         
     if(df['fname'+userArray[j]].value =="")
      {
        df['fname'+userArray[j]].focus();
         break;
      }
      else if(df['lname'+userArray[j]].value =="")
       {
          df['lname'+userArray[j]].focus();break;
        }    
     else if(df['ph'+userArray[j]].value =="")
      {
         df['ph'+userArray[j]].focus();break;
       }      
     else if(df['email'+userArray[j]].value =="")
      {
         df['email'+userArray[j]].focus();break;
       }    							      	 
     else if(df['comp'+userArray[j]].value =="")
      {
        df['comp'+userArray[j]].focus();break;
       }      
     else if(df['addra'+userArray[j]].value =="")
      {
        df['addra'+userArray[j]].focus();break;
       }      
     else if(df['city'+userArray[j]].value =="")
      {
        df['city'+userArray[j]].focus();break;
       }      
      else if(df['state'+userArray[j]].value =="")
      {
        df['state'+userArray[j]].focus();break;
      }      
      else if(df['zip'+userArray[j]].value =="")
      {
        df['zip'+userArray[j]].focus();break;
        }      
     else if(df['country'+userArray[j]].value =="")
       {
       df['country'+userArray[j]].focus();break;
        } 
  }

The code is definitely not clean,pls forgive me for that. Any suggestion on that will be appreciated.

Thanks

Hi,
While i am binding a value to a text box using java script. It will properly in all browsers other than IE. In IE the value bind as 'undefined' in the text box . so please provide solution for this one. The code sample is given below.
In this "Flight Search " is the text box id . I have to bind that value from the previous page selected value.

function SelectAirport(val) {
var id = val + "_lnkCity";
var lnk = document.getElementById(id);
window.opener.document.getElementById("FlightSearch").value = lnk.text;
window.opener.document.getElementById("destinationSearch").value = lnk.text;

window.close();

}

I have an "animated slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. There is an error in there somewhe


<html>
<head>
<title>My webpage</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<SCRIPT language="JavaScript" type="text/JavaScript">
<!--
var speed=1333;
var counter = 1;
function rollPics() {
document.display.src=counter+".jpg"; //Display image "counter".jpg
counter ++; // Add 1 to counter
if (counter>29) { // If counter is greater than 29 images then reset it
counter=1
}
}
<!-- END -->
</SCRIPT>
</head>

<body>
<center>
<table>
<tr><td>
<IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)">
</td></tr>
</table>
</center>
</body>
</html>

Hello,

I am building a shopping cart website that is using a mega javascript dropdown menu.

Everything was working fine until you get to the checkout page on the website. The checkout page has this accordian / spry deal where customers can checkout on one page. You can view it he


http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp

If I take the menu code out of the header.asp file, then the checkout page works just fine. But if I put the menu code back in, then the checkout page stops working.

Here is the menu code (simplified it a bit for this thread):

Quote:
<head>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
Quote:
<body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}


var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);



});



</script>
</body>
And there are two things of script on the onepagecheckout.asp page as well. Here they a

Quote:
<script type="text/javascript">
$(document).ready(function() { $('#chkPayment').click(); });
</script>
Quote:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("acc1", { useFixedPanelHeights: false, enableAnimation: false });
var currentPanel = 0;

<% if session("idCustomer")>"0" then
session("OPCstep")=2
else
session("OPCstep")=0
end if %>

//* Find Current Panel
<% if len(Session("CurrentPanel"))=0 AND pcv_strPayPanel="" then %>

<% if session("idCustomer")>"0" then %>
acc1.openPanel('opcLogin');
GoToAnchor('opcLoginAnchor');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% else %>
$('#LoginOptions').show();
$('#acc1').hide();
<% end if %>

<% else %>

<% If pcv_strPayPanel = "1" Then %>
$(document).ready(function() {
$('#LoginOptions').hide();
pcf_LoadPaymentPanel();
});
<% Else %>
acc1.openPanel('opcLogin');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% End If %>

<% end if %>

GoToAnchor('opcLoginAnchor');

function openme(pNumber) {
acc1.openPanel(pNumber);
}
function toggle(pNumber) {
var ele = acc1.getCurrentPanel();
var panelNumber = acc1.getPanelIndex(ele);
if (panelNumber == pNumber) {
acc1.closePanel(pNumber);
} else {
acc1.openPanel(pNumber);
}
}
function togglediv(id) {
var div = document.getElementById(id);
if(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = 'block';
}

function win(fileName)
{
myFloater=window.open('','myWindow','scrollbars=yes,status=no,width=300,height=250')
myFloater.location.href=fileName;
}

</script>
Any help would be GREATLY appreciated,

Thank you

I made a php page with multiple forms with javascript code in it.
The javascript makes an input field for the date.
The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate.
Code:

<form action='dataadd.php' name='$id'>";
$datestime=time();
echo "<input type=hidden name=dateid value='$id'>";
echo "<input type=hidden name=datestime value='$datestime'>";?>
<script type="text/javascript">
DateInput('orderdate', true, 'yyyy-mm-dd')</script>....

I've got an annoying non-working bit of code:

Code:

<div id ="messageDiv" style="display:block;">No profile information entered yet</div>

<script type="text/javascript">
function profileInfo() {
var m1 = document.getElementById("marital1").innerHTML.toLowerCase();
var b1 = document.getElementById("bodytype1").innerHTML.toLowerCase();
var e1 = document.getElementById("ethnic1").innerHTML.toLowerCase();
var o1 = document.getElementById("occupation1").innerHTML;
var w1 = document.getElementById("website1").innerHTML.toLowerCase();
var s1 = document.getElementById("smoker1").innerHTML.toLowerCase();
var d1 = document.getElementById("drinker1").innerHTML.toLowerCase();
var r1 = document.getElementById("religion1").innerHTML.toLowerCase();

if ((m1 == "no answer") && (b1 == "no answer") && (e1 == "no answer") && (o1 == "") && (w1 == '<a href=""></a>') && (s1 == "no answer") && (d1 == "no answer") && (r1 == "no answer")){
document.getElementById("messageDiv").style.display="block";
}
else if ((m1 == "no answer") && (b1 == "no answer") && (e1 == "no answer") && (o1 == "") && (w1 == '<a href="http://">http://</a>') && (s1 == "no answer") && (d1 == "no answer") && (r1 == "no answer")){
document.getElementById("messageDiv").style.display="block";
}
else {
document.getElementById("messageDiv").style.display="none";
}
}

profileInfo()
</script>

The first part up to before the 'else if' works. but if the 'w1' has '<a href="http://">http://</a>' it still doesnt return true and display the DIV block??

hi Pals,
I have a problem regarding the "target" attribute of "a" tag. in my code I use biggerlink jQuery script to give link to p element without come HTML validation problem. I pass the "target" value from PHP to smarty template , but it's not working , When I remove "biggerlink " it works but the link in <p> tag not working . My Tpl file is :


Code:

{if not empty($campaign)}
<div class="securti-adv biggerlink">
	{if not empty ($campaign.media)}
		<a href="{$campaign.url}" {if n($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} class="thumb">
			<img src="{$campaign.image}" title="{$campaign.title1 + $campaign.title2}" alt="{$campaign.title1 + $campaign.title2}" />	</a>
	{/if}
	<div class="details">
		{if not empty ($campaign.title1) || not empty ($campaign.sub_title)}
			<a href="{$campaign.url}" {if not empty($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} title="{$campaign.title1 + $campaign.title2}">
				 {text2image styleSlug=$campaign.titleStyle1 text=$campaign.title1}
				 {text2image styleSlug=$campaign.titleStyle2 text=$campaign.title2}
				 <span><img src="{$imagesDir}/btn-campaign-meet-security-advisor.png" alt="" title="" /></span>
			</a>
			<p> {text2image styleSlug=$campaign.subtitleStyle text=$campaign.subTitle}</p>
		{/if}
	</div>
</div>

<script type="text/javascript" language="javascript">
{literal}
$(document).ready(function(){
	$('.biggerlink').biggerlink();
});
{/literal}
</script>
{/if}

My plugin code is :



Code:

(function($) {
	$.fn.biggerlink = function(options) {

		// Default settings
		var settings = {
			hoverclass:'hover', // class added to parent element on hover
			clickableclass:'hot', // class added to parent element with behaviour
			follow: true	// follow link? Set to false for js popups
			
		};
		if(options) {
			$.extend(settings, options);
		}
		$(this).filter(function(){
			 return $('a',this).length > 0;

		}).addClass(settings.clickableclass).each(function(i){

			// Add title of first link with title to parent
			$(this).attr('title', $('a[title]:first',this).attr('title'));

			// hover and trigger contained anchor event on click
			$(this)
			.mouseover(function(){
				window.status = $('a:first',this).attr('href');
				$(this).addClass(settings.hoverclass);
			})
			.mouseout(function(){
				window.status = '';
				$(this).removeClass(settings.hoverclass);
			})
			.bind('click',function(){
				$(this).find('a:first').trigger('click');
			})

			// triggerable events on anchor itself

			.find('a').bind('focus',function(){
				$(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);
			}).bind('blur',function(){
				$(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);
			}).end()

			.find('a:first').bind('click',function(e){
				if(settings.follow == true)
				{
					window.location = this.href;
				}
				e.stopPropagation(); // stop event bubbling to parent
			}).end()

			.find('a',this).not(':first').bind('click',function(){
				$(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click');
				return false;
			});
		});
		return this;
	};
})(jQuery);

the value of "target" , "_blank" is not work .... I highlight the code part regarding this, please check and give me a solution ASAP. You can mail me at : anes.pa@gmail.com



Thanks,
Anes

Hello JScript gurus, though I am quite an advanced and experienced VB& .NET programmer, I am totally new to Jscript coding, (I don't actually code Jscript) but I build websites all the same too. I am also new here.
I really need help from you gurus here.
I am working on a website and I really wish to incorporate a contact or an order form to it so that when the user fills in the fields and clicks send, I receive the data in my email.
I have made some searches and found quite a few but all didn't touch on how I retrieve my data. Please help me. I will be very grateful. Thank you.

Hey guys, so I'm trying to make a single function that will check to make sure the e-mails in both fields match AND to make sure the e-mail is in proper format. Strangely, with both if statements included the form will return no messages at all. If I comment out the if statement checking for proper format, the if statement to check for matching e-mail works just fine.

I want this all to be in one function because I'm wanting it to be executed onSubmit with the form. Let me know what you guys think, any help is greatly appreciated:

Code:

<html>

<head>
<script type="text/javascript">
	function verifyEmail()
	{
			var x = document.forms["emailForm"]["enterEmail"].value;
			var y = document.forms["emailForm"]["confirmation"].value;
			var atpos = x.indexOf("@");
			var dotpos = x.lastIndexOf(".");
			
				if (x != y) {
					  var msg = "The email addresses entered do not match, please enter matching email addresses";
					  document.getElementById("error").innerHTML = msg;
					  return false;
				}
			
				if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 > = x.length) {
					  var msg = "Improper e-mail format";
					  document.getElementById("error").innerHTML = msg;
					  return false;
				}
				
				else {
					return;
				}
	}
</script>
</head>

<body>

	<form name="emailForm" onsubmit="return verifyEmail();" method="post">
		E-Mail Address: <input type="text" name="enterEmail">
		Confirm E-Mail Address: <input type="text" name="confirmation">
		<input type="submit" value="Submit"> <span id="error"></span>
	</form>
	
</body>

</html>

Hi there, so i am working on a website, and on it there is a video with youtube api.

I need to hide all Table-rows that are not during each 5 second time frame.
So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40.

Each TR displays a start time, content, and end time.

Here is what the tables currently look like.
Code:

<table width="600" class="table"  >
  <tr class="item-titles">
    <td width="75" class="none">Start</td>
    <td width="400">Caption</td>
    <td width="75">End</td>
  </tr>


  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
    <td><a href="javascript:player.seekTo(0, false)"></a></td>
    <td><a href="javascript:player.seekTo(5, false)">5</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
    <td><a href="javascript:player.seekTo(5, false)"></a></td>
    <td><a href="javascript:player.seekTo(10, false)">10</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
    <td><a href="javascript:player.seekTo(10, false)"></a></td>
    <td><a href="javascript:player.seekTo(15, false)">15</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
    <td><a href="javascript:player.seekTo(15, false)"></a></td>
    <td><a href="javascript:player.seekTo(20, false)">20</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
    <td><a href="javascript:player.seekTo(20, false)"></a></td>
    <td><a href="javascript:player.seekTo(25, false)">25</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
    <td><a href="javascript:player.seekTo(25, false)"></a></td>
    <td><a href="javascript:player.seekTo(30, false)">30</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
    <td><a href="javascript:player.seekTo(30, false)"></a></td>
    <td><a href="javascript:player.seekTo(35, false)">35</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
    <td><a href="javascript:player.seekTo(35, false)"></a></td>
    <td><a href="javascript:player.seekTo(40, false)">40</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
    <td><a href="javascript:player.seekTo(40, false)"></a></td>
    <td><a href="javascript:player.seekTo(45, false)">45</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
    <td><a href="javascript:player.seekTo(45, false)"></a></td>
    <td><a href="javascript:player.seekTo(50, false)">50</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
    <td><a href="javascript:player.seekTo(50, false)"></a></td>
    <td><a href="javascript:player.seekTo(55, false)">55</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
    <td><a href="javascript:player.seekTo(55, false)"></a></td>
    <td><a href="javascript:player.seekTo(60, false)">60</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
    <td><a href="javascript:player.seekTo(60, false)"></a></td>
    <td><a href="javascript:player.seekTo(65, false)">65</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
    <td><a href="javascript:player.seekTo(65, false)"></a></td>
    <td><a href="javascript:player.seekTo(70, false)">70</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
    <td><a href="javascript:player.seekTo(70, false)"></a></td>
    <td><a href="javascript:player.seekTo(75, false)">75</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
    <td><a href="javascript:player.seekTo(75, false)"></a></td>
    <td><a href="javascript:player.seekTo(80, false)">80</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
    <td><a href="javascript:player.seekTo(80, false)"></a></td>
    <td><a href="javascript:player.seekTo(85, false)">85</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
    <td><a href="javascript:player.seekTo(85, false)"></a></td>
    <td><a href="javascript:player.seekTo(90, false)">90</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
    <td><a href="javascript:player.seekTo(90, false)"></a></td>
    <td><a href="javascript:player.seekTo(95, false)">95</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
    <td><a href="javascript:player.seekTo(95, false)"></a></td>
    <td><a href="javascript:player.seekTo(100, false)">100</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
    <td><a href="javascript:player.seekTo(100, false)"></a></td>
    <td><a href="javascript:player.seekTo(105, false)">105</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
    <td><a href="javascript:player.seekTo(105, false)"></a></td>
    <td><a href="javascript:player.seekTo(110, false)">110</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
    <td><a href="javascript:player.seekTo(110, false)"></a></td>
    <td><a href="javascript:player.seekTo(115, false)">115</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
    <td><a href="javascript:player.seekTo(115, false)"></a></td>
    <td><a href="javascript:player.seekTo(120, false)">120</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
    <td><a href="javascript:player.seekTo(120, false)"></a></td>
    <td><a href="javascript:player.seekTo(125, false)">125</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
    <td><a href="javascript:player.seekTo(125, false)"></a></td>
    <td><a href="javascript:player.seekTo(130, false)">130</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
    <td><a href="javascript:player.seekTo(130, false)"></a></td>
    <td><a href="javascript:player.seekTo(135, false)">135</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
    <td><a href="javascript:player.seekTo(135, false)"></a></td>
    <td><a href="javascript:player.seekTo(140, false)">140</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
    <td><a href="javascript:player.seekTo(140, false)"></a></td>
    <td><a href="javascript:player.seekTo(145, false)">145</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
    <td><a href="javascript:player.seekTo(145, false)"></a></td>
    <td><a href="javascript:player.seekTo(150, false)">150</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
    <td><a href="javascript:player.seekTo(150, false)"></a></td>
    <td><a href="javascript:player.seekTo(155, false)">155</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
    <td><a href="javascript:player.seekTo(155, false)"></a></td>
    <td><a href="javascript:player.seekTo(160, false)">160</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
    <td><a href="javascript:player.seekTo(160, false)"></a></td>
    <td><a href="javascript:player.seekTo(165, false)">165</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
    <td><a href="javascript:player.seekTo(165, false)"></a></td>
    <td><a href="javascript:player.seekTo(170, false)">170</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
    <td><a href="javascript:player.seekTo(170, false)"></a></td>
    <td><a href="javascript:player.seekTo(175, false)">175</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
    <td><a href="javascript:player.seekTo(175, false)"></a></td>
    <td><a href="javascript:player.seekTo(180, false)">180</td>
  </tr>
  

  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
    <td><a href="javascript:player.seekTo(180, false)"></a></td>
    <td><a href="javascript:player.seekTo(185, false)">185</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
    <td><a href="javascript:player.seekTo(185, false)"></a></td>
    <td><a href="javascript:player.seekTo(190, false)">190</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
    <td><a href="javascript:player.seekTo(190, false)"></a></td>
    <td><a href="javascript:player.seekTo(195, false)">195</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
    <td><a href="javascript:player.seekTo(195, false)"></a></td>
    <td><a href="javascript:player.seekTo(200, false)">200</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
    <td><a href="javascript:player.seekTo(200, false)"></a></td>
    <td><a href="javascript:player.seekTo(205, false)">205</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
    <td><a href="javascript:player.seekTo(205, false)"></a></td>
    <td><a href="javascript:player.seekTo(210, false)">210</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
    <td><a href="javascript:player.seekTo(210, false)"></a></td>
    <td><a href="javascript:player.seekTo(215, false)">215</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
    <td><a href="javascript:player.seekTo(215, false)"></a></td>
    <td><a href="javascript:player.seekTo(220, false)">220</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
    <td><a href="javascript:player.seekTo(220, false)"></a></td>
    <td><a href="javascript:player.seekTo(225, false)">225</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
    <td><a href="javascript:player.seekTo(225, false)"></a></td>
    <td><a href="javascript:player.seekTo(230, false)">230</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
    <td><a href="javascript:player.seekTo(230, false)"></a></td>
    <td><a href="javascript:player.seekTo(235, false)">235</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
    <td><a href="javascript:player.seekTo(235, false)"></a></td>
    <td><a href="javascript:player.seekTo(240, false)">240</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
    <td><a href="javascript:player.seekTo(240, false)"></a></td>
    <td><a href="javascript:player.seekTo(245, false)">245</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
    <td><a href="javascript:player.seekTo(245, false)"></a></td>
    <td><a href="javascript:player.seekTo(250, false)">250</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
    <td><a href="javascript:player.seekTo(250, false)"></a></td>
    <td><a href="javascript:player.seekTo(255, false)">255</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
    <td><a href="javascript:player.seekTo(255, false)"></a></td>
    <td><a href="javascript:player.seekTo(260, false)">260</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
    <td><a href="javascript:player.seekTo(260, false)"></a></td>
    <td><a href="javascript:player.seekTo(265, false)">265</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
    <td><a href="javascript:player.seekTo(265, false)"></a></td>
    <td><a href="javascript:player.seekTo(270, false)">270</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
    <td><a href="javascript:player.seekTo(270, false)"></a></td>
    <td><a href="javascript:player.seekTo(275, false)">275</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
    <td><a href="javascript:player.seekTo(275, false)"></a></td>
    <td><a href="javascript:player.seekTo(280, false)">280</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
    <td><a href="javascript:player.seekTo(280, false)"></a></td>
    <td><a href="javascript:player.seekTo(285, false)">285</td>
  </tr>
  

</table>

And you can see the page at

http://134.117.226.43:8000/check_sub...ty/test101/91/

any help ?

Hi,

First the background information - I run a website for the FA, they have recently launched an Under 21's League. They want the Fixture & Results posted on the site, with a league table.

There is the problem, I need to league table to automatically update according to the results I put in.

I believe JavaScript is capable of this, I have spent the last few days learning a basic ~ intermediate level of JS. However, I am still stuck.

If you think you could help me out then reply here, I know this is one hell of a lot of coding so if you can only point me in the right direction that would be great!


A side note -- I was thinking about it and well the JS needs to pull information from another internal web page, which I believe it cannot do. However, I'm lead to believe it could read it from a file on the server? If so I guess I will need to create a form to submit the results?

Hope someone can help me out

Thanks,
Ben

Hey I was hoping someone could point me in the right direction here. I'm supposed to add a <script> in the mainContent div of puppies.htm to generate the opening table tags followed by a header row with cells for Picture, Description, and Date Taken. Obviously these are supposed to be taken from the arrays in puppies.js, but how do i organize those arrays into a table. Any input would be much appreciated. thanks.

puppies.js
Code:

var puppyPics = new Array();
var pictureDesc = new Array();
var pictureDate = new Array();

puppyPics[0] = "AllTheKids.jpg";
puppyPics[1] = "susie.jpg";
puppyPics[2] = "princess.jpg";
puppyPics[3] = "wicketAndCarlos.jpg";
puppyPics[4] = "wicketAndGeorge.jpg";

pictureDesc[0] = "New puppies";
pictureDesc[1] = "Susie";
pictureDesc[2] = "This is Princess";
pictureDesc[3] = "Wicket is very social";
pictureDesc[4] = "Wicket and George";

pictureDate[0] = "January 10, 2011";
pictureDate[1] = "January 10, 2011";
pictureDate[2] = "January 10, 2011";
pictureDate[3] = "January 15, 2011";
pictureDate[4] = "January 15, 2011";

puppies.htm
Code:

<div id="mainContent">
    <h1> My Puppies</h1>
    <p>I made this page to show off my wonderful puppies! I hope you enjoy their pictures.</p>
    <script
	<!-- end #mainContent --></div>

I want to create a table in javascript with a predefined height and width and put html code in its td.
I wanna know when i should stop writing html code when my table have reached the predefined height.
Is there any way to do that?
I started by doing this :


var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = 768;
srcTable.width = 1024;
var tmpRow = null;
var tmpCell = null;
for (i = 0; i < rowCount; i++) {
tmpRow = AppendRow(srcTable)
for (j = 0; j < colCount; j++) {
tmpCell = AppendCell(tmpRow);
tmpCell.innerHTML = document.getElementById("div").innerHTML;
tmpCell = null;

}
tmpRow = null;
}

The html code in "div" element is way big then 768 px. I wanna know how to loop over and break it when table reaches 768 px height.