|
JavaScript - Javascript , Xml And Xhtml
I have an XML document, styled by an xslt to make it into a table, placed inside an xhtml document.
my code is as follows: Code: <head>
<script language="javascript" type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult() {
xml = loadXMLDoc("conference.xml");
xsl = loadXMLDoc("conference.xslt");
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
document.getElementById("falctable").innerHTML = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("falctable").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="falctable"> <!--falcons conference table space div-->
</div> <!--end falcons table space div-->
The falctable <div> is placed absolutely with CSS. The XML table shows up locally in Firefox, Opera, Safari and Chrome, but not in Internet Explorer. Also, it only appears locally, and not in the live version. Any help? Been annoying me for hours. Similar TutorialsHi guys I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons: Car Year Password Re-enter Password *Buttons* Reset and Submit query I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom. Any help would be much appreciated. Fatbot Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Test</title>
<!--Scripts for submit button event handlers-->
<script type="text/javascript" src="submit_car.js"></script>
<script type="text/javascript" src="submit_year.js"></script>
<script type="text/javascript" src="submit_pass.js"></script>
</head>
<body>
<form id="myForm" action="">
<p>
<!--Input car name-->
<label>Car<br />
<input type="text" id="car" size="30" />
</label>
<br />
<br />
<!--Register car name event handlers-->
<script type="text/javascript" src="car_check.js"></script>
<!--Input year-->
<label>Year<br />
<input type="text" id="year" size="4" />
</label>
<br />
<br />
<!--Register year event handlers-->
<script type="text/javascript" src="year_check.js"></script>
<!-- Password entry and re-entry -->
<label>Password<br />
<input type="password" id="first" size="10" />
</label>
<br />
<br />
<label>Re-enter Password<br />
<input type="password" id="second" size="10" />
</label>
<br />
<br />
<!--Register password event handlers-->
<script type="text/javascript" src="password_check.js"></script>
<input type="reset" name="reset" />
<input type="submit" name="submit" />
</p>
</form>
</body>
</html>
//submit_car.js
//Event handler function for entering car name
function carCheck() {
var car = document.getElementById("car");
if (car.value== "") {
alert ("Please enter a car name");
return false;
} else
return true;
}
//car_check.js
//Registers the event handlers for submit_car.js
document.getElementById("car").onsubmit = carCheck;
document.getElementById("myForm").onsubmit = carCheck;
//submit_year.js
//Event handler function for entering year
function yearCheck() {
var year = document.getElementById("year");
if (year.value== "") {
alert ("Please enter a year");
return false;
} else
return true;
}
//year_check.js
//Registers the event handlers for submit_year.js
document.getElementById("year").onsubmit = yearCheck;
document.getElementById("myForm").onsubmit = yearCheck;
//Submit_pass.js
//Event handler function for ensuring password entry is correct
function passwordCheck() {
var first = document.getElementById("first");
var second = document.getElementById("second");
if (first.value== "") {
alert ("Please enter a password");
return false;
}
if (first.value !== second.value) {
alert ("The two passwords you entered did not match. \n" +
"Please ensure both passwords are identical.");
return false;
} else
return true;
}
//password_check.js
//Registers the event handlers for submit_pass.js
document.getElementById("second").onblur = passwordCheck;
document.getElementById("myForm").onsubmit = passwordCheck;
I'm having a problem validating this script in w3c its the last one to make the page valid xhtml transitional. here are the errors w3c gives me for the code.the website in question is http://www.orgdesignz.com Error Line 2722, Column 31: document type does not allow element "p" here Code: document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. To read more about why you should disable ABP, please <a href="#">click here</a>.<!-- end .content --></p>');
the error was detected on the > after "no" The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). Thanks, Mike@orgdesignz Hi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK So I'm trying to dynamically generate MathML code. I can get this to work on Internet Explorer 8 + MathPlayer, Firefox 3.6, and Opera 11: test1.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mrow>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>3</mn>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
</mfrac>
</math>
</body>
</html>
But this only works on Firefox: test2.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="test2.js"></script>
<title></title>
</head>
<body></body>
</html>
test2.js: Code: window.onload = test;
function test()
{
var math = "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
math += "<mfrac>";
math += "<mrow>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "<mrow>";
math += "<msup>";
math += "<mi>x</mi>";
math += "<mn>2</mn>";
math += "</msup>";
math += "<mo>−</mo>";
math += "<mn>3</mn>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "</mfrac>";
math += "</math>";
document.getElementsByTagName("body")[0].innerHTML = math;
}
Sorry for the code dump and for being such a n00b and thanks for any help. Hello, I am trying to figure out how to "Include an xhtml tag for a new line within the output"... wording is a bit confusing, but this is probably easy to solve. Thanks! Okay so I created a registration form and it doesn't do any validation. I want it to check the input and if the input is invalid then change the color of the label of the text next to it red. It isn't doing it properly. I purposely left the action part out on the form because it was redirecting to the php page which connects to the database which I do not want it to do until it is validated. Here is the link: http://sci.tamucc.edu/~cmircovich/registrationPg.html Here is the full code (JavaScript is included on the page until I fix the problem. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS Codes -->
<link href="./STYLES/main.css" type="text/css" rel="stylesheet" />
<link href="./STYLES/form.css" type="text/css" rel="stylesheet" />
<title>Main Page</title>
<!--JavaScript -->
<!-- document.getElementsByTagName('label') -->
<script type="text/javascript">
//<![CDATA[
function validate(form) {
var valid = true;
valid = validateEmail(form.user_email, form.conf_email);
valid = validatePassword(form.user_pass, form.conf_pass);
valid = validateFirst(form.user_first);
valid = validateLast(form.user_last);
valid = validateAddress1(form.user_add1);
if(form.user_add2.value.length !=0)
valid = validateAddress2(form.user_add2);
valid = validateCity(form.user_city);
valid = validateZip(form.user_zip);
if (!valid) {
return false;
}
return true;
}
function validateEmail(fld, fld2) {
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
var emailPattern = [\w\+\-\._]+@[\w\-\._]+\.\w{2,};
if (fld.value != fld2.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
}
else if (fld.value == "") {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (fld.value.match(illegalChars)) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailPattern.test(fld.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else
document.getElementById("idEmail").style.color='black';
document.getElementById("idConfEmail").style.color='black';
}
}
function validatePassword(fld, fld2) {
var illegalChars = ^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]*$; // allow only letters and numbers
if (fld.value != fld2.value) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (fld.value == "") {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if ((fld.value.length < 8) || (fld.value.length > 25)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else {
document.getElementById("idPass").style.color='black';
document.getElementById("idConfPass").style.color='black';
}
}
function validateFirst(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idFirst").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idFirst").style.color='red';
return false;
} else {
document.getElementById("idFirst").style.color='black';
}
}
function validateLast(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idLast").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idLast").style.color='red';
return false;
} else {
document.getElementById("idLast").style.color='black';
}
}
function validateAddress1(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd1").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd1").style.color='red';
return false;
} else {
document.getElementById("idAdd1").style.color='black';
}
}
function validateAddress2(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd2").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd2").style.color='red';
return false;
} else {
document.getElementById("idAdd2").style.color='black';
}
}
function validateCity(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value == "") {
document.getElementById("idCity").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idCity").style.color='red';
return false;
} else {
document.getElementById("idCity").style.color='black';
}
}
function validateZip(fld){
var illegalChars = /^\d{5}$|^\d{5}-\d{4}$/;
if(fld.value =="") {
document.getElementById("idZip").style.color='red';
return false;
} else if(illegalChars.test(fld.value){
document.getElementById("idZip").style.color='red';
return false;
} else {
document.getElementById("idZip").style.color='black';
}
}
//]]>
</script>
</head>
<body>
<!-- MAIN DIV -->
<div id="main">
<!-- LOGO -->
<a href="index.html">
<img id="logo" src="./media/main-logo.gif"
alt="Video Game Distribution Project" /></a>
<!-- NAVIGATION BAR DIV -->
<div id="tabs">
<div id="session_div">
<!-- DISPLAY USER -->
<div id="session">
<?php
session_start();
if(session_is_registered('user_email'))
{
echo "Welcome, ".$_SESSION['user_email']."!";
}
else
echo "Welcome, Guest.";
?>
</div>
<!-- LOGIN/LOGOUT/REGISTER -->
<div id="session_action">
<?php
if(session_is_registered('user_email'))
{
echo "<a href='logout.php'>Logout</a>";
}
else
{
echo "<a href='loginPg.html'>Login</a>/
<a href='registrationPg.html'>Register</a>";
}
?>
</div>
</div>
<!-- NAVIGATION BAR DISPLAY -->
<ul id="navbar">
<li><a href="#">Xbox 360</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PS3</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Wii</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">3DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PSP</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PC</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</div> <!-- END tabs DIV -->
<div id="reg_box">
<h1>Register me.</h1>
<div id="info_box">
<div id="label_box">
<p>
<label id="idEmail">Email:</label><br />
<label id="idConfEmail">Confirm Email:</label><br />
<label id="idPass">New Password:</label><br />
<label id="idConfPass">Confirm Password:</label><br />
<label id="idFirst">First Name:</label><br />
<label id="idLast">Last Name:</label><br />
<label id="idAdd1">Address Line 1:</label><br />
<label id="idAdd2">(Optional) Address Line 2:</label><br />
<label id="idCity">City:</label><br />
<label>State:</label><br />
<label id="idZip">Zip code:</label><br />
</p>
</div> <!-- END lebel_box DIV -->
<div id="input_box">
<!--action="registration.php"-->
<form method="post" onsubmit="return validate(this)" >
<p>
<input type="text" name="user_email" maxlength="50" /><br />
<input type="text" name="conf_email" maxlength="50" /><br />
<input type="password" name="user_pass" maxlength="50" /><br />
<input type="password" name="conf_pass" maxlength="50" /><br />
<input type="text" name="user_first" maxlength="30" /><br />
<input type="text" name="user_last" maxlength="40" /><br />
<input type="text" name="user_add1" maxlength="50" /><br />
<input type="text" name="user_add2" maxlength="50" /><br />
<input type="text" name="user_city" maxlength="50" /><br />
<select name="user_state" size="1">
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select><br />
<input type="text" name="user_zip" maxlength="10" /><br />
<input type="submit" value="Register" />
</p>
</form>
</div> <!-- END input_box DIV -->
</div> <!-- END info_box DIV -->
</div> <!-- END reg_box DIV -->
</div> <!-- END MAIN DIV -->
</body>
</html>
So I am trying to validate many input fields inside a form before I send it off to mysql. The page link is: http://penguin.tamucc.edu/~cmircovic...strationPg.php I am 99% sure it a JavaScript issue and I am a beginner with JS. My JS code is as follows: Code: function validate(form)
{
//Pull values from form
var email = form.user_email.value;
var confEmail = form.conf_email.value;
var password = form.user_pass.value;
var confpassword = form.conf_pass.value;
var firstName = form.user_first.value;
var lastName = form.user_last.value;
var add1 = form.user_add1.value;
var add2 = form.user_add2.value;
var city = form.user_city.value;
var zip = form.user_zip.value;
var isValid = true;
var atpos = email.indexOf("@"); //Find @ sign in email
var dotpos = email.lastIndexOf("."); //Fine . in email
var index = document.getElementsByTagName("label");
for(var i = 0; i < index.length; i++)
index[i].style.color='black';
//Validate Email
if(email != confEmail || atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length)
{ //If invalid
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
isValid = false;
}
//Validate password
if(password != confPassword || password.length === 0)
{ //If invalid
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
isValid = false;
}
//Validate first name
if(firstName.length < 2)
{ //If invalid
document.getElementById("idFirst").style.color='red';
isValid = false;
}
//Validate last name
if(lastName.length < 2)
{ //If invalid
document.getElementById("idLast").style.color='red';
isValid = false;
}
//Validate address
if(add1.length === 0)
{ //If invalid
document.getElementById("idAdd1").style.color='red';
isValid = false;
}
//Validate city
if(city.length === 0)
{ //If invalid
document.getElementById("idCity").style.color='red';
isValid = false;
}
//Validate zip code
if(zip.length != 5 || zip.length != 10)
{ //If invalid
document.getElementById("idZip").style.color='red';
isValid = false;
}
if(isValid == false)
return false;
return true;
document.reg_form.action = "registration.php";
}
and my form starts like this... Code: <form name="reg_form" method="post" onSubmit="return validate(this)"> I'm trying to change the color of the labels according to what input field is wrong. It seems to loop through and keep my labels black. It shows the email red for a millisecond though. Any help would be appreciated. This the html code below. Im getting a few errors 1) there is no attribute "onload" and 2) there is no attribute "name" PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Navigation</title> <link href="css/new.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js/nav.js"></script> </head> <body onload="MM_preloadImages('images/tab1.gif','images/tab1hover.gif','images/tab2hover.gif','images/tab3hover.gif','images/tab4hover.gif','images/tab5hover.gif')"> <div id="wrapper"> <div id="top"> <div id="topright"> <div id="primaryNavWrapper"> <div id="primaryNav"> <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab1','images/tab1hover.gif',1)" onmouseover="MM_nbGroup('over','tab1','images/tab1hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab1hover.gif" alt="Home" name="tab1" width="79" height="31" id="home" onload="MM_nbGroup('init','group1','tab1','images/tab1.gif',1)" /></a> <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab2','images/tab2hover.gif',1)" onmouseover="MM_nbGroup('over','tab2','images/tab2hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab2.gif" alt="About Us" name="tab2" width="95" height="31" id="aboutUs" /></a> <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab3','images/tab3hover.gif',1)" onmouseover="MM_nbGroup('over','tab3','images/tab3hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab3.gif" alt="Services" name="tab3" width="89" height="31" id="services" /></a> <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab4','images/tab4hover.gif',1)" onmouseover="MM_nbGroup('over','tab4','images/tab4hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab4.gif" alt="Testimonials" name="tab4" width="120" height="31" id="testimonials" /></a> <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab5','images/tab5hover.gif',1)" onmouseover="MM_nbGroup('over','tab5','images/tab5hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab5.gif" alt="Contact Us" name="tab5" width="108" height="31" id="contactUs" /></a> </div> </div> </div> </div> </div> </body> </html> and here is the js code PHP Code: function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } Any help would be greatly appreciated Hi, I wonder if someone can help me. I'm building a site which has a random image generated on the page each time it loads. It does work at the moment, but I'd like it to be xhtml compliant. Currently the page loads the javascript from an external .js file, but it needs a line in the body of the page to make it work fully. This line is currently causing 15 errors when I try and validate it. The line is as follows: <script type="text/javascript">document.writeln('<td'+'><img src="'+xoxo[choice]+'"height=26 width=970 border=0 ><'+'/TD>');</script> Does anyone have any suggestions about how to make this line compliant? I'm a bit of a beginner, so any help would be greatly appreciated! All, So I have the following code. It works great. When I add this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> It doesn't work. I need it for some aspects of my CSS to work. The code that works without that is: Code: <html>
<script>
function resizeAll( )
{
var divs = document.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
var div = divs[d];
if ( div.className == "fn-area" )
{
divid = divs[d].getAttribute("id");
imgid = "Img" + divid;
var Div1Width, Div1Height;
Div1Width = document.getElementById(divid).offsetWidth;
Div1Height = document.getElementById(divid).offsetHeight;
document.getElementById(imgid).style.width = Div1Width;
document.getElementById(imgid).style.height = Div1Height;
}
}
}
</script>
<head>
</head>
<body onLoad="resizeAll()">
<div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv1').style.display='block';" onmouseout="document.getElementById('ImgDiv1').style.display='none';">
<img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
<div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv2').style.display='block';" onmouseout="document.getElementById('ImgDiv2').style.display='none';">
<img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
</body
</html>
I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['warning']) {
$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.warning').fadeIn('slow');
}
for (i in json['error']) {
$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart_total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please Hey, I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it, Here is my form with the two textboxes and submit button: <form> x: <input type="text" name="x" /><br /> y: <input type="text" name:"y" /><br /> <input type="submit" value="Submit"/><br /> </form> And i need it so that they change the values of these: //this shows where my sprite will start on the canvas var block_x; var block_y; searched the internet for hours and cant really find anything i understand or works. any help is much appreciated 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... I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? |
|||||||