Login   Register  
Icontem

File: Riform_box.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Michele Prigigallo  >  Riforma Box  >  Riform_box.html  >  Download  
File: Riform_box.html
Role: Example script
Content type: text/plain
Description: This file is as example to show how the class can work
Class: Riforma Box
Resize page elements dragging the corner
Author: By
Last change: a little change
Date: 2012-01-10 06:32
Size: 2,253 bytes
 

Contents

Class file image Download 
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Riformare gli elementi</title>
<style type="text/css">
html, body,div,p,h1,h2,h3{ margin:0; padding:0;}
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250);} 
h2{ font-size:18px; font-weight:bold; color:rgb(250,50,150); background-color:rgb(200,200,0); border: 1px solid #999999;  }
h3{ font-size:14px; font-weight:bold; color:rgb(200,20,20); text-align:center;}

.nota{ color:rgb(250,120,0);}
.codice{ color:rgb(30,120,30);}

div.box{ position:absolute; width:300px; height:250px; top:100px; left:200px;  background:#FFF; border:1px solid;   
border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px;  /* Safari e Chrome */
}
div.topms{ width:100%; padding:5px 0; margin:0;  background:#06F; color:#FFF; font-weight:bold; text-align:center; letter-spacing:2px; }
div.chiudims{ position:absolute; top:0; right:0; width:20px; padding:4px 0; margin:0; cursor:pointer; background:#333;   border:1px solid;  }
div.chiudims:hover{ background:#999; color:#F00;}
div.angoloms{ position:absolute; bottom:0; right:0; padding:0; margin:0;}
div.box p{padding:5px;}

</style>

<script type="text/javascript" src="jQuery-1.6.min.js"></script>
<script type="text/javascript" src="riform_box.js"></script>

</head>
<body>

<script  type="text/javascript">
$(document).ready(function(){

// To open the div 
$('button').click(function(){
$('div.box').css('display', 'block');
}); 

// calling the class
Riformabox.mostraFreccia(); 

}); // chiude ready 
</script>

<body>

<button>Open box</button>

<p class='nota'>You need <q>jQuery</q> library (the best version is always the latest) and insert it in the 'head' element</p>
<p>The box is modifiable just by the bottom-right corner </p>


<div class="box"> 
	<div class="topms">Drag and drop me
		<div class="chiudims">&times;</div>
	</div>
	<h3>Exchangeable properties</h3>
	<p>
	If you want you can change the element properties. After you had done it by CSS  you have to modify the class "riform_box.js" <br />
	In the firsts lines of the class you can find "exchangeable properties" and there you can modify the element names. 
	</p>
	<div class="angoloms"> .: </div>  
</div><!--box-->





</body>
</html>