Learn VBA & Macros in 1 Week!

JavaScript - Script Wont Work In Ie

Full Excel VBA Course - Beginner to Expert

Script Wont Work In Ie	View Content

Problem solved, thanks for looking.

Full Excel VBA Course - Beginner to Expert

Script Wont Work With Firefox

Similar Tutorials

View Content

I'm a real novice and out of my depth with this, i hope someone can help.

I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox.

Below is the code thats checks which browser is running and the action to take.

Code:
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

Can anyone help me out with this problem.

Many thanks
Jasper

Form Wont Send In Ie7, Validation Wont Work?

Similar Tutorials

View Content

Hi Guys,

im using chrome and ff and it worked fine till i tested on ie7 and the form just wont send on ie7. it gives me a validation error msg "SOME VALUES ARE NOT ACCEPTABLE" when i try to submit.

ive tried so many things and i cant figure out why ie7 wont send upon submit like ff does, code seems to be fine, pls see validation coding line 7 - 32 , any jsGURU advice will be much appreciated!

Code:

<?php defined('_JEXEC') or die('Restricted access'); ?>
<?php JHTML::_('behavior.formvalidation'); ?>
<script language="javascript" type="text/javascript">
function submitbutton(pressbutton)
{
	var form = document.adminForm;
	if (pressbutton == 'cancel') {
		submitform( pressbutton );
		return;
	}

	// do field validation
	if (document.getElementById('jformfirstname').value == ""){
		alert( "<?php echo JText::_( 'Firstname is missing.', true ); ?>" );
	} else if (document.getElementById('jformsurname').value == ""){
		alert( "<?php echo JText::_( 'Surname is missing.', true ); ?>" );
	} else if (document.getElementById('jformemail').value == ""){
		alert( "<?php echo JText::_( 'Email is missing.', true ); ?>" );
	} else if (document.getElementById('jformphone1').value == ""){
		alert( "<?php echo JText::_( 'Phone1 is missing.', true ); ?>" );
	} else {
	       if (document.formvalidator.isValid(form)) {
				submitform( pressbutton ); 
        }
        else {
                alert("<?php echo JText::_( 'SOME VALUES ARE NOT ACCEPTABLE.', true ); ?>");
        }

		
	}
}
</script>
<?php if ($this->courseid){ ?>
<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
		<?php echo $this->courseDetails->title; ?>
	</div>
<?php endif; ?>
<h3>Course Details</h3>
<table cellSpacing=0 cellPadding=5 width="90%" border=0>
   <tr>
      <td width="20%"><?php echo JText::_( 'Course Title' ); ?>:</td>
      <td width="30%"><?php echo $this->courseDetails->title;?></td>
      <td width="20%"><?php echo JText::_( 'Code' ); ?>:</td>
      <td width="30%"><?php echo $this->courseDetails->code;?></td>
   </tr>
  <tr>
<td><?php echo JText::_( 'Price' ); ?>:</td>
      <td><?php echo (number_format($this->courseDetails->price,2));?></td>
     <td><?php echo JText::_( 'No. of Days' ); ?>:</td>
      <td><?php echo $this->courseDetails->capacity;?></td>
   </tr>
   <tr>
<?php if ($_GET['hide'] != 1 ) { ?>
      <td><?php echo JText::_( 'Location' ); ?>:</td>
      <td><?php echo $this->courseDetails->course_location;?></td>

<?php

      }
      else
      {
          echo "<td>&nbsp;</td>";
          echo "<td>&nbsp;</td>";
      }

      ?>
   </tr>


   <tr>
         <?php if ($_GET['hide'] != 1 ) { ?>

     <td><?php echo JText::_( 'Start Date' ); ?>:</td>
     <td><?php echo Date('d-M-y', strtotime($this->courseDetails->start_date));?></td>


      <?php

      }
      else
      {
          echo "<td>&nbsp;</td>";
          echo "<td>&nbsp;</td>";
      }

      ?>
   </tr>

</table>

<?php } ?> 

<?php if ( $this->params->def( 'show_course_sessions', 1 ) && ($this->courseid) ) : ?>
<h3>Sessions</h3>
<table cellSpacing=0 cellPadding=5 width="90%" border=0>
<tr>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Day');  ?>
   </td>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Start Time');  ?>
   </td>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Finish Time');  ?>
   </td>
   <td width="10%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Duration');  ?>
   </td>
   <td width="30%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Location');  ?>
   </td>
</tr>
         <?php
  $k = 0;
  $n=count( $this->course_sessions );
  if ($n > 0){
   for ($i=0, $n; $i < $n; $i++)
   {
      $row = &$this->course_sessions[$i];
      ?>
            <tr>
               <td align="center">
      <?php echo $row->session_day;?> 
               </td> 
               <td align="center">
      <?php echo date('H:i', strtotime($row->start_time));?> 
               </td> 
               <td align="center">
      <?php echo date('H:i', strtotime($row->finish_time));?> 
               </td> 
               <td align="center">
      <?php echo $row->duration;?> 
               </td> 
               <td align="center">
      <?php echo $row->session_location;?> 
               </td> 
            </tr> 
    <?php 
    $k = 1 - $k;
   }
  } else {
  ?> <tr> <td colspan="5"><? echo JText::_( 'There are no sessions for this course' );?></td></tr><?php } ?>
</table>
<?php endif; ?>

<form action="<?php echo $this->action ?>" method="post" name="adminForm" id="adminForm" class="form-validate">
<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
		<?php echo $this->escape($this->params->get('page_title')); ?>
	</div>
<?php endif; ?>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>

	<td width="15%">
		<label for="jformcourseid">
			<?php echo JText::_( 'Course' ); ?>:
		</label>
	</td>
	<td>
		<?php  echo $this->lists['courseid'];?>*
        
	</td>
</tr>
<?php if ($_GET['hide'] == 1 ) { ?>
<tr>
       <td valign="top">
                <label for="jformcity">
                        <?php echo JText::_( 'I want to attend this course here' ); ?>:
                </label>
        </td>
        <td width="80%">


<select class="required" type="text" id="jformcountry" name="jform[country]" value="<?php echo $this->escape($this->booking->country);?>" />*
<option>Choose your Location</option>
<option>Melbourne</option>
<option>Sydney</option>
<option>Auckland</option>
</select>
        </td>
</tr>
<?php

      }


      ?>
<tr>
	<td valign="top">
		<label for="jformfirstname">
			<?php echo JText::_( 'Firstname' ); ?>:
		</label>
	</td>
       <td width="80%">
		<input class="required" type="text" id="jformfirstname" name="jform[firstname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->firstname);?>" />*
	</td>
</tr>
<tr>
	<td valign="top">
		<label for="jformsurname">
			<?php echo JText::_( 'Surname' ); ?>:
		</label>
	</td>
	<td valign="top">
		<input class="required" type="text" id="jformsurname" name="jform[surname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->surname);?>" />*
	</td>
</tr>
<?php if($this->userid > 0) { ?>
<tr>
	<td valign="top">
		<label for="jformusername">
			<?php echo JText::_( 'Username' ); ?>:
		</label>
	</td>
	<td width="80%">
    
		<input class="required" type="text" id="jformusername" name="jform[username]" size="50" maxlength="100" value="<?php echo $this->escape($this->username);?>" READONLY/>* 
	</td>
</tr>
<?php } ?>

<tr>
	<td valign="top">
		<label for="jformdepartment">
			<?php echo JText::_( 'Company' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="inputbox" type="text" id="jformdepartment" name="jform[department]" size="50" maxlength="30" value="<?php echo $this->escape($this->booking->department);?>" />
	</td>
</tr>


<tr>
	<td valign="top">
		<label for="jformemail">
			<?php echo JText::_( 'Email' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="validate-email" type="text" id="jformemail" name="jform[email]" size="50" maxlength="100" value="<?php echo $this->escape($this->email);?>"/>*
	</td>
</tr>
<tr>
	<td valign="top">
		<label for="jformphone1">
			<?php echo JText::_( 'Phone Number' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="required" type="text" id="jformphone1" name="jform[phone1]" size="50" maxlength="20" value="<?php echo $this->escape($this->booking->phone1);?>" />*
	</td>
</tr>

<tr>
        <td valign="top">
                <label for="jformcity">
                        <?php echo JText::_( 'Locations' ); ?>:
                </label>
        </td>
        <td width="80%">

<select type="text" id="jformcity" name="jform[city]" value="<?php echo $this->escape($this->booking->city);?>" />
<option>Choose your Location</option>
<option>Melbourne</option>
<option>Sydney</option>
<option>Auckland</option>
</select>
        </td>
</tr>
<tr>
        <td valign="top">
                <label for="jforminstitution">
                        <?php echo JText::_( 'Referral Source' ); ?>:
                </label>
        </td>
        <td width="80%">

<select type="text" id="jforminstitution" name="jform[institution]" value="<?php echo $this->escape($this->booking->institution);?>" />
<option>How did you find out about us?</option>
<option>Search Engine</option>
<option>Friends</option>
<option>Others</option>

</select>
        </td>
</tr>




<tr>
	<td valign="top">
		<label for="jformdescription">
			<?php echo JText::_( 'Comments' ); ?>:
		</label>
	</td>
	<td>
		<textarea class="inputbox" cols="47" rows="6" id="jformdescription" name="jform[description]"><?php echo $this->escape( $this->booking->description);?></textarea>
	</td>
</tr>
</table>

<div>
	<button type="button" class="button validate" onclick="submitbutton('save')">
		<?php echo JText::_('Save') ?>
	</button>
	<button type="button" onclick="submitbutton('cancel')">
		<?php echo JText::_('Cancel') ?>
	</button>
</div>

	<input type="hidden" name="jform[id]" value="<?php echo $this->booking->id; ?>" />
	<input type="hidden" name="jform[ordering]" value="<?php echo $this->booking->ordering; ?>" />
	<input type="hidden" name="jform[approved]" value="<?php echo $this->booking->approved; ?>" />
	<input type="hidden" name="jform[userid]" value="<?php echo $this->userid; ?>" />
	<input type="hidden" name="option" value="com_courseman" />
	<input type="hidden" name="controller" value="booking" />
	<input type="hidden" name="task" value="" />
	<?php echo JHTML::_( 'form.token' ); ?>
</form>
</br>
Fields marked with an asterisk (*) are required.
</br>
</br>

Noobie To This, It Wont Work!

Similar Tutorials

View Content

hey all, what it says in the title, this block of code wont work and i dont know why. the first prompt box appears but not the "can vote, but can't drink" reply.
can anyone offer any ideas?

<!DOCTYPE html>
<html>
<head>
<title>legal age</title>
<script type="text/javascript">

var your_age = prompt("how old are you?");

if ((age > 18) && (age < 21))
{

document.writeln("can vote, but can't drink.");

}

</script>
</body>
</html>

kind regards,
Redd .

Img Swaping Wont Work In Ie

Similar Tutorials

View Content

This will work in firefox but not IE. Any alternative I am new to coding and not sure how to do this.

Code:

<div id="leftnav">
            <ul>
                <li><a href="home.html"><img src="home1.gif"
                onmouseover="document.homeb.src='home2.gif';"
                onmouseout="document.homeb.src='home1.gif';" id=
                "homeb" alt="home1"></a></li>

                <li><a href="striping.html"><img src="striping.gif"
                alt="striping" id="striping" onmouseover=
                "document.striping.src='striping2.gif';"
                onmouseout="document.striping.src='striping.gif';">
                </a></li>

                <li><a href="design.html"><img src="design.gif"
                alt="design" id="design" onmouseover=
                "document.design.src='design2.gif';" onmouseout=
                "document.design.src='design.gif';"></a></li>

                <li><a href="lettering.html"><img src=
                "lettering.gif" alt="lettering" id="lettering"
                onmouseover=
                "document.lettering.src='lettering2.gif';"
                onmouseout=
                "document.lettering.src='lettering.gif';"></a></li>

                <li><a href="contact.html"><img src="contact.gif"
                alt="contact" id="contact" onmouseover=
                "document.contact.src='contact2.gif';" onmouseout=
                "document.contact.src='contact.gif';"></a></li>
            </ul>
        </div>

Setattribute Href?? Why Wont It Work??

Similar Tutorials

View Content

Im writing a piece of javascript that dynamically adds a link to a page, this is the code i'm using

Code:

var newP;
newP = document.createElement("a"); 
newP.innerHTML = "Click here";
newP.setAttribute("href","http://mywebsite.com/link.html");

var p2 = document.getElementById("Div1");
p2.parentNode.insertBefore(newP,p2);

However, it wont work?!?! the link appears in the right place on the page when i remove the line
Code:

newP.setAttribute("href","http://mywebsite.com/link.html");

and if i view the source the link is <a>Click here</a> (without any href)

so there's got to be something wrong with that line but i don't know what it is. Can anyone help me? How do i add a href to the anchor??

I'm using firefox.

Menubar And Slideshow Wont Work Together

Similar Tutorials

View Content

Hi

I can get both to work separately. If Iput the slideshow below the menu bar in the body it does not play if I put the slideshow first the menu bar does not appear

Can anybody help please

file uploaded.

Js Document.images Wont Work In Ie 7&8

Similar Tutorials

View Content

Hi, any help with this would be very much appreciated.

Apologies for cross-posting. I think I ut this in the wrong place to begin with.

I have a script containing functions to change an image from clicking a button or changing the selection in a combobox.
The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen
image.

The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why.

As far as I can work out the problem with the script is in the changeImage
function while trying to set the new image.
Code:

 
document.images['priceImg'] = followingImg;
document.images['priceImg'].src = followingSrc;

Thanks in advance.

The following is the script:

Code:

var followingImg;
var followingSrc;
var presentImg;
var presentSrc;
var count = 0;

// Create an array of price list page images and locations
var numImages = 8;
var pimages=new Array();
pimages[0]=new Image();
pimages[0].src="../images/priceList/price_walls.jpg";
pimages[1]=new Image();
pimages[1].src="../images/priceList/price_nestle.jpg";
pimages[2]=new Image();
pimages[2].src="../images/priceList/price_franco.jpg";
pimages[3]=new Image();
pimages[3].src="../images/priceList/price_ben1.jpg";
pimages[4]=new Image();
pimages[4].src="../images/priceList/price_ben2.jpg";
pimages[5]=new Image();
pimages[5].src="../images/priceList/price_ron.jpg";
pimages[6]=new Image();
pimages[6].src="../images/priceList/price_cartridge_9654.jpg";
pimages[7]=new Image();
pimages[7].src="../images/priceList/price_sun1.jpg";
pimages[8]=new Image();
pimages[8].src="../images/priceList/price_sun2.jpg";


// Retrieves the current image from the image element
function getCurImage() {

	if (document.images) {

		presentImg = document.images['priceImg'];
		presentSrc = document.images['priceImg'].src;

		var curId = 0;

		// Loops through pimages array to find which image is currently being displayed
		for (i=0;i<pimages.length;i++) {
			if (pimages[i].src == presentSrc) {
				curId = i;
			}
		}

		return curId;

	}

}

//**************************//
// I think this is where it has trouble //
//**************************//

// Sets the new image
function changeImg() {

	document.images['priceImg'] = followingImg;
	document.images['priceImg'].src = followingSrc;

}

// Called by 'next' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItForward() {

	var curID = getCurImage();

	if (count == 0) {
		followingImg = pimages[0];
		followingSrc = pimages[0].src;
		count++;
	} else {
		// Add one to current image id for next image
		var nextId = (curID + 1);
		if (nextId <= numImages) {
			followingImg = pimages[nextId];
			followingSrc = pimages[nextId].src;
		// If at end of images stay on same page
		} else {
			followingImg = document.images['priceImg'];
			followingSrc = document.images['priceImg'].src;
		}
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by 'previous' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItBackward() {
	var curID = getCurImage();

	// take one from current image id for next image
	var nextId = (curID - 1);
	if (nextId >= 0) {
		followingImg = pimages[nextId];
		followingSrc = pimages[nextId].src;
	// If at start of images stay on same page
	} else {
		followingImg = document.images['priceImg'];
		followingSrc = document.images['priceImg'].src;
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by optionbox "newPage".
// Takes users choice and displays it.
function choosePage(page) {

	if (page == 1) {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageOne').selectedIndex;
		var newId = document.getElementById('newPageOne').options[index].value;
	} else {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageTwo').selectedIndex;
		var newId = document.getElementById('newPageTwo').options[index].value;
	}

	// Convert string to int
	newId = parseInt(newId);

	// If new id is default setting do nothing
	if (newId == 0) {
		return;
	// Else choose the image from the pimages array and call changeImg
	} else {

		// Changes value to accomodate for value vs array position
		newId = (newId - 1);

		followingImg = pimages[newId];
		followingSrc = pimages[newId].src;

		// display new image
		changeImg();
		document.getElementById("newPageOne").value = (newId+1);
		document.getElementById("newPageTwo").value = (newId+1);
	}

}

// Changes the text in the combobox
function setText(id) {

	id = id + 1;
	document.getElementById("newPageOne").value = id;
	document.getElementById("newPageTwo").value = id;
	//document.getElementsByName('newPage').value = id;
}

The following is the relevent section of the html:

Code:

<input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats and Cadburies Impulse </option>
			<option value="3"> Franco, Mars and Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

			<center>
			<div id="price-display">
				<img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img>
			</div>
			</center>

			<input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats, Cadburies Impulse </option>
			<option value="3"> Franco, Mars Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

Javascript Code Wont Work

Similar Tutorials

View Content

HTML:
Code:

<!-- video player begin -->
		<div id="playerHolder">
			<div class="player" id="playerDiv">
				<div id="playerwidget"></div>
				<div id="adCompanionBanner" style="visibility:hidden;"></div>
			</div>
		</div>

In firefox, I type
Code:

javascript:document.getElementById("player").sendEvent(''SEEK", 0);

into the Address bar and hit enter. Why doesn't it work? How do I correctly "seek" a video.

Javascript Wont Work On Iframe

Similar Tutorials

View Content

hello! i created a javascript for opening a page on a new window and added it on an html file. i then used the said html file as the source of my iframe on a joomla page. but the javascript isnt working. any help?

the said iframe is called Scroll News on this page: http://dumplingdesigns.freehostia.com/

thanks in advance!

Why Wont This Work Offline When Saved

Similar Tutorials

View Content

http://www.dyn-web.com/tutorials/iframes/refs.php

I dont get it

How Come This Form Validation Wont Work

Similar Tutorials

View Content

Hi guys..

I cant figure out why the validation wont work on the form..

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cork Discos Mailing List</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/form_validation.js"></script>
</head>

<body>

    <div id="wrapper">

      <div id="star1">
      <div id="star2">
      <div id="star3">
      <div id="star4">
      <div id="header">
        <h1>Cork Discos Texting Service</h1>
      </div>
      <div id="content">

                            <form name="frm" action="index.html" method="POST" onsubmit="return validateForm()">
                            <table width="100%" border="0" cellspacing="2" cellpadding="3"  class="mainForm">
                                <tr>
                                <td class="normalText" align="left" style="padding:0px 0px 0px 33px">
                                    <table border="0" cellspacing="3" cellpadding="2">
                                        <tr>
                                            <td class="normalHeading" colspan="2" style="padding-bottom:6px">

                                                <div id="error_msg" class="txtErrorMsg" align="center"></div>

                                            </td>
                                        </tr>
                                        <tr >
                                            <td class="normalText" width="30%">First Name</td>
                                            <td><input type="text" name="firstName" id="firstName"  class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Last Name</td>
                                            <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Mobile</td>
                                            <td><input type="text" name="mobile"  id="mobile" class="input1"  style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Email</td>
                                            <td><input type="text" name="email" id="email" class="input1"  style="width:195px" onblur="IsEmail(this.vlaue)"/></td>
                                        </tr>
                                    
                                            <tr>
                                            <td class="normalText">Comments</td>
                                            <td>
                                                <textarea name="comments" id="comments" cols="22" rows="3" ></textarea>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="normalText"> </td>
                                            <td valign="middle"><input class="send" type="image" value="submit" src="images/submit.gif" name="submit"/></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        </form>

      </div>
      </div>
      </div>
      </div>
    </div>

  </div>

</body>
</html>

Here is the js

PHP Code:
    var j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;

            firstName = j('#firstName').val();
            lastName = j('#lastName').val();
            email = j('#email').val();
            mobile = j('#mobile').val();
            comment = j('#comments').val();

      if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Correct Email';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Correct Mobile Number';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }


            if(comment.length < 10){
                error = 'Please Enter A Comment More Than 10 Characters';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    }

Can anybody figure it out.. im trying it all morning

Hide/show Div Javascript Iframes Wont Work In Ie

Similar Tutorials

View Content

Hi,

I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style.

It works great in most browsers, except Internet Explorer . For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine).

I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them.

The page can be viewed he www.raynemakerimages.com/galleries.html
Firefox shows how it should display....

Anyway, I'm looking for a relatively easy fix for this....help is appreciated.

Thanks.

Coding:

Code:

<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

The hide/show links:
Code:

<div align="center" class="class1">

<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
      <span class="class1">Family      </span></a> 

| 

<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Artistic       </a> 
| 

<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Intimate       </a> 

| 

<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Maternity      </a> 
| 

<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns      </a> 
| 

<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
        Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>       

</div>

The slideshows:

Quote:
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)">
<tr>
<td>
<div id="family">
<p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td >
<div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
</table>

Getting Zoom Script To Work On A Gallery Script. Advice Would Be Much Appreciated.

Similar Tutorials

View Content

Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper,

I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside.

I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout.

I am using a var= images [ with

a series of file locations and info such as below

{
src: 'romanticabride/thumbs/tn_Shauna.jpg',
srcBig: 'romanticabride/images/Shauna.jpg',
title: 'Shauna',
longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
},

what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work .

one of my pages is http://www.cherishbridal.co.uk/romaticabride.html

the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further
or post some code. Thank you in advance

Fade Script Work Work On Ie 7

Similar Tutorials

View Content

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W

Java Script For Keypress And The Script To Work

Similar Tutorials

View Content

I need to assign a key in the javascript to actually make the javascript work,.

I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys.

i want to declare the key or keycombo in the script itself .,.

the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,.,

So I want it to work it this way .,

select the text
press a key
and it opens a new tab (or window) with an xact search .,.
i want to declare the key or keycombo in the script itself .,.

the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,.,

So I want it to work it this way .,

select the text
press a key
and it opens a new tab (or window) with an xact search .,.

Thanks in advance .,

Nani

Ie 8 Wont Display Page "error With </script>"

Similar Tutorials

View Content

It works in FF but i can seem to find what the issue is here is the code

Code:

<script type="text/javascript">//<![CDATA[
	window.addEvent('domready',function(){

new viewer($$('#box1 img)'),{
			mode: 'alpha',
			interval: 5000
			}).play(true);
		
	});
	//]]>
    </script>
<script type="text/javascript">                                        
<!--  
// When DOM is ready
$(document).ready(function(){

// ------- Submit First Form -------

$("#contact").submit(function(){

var str = $(this).serialize();

   $.ajax({
   type: "POST",
   url: "contact.php",
   data: str,
   success: function(msg){
    
$("#note").ajaxComplete(function(event, request, settings){

		if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
		{
			result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
		}
			else
		{
			result = msg;
		}

		$(this).html(result);

		});

}

 });

return false;

});
 this is line 64 ->  </script>

The error is Syntax error code0 line:64 char:1 . Please if anyone can help.

Why Won't My Script Work

Similar Tutorials

View Content

Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work.
Code:

function controls(vtiles){/*ID of requested div*/

vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed

var cap=document.getElementsByTagName('div');// get every div element

for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
{
	var store=cap[i].ClassName;
	
	if(store=='switchOn' && cap.[i].id);
	{ /*look for div's that are on (switchOn) and check to see if they have and ID*/
     
	 var check = cap.[i].id //store their IDs
	 
	 if(check!=vtiles){//check to see if the id is the one stored in Vtiles
	 
	 store=='switchP'//change the classname to switchP(off)
	 }
	}
}

}

Code:

<div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div>

<div  id="Ankara" class="switchP">

Code:

.switchP{
position:absolute;
display:none;
z-index:-1;
left: 20px;
top:40px;
}

.switchOn{
position:absolute;
display:block;
z-index:100;
left: 20px;
top:40px;
width:200px;
height:200px;
}

hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help.

Script Doesn't Work ..

Similar Tutorials

View Content

hello... script doesn't work.. it does work in IE but not in another browser like mozilla,opera & safari? what should I do?..

Code:

//Current HTML of page
var html="";
//View of the page, Normal (Design), HTML, Preview
var currentview=0;
//Hold window objects for the color, table and properties dialogs
var table_dialog, color_dialog, properties_dialog;
//Current color action, ForeColor, or BackColor,
//used for communication between PageCreate window and Color dialog window
var pp;
//Is used to disable use of design tools in HTML or Preview mode
var enabletoolbar=false;
//Variable counter used to index the search in the document
var n=0;

function InitEditor(){
//Init editor in design mode,
maineditor.document.designMode=docmode;
//Write a blank page
WriteDefaultPage();
//Disable context menu
maineditor.document.oncontextmenu=new Function("return false;");
//Set focus to the editor
maineditor.focus();
}

function EditorView(view){
//Changes editor view to Normal, HTML, and Preview
if(currentview==1){
//If the last view was HTML then get the HTML edited by user in HTML mode
html=maineditor.document.body.innerText;
}
//If the last mode was Normal then get the whole HTML content of the page
else html=maineditor.document.all.tags("HTML")[0].outerHTML;
if(view==0){
//Normal Mode
EnableToolbar(true);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
maineditor.document.oncontextmenu=new Function("return false;");
maineditor.focus();
}
if(view==1){
//HTML Mode
EnableToolbar(false);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
WriteDefaultPage();
HTMLView();
maineditor.document.oncontextmenu=new Function("return false;");
}
if(view==2){
//Preview Mode
EnableToolbar(false);
maineditor.location="about:blank";
//Disable page editing
maineditor.document.designMode="Inherit";
//Write the HTML of the page
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
//Enable context menu
maineditor.document.oncontextmenu=new Function("return true;");
}
//Set current view
currentview=view;
}

function EnableToolbar(enable){
//Enable or disable toolbar
enabletoolbar=enable;
}

function OpenFile(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
fileopen_dialog.style.visibility="visible";
}

function OpenSelectedFile(){
//Check if the file is an HTML page
if(document.fileselect.thefile.value.indexOf(".htm")==-1){
window.alert("The selected file is not an HTML page, please select a valid HTML file");
return;
}
//Hide the open file dialog
fileopen_dialog.style.visibility="hidden";
//Create the FSO object
var fso=new ActiveXObject("Scripting.FileSystemObject");
//Open the selected file
var f=fso.OpenTextFile(document.fileselect.thefile.value);
//Get the content of the file
var thehtml=f.ReadAll();
//Close the file
f.close();
//Write a blank page
maineditor.window.location="about:blank";
//Write the HTML content
maineditor.document.open("text/html");
maineditor.document.write(thehtml);
maineditor.document.close();
//Set focus to editor
maineditor.focus();
}

function WriteDefaultPage(){
//Writes a blank HTML page in the editor
var pagehtml="<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; " +
"charset=windows-1252\">\n<meta name=\"GENERATOR\" content=\"PageCreate\">\n" +
"<title>New Page</title>\n</head>\n<body>\n</body>\n</html>";
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}

function NewPage(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
//Write a blank page
maineditor.window.location="about:blank";
WriteDefaultPage();
//Set focus to editor
maineditor.focus();
}

function HTMLView(){
//Switch to HTML view
maineditor.document.body.innerHTML="";
maineditor.document.body.innerText=html;
}

function TableOn(table, on){
//Highlights the table on which the mouse is over
if(on) table.style.backgroundColor="#95AFFF";
else table.style.backgroundColor="#82DF82";
}

function ToolbarOn(toolon){
//Highlights on or off the current toolbar
//Get the toolbar button on which the mouse is over
var tool=event.srcElement;
//Change background color
if(toolon){
tool.style.backgroundColor="#B4A0FE";
tool.style.borderColor="#000000";
}
else{
tool.style.backgroundColor="#D1D1D1";
tool.style.borderColor="#D1D1D1";
}
 }

function FindInPage(showdialog){
//Shows the Find and Replace Dialog
var display="visible";
if(showdialog==false) display="hidden";
find_dialog.style.visibility=display;
if(showdialog!=false) document.find.findwhat.focus();
}

function FindIt(str, replacestr, newstr){
//This functions searchs for a string in the document
//and if specified then replaces it with a new string
if(str==""){
//If no string to search entered
alert("Enter a string to search");
document.find.findwhat.focus();
return;
}
//Creates a range in the document
txt = maineditor.document.body.createTextRange();
//Loop to find the string in the document
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if(found) {
//If founded select it and scroll into view
txt.moveStart("character", -1);
txt.findText(str);
//If replace is specified then replace the match with the new string
if(replacestr) txt.text=newstr;
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
window.alert("There are no more matches");
n=0;
}
// Not found anywhere, give message.
else
window.alert("\"" + str + "\" was not founded in document");
}
 }
 
function InsertHTML(newhtml){
//Inserts HTML in the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
selpoint.pasteHTML(newhtml);
}

function GetSelectedText(){
//Get the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
var seltext=selpoint.text;
return seltext;
}

function InsertNewImage(){
if(enabletoolbar==false) return;
maineditor.focus();
//Open Insert Image Dialog
maineditor.document.execCommand("insertimage", true, null);
}

function InsertForm(){
//Creates a new form
var formmethod=window.prompt("Choose form method: GET | POST", "POST");
var formaction=window.prompt("Choose form action:", "http://");
InsertHTML("<div style=\"background-Color:#C0C0C0\"><form method=\"" + formmethod + "\" action=\"" + formaction + "\">\n<p>&nbsp;</p></form></div>");
}

function InsertFormControl(control){
maineditor.focus();
//Inserts a form control
maineditor.document.execCommand(control, true, null);
}

function CreateNewLink(){
//Inserts a link in the selected text
if(enabletoolbar==false) return;
var linktext=GetSelectedText();
if(linktext=="") return;
var url=window.prompt("Enter a URL for the new link:", "http://");
if(url!=null){
InsertHTML("<a href=\"" + url + "\">" + linktext + "</a>");
}
maineditor.focus();
}

function InsertTable(){
//Open Table Dialog
table_dialog=window.open("table.htm", "newtable", "top=100,left=100,height=300,width=400,scrollbars=no");
}

function CreateTable(tr, tc, ta, tb, tp, ts, tw, tt){
//Creates a new table
var tablewidth="";
if(tw!=""){
tablewidth=" width=\"" + tw + tt + "\"";
}
var thtml="<table border=\"" + tb + "\" cellpadding=\"" + tp + "\" cellspacing=\"" + ts + "\"" + tablewidth + ">";
tr=parseInt(tr);
tc=parseInt(tc);
for(r=0;r<tr;r++){
thtml+="<tr>";
for(c=0;c<tc;c++){
thtml+="<td></td>";
}
thtml+="</tr>";
}
thtml+="</table>";
InsertHTML(thtml);
table_dialog.close();
}

function EditPage(){
properties_dialog=window.open("properties.htm", "editpage", "top=100,left=100,height=275,width=387,scrollbars=no");
}

function EditPageProperties(pt, pfc, pbgc, pbgi, usewatermark, pbgs){
maineditor.document.title=pt;
maineditor.document.body.text=pfc;
maineditor.document.body.bgColor=pbgc;
maineditor.document.body.background=pbgi;
if(usewatermark) maineditor.document.body.bgProperties="fixed";
else maineditor.document.body.bgProperties="";
if(pbgs!=""){
var pagehtml=maineditor.document.all.tags("HTML")[0].outerHTML;
var bodytag= pagehtml.toLowerCase().indexOf("<body");
if(bodytag==-1) return;
var beforebodytag=  pagehtml.substring(0, bodytag);
var afterbodytag=  pagehtml.substring(bodytag,  pagehtml.length);
var pagehtml=beforebodytag + "<bgsound src=\"" + pbgs + "\">" + afterbodytag;
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}
properties_dialog.close();
maineditor.focus();
}

function ChangeForeColor(){
//Show the Color dialog to edit Fore Color of text selected
if(GetSelectedText()!=""){
pp="EditForeColor";
color_dialog=window.open("color.htm", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
 }

function EditForeColor(thecolor){
maineditor.focus();
//Change fore color of text selected
maineditor.document.execCommand("forecolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}

function ChangeBackColor(){
//Show the Color dialog to edit Back Color of text selected
if(GetSelectedText()!=""){
pp="EditBackColor";
color_dialog=window.open("color.htm?p=EditBackColor", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
 }

function EditBackColor(thecolor){
maineditor.focus();
//Change back color of text selected
maineditor.document.execCommand("backcolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}

function ChangeFont(font){
//Changes the font of the selected text
maineditor.focus();
maineditor.document.execCommand("fontname", false, font);
}

function ChangeFontSize(size){
//Changes the font size of the selected text
maineditor.focus();
maineditor.document.execCommand("fontsize", false, size);
}

function DesignTools(tool){
//Activates design tool
if(enabletoolbar==false){
window.alert("You must switch into normal view to do this");
return;
}
maineditor.focus();
maineditor.document.execCommand(tool, true, null);
}

Help - Script Does Not Work In Firefox

Similar Tutorials

View Content

Please help. This works fine in IE but will not work in FireFox:

<iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe>

<script language="JavaScript" type="text/javascript"></script>

How To Make This Script Work?

Similar Tutorials

View Content

Hello! I have the following code that I just can't seem to get to work.

Here are the issue that aren't working:

1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome)

2. When you click the items, nothing happens. (It used to work and would add the item to the top image)

If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS.

Code:

<div id="avatar_form" width="95" height="141">
</div>


<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>


<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>



<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>


<BR><BR><BR>

<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null

onload = layout

function layout()
{
 if(!document.getElementById('avatar_section')) return
 document.onkeydown = keyhit
 tabs()
 hide_radio_buttons(document.getElementById('avatar_stack'))
 StackImageHolders('avatar_stack');
 P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
 P.style.backgroundColor = layer_colours[on_top]
 P.style.zIndex = stack_height++
 LIs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<LIs.length; i++)
 {
  LIs[i].style.backgroundColor = inactive_tab_background_colour
  LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
  
 }
 LIs[on_top].style.backgroundColor = layer_colours[on_top]
 LIs[on_top].style.borderBottomColor = layer_colours[on_top]
 LIs[on_top].focus()
 IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
 for(i=0; i<IMGs.length; i++)
 {
  IMGs[i].className = 'black_border'
  IMGs[i].style.cursor = 'pointer'
  IMGs[i].onclick=function(){ChangeGarment(this)}
 }
 avatar_preview_and_hotkey_text()
 update_avatar(document.getElementById('avatar_stack').firstChild)
 /* I added the following two lines because Internet Explorer 
 wasn't updating the display properly after loading */
 document.getElementsByTagName('body')[0].style.width='95';
 document.getElementsByTagName('body')[0].style.width='95';
}

function keyhit(e)
{
 thisKey = e ? e.which : window.event.keyCode
 alt_key_down = e ? e.altKey : window.event.altKey
 ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
 shift_key_down = e ? e.shiftKey : window.event.shiftKey
 switch (thisKey) {
  case 37: key = 'LEFT'
   break
  case 39: key = 'RIGHT'
   break
  default: key = null
 }
 if(key && alt_key_down && ctrl_key_down)
 {
  IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
  for(i=0; i<IMGs.length; i++)
  {
   if(IMGs[i].className == 'red_border')
   {
    if((key == 'LEFT') && (i > 0))
    {
     i--
     ChangeGarment(IMGs[i])
     return
    }
    if((key == 'RIGHT') && (i < (IMGs.length - 1)))
    {
     i++
     ChangeGarment(IMGs[i])
     return
    }
   }
  }
 }
 else if(key && alt_key_down && shift_key_down)
 {
  LIs = document.getElementById('avatar_section').getElementsByTagName('li')
  if((key == 'LEFT') && (on_top > 0))
  {
   on_top--
   bring_to_the_top(LIs[on_top])
   return
  }
  if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
  {
   on_top++
   bring_to_the_top(LIs[on_top])
   return
  }
 }
}

function tabs()
{
 list = document.createElement('ul')
 for(i=0; i<avatar_layers.length; i++)
 {
  list_item = document.createElement('li')
  list_item.appendChild(document.createTextNode(avatar_layers[i]))
  list_item.onmouseover=function(){this.className='mouse'}
  list_item.onmouseout=function(){this.className=''}
  list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
  list_item.onclick=function(){
   bring_to_the_top(this)
  }
  list_item.onfocus=function(){
   bring_to_the_top(this)
  }
  list.appendChild(list_item)
  }
  document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}

function hide_radio_buttons(caller)
{
 INPUTs = caller.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   INPUTs[i].style.display = 'none';
  }
 }
}

function StackImageHolders(caller)
{
 Ps = document.getElementById(caller).getElementsByTagName('p')
 for(i=0; i<Ps.length; i++)
 {
  Ps[i].className = 'stack'
 }
}

function avatar_preview_and_hotkey_text()
{
 for(i=0; i<avatar_layers.length; i++)
 {
  preview = document.createElement('img')
  preview.id = avatar_layers[i]
  preview.className = 'preview'
  preview.width = '95px'
  preview.height = '141px'
  preview.alt = 'avatar preview image'
  document.getElementById('avatar_stack').appendChild(preview)
 }

 hotkey_text = document.createElement(' ')
 hotkey_text.className = 'hotkeys'
 hotkey_text.appendChild(document.createTextNode(''))
 document.getElementById('avatar_stack').appendChild(hotkey_text)
}

function update_avatar(caller)
{
 INPUTs = caller.parentNode.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   if(INPUTs[i].checked)
   {
    document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
    INPUTs[i].previousSibling.className = 'red_border'
   }
   else
   {
    INPUTs[i].previousSibling.className = 'black_border'
   }
  }
 }
}

function ChangeGarment(caller)
{
 inputs = caller.parentNode.getElementsByTagName('input')
 for(i=0;i<inputs.length;i++)
 {
  inputs[i].checked=false 
 }
 caller.nextSibling.checked=true
 update_avatar(caller)
}

function bring_to_the_top(caller)
{
 tabs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<tabs.length; i++)
 {
  tabs[i].style.backgroundColor = inactive_tab_background_colour
  tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
 }
 on_top = caller.tab_number
 caller.style.backgroundColor = layer_colours[caller.tab_number]
 caller.style.borderBottomColor = layer_colours[caller.tab_number]
 put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
 put_on_top.style.zIndex = stack_height++
 put_on_top.style.backgroundColor = layer_colours[caller.tab_number] 
}
</script>