JavaScript - Problem With Javascript And Css :hover

Hi there,

I am looking to make a javascript hover menu. Like the main hover menus at websites like...

http://www.godaddy.com

and

http://www.mediatemple.com

How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ?

Ok. Basically, I will have images, about 150x100 that are all different.

They will be displayed on a page in groups of 4.

I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha.

To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered.

I know this part of the code, but I don't know what to put inside it:

Code:

$(document).ready(function(){
	$("img").mouseenter(function(){
		//add image on top of this image
	})
	$("img").mouseleave(function(){
		//remove covering image
	})
})

What should I replace the comments with?

Thanks

Hi guys,

I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is ....

I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead.

Here is my code:

Javascript

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

HTML

Code:

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

CSS

Code:

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated!

Thanks in advance!

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Hi guys,

Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item.

The code I am using is the following

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">

function mainmenu(){
	$("#neon li.root").hover(function(){
			$(this).fadeOut('500');
			},function(){	
		$(this).fadeIn('500');
			});	
	}

$(document).ready(function () {		
mainmenu();		
});
</script>

<style type="text/css">


 /* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}

 /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}

/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}

</style>

  <ul id="neon" class="neon">
    <li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
    <li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
  </ul>

Any help would be appreciated!

Thanks!

I got an index.php
Code:

<html>

<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>

As you can see, each of the option brings specific value "../komik1/|23"
komik1 is a directory
| is a delimiter
23 is the pages in one chapter and can be considered also as how many images are there on a specific directory

This is my bacakomik.php
Code:

<?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do  {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">

With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this?
I believe that the fix should be somewhere on input tag inside OnClick, or do you know where?

Anyway, I found this on the net
http://p2p.wrox.com/php-faqs/11606-q...avascript.html
Please help me to those who can...

Hi Guys,

I cant seem to get my piece of code to with IE8, I have created a drop down box which gets counties from a database. I have attached the code below. Can someone please point me in the right direction.

Code:

<script language="JavaScript" type="text/javascript">
   var http = false;
		if(navigator.appName == "Microsoft Internet Explorer") {
		  http = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
		  http = new XMLHttpRequest();
		} 
   var http2 = false;
		if(navigator.appName == "Microsoft Internet Explorer") {
		  http2 = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
		  http2 = new XMLHttpRequest();
		} 
    
function sndReq() {
	if (document.getElementById('country').value == '0' ) {
		document.getElementById('state').disabled = true;
		document.getElementById('state').value = '0';
	} else {
		document.getElementById('state').disabled = false;
	}
	if (document.getElementById('state').value !== null) {
		http.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changepostage&countryid='+document.getElementById('country').value+'&stateid='+document.getElementById('state').value);
	} else {
		http.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changepostage&countryid='+document.getElementById('country').value);
	}
	http.onreadystatechange = changepostage;
	http.send(null);
}

function changepostage(){
	if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();
	if(response.indexOf('*' != -1)) { 
		 update = response.split('*');
		 document.getElementById(update[1]).innerHTML= update[0];
		 document.getElementById(update[3]).innerHTML= update[2];
		 document.getElementById(update[5]).innerHTML= update[4];
		 document.getElementById(update[7]).innerHTML= update[6];
			}
		}		
}

function sndCountry() {
	http2.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changecountry&countryid='+document.getElementById('country').value);
	http2.onreadystatechange = changestate;
	http2.send(null);
}

function changestate(){
	if(http2.readyState == 4){
        var response = http2.responseText;
				document.getElementById('state').innerHTML= response;
	}
}
</script>

The error from IE8 is document.getElementById(....) is null or not an object. Line 172 which is This Code:

 
		 document.getElementById(update[5]).innerHTML= update[4];

Thanks,
Jordan

When I run the following code in IE9 it will not display the warning text but it will change the input box color any suggestions to get this to work would be helpful.

Code:

<style>
input.valid { background: #afa; }
input.invalid { background: #faa; }
.show {visibility: visible; color: #FF0000;}
.disappear {visibility: hidden;}
</style>

Code:

<SCRIPT type="text/JavaScript">
<!-- // hide from older browsers
function confirm_password() {
	if (document.userinfo.password.value == document.userinfo.passwordconf.value) {
		document.userinfo.passwordconf.className = "valid"; //Greenish background color
		document.getElementById('span1').className = "disappear";
	} else {
		document.userinfo.passwordconf.className = "invalid"; //Reddish background color
		document.getElementById('span1').className = "show";
	}
}
// -->
</SCRIPT>

Code:

<form name="userinfo" method="POST" action="#">
	Email: <input type="text" name="email"><br>
	Password: <input type="password" name="password"><br>
	Confirm Password: <input type="password" name="passwordconf" onClick="confirm_password()" onFocus="confirm_password()" onChange="confirm_password()" onKeyUp="confirm_password()" onBlur="confirm_password()"><span id="span1" class="disappear">Warning Passwords to not match!</span><br>
	<input type="submit" name="submit" value="submit">
</form>

Hello, I have two arrays sd[16][16] and gd[16][16] in javascript. I need to compare the values of the arrays.

Code:
Code:

var score=0;
document.write("<table>");
for(c1=0; c1<16; c1++)
{   document.write("<tr>");
    for(c2=0; c2<16; c2++)
        document.write("<td onClick='changeColor(this);'>" + gd[c1][c2] + "</td>");
    document.write("</tr>");
}
document.write("</table>");

function changeColor(tdd)
{
    if(tdd.bgColor=='white')
    {
        tdd.bgColor='red'; 
        if (gd[c1][c2] == sd[c1][c2])
            score+=5; 
        else
            score-=2; 
    }
    else
    {
        tdd.bgColor='white'; 
    }
}

function scc()
{
    document.getElementById('scf').innerHTML = score;
}
</script>
<br><br><center><button type='button' onclick='scc()'> Click to see current score</button> <p id="scf">0</p> </center>
<br><br> <center><input type="submit" value="Get Solution"/></center>

When I try to display score by clicking the "Click to see current score" button, the score is not displayed. Could someone please tell me the problem.

Hi there,

I only just learning JavaScript and have a question about a bit of script I am playing with. I am basically trying to access XML elements (RSS feed) through a bit of PHP. Everything is working fine when trying to access the <title> and <link>, but when I get to <description> everything breaks down...

If I comment out this line var theDescription = descriptions[j].childNodes[0].nodeValue; and <p>' + theDescription + '</p>' then the script works fine and displays the titles and the links of the feed, but with those lines in it all goes to pot.

Can anyone tell me what I am doing wrong here?

(By the way, don't worry about my method of getting the feed in, using GET etc. This script is part of an AJAX tutorial and I am just messing with it, trying to make it display the title, link, and description from the rss feed)


Here is my html/JavaScript:

Code:

<html><head><title>AJAX XML Example</title>
</head><body>
<h2>Loading XML content into a DIV</h2>
<div id='info'>This sentence will be replaced</div>
<script>

nocache = "&nocache=" + Math.random() * 1000000
url = "rss.news.yahoo.com/rss/topstories"
request = new ajaxRequest()
request.open("GET", "xmlget.php?url=" + url + nocache, true)
out = "";

request.onreadystatechange = function()
{
	if (this.readyState == 4)
	{
		if (this.status == 200)
		{
			if (this.responseXML != null)
			{
				titles = this.responseXML.getElementsByTagName('title')
				links = this.responseXML.getElementsByTagName('link')
				
				descriptions = this.responseXML.getElementsByTagName('description'); 
				
				for (j = 0 ; j < titles.length ; ++j)
				{
					var theTitle = titles[j].childNodes[0].nodeValue;
					var theLink = links[j].childNodes[0].nodeValue;
					var theDescription = descriptions[j].childNodes[0].nodeValue;

					out += '<p><strong>' + theTitle + '</strong><br /><a href="' + theLink + '">' + theLink + '</a></p><p>' + theDescription + '</p>' ;
					
				}
				document.getElementById('info').innerHTML = out	
			}
			else alert("Ajax error: No data received")
		}
		else alert( "Ajax error: " + this.statusText)
	}
}

request.send(null)

function ajaxRequest()
{
	try
	{
		var request = new XMLHttpRequest()
	}
	catch(e1)
	{
		try
		{
			request = new ActiveXObject("Msxml2.XMLHTTP")
		}
		catch(e2)
		{
			try
			{
				request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch(e3)
			{
				request = false
			}
		}
	}
	return request
}
</script></body></html>

Here is the PHP:

Code:

<?php // xmlget.php
if (isset($_GET['url'])) {
	header('Content-Type: text/xml');
	echo file_get_contents("http://".sanitizeString($_GET['url']));
}

function sanitizeString($var) {
	$var = strip_tags($var);
	$var = htmlentities($var);
	return stripslashes($var);
}
?>

Hi All,

I am desperately pulling my hair out... can you help me understand how I can resolve the below errors:

SCRIPT1028: Expected identifier, string or number
calender.js, line 318 character 17
SCRIPT1006: Expected ')'
blenheim-palace-lunch-cotswolds-p-170.html, line 88 character 35
SCRIPT5007: The value of the property 'getStartDate' is null or undefined, not a Function object
blenheim-palace-lunch-cotswolds-p-170.html, line 643 character 7

For this web address... http://tinyurl.com/79msxqm

What can I change to fix the issue? The site is working properly in all other browsers but not IE9.

Hope you can help. Thanks.

I have an html page with javascript on it, but the page will not work properly. Spent a lot of time on this and can not get it right.
Wonder if someone ca help.

I'm having a problem with a javascript code I put together. For all of the PHP, CSS, HTML that I know, well it doesn't carry over to JavaScript, so my attempt at trying this is probably a very bad attempt.

Anyways, what I'm trying to accomplish with this code is to get the height of one table and set the padding-bottom to another table, to keep page dimensions even.

Code:

<script type="text/javascript">
var divArray = document.getElementById('tablecontent').offsetheight;
//Subtracting 442 because that's the height of the table. I'm just trying to add onto the bottom.
var subtraction = divarray - 442;
var tablesidebar = document.getElementById('tablesidebar');
tablesidebar.style.paddingbottom = subtraction + 'px';
</script>

Any help to get this working is well appreciated.

Thanks,
Jeremy

hi all i m having the following problem and i m a newbie in javascript.
i have 6 .html pages and 1 .js page and those 6 html pages make use of .js page for functions. each html page contains yes or no button.

i have problem in validation
1) As soon as the user click 3 yes's he should b directed to the result.html page

.plzz reply its urgent.


Thanks..

Hi im wondering if someone could be of some help please, im a newbie to javascript and after some help and advice if possible please. Ive used a template from the web which was a quiz template. Im just trying to get my javascript script to work. I want it to populate my html question/advice box so people can input what there answer to the question and it will give them advice. It's for a data classification advice for a work project. I just dont know where im going wrong or what im missing out - ive read loads of help sections on the web and still cant get the javascript to populate my html boxes. Any help or advice would be really appreciated.

Thanks

Lee

Heres my html code which seems to work ok... the box etc is displayed just doesnt have any content.
-----------------------------------------------------------------------
Code:

 <form method="POST">
  <div align="center"><center><table BORDER="1">
    <tr>
      <td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="+3"
      COLOR="#FFFFFF">Data Classification </font></td>
    </tr>
    <tr>
      <td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="-1"
      COLOR="#FFFFFF">2010 <a HREF="Data Governance</font> </p>
      </center></div><div align="center"><center><p><font COLOR="#FFFFFF">Click on &quot;Next
      Question&quot; to start advice. Be sure to use small letters (no caps) when entering your
      letter choice.</font> </td>
    </tr>
    <tr>
      <td><b>Question&nbsp;#:</b></td>
      <td ALIGN="LEFT"><input TYPE="TEXT" NAME="questNo" SIZE="4"></td>
    </tr>
    <tr>
      <td><b>Question:</b></td>
      <td><div align="center"><center><p><textarea COLS="70" ROWS="2" name="question"
      wrap="virtual"></textarea></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>a)</b></td>
      <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceA" SIZE="75"></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>b)</b></td>
      <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceB" SIZE="75"></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>c)</b></td>
      <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceC" SIZE="75"></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>d)</b></td>
      <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceD" SIZE="75"></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>Your choice:</b></td>
      <td><input TYPE="TEXT" NAME="yourChoice" SIZE="4"></td>
    </tr>
    <tr>
      <td COLSPAN="2"><div align="center"><center><p><input TYPE="button"
      VALUE="Check Current Advice" onClick="checkAnswer(this.form)"><input TYPE="button"
      VALUE="Next Question" onClick="nextQuestion(this.form)"> <input TYPE="reset"
      VALUE="Start Over" onClick="clearForm(this.form)"></td>
    </tr>
    <tr>
      <td ALIGN="RIGHT"><b>Results:</b></td>
      <td><div align="center"><center><p><textarea COLS="70" ROWS="3" name="Advice"
      wrap="virtual"></textarea></td>
    </tr>
    <tr>
</form>

--------------------------------------------------------------------------
Now heres my javascript which i just cant seem to get to work or integrate with the html question/advice box. There will be some text in there that was originally part of the template that i was going to remove at a later stage once id got a better underatnding of where i was going wrong.


Code:

 <html>
<head>
<script LANGUAGE="JavaScript">


<!-- hide this script tag's contents from old browsers --->

function jumpBox(list) {
   location.href = list.options[list.selectedIndex].value
   }

//Lee Quinn 2010  All Rights Reserved


function init() 
              {

                             

              questions = new Array()
              questions[1] = "Is the information you are collecting or creating any of the following?"
              questions[2] = "Is the information you are collecting or creating any of the following?"
              questions[3] = "Is the information you are collecting or creating any of the following?"
              questions[4] = "Is the information you are collecting or creating any of the following?"
              

              answerA = new Array()
              answerA[1] = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases"
              answerA[2] = "Employee Handbook,Telephone Directory,Organization Charts,Policies and Standards,Training Manuals"
              answerA[3] = "Customer records, Correspondence containing customer information, Credit card listings,Personnel records/Employee performance reviews,Unit business plans,Proprietary/custom software,Budget information,Internal audit reports,Business reports on strategy, exposures etc"
              answerA[4] = "Strategic Plans,Encryption keys,Details of mergers or acquisitions,Financial results prior to publication,Online access codes such as passwords or pin"
              

              answerB = new Array()
              answerB[1] = "None of the above"
              answerB[2] = "None of the above"
              answerB[3] = "None of the above"
              answerB[4] = "None of the above"
              
              
              rightAns = new Array
              rightAns[1] = "A"
              rightAns[2] = "b"
              rightAns[3] = "c"
              rightAns[4] = "d"
              
              reference = new Array()
              reference[1] = "You have indicated yes to question 1, therefore the information you are collecting/creating will be classified as PUBLIC information. It is information that can be disclosed to anyone without violating an individual?s right to privacy. Knowledge of this information does not expose CFS to financial loss, embarrassment, or jeopardize the security of assets."
              reference[2] = "You have indicated yes to question 2, therefore the information you are collecting/creating will be classified as INTERNAL USE information. It is information that, due to technical or business sensitivity, is limited to employees and contractors who work on-site. It is intended for use only within CFS. Unauthorized disclosure, compromise, or destruction would not have a significant impact on CFS or its employees."
              reference[3] = "You have indicated yes to question 3, therefore the information you are collecting/creating will be classified as CONFIDENTIAL information. It is information that CFS and its employees have a legal, regulatory, or social obligation to protect. It is intended for use solely within defined groups in CFS. Unauthorized disclosure, compromise, or destruction would adversely impact CFS its customers or its employees. 
Unless otherwise stated all data should be treated as CONFIDENTIAL.Sensitive data = Confidential or Highly Confidential data."
              reference[4] = "You have indicated yes to question 4, therefore the information you are collecting/creating will be classified as HIGHLY CONFIDENTIAL information, It is the highest level of classification and is information whose unauthorized disclosure, compromise, or destruction could result in severe damage, provide significant advantage to a competitor, or incur serious financial impact to CFS or its employees. It is intended for restricted use by a very small number of people (possibly 0 or 1) with an explicit, predetermined need to know."
    

              } 

function nextQuestion(form)

//set the total number of questions equal to quizend

{   var quizEnd = eval(4 * 1);

    if(form.questNo.value =5= quizEnd) {

       form.question.value = "1";

       form.choiceA.value = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases";

       form.choiceB.value = "None of the above";

       form.choiceC.value = "Unsure";

       form.yourChoice.value = "a,b,c,d";

       form.results.value = "End of Advice.  Your final results are listed below."; } else {

    if(form.questNo.value == "") {form.questNo.value = 1} else {
    
       form.questNo.value = eval(form.questNo.value) + 1;

    }
    form.question.value = questions[form.questNo.value];

    form.choiceA.value = answerA[form.questNo.value];

    form.choiceB.value = answerB[form.questNo.value];

    form.choiceC.value = answerC[form.questNo.value];

    form.choiceD.value = answerD[form.questNo.value];

    form.yourChoice.value = "";

    form.results.value = "";

    if(form.myScore.value == "") {form.myScore.value = 0; } else {
                                                  form.myScore.value = form.myScore.value; }

   }

}

   function checkcurrentadvice(form) {
      
      var myScore = 0;
      var curve = 0;

      if(form.results.value != "") {form.results.value = "Sorry, no guessing allowed.  In order to retry this question you will have to start the quiz over.  Click on ''Next Question'' to continue."; }

      else if(form.yourChoice.value == rightAns[form.questNo.value]) {
      form.myScore.value = eval(form.myScore.value) + eval(1);
      form.results.value = "Conratulations!  You are correct. That brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ".  Click on ''Next Question'' to continue."; } else {
      
      form.results.value = "Sorry, you are incorrect. Please refer to " + reference[form.questNo.value] + " before retaking the quiz.  This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ".  Click on ''Next Question'' to continue." }


function clearForm(form)

{

    
    form.questNo.value = "";
    form.question.value = "";
    form.choiceA.value = "";
    form.choiceB.value = "";
    form.choiceC.value = "";
    form.choiceD.value = "";
    form.yourChoice.value = "";
    form.results.value = "";
    form.myScore.value = "";
    form.percent.value = "";
    form.grade.value = "";
    

}

</script>
</head>
</html>

Hi all I am a newbie and I don't know much about JavaScript. Can anyone help me with an issue that I am having.

Please see code below.

Code:

  <form id="mySurvey" name="mySurvey" onSubmit="return markMe(this);">
<table width="510" border="0" cellspacing="0" cellpadding="0" align="center" class="datatable1">
	  <tr> 
	  	<th class="leftme" width="15">&nbsp;</a></th>
	    <th width="465">TASKS/ACTIVITIES</th>
	    <th width="30" class="midme">HRS</th>	
		<th width="30" class="midme">MINS</th>
	  </tr>
	  <tr> 
	    <td class="leftme">1.</td>
	    <td>Sleep</td>
	    <td class="midme">
			<select name="option1h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option1m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">2.</td>
	    <td>Food Preparation/consumption (breakfast, dinner, lunch)</td>
	    <td class="midme">
			<select name="option2h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option2m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">3.</td>
	    <td>Work commitments</td>
	    <td class="midme">
			<select name="option3h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option3m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">4.</td>
	    <td>Exercise/recreational sports</td>
	    <td class="midme">
			<select name="option4h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option4m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">5.</td>
	    <td>Socialising</td>
	    <td class="midme">
			<select name="option5h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option5m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">6.</td>
	    <td>Family commitments</td>
	    <td class="midme">
			<select name="option6h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option6m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">7.</td>
	    <td>Relaxation (watching television etc.)</td>
	    <td class="midme">
			<select name="option7h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option7m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">8.</td>
	    <td>Travel</td>
	    <td class="midme">
			<select name="option8h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option8m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>
	  <tr> 
	    <td class="leftme">9.</td>
	    <td>Other</td>
	    <td class="midme">
			<select name="option9h" size="1">
				<option value="0" selected>0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>			
			</select>
		</td>
		<td class="rightme">
			<select name="option9m" size="1">
				<option value="0" selected>0</option>			
				<option value="5" >5</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
				<option value="25">25</option>
				<option value="30">30</option>
				<option value="35">35</option>
				<option value="40">40</option>
				<option value="45">45</option>
				<option value="50">50</option>
				<option value="55">55</option>
			</select>		
		</td>
	  </tr>	  	  	  	  	  	  	  
	  <tr> 
	    <th colspan="4" class="midme"><input type="submit" value="Submit"></th>	
	  </tr>  
	</table>
</form>

</div>


<script language="JavaScript">
<!--

function markMe(mySurvey){

	var timeCount = 0; var timeLeft=0; var totalHours = 0; var totalMins = 0; 
	for (var i=0; i < mySurvey.elements.length; i++){	
		var e = document.mySurvey.elements[i];
    	var inputType = e.type;	var inputName = e.name; var inputValue = e.value;
		if (inputType == 'select-one'){
			
			var theLength = inputName.length;
			var theKey = (inputName.substring(theLength - 1, theLength));
			if (theKey == 'h'){
				timeCount+=parseFloat(inputValue*60);
			}
			if (theKey == 'm'){
				timeCount+=parseFloat(inputValue);
			}
		}
	}
	
	if (timeCount > 1440){
		alert('TRY AGAIN:\n\nThere are only 24 hours in a day - please re-calculate your figures!');
		document.getElementById("theresponse").innerHTML = '';
	}
	else{
		timeLeft = (1440 - timeCount);
		totalHours = parseInt(timeLeft/60);
		totalMinutes = (timeLeft%60);
		var myResponse = ('<b>Based on these calculations, you have a maximum of ' + totalHours + ' hours and ' + totalMinutes + ' minutes free time for this course.</b>');

		if (document.getElementById){
			document.getElementById("theresponse").innerHTML = myResponse;
		}	
		else {
		alert ('myReponse')
		}
	}

return false;	
}
//-->
</script>

Thanks in advance for any help,

Fergal

Hi all,

I have a Javascript problem that only seems to happen in IE... it works fine in Firefox as I've tested!

I have this function:

Code:

function show_video1(){
	document.getElementById('video1').style.display="block";
	document.getElementById('video2').style.display="none";
	document.getElementById('video3').style.display="none";
}
function show_video2(){
        document.getElementById('video1').style.display="none";
	document.getElementById('video2').style.display="block";
	document.getElementById('video3').style.display="none";
}
function show_video3(){
        document.getElementById('video1').style.display="none";
	document.getElementById('video2').style.display="none";
	document.getElementById('video3').style.display="block";
}

etc...

what it does is basically switch videos, when a link is click. The problem in IE is that the video continues to play when switched... meaning that videos play 'over the top of each other'.

Can anyone advise on this, as I say seems to be fine in Firefox!

Many thanks,

Greens85

PHP Code:
?><script type="text/javascript">    
                        var answer=confirm("Do you want to update your email?");                
                            if(answer==true)
                            {
                            <?php
                            mysql_query("update user set u_email ='$email' where u_user='$username'");
                            ?>
                            
                            alert ("You choose update your email.");
                        
                            }
                            if(answer==false)
                            {
                            alert ("You had rejected to update your email.");
                            //answer=0;
                            }
                            
                    </script> <?

i put this javascript within my php, it should perform update when i click ok, and perform nothing when i click cancel, but the problem is, it will still perform update although i click cancel. someone can solve this for me pls..?

Hi and hope someone can help.

I'm trying to put together some code within a form that tests whether someone has supplied an email address or a telephone number when the Submit button is pressed. Neither of these fields are require mandatory input.

Trouble is my current code always supplies a true result even if no data is put in these fields i.e. the 1st IF statement returns true. What am I doing wrong?

Here's my code.
Thanks
R
_____
Code:

<script type="text/javascript">
function check_id() {
	if (document.feedback.email !="" || document.feedback.tel !="") {
		alert("Thank you. You will be entered into our free prize draw. Good luck!");
	} else if (document.feedback.email =="" && document.feedback.tel =="") {
		confirm("You will not be entered in our free prize draw unless you supply your email address or telephone number. Is that O.K?");
	}
}
function clear (){
	var email="";
	var tel="";
}
</script>

    <form action="" method="get" name="feedback" enctype="application/x-www-form-urlencoded" onSubmit="check_id();" onReset="confirm('This will clear all your entries, is that O.K?'); clear();">
          <div>
        <label for="email">Your email address:</label>
        <input name="email" type="text" id="email" size="50" value="" />
      </div>
      <div>
        <label for="tel">Your telephone number:</label>
        <input name="tel" type="text" id="tel" size="50" value="" />
      </div>
      <div>
        <input type="reset" name="reset" id="reset" value="Reset" />
        <input type="submit" name="submit" id="submit" value="Submit" />
      </div>
</form>

Hi there,

If anyone can help me it would be incredibly appreciated.

I have this JavaScript file below. Currently it roll's over the image fine but the image stays as the hover after the mouse rolls over. Is there a really quick way to add a roll off/ mouse off function so the image rolls back to the underlying image?

Again thank you in advance for any help you can provide for this problem as I'm very new to JavaScript!
Chris

***********
"// JavaScript Document

$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function() {
$('<img />').attr('src', $(this).attr('data-hover'));
});;
});
***********