Side navigation
Ticket #5949: PrimePropertiesWidget.html
File PrimePropertiesWidget.html, 4.7 KB (added by ericbojo, January 26, 2010 11:22PM UTC)
Basic test case (ignore css)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Prime Properties Widget</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-navigator.css" />
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.tools.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
// initialize scrollable
$(".scrollable").scrollable({ "size": 1, "clickable": false, "easing": "swing", "speed": 400 }).circular().navigator();
});
</script>
</head>
<body>
<div class="bI-blue-theme">
<h1>Above</h1>
<center>
<div class="BestBetsPrimePropertyWidget">
<!-- "previous page" action -->
<div class="widgetBody">
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />1 Bed, 3 Bath</div>
<div class="right">
<span class="price">$111,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">New York, NY 13215 <br />2 Bed, 5 Bath</div>
<div class="right">
<span class="price" >$2,511,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Scranton, PA 13215 <br />3 Bed, 2 Bath</div>
<div class="right">
<span class="price">$31,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />4 Bed, 3 Bath</div>
<div class="right">
<span class="price">$411,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />5 Bed, 3 Bath</div>
<div class="right">
<span class="price">$511,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />6 Bed, 3 Bath</div>
<div class="right">
<span class="price">$611,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
</div>
<div class="ScrollBar">
<a class="prevPage browse left"></a>
<!-- works as navigator for scrollable -->
<div class="navbar">
<ul class="navi">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<a class="nextPage browse right"></a>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</center>
</div>
<br class="clearit" clear="all" />
<br />
<div style="text-align:left;">Below</div>
<div>Below2</div>
</body>
</html>
Download in other formats:
Original Format
File PrimePropertiesWidget.html, 4.7 KB (added by ericbojo, January 26, 2010 11:22PM UTC)
Basic test case (ignore css)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Prime Properties Widget</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="styles/scrollable-navigator.css" />
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.tools.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
// initialize scrollable
$(".scrollable").scrollable({ "size": 1, "clickable": false, "easing": "swing", "speed": 400 }).circular().navigator();
});
</script>
</head>
<body>
<div class="bI-blue-theme">
<h1>Above</h1>
<center>
<div class="BestBetsPrimePropertyWidget">
<!-- "previous page" action -->
<div class="widgetBody">
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />1 Bed, 3 Bath</div>
<div class="right">
<span class="price">$111,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">New York, NY 13215 <br />2 Bed, 5 Bath</div>
<div class="right">
<span class="price" >$2,511,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Scranton, PA 13215 <br />3 Bed, 2 Bath</div>
<div class="right">
<span class="price">$31,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />4 Bed, 3 Bath</div>
<div class="right">
<span class="price">$411,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />5 Bed, 3 Bath</div>
<div class="right">
<span class="price">$511,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
<div class="item">
<div class="image"><a href="#"><img src="HomePhoto.jpg" /></a></div>
<div class="left">Onodaga, NY 13215 <br />6 Bed, 3 Bath</div>
<div class="right">
<span class="price">$611,900.00<br />
<span class="details"><a href="#">View Details</a></span>
</div>
</div>
</div>
<div class="ScrollBar">
<a class="prevPage browse left"></a>
<!-- works as navigator for scrollable -->
<div class="navbar">
<ul class="navi">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<a class="nextPage browse right"></a>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</center>
</div>
<br class="clearit" clear="all" />
<br />
<div style="text-align:left;">Below</div>
<div>Below2</div>
</body>
</html>