Advance Webdesign with dynDiv
ByRei dynDiv can be also used to realized a dynamic Webdesign.
This example should show you how simple it is to greate a simple Webdesign where the User can position the page Elements where he want.
This can be used for an Image Gallery, Shopsystem and many more webpages.
Please keep in mind that you should see dynDiv as additional Feature not as the mainpart of the Webpage so make sure that User without JavaScript can access the Page as well.
This Example also save the Position in the Cookie of the User so the User don't need to setup this each time he visite the Webpage.
Main Windows
HTML Code
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom CSS Code]
<div id="example_webpage" class="dynDiv_setLimit">
<div id="example_menue">
<div class="dynDiv_moveParentDiv dynDiv_saveSettings-position dynDiv_loadSettings"><h3> Example Menue </h3></div>
<ul>
<li><a href="dummy01.html" onclick="return object_link(this.href);">Home</a></li>
<li><a href="dummy02.html" onclick="return object_link(this.href);">Menue 1</a></li>
<li><a href="dummy03.html" onclick="return object_link(this.href);">Menue 2</a></li>
<li><a href="dummy04.html" onclick="return object_link(this.href);">Menue 3</a></li>
</ul>
</div>
<div id="example_mainscreen">
<div class="dynDiv_moveParentDiv dynDiv_saveSettings-position dynDiv_loadSettings"><h3> Main Windows </h3></div>
<div id="example_window_ie"><object id="example_window" data="dummy01.html" width="600" height="460" type="text/html"></object></div>
</div>
</div>
JavaScript Code
/* function object_link by Markus Bordihn (http://markusbordihn.de) */
eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 j=l(b){5 c="m q",1=6.7(\'8\'),a="d",p="B",d="a",h="r",r="h",2=6.7(\'t\');3(1&&b&&c=="v"+d+h+"k"+"u"+"s"+" "+p+"o"+h+a+"i"+"h"+"n"){3(w.x){3(2){2.y=\'<9 z="8" e="\'+b+\'" A="C" D="E" F="G/H">\';0 f}4{0 g}}4{1.e=b;0 f}}4{0 g}}',44,44,'return|target|target_ie|if|else|var|document|getElementById|example_window|object|||||data|false|true|||object_link||function|Markus||||Bordihn|||example_window_ie||M|window|detachEvent|innerHTML|id|width||600|height|460|type|text|html'.split('|'),0,{}))
Custom CSS Code
#example_webpage {
width: 800px;
height: 600px;
border: 5px solid #ccc;
position: relative;
}
#example_menue {
border: 1px solid #aaa;
position: absolute;
background: #eee;
top: 10px;
left: 10px;
width: 150px;
}
#example_menue h3 {
width: 150px;
color: #fff;
background: #000;
margin: 0;
padding: 0;
}
#example_menue ul {
list-style: none;
margin: 0;
padding: 5px;
}
#example_menue a {
text-decoration: none;
color: #000;
}
#example_mainscreen {
width: 600px;
height: 480px;
position: absolute;
top: 10px;
right: 10px;
border: 1px solid #ccc;
}
#example_mainscreen h3 {
width: 600px;
color: #fff;
background: #000;
margin: 0;
padding: 0;
}