Hi,
I am new to this.Before explaining my problem i would like you guys watch this site. http://www.blogger.com ,register in the site and try to post one artilce ,while posting you can observe on the top somthing like templates. By using that option user can change his template as he likes. Suppose in the blogger page about me ,recent post and something may exists,the user can change those positions by selecting them. I tried to do that using div tag and innerHTML. When user is changing automatically the html code should be changed. When user is visiting for the next time what are changes he made in that manner only he can able to c the template. So any one help me in doing this.
Till now i have done this.You can test this .
<html>
<head>
<style>
<!--
.drag{position: relative;cursor :hand}
--></style>
<script language="JavaS cript1.2">
<!--
/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdri ve.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.co m
*/
var dragapproved=fa lse
var z,x,y
function move(){
if (event.button== 1&&dragapproved ){
z.style.pixelLe ft=temp1+event. clientX-x
z.style.pixelTo p=temp2+event.c lientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcEleme nt.className==" drag"){
dragapproved=tr ue
z=event.srcElem ent
temp1=z.style.p ixelLeft
temp2=z.style.p ixelTop
x=event.clientX
y=event.clientY
document.onmous emove=move
}
}
document.onmous edown=drags
document.onmous eup=new Function("draga pproved=false")
//-->
</script>
<script language="javas cript" type="text/javascript">
function changeFun()
{
alert(document. getElementById( 'getDiv').inner HTML);
//document.getEle mentById('getDi v').innerHTML = "Yes,this is for testing";
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="retur n changeFun();">
<table>
<div id="getDiv">
fgfgfg
</div>
<tr><td>
<table width="493" height="130" border="1">
<tr>
<td width="250" class="drag">ha i</td>
<td width="227" class="drag">th is </td>
</tr>
<tr>
<td class="drag">is </td>
<td class="drag">ta lluri</td>
</tr>
</table>
</td></tr>
<!-- <tr>
<td><iframe name="getData" id="getData" src="get.php" width="500" height="500"></iframe></td>
</tr>-->
<tr>
<td align="center" valign="middle" ><input type="submit" name="Submit" value="Submit"> </td>
</tr>
</table>
</form>
</body>
</html>
Any suggestion is accepted.Thanks in advance.
Thanks,
Talluri
I am new to this.Before explaining my problem i would like you guys watch this site. http://www.blogger.com ,register in the site and try to post one artilce ,while posting you can observe on the top somthing like templates. By using that option user can change his template as he likes. Suppose in the blogger page about me ,recent post and something may exists,the user can change those positions by selecting them. I tried to do that using div tag and innerHTML. When user is changing automatically the html code should be changed. When user is visiting for the next time what are changes he made in that manner only he can able to c the template. So any one help me in doing this.
Till now i have done this.You can test this .
<html>
<head>
<style>
<!--
.drag{position: relative;cursor :hand}
--></style>
<script language="JavaS cript1.2">
<!--
/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdri ve.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.co m
*/
var dragapproved=fa lse
var z,x,y
function move(){
if (event.button== 1&&dragapproved ){
z.style.pixelLe ft=temp1+event. clientX-x
z.style.pixelTo p=temp2+event.c lientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcEleme nt.className==" drag"){
dragapproved=tr ue
z=event.srcElem ent
temp1=z.style.p ixelLeft
temp2=z.style.p ixelTop
x=event.clientX
y=event.clientY
document.onmous emove=move
}
}
document.onmous edown=drags
document.onmous eup=new Function("draga pproved=false")
//-->
</script>
<script language="javas cript" type="text/javascript">
function changeFun()
{
alert(document. getElementById( 'getDiv').inner HTML);
//document.getEle mentById('getDi v').innerHTML = "Yes,this is for testing";
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="retur n changeFun();">
<table>
<div id="getDiv">
fgfgfg
</div>
<tr><td>
<table width="493" height="130" border="1">
<tr>
<td width="250" class="drag">ha i</td>
<td width="227" class="drag">th is </td>
</tr>
<tr>
<td class="drag">is </td>
<td class="drag">ta lluri</td>
</tr>
</table>
</td></tr>
<!-- <tr>
<td><iframe name="getData" id="getData" src="get.php" width="500" height="500"></iframe></td>
</tr>-->
<tr>
<td align="center" valign="middle" ><input type="submit" name="Submit" value="Submit"> </td>
</tr>
</table>
</form>
</body>
</html>
Any suggestion is accepted.Thanks in advance.
Thanks,
Talluri