I have an HTML page. I have created a frame using background repeat function. It is like a dialog box as below :
The HTML Code for this is :
<html>
<head>
<title>
Frame
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="frame.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />
</script>
</head>
<body>
<div id="frame">
<div id="h" style="width:400px" class="h">Frame</div>
<div id="l" style="height:400px" class="l"></div>
<div id="r" class="r"></div>
<div id="b" class="b"></div>
</div>
</div>
</body>
</html>
The jQuery is :
$(document).ready(function() {
var width = $('#h').width();
var height = $('#l').height();
var pad = $('#h').position().left;
var actWidth = width + pad;
var nHeight = height - (height * 2);
var rLeftMargin = actWidth + 1;
var bWidth = actWidth + 2;
$('#r').css({'margin-top':nHeight});
$('#h').css({'height':25});
$('#r').css({'margin-left':rLeftMargin});
$('#r').css({'height':height});
$('#b').css({'width':bWidth});
$('#b').css({'margin-top':0});
}
)
And the CSS is :
.h{
background-image:url('images//line.jpg');
background-repeat: repeat-x;
padding-left:10px;
color:white;
}
.l{
background-image:url('images//dot.jpg');
background-repeat: repeat-y;
}
.r{
background-image:url('images//dot.jpg');
background-repeat: repeat-y;
float:top;
}
.b{
background-image:url('images//dot.jpg');
background-repeat: repeat-x;
height:1px;
}
Now, the problem is, this frame I can only use once. If I use is once again, then Ids get repeted & all the frame gets affected !!! This should not happen. What can be the solution?