Created
September 5, 2012 07:18
-
-
Save tamizhvendan/3632472 to your computer and use it in GitHub Desktop.
Sample iGoogle Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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