Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How do I get the image to repeat the correct height?

Reply
Thread Tools

How do I get the image to repeat the correct height?

 
 
damezumari
Guest
Posts: n/a
 
      05-12-2008
I have three div blocks defined like this:

#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}

#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}

#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}

The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.

Kind regards,

Jan Nordgreen
 
Reply With Quote
 
 
 
 
SAM
Guest
Posts: n/a
 
      05-12-2008
damezumari a écrit :
> I have three div blocks defined like this:
>
> #left1
> {
> float: left;
> background-color: white;
> width: 184px;
> margin-right: 4px;
> text-align: left;
> }
>
> #left2
> {
> float: left;
> background: url(images/barrav.gif) repeat;
> width: 23px;
> }
>
> #left3
> {
> float: left;
> background-color: white;
> width: 573px;
> margin-left: 4px;
> }
>
> The idea is to have the blocks displayed side by side. I do not know
> the height of left1 and left3, but I want the image in left2 to be
> repeated for the max height of left1 and left3. If I set the height in
> left2 it will either be too short or too long.



<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs(divs) {
divs = divs.split(',');
var H = 0, ok=false;
for(var i=0; i<divs.length; i++)
if($(divs[i]) &&
$(divs[i]).offsetHeight &&
$(divs[i]).offsetHeight>H ) {
H = $(divs[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<divs.length; i++) $(divs[i]).style.height = H+'px';
}
else alert('this script is out ');
}
window.onload = function() {
maxHeightDivs('left1,left2,left3');
}
</script>



Variante :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs() {
var H = 0, ok=false;
for(var i=0; i<arguments.length; i++)
if($(arguments[i]) &&
$(arguments[i]).offsetHeight &&
$(arguments[i]).offsetHeight>H ) {
H = $(arguments[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<arguments.length; i++)
$(arguments[i]).style.height = H+'px';
}
else alert('this script is out ');
}
window.onload = function() {
maxHeightDivs('left1', 'left2', 'left3');
}
</script>


not tested with IE

--
sm
 
Reply With Quote
 
 
 
 
damezumari
Guest
Posts: n/a
 
      05-13-2008
Thank you!

I put your code just before </body> and it worked like a charm!

Kind regards,

Jan Nordgreen
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Help to REPEAT (not stretch!) AN IMAGE <--HORIZONTALLY--> WITHIN ACELL w/EXAMPLE MISS CHIEVOUS HTML 50 02-20-2009 08:03 PM
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
Repeat an ASP:Image button VK ASP .Net 3 04-25-2005 04:44 PM



Advertisments