Advertisement

11.12.2008 at 03:49PM PST, ID: 23900388 | Points: 500
[x]
Attachment Details

Image based email form script won't work with Scriptaculous

Asked by RichardMass in JavaScript Frameworks, Jquery

Tags:

Hi everyone,

I have posted several posts over recent weeks as I am trying to come to grips with JQUERY, Scriptaculous and Javascript in general so I apologise if this is a pretty simple problem.

I am using Scriptaculous to fade in my page on load, got that all working, thanks to Sh0e I can even get Scriptaculous and JQUERY to work together (many tears and tantrums involved, lol).

Now I am trying to use the Niceforms script by Lucian Slatineanu (http://www.badboy.ro/) along with the fade in scripts. When the Scriptaculous scripts fade in the page, it seems to block the niceforms.js from being read and therefore stops the images from being called in the place of the standard broswers form components.

I am presuming this is a little like the "scriptaculous and Jquery" issues where "noconflict" is required however I do not know where to begin with this one.

Any help would be greatly appreciated with this.Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:

<!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=iso-8859-1" />
<title>Untitled Document</title>
 
<link href="css/default.css" rel="stylesheet" type="text/css" />
 
 
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/imageform.js"></script>
 
<script type="text/javascript">
window.onload = begin;
 
function begin()
{
new Effect.Appear(document.getElementById('DivLayout-Fadewrapper'), { duration: 2.0, delay: 0});
}
</script>
 
<style type="text/css">
#DivLayout-Fadewrapper {
 	width:800px;
	height:800px;
	margin:0 auto;
	background:#009900;
}
</style>
 
 
</head>
 
<body>
<div id="DivLayout-Fadewrapper" style="display:none">
<div id="imageform">
  <form action="vars.php" method="post" class="niceform" target="_blank">
	<select size="1" id="mySelect1" name="mySelect1" class="width_150"> <!-- class="width_320" sets a width of 320px -->
		<option selected="selected" value="Test area no.1">Test area no.1</option>
		<option value="Another test option">Another test option</option>
		<option value="And another one">And another one</option>
		<option value="One last option for me">One last option for me</option>
		<option value="This is one really really long option right here just to test it out">This is one </option>
	</select>
  
    <p>
	<input type="radio" name="radioSet" id="option1" value="foo" checked="checked" /><label for="option1">foo</label><br />
	<input type="radio" name="radioSet" id="option2" value="bar" /><label for="option2">bar</label><br />
	<input type="radio" name="radioSet" id="option3" value="another option" /><label for="option3">another option</label><br />
	</p>
	<p>
	<input type="checkbox" name="checkSet1" id="check1" value="foo" /><label for="check1">foo</label><br />
	<input type="checkbox" name="checkSet2" id="check2" value="bar" checked="checked" /><label for="check2">bar</label><br />
	<input type="checkbox" name="checkSet3" id="check3" value="another option" /><label for="check3">another option</label><br />
	</p>
	<p>
	<label for="textinput">Username:</label><br />
	<input type="text" id="textinput" name="textinput" size="12" />
	</p>
	<p>
	<label for="passwordinput">Password:</label><br />
	<input type="password" id="passwordinput" name="passwordinput" size="20" />
	</p>
	<p>
	<label for="textareainput">Comments:</label><br/>
	<textarea id="textareainput" name="textareainput" rows="10" cols="40"></textarea>
	</p>
  </form>
</div>
 
</div>
 
</body>
</html>
[+][-]11.12.2008 at 03:50PM PST, ID: 22945777

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081119-EE-VQP-49 - Hierarchy / EE_QW_2_20070628