maman · November 23, 2010 03:53
diff --git a/chartwiz.php b/chartwiz.php
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Chart Generator Wizard</title>
 <!--<script src="js/jquery-1.4.2.js"></script>-->
 <script src="js/jquery.scrollable.js"></script>
 <script>
  $(document).ready(function(){
    $(".scrollable").scrollable();
  }) 
 </script>
 <style type="text/css">
 body {
        background-color:#e0e9e8;
 }
 #ctr {
 }
 /*root element for the scrollable.when scrolling occurs this element stays still.*/
 .scrollable {

 	/* required settings */
 	position:relative;
 	overflow:hidden;
 	width: 300px;
 	height:200px;
 }
 /*root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accommodate scrollable items. it's enough that you set width and height for the root element and not for this element.*/
 .scrollable .items {
        /* this cannot be too large */
        clear:both;
 	width:20000em;
 	position:absolute;
 }
 /* a single item. must be floated in horizontal scrolling.typically, this element is the one that *you* will style the most.*/
 .items div {
 	float:left;
 }
 .page {
        float:left;
        width:300px;
        height:200px;
 }
 .page h2 {
        background-color: #FF4500;
        background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#fff), to(#bbb));
        background-image: -moz-linear-gradient(0 100% 90deg, #bbb, #fff);
        color: #333;
        text-shadow: 0 1px 1px #fff;
        display: block;
        text-align: center;
 }
 .page ul li {
        display: inline;
 }
 .page fieldset {
        width:300px;
        margin-left: 5%;
        margin-right: auto;
        margin-top: 10%;
 }
 .page label {
        font-size: 12pt;
        font-weight: bold;
        line-height: 1.4;
        color: #666;
        color: rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 1px #fff;
 }
 .page fieldset input {
        width: 215px
        padding: 5px 8px;
        font-size: 12pt;
        color: #666;
        border: none;
        background-color: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
 }
 .page fieldset input[type="text"] {
        background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
        background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
        font-family: Helvetica, Arial, sans-serif;
 }
 .page fieldset input[type="radio"]{
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12pt;
        color: #666;
        border: none;
 }
 .page ul li input[type="button"]{
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding: 8px 15px;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        line-height: 1;
        color: #444;
        border: none;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
        background-image: -moz-linear-gradient(0 100% 90deg, #bbb, #fff);
        background-color: #fff;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 </style>
 </head>
 <body>
 <div id="ctr">
 <div class="scrollable">
  <div class="items">
    <!--page 1-->
    <div class="page">
      <h2>Chart Date</h2>
      <fieldset>
        <label for="tgl">Tanggal</label>
        <input type="text" name="tgl" />
      </fieldset>
      <ul>
        <li><input type="button" class="next browse right" value="Next" /></li>
      </ul>
    </div>
    <!--page 2-->
    <div class="page">
      <h2>Chart Type - 1</h2>
      <fieldset>
        <input type="radio" value="mg" name="rd1">Mingguan</input>
        <input type="radio" value="bln" name="rd1">Bulanan</input>
      </fieldset>
      <ul>
        <li><input type="button" class="next browse right" value="Next" /></li>
        <li><input type="button" class="prev browse left" value="Prev" /></li>
      </ul>
    </div>
    <!--page 3-->
    <div class="page">
      <h2>Chart Type - 2</h2>
      <fieldset>
        <input type="radio" value="graph" name="rd2">Grafik Only</input>
        <input type="radio" value="data" name="rd2">Data Only</input>
        <input type="radio" value="print" name="rd2">Print Purpose</input>
      </fieldset>
      <ul>
        <li><input type="button" class="next browse right" value="Generate !" /></li>
        <li><input type="button" class="prev browse left" value="Prev" /></li>
      </ul>
    </div>
    <!--page 4-->
    <div class="page">
      <h2>Generating . . .<h2>
    </div>
  </div>
 </div>
 </div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Chart Generator Wizard</title>
	<!--<script src="js/jquery-1.4.2.js"></script>-->
	<script src="js/jquery.scrollable.js"></script>
	<script>
	$(document).ready(function(){
	$(".scrollable").scrollable();
	})
	</script>
	<style type="text/css">
	body {
	background-color:#e0e9e8;
	}
	#ctr {
	}
	/root element for the scrollable.when scrolling occurs this element stays still./
	.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 300px;
	height:200px;
	}
	/root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accommodate scrollable items. it's enough that you set width and height for the root element and not for this element./
	.scrollable .items {
	/* this cannot be too large */
	clear:both;
	width:20000em;
	position:absolute;
	}
	/* a single item. must be floated in horizontal scrolling.typically, this element is the one that you will style the most.*/
	.items div {
	float:left;
	}
	.page {
	float:left;
	width:300px;
	height:200px;
	}
	.page h2 {
	background-color: #FF4500;
	background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#fff), to(#bbb));
	background-image: -moz-linear-gradient(0 100% 90deg, #bbb, #fff);
	color: #333;
	text-shadow: 0 1px 1px #fff;
	display: block;
	text-align: center;
	}
	.page ul li {
	display: inline;
	}
	.page fieldset {
	width:300px;
	margin-left: 5%;
	margin-right: auto;
	margin-top: 10%;
	}
	.page label {
	font-size: 12pt;
	font-weight: bold;
	line-height: 1.4;
	color: #666;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
	}
	.page fieldset input {
	width: 215px
	padding: 5px 8px;
	font-size: 12pt;
	color: #666;
	border: none;
	background-color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	}
	.page fieldset input[type="text"] {
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
	background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
	font-family: Helvetica, Arial, sans-serif;
	}
	.page fieldset input[type="radio"]{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12pt;
	color: #666;
	border: none;
	}
	.page ul li input[type="button"]{
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 8px 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	border: none;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
	background-image: -moz-linear-gradient(0 100% 90deg, #bbb, #fff);
	background-color: #fff;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}
	</style>
	</head>
	<body>
	<div id="ctr">
	<div class="scrollable">
	<div class="items">
	<!--page 1-->
	<div class="page">
	<h2>Chart Date</h2>
	<fieldset>
	<label for="tgl">Tanggal</label>
	<input type="text" name="tgl" />
	</fieldset>
	<ul>
	<li><input type="button" class="next browse right" value="Next" /></li>
	</ul>
	</div>
	<!--page 2-->
	<div class="page">
	<h2>Chart Type - 1</h2>
	<fieldset>
	<input type="radio" value="mg" name="rd1">Mingguan</input>
	<input type="radio" value="bln" name="rd1">Bulanan</input>
	</fieldset>
	<ul>
	<li><input type="button" class="next browse right" value="Next" /></li>
	<li><input type="button" class="prev browse left" value="Prev" /></li>
	</ul>
	</div>
	<!--page 3-->
	<div class="page">
	<h2>Chart Type - 2</h2>
	<fieldset>
	<input type="radio" value="graph" name="rd2">Grafik Only</input>
	<input type="radio" value="data" name="rd2">Data Only</input>
	<input type="radio" value="print" name="rd2">Print Purpose</input>
	</fieldset>
	<ul>
	<li><input type="button" class="next browse right" value="Generate !" /></li>
	<li><input type="button" class="prev browse left" value="Prev" /></li>
	</ul>
	</div>
	<!--page 4-->
	<div class="page">
	<h2>Generating . . .<h2>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>