JavaScript - Code Not Working Correctly - Flipping Images -

Code:

I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>

Hi,

I wonder if someone can help! I am not a JavaScript programmer at all, so I cant really see what I am doing wrong with the following code...

Just to explain I have 2 fields on a form that retrieve monetary data from a mysql database. The data is a monetary value e.g. 12.59. Which works fine as normal. I have been asked to hide this value depending on what the customers preferences are set to i.e Show Price = Yes or Show Price = No. Hopefully that makes sense. After lots of deliberation I realised that I couldnt hide the fields because the database called an error saying the price data was missing. So I thought change the field type to a 'password field' and the price data would still be accepted by the database. This thankfully worked and didnt break the php code.

So I found some javascript code, chopped and pasted it and came up with the following script. This is called with an onclick event through a link.

<script language="JavaScript">
function changetype(){
var myTextField = document.getElementById('hf_showmobprices');
if(myTextField.value == "Yes")
document.getElementById('price1jd').type='password';
document.getElementById('price2jd').type='password';
else
return false;
}

I thought the above would work but it doesn't. If I take out one of the lines "document.getElementById('price2jd').type='password';", then it does work. After more playing around I thought, create a function caller as shown below but again that doesnt work. The first function works but the second function doesnt seem to work. I shoved in an alert just to check that the second function was being called and it is. So what I gather is It seems to convert the first price field to a password type field but not the second field. Does anyone know why? is it some thing to do with the getElement and can only run once? I am using FireFox 3.6 if that will help

<script type="text/javascript">
function checkprefs() {
price1();
price2();
}
</script>
<script language="JavaScript">
function price1(){
var myTextField = document.getElementById('hf_showmobprices');
if(myTextField.value == "Yes")
document.getElementById('price1jd').type='password';
else
return true;
}
</script>
<script language="JavaScript">
function price2(){
var mynewtestField2 = document.getElementById('hf_showmobprices');
if(mynewtestField2.value == "Yes")
document.getElementById('price2jd').type='password';
else
alert("alert2")
}
</script>

Any guidance would be much appreciated


john

Hey guys,

My code works perfectly fine in internet explorer and google chrome, however, in firefox it does not. I have created an online form, but nothing happens when pressing the "submit" button firefox, whereas in other browsers, it works correctly. Also, the centering of the form is different.

Please help me if possible. Thanks


<!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>Airduct Cleaning</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<link href="text.css" rel="stylesheet" type="text/css">

<script type="text/JavaScript">
function gosubmit(){

musimw.submit();

}
</script>
<style type="text/css">
#text { width: 250px; position: relative; margin-left: 200px; }
</style>
</head>
<body leftmargin="0" topmargin="0">
<table width="998" heigt="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="147" valign="top">
<!----LEFT MENU--------->
<? include "left_menu.php"; ?>
</td>
<td width="591" valign="top" colspan="1">
<!----TOP--------->
<? include "top.php"; ?>

<!----TITLE--------->
<table width="100%" heigt="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="590" height="33" background="images/top_bg2.gif" valign="bottom"><img src="images/title_sub09_01.gif" /></td>
<td width="1" bgcolor="#d3dfe6"></td>
</tr>
</table>
<!----CONTENT--------->
<!----story------>
<form action=sendmail2.php method=post name=musimw enctype=multipart/form-data onSubmit="return musimm_check(this);">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style=" position: relative; margin-left: 28px;">
<td width="50"></td>
<td><p><span class="stxt2">Call for a Free Estimate</span><br>
<br>
<img src="images/img25.gif" align="left"><strong>For a free estimate, call:
</strong></p>
<div id="text">
Office: Insert Office #<br />
Toll-Free: Insert Toll Free # <br />
Email: Insert Email<br />
<br><em>Or, submit the online form below.</em>
</div>
</td>
</tr>
<tr>
<td width="50"></td>
<td>
<table width="530" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#EFEFEF">
<tr>
<td width="10"></td>
<td width="180" height="25">*First name</td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='fname'/></td>
</tr>
<tr>
<td width="10"></td>
<td width="180" height="25">*Last name</td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='lname'/></td>
</tr>
<tr>
<td></td>
<td >Phone Number<br /></td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ptel'/> <select name='pteltype'>
<option value='Home'>Home</option>
<option value='Work'>Work</option>
</select></td>
</tr>
<tr>
<td></td>
<td >Cell Phone Number<br /></td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ctel'/></td>
</select></td>
</tr>
<tr>
<td></td>
<td height="25">*Email Address</td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='email'/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="3"height="1" background="images/point.gif"></td>
</tr>
<tr>
<td width="10"></td>
<td width="180" height="25">*Type of Service</td>
<td style="padding:10px 5px 5px 5px"><select name='bnametype'>
<option value='Air Duct Cleaning'>Air Duct Cleaning</option>
<option value='Dryer Vent Cleaning'>Dryer Vent Cleaning</option>
<option value='Chimney Cleaning'>Chimney Cleaning</option>
</select></td>
</tr>
<tr>
<td></td>
<td height="25">Square Footage<br /></td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='feet'/></td>
</tr>
<tr>
<td></td>
<td height="25">Approximate # of Ducts<br /></td>
<td style="padding:10px 5px 5px 5px"><input type="text" size="20"name='vent' /></td>
</tr>
<tr>
<td></td>
<td height="25">Number of furnaces</td>
<td style="padding:10px 5px 5px 5px"><select name='furnaces'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></td>
</tr>
<tr>
<td colspan="3"height="1" background="images/point.gif"></td>
</tr>
<tr>
<td></td>
<td valign="top" style="padding-top:5px">*Address</td>
<td style="padding:10px 5px 5px 5px"><input type="text" class="inputPlain004" size="30" name='address'></td>
<tr>
<td></td>
<td height="25">*City<br /></td>
<td style="padding:10px 5px 5px 5px"><input name="city" type="text" class="inputPlain004" value="" size="12"></td>
</tr>
<tr>
<td></td>
<td height="25">*State </td>
<td style="padding:10px 5px 5px 5px"><select name='statetype'>
<option value='State'>IL</option></td>
</tr>
<tr>
<td></td>
<td height="25">*Zip Code</td>
<td style="padding:10px 5px 5px 5px"><input name="zip" type="text" class="inputPlain004" value="" size="12"></td>
</tr>
<tr>
<td colspan="3"height="1" background="images/point.gif"></td>
</tr>
<tr>
<td></td>
<td valign="top" style="padding-top:5px">Comments or Questions</td>
<td style="padding:10px 5px 5px 5px"><textarea name='Comment' cols="45" rows="8"></textarea></td>
</tr>
<tr>
<td colspan="3"height="1" background="images/point.gif"></td>
</tr>
</table>
<!---BUTTON--->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="center"><a href="javascript:gosubmit()"><img src="images/bt_submit.gif"></a>&nbsp; <a href="#"><img src="images/bt_cancel.gif"></a></td>
</tr>
</table>
</form>
</td>
<td width="1" bgcolor="#d3dfe6"></td>
</tr>
</table>
</td>
<td width="260" valign="top">
<!----RIGHT-------->
<? include "right_menu.php"; ?>
</td>
</tr>
</table>
<!------BOTTOM---------->
<? include "foot.php"; ?>

</body>
</html>

hello everybody
i need to flip the page as google translator does when translate from Latin languages to Arabic for example

before translating :



after



can anybody help me to do that ???

thanks

Having trouble getting this plugin to work.. jparallax - see here for more info -

http://webdev.stephband.info/parallax.html

Now I have this plugin working separately, on its own page, just fine. see here -

http://bit.ly/hPpSAC

But when I went back, to my own page, and tried to incorporate it into the background of my site, I was able to get the look fine, but the movement isn't working. see here -

http://bit.ly/ee52Iv

I've tried everything I could to get it working.. Maybe someone here could troubleshoot? It would be a huge help, seriously.

Thanks.

Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed.

However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior.

What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown.

Here is the code I am using..

PHP Code:
function searchCats(text) {
    
    // Set URL for ajax request
    var url = 'search_cats.php?search_text='+text;
    
    // Set up element we're modifying
    var results = document.getElementById('cat_list');
    
    // Trim string
    text.replace(/^ss*/, '').replace(/ss*$/, '');
    
    if (text.length < 3) {
        alert('Please enter a search string more than 2 characters.');
        return;
    }
    
    // Send the request, giving it an anonymous function that acts as the oncomplete event
    
    ajaxRequest(url, (function(ajaxResponse) {

        /* Deal with results */
    
        // First we remove all current childs
    
        while(results.hasChildNodes()) {
            while (results.childNodes.length >= 1) {
                results.removeChild(results.firstChild);  
            } 
        }
    
        if (ajaxResponse == '') {    
        
            // Display no results text
            document.getElementById('no_results').style.display='block';
        
        } else {
        
            // Hide no results text
            document.getElementById('no_results').style.display='none';
        
            // Display loading text
            document.getElementById('loading_results').style.display='block';        
        
            // Check for occurence of cat seperator (if not there then we know we only have one results)
            var sep_found = ajaxResponse.indexOf('!@!');
        
            if (sep_found === -1) { // One result only
            
                // Seperate ID & cat name
                var parts = ajaxResponse.split('^@^');
            
                // Create option element
                var option = document.createElement('option');
            
                // Add attribute
                option.setAttribute('value', parts[0]);
            
                // Create text node
                var textNode = document.createTextNode(parts[1]);
            
                // Append text node to option element
                option.appendChild(textNode);
            
                // Now append option element to select list
                results.appendChild(option);
            
            } else {
            
                // Seperate cat data
                var cats = ajaxResponse.split('!@!');
                
                // Loop through cat data
            
                for(i = 0; i < cats.length; i++) {
                
                    // Seperate ID & cat name
                    var parts = cats[i].split('^@^');
            
                    // Create option element
                    var option = document.createElement('option');
            
                    // Add attribute
                    option.setAttribute('value', parts[0]);
            
                    // Create text node
                    var textNode = document.createTextNode(parts[1]);
            
                    // Append text node to option element
                    option.appendChild(textNode);
            
                    // Now append option element to select list
                    results.appendChild(option);                
                
                }
            
            }          
        
        }

    })); 

    // Hide loading text
    document.getElementById('loading_results').style.display='none';

} 


Thanks guys!

Hello all,
I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file.

The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast

Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way.

I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads.

I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine 
Peninsula &amp; The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can 
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
	
																				<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
																				<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
																				<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
																				
															
																				
									<script>
									// initialise the drop-down menus
									runOnLoad(Dropdown.initialise);
									</script>
				
												
</head>
<body>


<div id="wrapper">

	<a href="tel://+61425859742"><div id="mobile_header"></div></a>
	<a href="tel://+61425859742"><div id="phoneBlock"></div></a>

	
	<div id="header"></div>
	
	<div id="nav">
	<ul class="dropdown">
  <li>
    <a href="index.html">Home</a>
		</li>    
		<li>Electrical
    <ul>
      <li>
        <a href="domestic_electrician.html">Domestic</a>
      </li>
      <li>
        <a href="electrical_contractors.html">Commercial/Industrial</a>
      </li>
    </ul>
  </li>    <li>
	<a href="air_conditioner_installation.html">Air Conditioners</a>
	</li>			<li>
	<a href="solar_power_systems.html">Solar</a>
	<ul>
			<li><a href="solar_system_maintenance.html">Maintenance</a>
			</li>
			<li><a href="solar_energy_facts.html">About Solar</a>
			</li>
			</ul>
	</li>    <li>
	<a href="b_type_gas_service.html">Type B Gas</a>
	</li>  <li>
	<a href="formgenerator/forms/contact.html">Contact Us</a>
	</li>
</ul>
	</div>	 					
	
	
	
				<div id="content-2">
				<div class="clear">&nbsp;</div>
						 <div id="top_border"></div>
						 		 <div id="content-2-1">
								 
								 			<span class="blackheading">Watt You Need Electrical - 
											Offering Electrical Services For Geelong, Bellarine Peninsula &amp; The Surf Coast</span>
											
			<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can 
			take that extra bit of time and effort to make sure you get the best service and advice.
			<br /><br />
			If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a 
			split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best 
			quality job at a competitive price.
			<br /><br />
			Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>, 
			we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B 
			Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
			<br /><br />
			<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
			</p>


								</div>
						<div id="bottom_border"></div>
				</div>
	
	<div id="footer">
			 <table class="tableFooter">
			 <tr><td>Watt You Need Electrical Pty. Ltd. &copy; 2014</td></tr>
			 </table>
  </div>
	
</div>

</body>
</html>

Code:

/*

Dropdown.js

Creates touch-friendly drop-down menus

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the Dropdown object
var Dropdown = (function(){

  // the delay, in milliseconds
  var DELAY = 250;

  // the list of menus
  var menus = [];

  // Initialises the drop-down menus.
  function initialise(){

    // listen for touch events on the document if appropriate
    if ('createTouch' in document){
      document.body.addEventListener('touchstart', handleTouchStart, false);
    }

    // loop over the menus, converting them
    var menus = document.querySelectorAll('ul.dropdown');
    for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);

  }

  /* Handles a touch start event. The parameter is:
   *
   * e - the event
   */
  function handleTouchStart(e){

    // determine whether any menu is open
    var isOpen = false;
    for (var i = 0; i < menus.length; i ++){
      if (menus[i].isOpen) isOpen = true;
    }

    // return immediately if all menus are closed
    if (!isOpen) return;

    // move up the document tree until we reach the root node
    var node = e.target;
    while (node != null){

      // return immediately if we are inside a drop-down menu
      if (/\bdropdown\b/.test(node.className)) return;

      // move onto the parent node
      node = node.parentNode;

    }

    // close all menus
    close();

  }

  /* Closes all menus except the specified menu. The parameter is:
   *
   * menu - a menu not to close; this parameter is optional
   */
  function close(menu){

    // loop over the menus, closing them
    for (var i = 0; i < menus.length; i ++){
      if (menus[i] != menu) menus[i].close();
    }

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - either the DOM node of the menu or the ID of the node
   */
  function applyTo(node){

    // fetch the DOM node if a string was supplied
    if (typeof node == 'string') node = document.getElementById(node);

    // create and store the new menu
    menus.push(new Menu(node));

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - the DOM node of the menu
   */
  function Menu(node){

    // store the node
    this.node = node;

    // update the class name
    node.className += ' dropdownJavaScript';

    // listen for mouse events
    if ('addEventListener' in node){
      node.addEventListener(
          'mouseover', this.bind(this.handleMouseOver), false);
      node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
      node.addEventListener('click',    this.bind(this.handleClick),    false);
    }else{
      node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
      node.attachEvent('onmouseout',  this.bind(this.handleMouseOut));
      node.attachEvent('onclick',     this.bind(this.handleClick));
    }

    // listen for touch events if appropriate
    if ('createTouch' in document){
      node.addEventListener('touchstart', this.bind(this.handleClick), false);
    }

  }

  // whether the menu is open
  Menu.prototype.isOpen = false;

  // the timeout
  Menu.prototype.timeout = null;

  /* Binds the specified function to the current object. The parameter is:
   *
   * f - the function
   */
  Menu.prototype.bind = function(f){

    // return the bound function
    var thisObject = this;
    return function(){ f.apply(thisObject, arguments); }

  }

  /* Handles a mouse over event. The parameters a 
   *
   * e         - the event
   * immediate - true to open the menu without a delay
   */
  Menu.prototype.handleMouseOver = function(e, immediate){

    // clear the timeout
    this.clearTimeout();

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // if the target is within a list item, set the timeout
    if (item.nodeName == 'LI'){
      this.toOpen  = item;
      this.timeout =
          window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
    }

  }

  // Handles a mouse out event.
  Menu.prototype.handleMouseOut = function(){

    // clear the timeout
    this.clearTimeout();

    // set the timeout
    this.timeout = window.setTimeout(this.bind(this.close), DELAY);

  }

  /* Handles a click event. The parameter is:
   *
   * e - the event
   */
  Menu.prototype.handleClick = function(e){

    // close any other menus
    close(this);

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // check that the target is within a list item
    if (item.nodeName == 'LI'){

      // check whether the item has a closed submenu
      var submenu = this.getChildrenByTagName(item, 'UL');
      if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){

        // open the submenu
        this.handleMouseOver(e, true);

        // prevent the default action
        if ('preventDefault' in e){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }

      }

    }

  }

  // Clears the timeout.
  Menu.prototype.clearTimeout = function(){

    // clear the timeout
    if (this.timeout){
      window.clearTimeout(this.timeout);
      this.timeout = null;
    }

  }

  // Opens the last item hovered over.
  Menu.prototype.open = function(){

    // store that the menu is open
    this.isOpen = true;

    // loop over the list items with the same parent
    var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
    for (var i = 0; i < items.length; i ++){

      // check whether there is a submenu
      var submenu = this.getChildrenByTagName(items[i], 'UL');
      if (submenu.length > 0){

        // check whether the submenu should be opened or closed
        if (items[i] != this.toOpen){

          // close the submenu
          items[i].className =
              items[i].className.replace(/\bdropdownOpen\b/g, '');
          this.close(items[i]);

        }else if (!/\bdropdownOpen\b/.test(items[i].className)){

          // open the submenu
          items[i].className += ' dropdownOpen';

          // determine the location of the edges of the submenu
          var left = 0;
          var node = submenu[0];
          while (node){
            left += node.offsetLeft;
            node = node.offsetParent;
          }
          right = left + submenu[0].offsetWidth;

          // move the submenu to the right of the item if appropriate
          if (left < 0) items[i].className += ' dropdownLeftToRight';

          // move the submenu to the left of the item if appropriate
          if (right > document.body.clientWidth){
            items[i].className += ' dropdownRightToLeft';
          }

        }

      }

    }

  }

  /* Closes the menus within the specified node. The parameter is:
   *
   * node - the node; if omitted, all menus are closed
   */
  Menu.prototype.close = function(node){

    // if no node was specified, close all menus
    if (!node){
      this.isOpen = false;
      node        = this.node;
    }

    // loop over the items, closing their submenus
    var items = node.getElementsByTagName('li');
    for (var i = 0; i < items.length; i ++){
      items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
    }

  }

  /* Returns an array containing the children of the specified node with the
   * specified tag name. The parameters a 
   *
   * node    - the node
   * tagName - the tag name
   */
  Menu.prototype.getChildrenByTagName = function(node, tagName){

    // initialise the list of children
    var result = [];

    // loop over the children, adding those with the right tag name to the list
    for (var i = 0; i < node.childNodes.length; i ++){
      if (node.childNodes[i].nodeName == tagName){
        result.push(node.childNodes[i]);
      }
    }

    // return the children
    return result;

  }

  // return the public API
  return {
    initialise : initialise,
    applyTo    : applyTo
  };

})();

Any help is appreciated.

AMAZON has some nice future for book preview and they can display book cover/back like real book.
For instance
Rational Astrology: as a physical model (Chinese Edition): Julian J.-L. Ting: 9781493734559: Amazon.com: Books
Presumably that is done by javascript?
Is there any free code available for doing such business?

Hey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas?


Here is my 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>City and State Lookup</title>

<style type="text/css">
h1 {
font-family:Arial;
color:navy;
}
p, td {
font-family:arial;
font-size:11px;
}
</style>

<script type="text/javascript">
/* <![CDATA[ */

var httpRequest = false;
function getRequestObject() {
try {
httpRequest = new XMLHttpRequest();
}
catch (requestError) {
try {
httpRequest = new ActiveXObject
("Msxm12.XMLHTTP");
}
catch (requestError) {
try {
httpRequest = new ActiveXObject
("Microsoft.XMLHTTP");
}
catch (requestError) {
window.alert("Your browser does not support AJAX!");
return false;
}
}
}
return httpRequest;
}

function updateCityState() {
if (!httpRequest)
httpRequest = getRequestObject();
httpRequest.abort();
httpRequest.open("get","zip.xml");
httpRequest.send(null);
httpRequest.onreadystatechange=getZipInfo;
}

function getZipInfo() {
if (httpRequest.readyState==4 && httpRequest.status == 200) {
var zips = httpRequest.responseXML;
var locations = zips.getElementsByTagName("Row");
var notFound = true;
for (var i=0; i<locations.length; ++i) {
if (document.forms[0].zip.value == zips.getElementsByTagName(
"ZIP_Code")[i].childNodes[o].nodeValue) {
document.forms[0].city.value = zips.getElementsByTagname(
"City") [i].childNodes[0].nodeValue;
document.forms[0].state.value = zips.getElementByTagName(
"State_Abbreviation")[i].childNodes[0].nodeValue;
notFound = flase;
break;
}
}
if (notFound) {
window.alert("Invalid ZIP code!");
document.forms[0].city.value = "";
document.forms[0].state.value = "";
}
}
}
/* ]]> */
</script>

</head>

<body>

<h1>City and State Lookup </h1>
<form action="">
<p>Zip code <input type="text" size="5" name="zip" id="zip"
onblur="updateCityState()" /></p>
<p>City <input type="text" name="city" />
State <input type="text" size="2" name="state" /></p>
</form>



</body>
</html>

I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code:
Code:

var current_overID = "";
var last_overID = "";
 
function item (img_name,width,height)
{
        img_prefix = img_name;
        this.slide_img = new Image (width,height);
        this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
 
function new_item (img_name,width,height) 
{
        item [img_name] = new item (img_name,width,height);
}
 
function mouseover (itemID, mapID)
{
        current_overID = itemID;
        if (current_overID != last_overID) {
                          document.deltavmap.src = item [current_overID].slide_img.src;
						  document.deltavmap.useMap=mapID;
        }
}

 
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more


<MAP NAME="deltav"> 
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')"  window.defaultStatus='' window.status='Engineering' return true > 
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true > 
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true > 
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 

<MAP NAME="eng"> 
<AREA SHAPE="RECT" COORDS="38,52,244,75"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
    window.defaultStatus='' 
    window.status='Batch Processing' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,82,230,103"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
    window.defaultStatus='' 
    window.status='Control Modules' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,112,143,136"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
    window.defaultStatus='' 
    window.status='Graphics'  return true
	>
    <AREA SHAPE="RECT" COORDS="40,141,176,168" 	
		HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
		window.defaultStatus=''
		window.status='ProtoTyping' return true
	>
<AREA SHAPE="RECT" COORDS="24,224,84,234" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
    window.defaultStatus='' 
    window.status='Software' return true 
    > 
<AREA SHAPE="RECT" COORDS="24,236,124,247" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
    window.defaultStatus=''
    window.status='Documentation' return true 
    > 
<AREA SHAPE="RECT" COORDS="25,248,76,261" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
    window.defaultStatus='' 
    window.status='Support' return true 
    > 
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 
... many others

Can any one tell me what i need to do to fix this in IE? Thanks!
Fayette

Hi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues:

1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com).

2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded.

You can see the overall code he

http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216)

Example (using .animate):
http://www.matthewruddy.com/demo/

I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution.

I would appreciate if anyone could help me out. Thanks in advance. Matthew.

I am trying to set up a jQuery carousel on my home page. I want it to operate by mouse - also auto scrolling, be horizontal, be circular, show one image at once.

I currently have three images to show one at a time in a containing div. All three images are showing together. One is in the container, in the right place, two others are shown below it. These two should be hidden in the carousel. The carousel itself, does not work.

Please can anyone tell me what I am doing wrong?! I would like to keep, at least some, of my hair!

Here is my code in the head;

Code:

<link rel="stylesheet" type="text/css" href="css/deestyle.css" />

<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>

<!-- Optional -->
<script type="text/javascript" src="js/mousewheel.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$(function() {
    		$(".carousel").jCarouselLite({
        	mouseWheel: true,
        	auto: 800,
		speed: 500,
		vertical: false,
		circular: true,
		visible: 1
    		});
	});
});
</script>

This is the code in the body;


		<div class="carousel">
    			<ul id="slides">
        			<li><img src="images/imagered.jpg" alt="" width="650" height="350" ></li>
        			<li><img src="images/imageblue.jpg" alt="" width="650" height="350" ></li>
        			<li><img src="images/imagegreen.jpg" alt="" width="650" height="350" ></li>
    			</ul>
		</div>

Here is the CSS code;

.carousel {
	position: absolute;
	top: 200px;
	right: 0px;
	width: 650px;
	height: 350px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #00ff00;
	}

#slides {
	list-style-type:none;
	float: left;
	padding: 0;
	margin: 0;
	}

Big thank you's for any help, in advance

Fixed! The thing I have started to realize is if a downloaded tutorial on a specific website function isn't working out so great...then just look for a better one :)
This filtering image setup works PERFECTLY: http://www.htmldrive.net/items/show/...ages-Portfolio


Original Message:

Man I have officially run out of ideas here. I grabbed the code from this tutorial: Demo

I tailored it to accommodate larger images in this portfolio page. At first glance it appears to work, but it actually is messed up and I CANT figure out why...especially since there is such little code. :confused:

Long story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example...

X = hidden image not scrolled into view
O = image in line of sight

X - X - X - X - O - O - O - O - X - X - X - X

Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance.

Ok, I am in a small pickle here.

I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done.

Now they have 6 images that need to rotate through.
Easy enough again, script done.

The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month.

So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there.
This is the spot I need help at.
Code:

function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1

I wanted to add another part to the IF statement like maybe.
Code:

If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))

Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names)


The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it.

I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance!

Code:

<html>
	<head>
		<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
			body{
					margin: 0px;
					width: 405px;
					height: 205px;
					font-family; Georgia;
			}		
		</style>
			
		<script type="text/javascript">

			var image1=new Image()
			image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
			var image2=new Image()
			image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
			var image3=new Image()
			image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
			var image4=new Image()
			image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
			var image5=new Image()
			image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
			var image6=new Image()
			image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
			var image7=new Image()
			image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
			var image8=new Image()
			image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
			var image9=new Image()
			image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
			var image10=new Image()
			image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
			
		</script>
			
	</head>
	
	<body>

		<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>

		<script type="text/javascript">
			
			var step=1
			var whichimage=1
			function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1
			setTimeout("slideit()",6000)
			}
			slideit()
			function slidelink(){
			if (whichimage==1)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
			else if (whichimage==2)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
			else if (whichimage==3)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
			else if (whichimage==4)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
			else if (whichimage==5)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
			else if (whichimage==6)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
			else if (whichimage==7)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
			else if (whichimage==8)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
			else if (whichimage==9)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
			else if (whichimage==10)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
			}	
		</script>
	</body>
</html>