JavaScript - Problem In Adding Div Element (dom)

Code:

function offPar(){
   alert(this.offsetParent.id);
}

function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");

mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);

}

window.addEventListener('load', init, false);

HTML :
<div id = "content"> 

 <div id = "mid"> 
    <div id = "inner">
       <p class = "par">
       </p>
    </div>
 </div>

</div>

I can add an event listener to the #mid div but I can't to the #inner div.
Anyone now why this is? Sorry I can't provide more info. That's all I Know!

TTFN
John

I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element.

I've been using the script from quirksmode but it can be hard to get working.
Code:

function doSomething(e) {
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
}

I have a function that needs to work only when the parent is moused out of.
I didn't make this script.

It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)"
in the html

Code:

function transition(ele,dirflag) {

 if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
  ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
  ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
  ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
  ele.dirflag = dirflag; // changed name to dirflag, stored for reference
  if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
  if(dirflag) { // 1 or true = increment
	// alter visibility here to make an invisible item visible before starting
	ele.style.display='block';
	ele.intrans= setInterval(function() {
	  if(ele.copac<ele.eopac ) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
		if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
		ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
		if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
	  }
	},intrval); // do it on intrval timeline
  } else { 
  
 // 0 or false = decrement
	ele.intrans= setInterval(function() {
	  if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
		if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
		ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
		if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.MozOpacity = ele.copac;
        ele.style.KhtmlOpacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
		// and make the item disappear here since it's done transitioning.
		ele.style.display='none';
	  }
	},intrval); // do it on intrval timeline
  }
} // all done!

I tried to do this: Code:

function transition(ele,dirflag,e){

if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment 
........

With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event)

but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all.

I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong.

and please no script librarys.

Code:

var bakaBanner;
bakaBanner = document.getElementById('head');
if (bakaBanner) {
var str=/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/;
document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png"));
}

Alright, here's the deal... This is a script to be used in Greasemonkey. The page this is for changes their banner every 5 minutes, the name changes and it could be either jpg or png.

I'm fairly certain my regex itself:
\/images\/banners\/[A-Za-z0-9_]+.[a-z]+
Is correct... Here's an example of what it's looking through:

Code:

<div id="head"  style="background-image: url(/images/banners/kiminitodoke.jpg);" >
	<div id="header_left">
		<div id="rss">

My guess is that it has something to do with this line:
document.write(str.replace(/\/images\/banners\/[A-Za-z0-9_]+.[a-z]+/, "http://img218.imageshack.us/img218/5904/revyblacklagoon1.png"));

I'm new with Javascript, so I don't really understand why it's not working... :/

Hello

I am fairly new to Javascript. I have a function which takes a string which consists of key value pairs and sets a form control based on key being the form element name and value being the value to set. eg string could be "key1=orange;key2=2;key3=whetever"

Here is the function:

function processresponse(frm, serverResponse) {
var items = serverResponse.split(";");
for(var i = 0; i < items.length; i++)
{
var item = items[i];
var eqchar = item.search("=");
if(eqchar != -1)
{
var key = item.slice(0, eqchar);
var value = item.slice(eqchar+1);
var elemname = key;

if(document.getElementById(elemname) != null) {
var type = frm.elements[elemname].type;
if (type=="checkbox") {
value == "1" ? frm.elements[elemname].checked=true : frm.elements[elemname].checked=false;
}
else if (type=="text"){
//do processing for text (text input)
frm.elements[elemname].value = value;
}
else if(type=="select-one"){
//only one is openformmode - default to [0] - true
if(value == "0" || value.length == 0)
{
frm.elements[elemname].options[0].selected = true;
}
else
{
frm.elements[elemname].options[1].selected = true;
}
}
else {
alert("unknown ctrl type: " + type + " name: " + frm.elements[elemname].name + " val: " + value + " key: " + key);
}
} //if(frm.getElementById(elemname)
}
}
}

The problem line is:
var type = frm.elements[elemname].type;

elemname is case sensitive so if for example the form element is called dog and the string elemname is Dog, then the line fails with Error: 'elements[...].type' is null or not an object

So my check if(document.getElementById(elemname) != null) is insufficient to guard against this.

I realise I could do a try catch but there must be a more legant way than that.

How can I test the formname more reliably?

Any ideas would be very welcome.

Angus

Hi guys,

I am currently stuck up on something.. check this page

http://dev.andrewfopalan.com/new_slider.html

Well for starters.. I am trying to mimic this effect..
http://www.vogue.com/

The slider on the very top..

A quick preview of what I did was.. I used this plugin.. easyslider()..

And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that..

The first problem was how to make it center like the one on the vogue.. so it was done...

Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser..

So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done..

My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through...

here's the code for the next button:

Code:

// this gets the current location of the active slider on the list..

$("a#"+options.nextId).click(function(e){	
var id= $('.active').attr('id');

//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..

$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');

// this is the plugin's animation to move to the next slide..
animate("next",true);

Heres' the code for the animate

Code:

function animate(dir,clicked){
    if (clickable){
clickable = false;
var ot = t;				
switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break;
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						
						$("ul",obj).animate(
							{ marginLeft: p}, 
							{ queue:false, duration:speed, complete:adjust,
							
							  }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};

heres the adjust code function

Code:

function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};

I am very still new to this jQuery thing.. but I am trying my best to learn..

Hope someone could teach me and help me on this...

Hi,

I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text.

The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call.

I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below:

The code below is PHP.
The table mouseover (for reference):
Code:

echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
	    echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
	    echo "<tr><th>&nbsp;</th><th>&nbsp;</th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";

The anchor mouseover:
Code:

echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
		echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
		echo "</table>";

The function (javascript):
Code:

function updateHelpText(newText) {
		document.getElementById("helpBox").innerHTML = "<h4>&nbsp;" + newText + "</h4>";
	 }

Any help with this would be great, thanks.

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks.

I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed.
Code:

<div class="scroll-pane" id="scrollbox">
	WORDPRESS BLOG		     
</div>

My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code.

Code:

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('scrollbox');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues.

Is this possible by editing the above code? If not what do I need?

Thanks in advance for any help!

So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped.

I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to show a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function:

Code:

function definitionRollover(){
	var j;
	var dfns = document.getElementsByTagName('dfn')
	for (j=0; j<dfns.length;j++){
		var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1);
		var definitionArray = new Array(term, dfns[j].title);
		dfns[j].onmouseover = function(){stm(definitionArray,Style[0])}
		
		dfns[j].onmouseout = function(){htm();};
	}
}

As you can see I am adding a onmouseover event to these <dfn> tags which calls another function (stm) with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one.

I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated.

Hi Guys,

Been stuck on this for too long now. I'm trying to write a function that rotates images with a fade.

The function work properly, however I can't make the images fade back in.

The fadein function won't add to the .style.opacity

Here's the code with the php

Code:

function fadeout()
        {
            b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity - 0.01);
            if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 0.1)
            {
                clearInterval(fadeouttimer);
                b<?php echo ($AF_list_artist_id->artist_id); ?>.src = a<?php echo ($AF_list_artist_id->artist_id); ?>[starter<?php echo ($AF_list_artist_id->artist_id); ?>];
                
                function fadein()
                {
                    
                    b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity + 0.01);
                    //alert(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity);
                
                
                    if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 1)
                    {
                        clearInterval(fadeintimer);
                        setTimeout("rotate<?php echo ($AF_list_artist_id->artist_id); ?>("+(starter<?php echo ($AF_list_artist_id->artist_id); ?>+1)+")",6000);
                    }
                
                }
                
                var fadeintimer = setInterval(fadein,10);
            }
        }
        var fadeouttimer = setInterval(fadeout,10);

and without

Code:

function fadeout()
{
b7.style.opacity = (b7.style.opacity - 0.01);
if(b7.style.opacity == 0.1)
{
clearInterval(fadeouttimer);
b7.src = a7[starter7];

function fadein()
{

b7.style.opacity = (b7.style.opacity + 0.01);
//alert(b7.style.opacity);


if(b7.style.opacity == 1)
{
clearInterval(fadeintimer);
setTimeout("rotate7("+(starter7+1)+")",6000);
}

}

var fadeintimer = setInterval(fadein,10);
}
}
var fadeouttimer = setInterval(fadeout,10);

Hey, im having another problem with my JavaScript. I wanted to call 2 functions inline, but I can't seem to do it. So I have added the function (add_event_listeners) to the function (load_doc) that is usually called.

JavaScript debugger is saying: Code:

Uncaught TypeError: Cannot read property 'addEventListener' of null

JavaScript:
PHP Code:
//Get httpobject
function getHTTPObject() {
    var http = false;
    if (window.XMLHttpRequest) { 
        http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return http;
}
//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
    if ( elm.addEventListener ) {
        elm.addEventListener( evt, fun, false );
    } else if ( elm.attachEvent ) {
        elm.attachEvent( 'on' + evt, fun );
    } else {
        elm [ 'on' + evt ] = fun;
    }
};

function load_doc(doc, parent) {
    add_event_listeners();
    document.getElementById(parent).innerHTML = "Fetching data...";
    var http = getHTTPObject();
    if (http != undefined) {
        http.onreadystatechange = function() { req_doc(doc, parent, http); };
        http.open("GET", doc, true);
        http.send("");    
    }
}
function req_doc(doc, parent, req) {
    if (req.readyState == 4) {//only if req is loaded
        if (req.status == 200) {//And if its okay
            document.getElementById(parent).innerHTML = req.responseText;
        } else {
            document.getElementById(parent).innerHTML = "Error fetching data: " + req.status + "\n" + req.statusText;
        }
    }
}

//Script used to hide elements. Usage: expand(element id)
function expand(elm) {
    var ex = document.getElementById(elm).style.display;
    if (ex == "none") {
        var obj = document.getElementById(elm);
        obj.style.display = "inline";
    } else if (ex == "inline") {
        var obj = document.getElementById(elm);
        obj.style.display = "none";
    }
}
function add_event_listeners() {
    addEvent(document.getElementById('username'), "click", check_database);
    addEvent(document.getElementById('email'), "click", check_database);
    addEvent(document.getElementById('password_2'), "blur", check_password);
}
var check_database = function() { check_database_existing(this); };
var check_password = function() { compare_fields(this); };

function check_database_existing(obj) {
    
}
function compare_fields(obj) {
    var field2 = obj.id.split("_");
    field2 = document.getElementById(field2[0]).value;
    if (obj.value == field2) { 
        if (obj.value.length >= 4) {
            document.getElementById("pass_status").style.color = "#00CC00";
            document.getElementById("pass_status").innerHTML = "OK!";
        } else {
            document.getElementById("pass_status").innerHTML = "Please must be between 5 - 14 characters long! ";
            document.getElementById("pass_status").style.color = "#FF0000";
        }
    } else {
        document.getElementById("pass_status").innerHTML = "Passwords do not match!";
        document.getElementById("pass_status").style.color = "#FF0000";    
    }
} 


HTML:
Code:

<div style="border-color:#090; border-width:1px; border-style:solid;">
<div class="login_button register_button" onClick="load_doc('pages/forms/login_form.php', 'login_form')">Back to login</div>
<h1>Register</h1>
    <h3>DrawSomething - WordGuesser</h3>
    <br />
	<form id="register" action="php/register.php" method="post">
		Username<br /><h4 id="username_status">(waiting)</h4><br /><input type="text" name="username" id="username" class="text login_field"><br />
        Email<br /><h4 id="email_status">(waiting)</h4><br /><input type="email" name="email" id="email" class="text login_field"><br />
        --<br />
        Password<br /><input type="password" name="password" id="password" class="text login_field"><br />
        Retype<br /><h4 id="pass_status">(waiting)</h4><br /><input type="r_password" id="password2" name="password" class="text login_field">
        <br />
		<input type="submit" value="Register" class="button green" />
	</form>
</div>

Hi,

I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

If I'm not making myself clear, please let me know and I will try to explain it better

Thanks
walkie


index.htm
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
	<div id="leftSide">
    	<!--Site Title-->
    	<div id="title">
        	<!--Main Title-->
        	<h1><span></span>Identity</h1>
            <!--Caption/Sub Title-->
            <span class="titleSubText">the portfolio of john smith</span>
        </div>
        <div id="arrowWrapper"><div id="arrow"></div></div>
    	<div id="buttonsWrapper">
        
        	<!--About Button-->
        	<div id="aboutButtonWrapper">
            	<div class="navButton" id="aboutButton"></div>
                <div class="navCaption" id="aboutCaption">
                	<!--About Button: Label-->
                	<span class="navCaptionText">about</span><br />
                    <!--About Button: Sub-Label-->
                	<span class="navSubCaptionText">who I am</span>
                </div>
            </div>
            
        	<!--Portfolio Button-->
        	<div id="portfolioButtonWrapper">
            	<div class="navButton" id="portfolioButton"></div>
                <div class="navCaption" id="portfolioCaption">
                    <!--Portfolio Button: Label-->
                	<span class="navCaptionText">portfolio</span><br />
                    <!--Portfolio Button: Sub-Label-->
                	<span class="navSubCaptionText">my work</span>  
                </div>
			</div>
            
        	<!--Services Button-->
        	<div id="servicesButtonWrapper">
            	<div class="navButton" id="servicesButton"></div>
                <div class="navCaption" id="servicesCaption">
                	<!--Services Button: Label-->
                	<span class="navCaptionText">services</span><br />
                    <!--Services Button: Sub-Label-->
                	<span class="navSubCaptionText">what I do</span>                  
                </div>
            </div>
            
        	<!--Contact Button-->
        	<div id="contactButtonWrapper">
            	<div class="navButton" id="contactButton"></div>
                <div class="navCaption" id="contactCaption">
                	<!--Contact Button: Label-->
                	<span class="navCaptionText">contact</span><br />
                    <!--Contact Button: Sub-Label-->
                	<span class="navSubCaptionText">get in touch</span>                  
                </div>
            </div>
            
        </div>
    </div>
    
    <div id="contentPanelWrapper">
		<div id="contentPanelEdge"></div>
        
        
        <!--Wrapper That Contains 'About' Content-->
        <div class="content" id="aboutContent">
        	<!--Title-->
        	<div class="contentTitle">about</div>
            <!--Body Text-->
            <div id="aboutText">
            	<h3>Who I Am</h3><br />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
            	dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
            	Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
            	sagittis id neque.</p><br />
                <p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
            	pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Portfolio' Content-->
        <div class="content" id="portfolioContent">
        	<!--Title-->
        	<div class="contentTitle">portfolio</div>
            <!--Image Slider-->
            <div id="portfolioSlider">
            	<div id="sliderToolbar">
                	<div class="sliderButton" id="prevButton"></div>
                    <div class="sliderButton" id="nextButton"></div>
                </div>
            	<div id="imageWrapper">
            		<ul id="imgList">
						<!--Portfolio Images Go Here (See Documentation)-->
            			<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
                	</ul>
                </div>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Services' Content-->
        <div class="content" id="servicesContent">
        	<!--Title-->
	  		<div class="contentTitle">services</div>
            <!--Service 1 Column-->
            <div class="serviceColumn" id="serviceColumn1">
            	<h3>Identity Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 2 Column-->
            <div class="serviceColumn" id="serviceColumn2">
            	<h3>Web Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 3 Column-->
            <div class="serviceColumn" id="serviceColumn3">
            	<h3>Icon + UI Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
       	    </div>
		</div>
        
        
        <!--Wrapper That Contains 'Contact' Content-->
		<div class="content" id="contactContent">
        	<!--Title-->
  		<div class="contentTitle">contact</div> 
      		<div id="contactFormWrapper">
            	<!--Contact Form-->
       	  		<form id="contact" method="post" action="mail.php">
           	  		<input type="text" id="name" name="name" value="name" />
              		<input type="text" id="email" name="email" value="email" /><br /><br />
              		<textarea id="message" name="message" rows="" cols="">message</textarea>
              		<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
          		</form>
                <div id="successMessage"></div>
      		</div>
  	    </div>
        
        
	</div>
        
</body>
</html>

javascript.js
Code:

numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){		
						   
	// Initializes FancyBox Lightbox
	$("a.sliderImage").fancybox({
		'zoomSpeedIn':200, 
		'zoomSpeedOut':200, 
		'overlayShow':true,
		'padding':4
	});
	
	SelectButton("none");
	$("#arrow").fadeOut(0);
	
	if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
		$("input").css({"height":13});
		$("#name").css({"width":155});
	};
	
	$("#title").click(function(){
		ShowPanel("none");
	});
						   
	// Handles Formatting the Portfolio Slider
	$("#imgList").children().each(function(){
		numImages++;									   
	});
	$("#imageWrapper").css({"width":(numImages*541)});
	
	// Handles Function of the Portfolio Slider
	$("#prevButton").click(function(){
		if (currentImage==1){
			currentImage=numImages;
		} else {
			currentImage--;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
	$("#nextButton").click(function(){
		if (currentImage==numImages){
			currentImage=1;
		} else {
			currentImage++;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
		
	// Handles Rollover and Click For the Nav Buttons
	$("#aboutButton").mouseenter(function(){
		SelectButton("about");
	});
	$("#portfolioButton").mouseenter(function(){
		SelectButton("portfolio");
	});
	$("#servicesButton").mouseenter(function(){
		SelectButton("services");
	});
	$("#contactButton").mouseenter(function(){
		SelectButton("contact");
	});
	$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
		SelectButton("none");
	});
	$("#aboutButton").click(function(){
		ShowPanel("about");								 
	});
	$("#portfolioButton").click(function(){
		ShowPanel("portfolio");								 
	});
	$("#servicesButton").click(function(){
		ShowPanel("services");								 
	});
	$("#contactButton").click(function(){
		ShowPanel("contact");								 
	});
	
	// Handles Contact Form Behavior	
	$("#name").focus(function(){
		$("#name").css({"background-color":"#FFFFFF"});
		if ($("#name").val()=="name"){
			$("#name").val("");
			$("#name").css({"color":"#444444"});
		};
	});
	$("#name").blur(function(){
		if ($("#name").val()==""){
			$("#name").val("name");
			$("#name").css({"color":"#888888"});
			$("#name").css({"background-color":"#ffdddd"});
		};
	});
	$("#email").focus(function(){
		$("#email").css({"background-color":"#FFFFFF"});
		if ($("#email").val()=="email"){
			$("#email").val("");
			$("#email").css({"color":"#444444"});
		};
	});
	$("#email").blur(function(){
		if ($("#email").val()==""){
			$("#email").val("email");
			$("#email").css({"color":"#888888"});
			$("#email").css({"background-color":"#ffdddd"});
		};
		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
			$("#email").css({"background-color":"#ffdddd"});
		};
	});
	$("#message").focus(function(){
		$("#message").css({"background-color":"#FFFFFF"});
		if ($("#message").val()=="message"){
			$("#message").val("");
			$("#message").css({"color":"#444444"});
		};
	});
	$("#message").blur(function(){
		if ($("#message").val()==""){
			$("#message").val("message");
			$("#message").css({"color":"#888888"});
			$("#message").css({"background-color":"#ffdddd"});
		};
	});
	$("#submit").mousedown(function(){
		$("#submit").attr({"src":"images/sendButtonSel.png"});
	});
	$("#submit").mouseup(function(){
		$("#submit").attr({"src":"images/sendButton.png"});	
	});
	$("#submit").mouseout(function(){
		$("#submit").attr({"src":"images/sendButton.png"});								
	});
	$("#name,#email,#message").keyup(function(){
		if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
			EnableSubmitButton();
		} else {
			DisableSubmitButton();
		};
	});
	$("#submit").click(function(){
		DisableSubmitButton();
		var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
		$.ajax({  
			type: "POST",  
			url: "mail.php",  
			data: dataString,  
			success: function() {  
				ResetForm();
				$("#successMessage").fadeIn(10);
				setTimeout('$("#successMessage").fadeOut(1000);',2000);
			}
		});
		return false; 
	});

});

function EnableSubmitButton(){
	$("#submit").attr({"disabled":""});
	$("#submit").attr({"src":"images/sendButton.png"});
};

function DisableSubmitButton(){
	$("#submit").attr({"disabled":"disabled"});
	$("#submit").attr({"src":"images/sendButtonDis.png"});
};

function ResetForm(){
	DisableSubmitButton();
	$("#name, #email, #message").css({"background-color":"#FFFFFF"});
	$("#name, #email, #message").css({"color":"#888888"});
	$("#name").val("name");
	$("#email").val("email");
	$("#message").val("message");
};

function ShowPanel(panel){
	currentPanel=panel;
	SelectButton(panel);
	$(".content").fadeOut(250);
		switch(panel){
			case "none":
				$("#contentPanelWrapper").animate({"left":"100%"},500);
				$("#arrow").fadeOut(50)
			break;
			case "about":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#aboutContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "portfolio":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#portfolioContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "services":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#servicesContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "contact":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#contactContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
			break;
		};
};

function SelectButton(button){
	if (currentPanel!="about"){
		$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
		$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#aboutButton").css({"background-position":"0px 0px"});
	};
	if (currentPanel!="portfolio"){
		$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
		$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#portfolioButton").css({"background-position":"0px -64px"});
	};
	if (currentPanel!="services"){
		$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
		$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#servicesButton").css({"background-position":"0px -128px"});
	};
	if (currentPanel!="contact"){
		$("#contactCaption").animate({"left":50},{queue:false, duration:250});
		$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#contactButton").css({"background-position":"0px -192px"});
	};
	switch(button){
		case "none":
		break;
		case "about":
			$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
			$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#aboutButton").css({"background-position":"65px 0px"});
		break;
		case "portfolio":
			$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
			$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#portfolioButton").css({"background-position":"65px -64px"});
		break;
		case "services":
			$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
			$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#servicesButton").css({"background-position":"65px -128px"});
		break;
		case "contact":
			$("#contactCaption").animate({"left":70},{queue:false, duration:250});
			$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#contactButton").css({"background-position":"65px -192px"});
		break;
	};

};

Hi. I'm trying to get my script below working. I've managed to get it to add fields dynamically but the remove function isn't right... and I can't think of a way round it. any ideas?

also.. how can i incorporate a way for a limit on the number of fields that can be added?

cheers! any help would be very appreciated.

Code:

<script type="text/javascript">
function addInput()
{
	var x = document.getElementById("inputs");
	x.innerHTML += "<input type=\"text\" />";
}

function removeInput()
{
	var x = document.getElementById("inputs");
	x.innerHTML -= "<input type=\"text\" />";
}

</script>


<input type="button" value="add field" onclick="addInput();" />
<input type="button" value="remove field" onclick="removeInput();" />
<div id="inputs"></div>

..
update:

ah, i've just looked into the operators in more details and -= is just for numbers... so this won't work. i presume this is going to be the wrong method then.

Below is the script and form fields I am working with. What I want to do is sum the two textbox fields and have the result show in the total textbox. The code works fine and the total textbox is updated with the value of form1.basic. The problem occurs when I add the "+ parseInt(document.form2.supporter.value)" code in the script section. What am I doing wrong? Thank you for your time and help.

Code:

<script type="text/javascript"><!--
function updatesum() {
document.frmtotal.total.value = parseInt(document.form1.basic.value) + parseInt(document.form2.supporter.value)}
//--></script>

<tr> 
   <td width="111"><form id="form1" name="form1" method="post" action="">
      <label for="basic">$</label>
      <input name="basic" type="text" id="basic" size="7" maxlength="7" onchange="updatesum(this.form)" />
    </form></td>
  </tr>

  <tr>
     <td><form id="form2" name="supporter" method="post" action="">
      <label for="supporter">$</label>
      <input name="supporter" type="text" id="supporter" size="7" maxlength="7" onchange="updatesum(this.form)" />
    </form>

Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with!

I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below:

function checkAvailibility()
{
// re-calculate...
calculate ();
if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) {
document.ordersummary.emailQuote.value = "No";
setValue();
return true;
}
else
{
return false;
}
}


function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name")
document.ordersummary.Name.focus(); return false; } return true; }
function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address")
document.ordersummary.Address1.focus(); return false; } return true; }
function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town")
document.ordersummary.Town.focus(); return false; } return true; }
function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County")
document.ordersummary.County.focus(); return false; } return true; }
function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode")
document.ordersummary.Postcode.focus(); return false; } return true; }
function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email")
document.ordersummary.YourEmail.focus(); return false; } return true; }
function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date")
document.ordersummary.FuncDate.focus(); return false; } return true; }
function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address")
document.ordersummary.emailonly.focus(); return false; } return true; }

Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area!

Sam