Home/ Questions/Q 1016621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T10:34:35+00:00

I have an HTML page. I have created a frame using background repeat function.

  • 0

I have an HTML page. I have created a frame using background repeat function. It is like a dialog box as below :

alt text

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of using IDs, use the classes you already have and just look over each frame independently, like this:

    $(function() {
  $(".frame").each(function() {
     var width = $(this).find('.h').width(),
         height = $(this).find('.l').height(),
         pad = $(this).find('.h').position().left,
         actWidth = width + pad,
         nHeight = height - (height * 2),
         rLeftMargin = actWidth + 1,
         bWidth = actWidth + 2;

    $(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
    $(this).find('.h').css({'height':25});
    $(this).find('.b').css({'width':bWidth, 'margin-top':0});
  });
});

    Just remove all IDs and change the wrapper to <div class="frame"> to make this work. By .each() to loop through each frame and using tree traversal methods like .find() you can get the elements with the matching classes inside the particular <div> you’re currently on in the loop.

    • 0