Skip to content

Instantly share code, notes, and snippets.

@maman

maman/chartwiz.php

Created November 23, 2010 03:53
Show Gist options
  • Save maman/711207 to your computer and use it in GitHub Desktop.
Save maman/711207 to your computer and use it in GitHub Desktop.
Download ZIP
the chart wizard
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment