|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
<html> |
|
|
<head> |
|
|
<title>Dragable content</title> |
|
|
<style type="text/css"> |
|
|
|
|
|
/* CSS NEEDED ONLY IN THE DEMO */ |
|
|
body{ |
|
|
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; |
|
|
width:100%; |
|
|
height:100%; |
|
|
margin:0px; |
|
|
padding:0px; |
|
|
text-align:center; |
|
|
background-color:#E2EBED; |
|
|
font-size:0.9em; |
|
|
} |
|
|
#mainContainer{ |
|
|
width:760px; |
|
|
margin:0 auto; |
|
|
text-align:left; |
|
|
background-color:#FFF; |
|
|
border:1px solid #317082; |
|
|
padding:5px; |
|
|
} |
|
|
#mainContainer img{ |
|
|
padding:3px; |
|
|
} |
|
|
|
|
|
#keyText{ |
|
|
float:right; |
|
|
margin-top:5px; |
|
|
margin-top:5px; |
|
|
margin-bottom:5px; |
|
|
border:1px dotted #000; |
|
|
background-color:#E2EBED; |
|
|
width:150px; |
|
|
padding:2px; |
|
|
} |
|
|
|
|
|
#leftMenu{ |
|
|
width:145px; |
|
|
float:left; |
|
|
background-color:#E2EBED; |
|
|
border:1px dotted #000; |
|
|
padding:2px; |
|
|
height:300px; |
|
|
} |
|
|
#leftMenu ul{ |
|
|
margin:0px; |
|
|
} |
|
|
#leftMenu ul li{ |
|
|
list-style-type:none; |
|
|
} |
|
|
#leftMenu ul li a{ |
|
|
color:#000; |
|
|
font-weight:bold; |
|
|
} |
|
|
#mainContent{ |
|
|
width:595px; |
|
|
float:left; |
|
|
padding-left:10px; |
|
|
} |
|
|
.clear{ |
|
|
clear:both; |
|
|
} |
|
|
/* END CSS ONLY NEEDED FOR THE DEMO */ |
|
|
</style> |
|
|
<script type="text/javascript"> |
|
|
var rememberPositionedInCookie = true; |
|
|
var rememberPosition_cookieName = 'demo'; |
|
|
</script> |
|
|
<script type="text/javascript" src="js/dragable-content.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="mainContainer"> |
|
|
<div id="leftMenu" class="dragableElement"> |
|
|
<h2>Menu</h2> |
|
|
<ul> |
|
|
<li><a href="#">Ajax</a></li> |
|
|
<li><a href="#">DHTML</a></li> |
|
|
<li><a href="#">Calendar scripts</a></li> |
|
|
<li><a href="#">Menu scripts</a></li> |
|
|
<li><a href="#">Misc scripts</a></li> |
|
|
</ul> |
|
|
|
|
|
</div> |
|
|
<div id="mainContent"> |
|
|
<p><img src="/images/heading3.gif" class="dragableElement"> |
|
|
<p><img src="images/image5.jpg" style="float:left" class="dragableElement">You can "redesign" the elements on this page by dragging and dropping them wherever you want.</p> |
|
|
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, |
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per |
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina |
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, |
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua |
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p> |
|
|
<p><img src="images/image2.jpg" style="float:right" class="dragableElement">Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, |
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per |
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina |
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, |
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua |
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p> |
|
|
<p><img src="images/image4.jpg" style="float:left" class="dragableElement">Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, |
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per |
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina |
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, |
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua |
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p> |
|
|
<p><div id="keyText" class="dragableElement">You can drag this <b>box</b> as well as the images on this page</div>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, |
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per |
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina |
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati</p> |
|
|
<div id="keyText" class="dragableElement">AJAX = Asyncron Javascript and XML - It is used to create webpages with more user interactivity.</div> |
|
|
<P>quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua |
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p> |
|
|
</div> |
|
|
<div class="clear"></div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
