0 Replies - 767 Views - Last Post: 02 May 2013 - 09:02 AM

#1 tazzy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 27-April 12

javascript jquery slider issues. where have i gone wrong?

Posted 02 May 2013 - 09:02 AM

I cannot get my image slider to work. i was following a tutorial form here... http://designmodo.co...er-jquery-css3/ and still i just get three images seperated in live view on Dreamweaver. Can someone tell me where i am messing this up? I am sure it is something simple...simple is what gets me. Also My phone number validation is not working




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Patty's Home Cooking</title>

<link rel="stylesheet" href="css/nivo-slider.css" media="screen"

<style>

	body{background-color:#8A0000; font-family:Arial, Helvetica, sans-serif;}
	#container{background-color:white; width:1020px; height:auto; margin:0 auto; padding:30px;}
	#imageSlider{padding:20px; width:800px; height:350px; background-color:black;}
	.dayOfWeekSpecial{border:2px solid red; font-weight:bold; font-size:18px; float:left; width:75px; text-align:center; padding:10px; margin-right:10px;}
	.title{border-bottom:2px solid red;}
	#myForm{background-color:black; color:white; padding:20px; }
	#myForm .item{width:30px; font-size:18px; float:left; margin-right:10px;}
	#submitButton{height:40px; color:white; background-color:red}
	
</style>


<script>

	function validateForm()
{	
var x=document.forms["myForm"]["fname"].value;
{if (x==null || x=="")
{
  alert("First name must be filled out");
  return false;
  }
	
var y=document.forms["myForm"]["lname"].value;
if (y==null || y=="")
  {
  alert("Last name must be filled out");
  return false;
  }
var phone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;   
  if(inputtxt.value.match(phone))   
        {   
      return true;   
        }   
     else  
       {   
        alert("Not a Valid Phone number");   
        return false;   
        }   
  
var z=document.forms["myForm"]["email"].value;
var atpos=z.indexOf("@");
var dotpos=zlastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
  

}  
				
	
			
			if(checkValidOrder(document.forms['myForm']['item1'].value) == false
				|| checkValidOrder(document.forms['myForm']['item2'].value) == false
				|| checkValidOrder(document.forms['myForm']['item3'].value) == false
				|| checkValidOrder(document.forms['myForm']['item4'].value) == false
				|| checkValidOrder(document.forms['myForm']['item5'].value) == false
				|| checkValidOrder(document.forms['myForm']['item6'].value) == false
				|| checkValidOrder(document.forms['myForm']['item7'].value) == false
				|| checkValidOrder(document.forms['myForm']['item8'].value) == false
			
			)
				return false;
				
			else
				//if no errors are found, return true (form is ready)
				return true;
	}
	
	function notify()
	{
		alert("The web page is under construction and will be 100% complete by June 1, 2013.");
	}
	
	function showWednesdaySpecial()
	{
		alert("Wednesday's special is Buy 2 (E2) get one FREE! ");
	}
	function showThursdaySpecial()
	{
		alert("Thursday's special is 10% off thursday with free drinks!");
	}
	function showFridaySpecial()
	{
		alert("Fridays's special is Free appitizer with order of two entrees!");
	}
	function showTuesdaySpecial()
	{
		alert("Tuesday's special is kid's eat FREE with one paying adult!");
	}
	function showMondaySpecial()
	{
		alert("Monday's special is any entree Buy 1 Get 1 Half Off!");
	}
	
	//This function gets the value for each order item (texbox value) and it checks to see if they are valid inputs
	function checkValidOrder(orderCode) 
	{
		//If first order code is empty, tell the customer that they must order at least one item
		if(document.forms['myForm']['item1'].value == null || document.forms['myForm']['item1'].value == "")
		{
			alert("You must order at least one item.");
			return false;
		}
		
		//If the order code is blank, no problem.  That means they only want one item which is in the first textbox
		else if(orderCode == null || orderCode == "") 
			return true;
		
		//Checks each valid order code. 
		else if(orderCode != 'D1' && orderCode != 'D2' && orderCode != 'D3' && orderCode != 'E1' && orderCode != 'E2' && orderCode != 'E3'&& orderCode != 'DE4' && orderCode != 'E5' && orderCode != 'B1' && orderCode != 'B2' && orderCode != 'B3' && orderCode != 'B4' && orderCode != 'B5'  ) 
		{
			alert("Please check your order. " + orderCode + " is not a valid choice.");
			return false;
		}
		
		//If there are no errors, return true (this part of form is ready)
		else
			return true;
	}	
	
</script>

</head>

<body onload="onloadFunction()">



<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="js/jquery.nivo.slider.pack.js"></script> 



<script> 
    $(window).load(function() { 
        $('#slider').nivoSlider({ 
            directionNavHide: false, 
            captionOpacity: 1, 
            prevText: '<', 
            nextText: '>'
        }); 
    }); 
</script> 


<div class="slider-wrapper futurico-theme"> 
  
    <div id="slider" class="nivoSlider"> 
  
        <img src="slider/img/pot_pie.jpg" alt="pot pie"> 
  
        <img src="slider/img/table_spread.jpg" alt="table"> 
  
        <img src="slider/img/lasagna.jpg" alt="lasagna"> 
  
         
  
    </div> 
  
</div> 



 
    <h2> Click on a day below to see daily specials </h2>
    <p class="dayOfWeekSpecial" onclick="showMondaySpecial()"> Monday </p>
    <p class="dayOfWeekSpecial" onclick="showTuesdaySpecial()"> Tuesday </p>
     <p class="dayOfWeekSpecial"onclick="showWednesdaySpecial()"> Wednesday </p>
     <p class="dayOfWeekSpecial" onclick="showThursdaySpecial()"> Thursday </p>
       <p class="dayOfWeekSpecial" onclick="showFridaySpecial()"> Friday </p>
    
    <div style="clear:left"> </div>
    
   <h2 class="title"> Entrees </h2>
        <h3> E1 - Quarter pound burger with lettuce, tomato, mayonnaise and cheese.  Served with side of fries. ($6.50)  </h3>
        <h3> E2 - Fried chicken breast with lettuce, tomato, and honey mustard.  Served with side of fries. ($5.50)  </h3>
        <h3> E3 - Fried buffalo chicken wings (6) with celery and your choice of Ranch or Blue Cheese.  Served with side of onion rings. ($6.00)  </h3>
         <h3> E4 - 2 Hot Dogs with your choice of mustard, ketchup, mayonaise, relish, chilli, or slaw. Served with a side of fries ($6.25)  </h3>
          <h3> E5 - Chef Salad with lettuce, tomatoe, shredded cheese, onions, pickles, ham, turkey, and cucumbers. Served with your choice of dressing: ranch, thousand island, or House Italian ($6.50)  </h3>
    
   <h2 class="title"> Beverages </h2>
   		<h3> B1 - Pepsi ($1.00) </h3>
        <h3> B2 - Dr Pepper ($1.00) </h3>
        <h3> B3 - Sprite ($1.00) </h3>
        <h3> B4 - Sweet Tea ($1.00) </h3>
        <h3> B5 - Milk ($1.00) </h3>
   	
   <h2 class="title"> Desserts </h2>
   		<h3> D1 - Apple Pie ($1.00) </h3>
        <h3> D2 - Chocolate Cake ($1.00) </h3>
        <h3> D3 - Cheese Cake ($1.00) </h3>
   
   <form name="myForm" id="myForm" onsubmit="return validateForm()" method="post" action="submitOrder.html">
   		<h2 style="color:red"> Place a Pick-up Order </h2>
        <p> *All fields are required </p>
        
        <p><label>First Name:</label> <input type="text" name="fname"> </p>
        <p><label>Last Name: </label><input type="text" name="lname"> </p>
        <p><label>Phone Number (xxx-xxx-xxxx): </label> <input type="text" name="phone"> </p>
        <p><label>Email Address (email@domain.com): </label><input type="text" name="email"> </p>
      	
        <h3> You can include up to any 8 items per order. List each desired selection below (ie. E1, E2, B1, etc.).  You will receive your total when you pick up your order.  Thank You!</h3>
        <p><input type="text" id="item1"  class="item"> </p>
        <p><input type="text" id="item2"  class="item"> </p>
        <p><input type="text" id="item3"  class="item"> </p>
        <p><input type="text" id="item4"  class="item"> </p>
        <p><input type="text" id="item5"  class="item"> </p>
        <p><input type="text" id="item6"  class="item"> </p>
        <p><input type="text" id="item7"  class="item"> </p>
        <p><input type="text" id="item8"  class="item"> </p>

    	<input type="submit" value="Submit Order" id="submitButton">
     
   </form>
   
</div>

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Page 1 of 1