use jquery display your news heading line and hide the paragraph

jQuery(document).ready(function() {
//find p hide, find h3,to active the function
$(‘#rightside’).find(‘p’).hide().end().find(‘h3’).click(function(){
$(this).next().slideToggle()

});

});

Advertisements

create a php page with in paypal button and link–this just continue with previous page

<?php
echo “<h1>Welcome to Bazaar online shop</h1>”;
include(“inc_db.php”);//connect to database newsletter
if($DBConnect)
{
$table = “products”;
$query = “select * from $table”;
$result = @mysql_query($query,$DBConnect);
echo “<table width = ‘80%’ border = ‘1’>”;
echo “<tr><th>Name</th><th>Cost</th><th>Image</th><th>Description</th><th>Add to Cart</th><th>Go Pay</th></tr>”;
while($row = mysql_fetch_assoc($result))
{
echo “<tr><td>$row[Name]</td><td>$row[Cost]</td>”;
echo “<td><img src =’images/”.$row[‘Image’].”‘/></td><td>$row[Description]</td><td>”;
echo “<form action=’https://www.paypal.com/cgi-bin/webscr&#8217; method =’post’>”;
echo “<input type=’hidden’ name=’cmd’ value=’_cart’>”;
echo “<input type=’hidden’ name=’business’ value=’youremail@host.com’>”;
echo “<input type=’hidden’ name=’item_name’ value='”.$row[‘Name’].”‘>”;
echo “<input type=’hidden’ name=’amount’ value='”.$row[‘Cost’].”‘>”;
echo “<input type=’hidden’ name=’currency_code’ value=’AUD’>”;
echo “<input type=’hidden’ name=’add’ value=’add’>”;

echo “<input type=’hidden’ name=’bn’ value=’PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest’>”;
echo “<input type=’image’ src = ‘https://www.paypalobjects.com/en_AU/i/btn/btn_cart_LG.gif&#8217; border=’0′ name=’submit’ alt=’PayPal – The safer,easier way to pay online.’>”;
echo “<img alt=” border=’0′ src=’https://www.paypalobjects.com/en_AU/i/src/pixel.gif&#8217; width=’1′ height=’1′>”;
echo “</form></td>”;
echo “<td><form action=’https://www.paypal.com/cgi-bin/webscr&#8217; method =’post’>”;
echo “<input type=’hidden’ name=’cmd’ value=’_xclick’>”;
echo “<input type=’hidden’ name=’business’ value=’youremail@host.com’>”;
echo “<input type=’hidden’ name=’item_name’ value='”.$row[‘Name’].”‘>”;
echo “<input type=’hidden’ name=’amount’ value='”.$row[‘Cost’].”‘>”;
echo “<input type=’hidden’ name=’currency_code’ value=’AUD’>”;
echo “<input type=’hidden’ name=’bn’ value=’PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest’>”;
echo “<input type=’image’ src = ‘https://www.paypalobjects.com/en_AU/i/btn/btn_buynowCC_LG.gif&#8217; border=’0′ name=’submit’ alt=’PayPal – The safer,easier way to pay online.’>”;
echo “<img alt=” border=’0′ src=’https://www.paypalobjects.com/en_Au/i/src/pixel.gif&#8217; width=’1′ height=’1′>”;
echo “</form></td></tr>”;

}
echo “</table>”;
mysql_free_result($result);
mysql_close($DBConnect);

}
?>

a paypal shopping cart with php here is the source code for you catalog–continue

first, create your catalog and product database, here is the source code:

— phpMyAdmin SQL Dump
— version 2.10.3
http://www.phpmyadmin.net

— Host: localhost
— Generation Time: May 24, 2013 at 02:43 PM
— Server version: 5.0.51
— PHP Version: 5.2.6

SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;


— Database: `bazaar`

CREATE DATABASE `bazaar` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `bazaar`;

— ——————————————————–


— Table structure for table `categories`

CREATE TABLE `categories` (
`CatID` int(11) NOT NULL auto_increment,
`Name` varchar(50) NOT NULL,
PRIMARY KEY  (`CatID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;


— Dumping data for table `categories`

INSERT INTO `categories` VALUES (1, ‘Bazaar Ceramics Catalogue’);

— ——————————————————–


— Table structure for table `products`

CREATE TABLE `products` (
`ProdID` int(11) NOT NULL auto_increment,
`CartID` int(11) NOT NULL,
`Name` varchar(50) NOT NULL,
`Cost` decimal(8,2) NOT NULL,
`Image` varchar(50) NOT NULL default ‘NoImage.jpg’,
`Description` varchar(250) default NULL,
PRIMARY KEY  (`ProdID`),
KEY `CartID` (`CartID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;


— Dumping data for table `products`

INSERT INTO `products` VALUES (1, 1, ‘Copper Red Dish 001’, 450.00, ‘bcpot002_smaller.jpg’, ‘Shallow Copper Red dish form showing distinctive qualities of this traditional reduction fired glaze.  Fired to 1300 degrees’);
INSERT INTO `products` VALUES (2, 1, ‘Copper Red Bottle 001’, 550.00, ‘bcpot003_smaller.jpg’, ‘Copper Red bottle form.  Reduction fired to 1300 degrees’);
INSERT INTO `products` VALUES (3, 1, ‘Chun bowl 001’, 350.00, ‘bcpot006_smaller.jpg’, ‘Blue Chun bowl with tea stain rim over terracotta.  Fired to 1300 degrees’);
INSERT INTO `products` VALUES (4, 1, ‘Moonscape bowl 001’, 320.00, ‘bcpot009_smaller.jpg’, ‘High Calcium bowl with white glaze over blue slip.  Fired to 1280 degrees’);
INSERT INTO `products` VALUES (5, 1, ‘Crystalline bowl 001’, 250.00, ‘bcpot013_smaller.jpg’, ‘Blue Green Crystalline glaze.  Narrow-foot bowl with clear glaze outside.  Fired to 1300 degrees’);
INSERT INTO `products` VALUES (6, 1, ‘Carved vase form 001’, 450.00, ‘bcpot014_smaller.jpg’, ‘Carved Iron stoneware vase form.  Oxidation lustre on rim.  Fired to 1280 degrees’);
INSERT INTO `products` VALUES (7, 1, ‘Carved vase form 002’, 450.00, ‘bcpot016_smaller.jpg’, ‘Carved dry matt calcium vase form.  Fired to 1280 degrees’);
INSERT INTO `products` VALUES (8, 1, ‘Carved Bottle form 001’, 600.00, ‘bcpot018_smaller.jpg’, ‘Carved dry matt calcium bottle form.  Lustre rim.  Fired to 1280 degrees’);
INSERT INTO `products` VALUES (9, 1, ‘Dry earth vase form 001’, 500.00, ‘bcpot012_smaller.jpg’, ‘Vase form.  White slip over earthenware clay. Fired to 1000 degrees’);
INSERT INTO `products` VALUES (10, 1, ‘Carnivale cup and saucer 001’, 150.00, ‘bcpot008_smaller.jpg’, ‘ Cup and Saucer with Carnivale design.  Coloured slips under clear glaze.  Earthenware’);

use javascript create images gallery, ratate images fucntion

var i =0;
function rotate1(){
    var imgArray = new Array(“aphex”,”addiction”,”amy”,”abba”,”donna”,”elliott”,”fergie”); //store images in an array
    picName=imgArray[i];
   //change div picture1 background images
   document.getElementById(‘picture1’).style.backgroundImage = “url(images/product/”+ picName +”.jpg)”;
   ( i == (imgArray.length – 1 )) ? i = 0 : i++; //if (i = 6){ change i=0} else {i++}
}
window.setInterval(rotate1, 2000);//change every 2 seconds

here is the answer cookies login logout info question

first, use javascript the innerHTML create a html_login and log_out page(actional this not a page ,just 2 div),when validate pass then get in show this div info “welcom back use + logout button or a linked paragraph” something like this.

second. ease,you validate the page,for assessment only need validate not empty. For the real world you will go to the database check the info. if not empty, then store the info to document.cookie=txtuser.value + “|” + txtuser.value+’@tafensw.edu’;

third. in you login_div, you just use this info:

here is the code:

var tname=document.getElementById(“txtname”);
    if(tname)tname.value=udata[0];//write into txtname box
    var temail=document.getElementById(“txtemail”);
    if(temail)temail.value=udata[1];//write into txtemail box

 

use cookies for login and logout and write the info into contact form

Q3, Q4, could been done togather.

The question is that provide code for a login feature.Once the user logs in successfully,every page of the site will display the user’s login name, along with a link allowing them to logout at anytime.You will need to use cookies to maintain a logged in state across all pages of the website.

the question 4 is once user has logged in ,and the fill out the enquiry form, automatically fill in the name and email fields when the user loads the contact.htm page.

so here is your javascript source codes

you could save it in external file, then connect to your html page, actually in previous page ,already add connect.

here is the source codes for previous question.

//contact page

function validateForm()

{

               var name = document.getElementById(‘txtname’);

               var email = document.getElementById(‘txtemail’);

               var artist = document.getElementById(‘txtartist’);

               var album = document.getElementById(‘txtalbum’);

               var comments = document.getElementById(‘txtcomments’);

               //[[check if the user put any value

               if(name.value.length==0)

               {

                              alert(“Please tell me your name.”);

                              name.focus();

                              name.select();

                              return false;

               }

               if(email.value.length==0)

               {

                              alert(“Please tell me your email address.”);

                              email.focus();

                              email.select();

                              return false;

               }//]]end here for check if empty

               if(email.value.indexOf(‘@’)<0 || email.value.indexOf(‘.’)<0) //check email address must have @ and .

               {

                              alert(“Email address is invalid,Please enter a valid email address.”);

                              email.focus();

                              email.select();

                              return false;

               }

               if(artist.value.length==0)//check use if is empty

               {

                              alert(“Please tell the artist.”);

                              artist.focus();

                              artist.select();

                              return false;

               }

               if(album.value.length==0)//check use if is empty

               {

                              alert(“Please tell the album or songs.”);

                              album.focus();

                              album.select();

                              return false;

               }

               if(comments.value.length==0)//check use if is empty

               {

                              alert(“Please tell the album or songs.”);

                              comments.focus();

                              comments.select();

                              return false;

               }

               //use confirm comand arrow use change mind,let use go back write again

               var doit = confirm(“your name is ” +name.value+”,\n your email is “+email.value+”,\n artist is “+album.value+”,\n comemnts is “+comments.value+” \n  If it is correct, please ok,if it is not then click cancel,go back fill the form again.”);

               if (doit)

               {

                              alert(“Thanks for fill out the form! You can continue now.”);

               }

               else

               {

                              alert(“Plese enter the information again”);

               }

              

}

 

validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct.

this post and the follow post for help people for javascript assessment not for the real world

Q1. validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct. If yes, thanks the visitoer and submit the form. If no,prevent the form from submitting and display detailed error messages for the incorrect fields.

the contact.html page just like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Beatmap Product Enquiry Form</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”js/share.js”></script>
<script language=”javascript” src=”js/all.js”></script>
<script type=”text/javascript” src=”js/autochange.js”></script>
<link href=”styles/style.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
.title {
margin-bottom:10px;
}
#rightside {font-size:10px;
}
br{line-height:3;
}
#header br{line-height:1;
}
fieldset{width:350px; margin:0 50px; padding:20px;
}
legend {font:900 1.2em helvetica, verdana, sans-serif;color:#fff;
}
#picture1{background-image:url(images/product/rihanna.jpg);
}
#picture2{background-image:url(images/product/staticx.jpg);
}
</style>
</head>
<body>
<div id=”central”>
<div id=”header”>
<div id=”login”>
</div>
</div>
<ul id=”navlist”>
<li><a id=”n1″ href=”index.htm”>Home</a></li>
<li><a id=”n2″ href=”products.htm”>Products</a></li>
<li><a id=”n3″ href=”reviews.htm”>Reviews</a></li>
<li><span id=”current”><a id=”n4″ href=”contact.htm”>Enquiries</a></span></li>
</ul>
<div id=”content” style=”background-image:none;”>
<div id=”leftside”>
<h3>Featured Artist</h3>
<div id=”picture1″></div>
<h3>Featured Artist</h3>
<div id=”picture2″></div>
</div>
<div id=”rightside”>
<form id=”project” action=”#” onsubmit = “return validateForm()”>
<fieldset>
<legend>Contact Details</legend>
<label for=”txtname”>Your Name:</label> <input type=”text” name=”txtname” id=”txtname”/><br/>
<label for=”txtemail”>Email:</label> <input type=”text” name=”txtemail” id=”txtemail”/><br/>
<label for=”txtartist”>Artist:</label> <input type=”text” name=”txtartist” id=”txtartist”/><br/>
<label for=”txtalbum”>Song / Album:</label> <input type=”text” name=”txtalbum” id=”txtalbum”/><br/>
<label for=”txtcomments”>Comments:</label> <textarea name=”txtcomments” id=”txtcomments” cols=”30″ rows=”20″></textarea><br/>
<input type=”submit” id=”btnSubmit” name=”btnsubmit” value=”Send Enquiry”/>
</fieldset>
</form>

</div>
<div id=”footer”> <p>&copy; Beatmap 2013</p></div>
</div>
</div>
<script language=”javascript” src=”js/init.js”></script>

</body>
</html>