Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sample iGoogle Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample iGoogle Page</title>
<style type="text/css">
/* Entire Page has been divided into 3Columns.
Note: iGoogle Page has 3 columns */
#column1,#column2,#column3
{
display:inline-block;
float:left;
width: 33%;
height: auto;
text-align:center;
padding-bottom: 100px;
}
/* Css Classes for Entire Widget */
.Widget
{
margin: 10px;
margin-left: auto;
margin-right: auto;
width: 95%;
min-height: 200px;
border: 1px solid Black;
}
/* Css Classes for Widget Headers */
.WidgetHeader
{
height: 25px;
cursor: move;
text-align: left;
padding-left: 3px;
color: White;
font-weight: bold;
}
.GreenWidgetHeader
{
background-color:Green;
}
.GrayWidgetHeader
{
background-color:Gray;
}
.PurpleWidgetHeader
{
background-color:Purple;
}
/* Css Classes for Widget Body */
.WidgetBody
{
min-height: 175px;
height:auto;
background: #F0F0F0;
}
/* Placeholder while dragging the widget using jQuery*/
.ui-sortable-placeholder { border: 1px dashed black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
.footer
{
clear:both;
display:block;
position:absolute;
color: Green;
bottom: 5px;
right: 5px;
}
</style>
<!-- jQuery Magic Starts Here -->
<!-- Referring the jQuery API files neccessary for designing this sample iGoogle page -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.sortable.js" type="text/javascript"></script>
<!-- Enabling the Drag and Drop Support -->
<script type="text/javascript">
$(document).ready(function () {
$("#column1,#column2,#column3").sortable({
connectWith: "#column1,#column2,#column3",
handle: '.WidgetHeader',
opacity: 0.6
});
$("#column1,#column2,#column3").disableSelection();
});
</script>
</head>
<body>
<div id="iGoogle">
<!-- HTML Mock up for Colum1 -->
<div id="column1">
<div class="Widget">
<div class="WidgetHeader PurpleWidgetHeader">Widget 1</div>
<div class="WidgetBody"></div>
</div>
<div class="Widget">
<div class="WidgetHeader GreenWidgetHeader">Widget 2</div>
<div class="WidgetBody"></div>
</div>
<div class="Widget">
<div class="WidgetHeader GrayWidgetHeader">Widget 3</div>
<div class="WidgetBody"></div>
</div>
</div>
<!-- HTML Mock up for Column2 -->
<div id="column2">
<div class="Widget">
<div class="WidgetHeader GrayWidgetHeader">Widget 4</div>
<div class="WidgetBody"></div>
</div>
</div>
<!-- HTML Mock up for Column3 -->
<div id="column3">
<div class="Widget">
<div class="WidgetHeader GreenWidgetHeader">Widget 5</div>
<div class="WidgetBody"></div>
</div>
<div class="Widget">
<div class="WidgetHeader GrayWidgetHeader">Widget 6</div>
<div class="WidgetBody"></div>
</div>
</div>
</div>
<div class="footer">Created by Tamizhvendan.S-tamizh88@gmail.com</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment