Precise Page Filling Img Pattern Width

[sharethewisdom]

Hi,I would like to repeat (the writing of) an image to create a pattern using javascript. That number depends on the width of the page and the width of the image. Before writing anything I would like to ask if this is a good solution. It will be added later to my resize listener, so that a nice frame appears that uses the maximum window dimentions.do I loop document.write to fill a div with images?or do I use a repeating background in a div setting its width= (page width/image width)as a whole number*(image width)in order that the positioning be precise to a pixel...I use the x libary for cross-browser use.thanks Bart

[alexnofue]

Hi, in CSS you can acomplish that with:background-image:url('image.gif');background-repeat:repeat;the pattern can be made with the image repeating itself while being very simple.maybe if this isn't what you are looking for, you should explain a little the reason for trying to do it with js

[sharethewisdom]

in order to display the pattern correctly the div must be x times the width of the image that is used as a background.six image files will do the trick: 4 corners, a horizontal and a vertical tile to fill the four divsmy question is wether I should use css and hope for a faultless depiction in all browsers, (I use js anyway, so tough luck if that's enabled) or simply align several images dynamical (i.e. rewrite html elements instead of just changing properties and hope for the background of the div to be the correct size)? will it look the same?: a div that does not lengthen gradually but in steps, or the supplementation/ removal of images, when I resize my window?I'm learning javascript so I'll try anyway. Can someone put me on the way?it'll become a frame around the content. If the content's height< window's height, the frame will stick to the bottom of the window in stead of the bottom of the content like this (try to collaps the headers and resize the windowas I said before, I use the x libary for cross-browser use. I re-wrote this quickly and did not test it

window.onresize = resizePage;var c,l,r,u,d,lu,ru,ld,rd;var a = 20; // length of the shorter side of tiling imagesvar b = 24; // length of the longer side of tiling imagesresizePage(c,l,r,u,d,lu,ru,ld,rd) {c = xGetElementById('content');l = xGetElementById('l'); // left divr = xGetElementById('r'); // right divu = xGetElementById('u'); // up divd = xGetElementById('d'); // down divlu = xGetElementById('lu'); // left-upper cornerru = xGetElementById('ru'); // ...cornerld = xGetElementById('ld'); // cornerrd = xGetElementById('rd'); // corner// Get browser window dimensionsvar wh = xClientHeight();var ww = xClientWidth();// Adjust window height to account for horizontal scrollbar in non-IE browsers	if (navigator.appName.indexOf('Microsoft') == -1) {		if (ww < minpw) { wh -= 20; }		ww -= 20;	}var ch = xHeight(c); // height of the contentvar cw = xWidth(c);var ph = ((2*a) + ch); // page height, 2*a since the tiling happens lengthwise horizontallyvar ah = wh - ph; // Calculate white space for element positioning var aw = ww - cw;var minpw = 600; // minimum page widthif (ah <= 0) { ah = 0; } if (aw <= minpw) { aw = minpw; } // Adjust white space calculations for minimum dimensionsvar nw = (ww/b); // number of images to fill the widthif (ph < wh) {var nh = (((wh-(2*a))/b);} // number of images to fill the height if pageheight is smaller than winheightelse {var nh = (((ph-(2*a))/b);} // otherwise// how do I round off this numbers into positive integers?//start positioning elementsc.style.minWidth= (minpw) + 'px';c.style.left = (aw / 2) + 'px';	if (ph < wh) {c.style.position = 'absolute';c.style.top = ((ah / 2) + uh) + 'px';	}	else { c.style.position = 'relative';c.style.top = (uh) + 'px';	}while (nw>0)  {//how do I loop this?document.write("<img src='horizontal.gif' alt='number" + nw + "'>");nw= nw-1  }while (nh>0)  {//how do I loop this?document.write("<img src='vertical.gif' alt='number" + nh + "'>");nh= nh-1  }//positioning etc etc... no time now}

... will come back, now on hollidays to la douce france...

[dsonesuk]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style>#lu, #u, #ru, #l, #content, #r, #ld, #d, #rd, .top_bottom_row, .content_outer {  float:left; }#lu,  #ru, #u, #ld, #rd, #d, .top_bottom_row {height: 18px;}#lu, #ru, #ld, #rd, #l, #r {width: 18px;}#lu { background:url(top_left_corner_pat.png) no-repeat;  }#ru { background:url(top_right_corner_pat.png) no-repeat;  }#u { background:url(toprowpat.png) repeat-x ; }#ld { background:url(bottom_left_corner_pat.png) no-repeat; }#rd { background:url(bottom_right_corner_pat.png) no-repeat;}#d { background:url(bottomrowpat.png) repeat-x; }#l { background:url(left_pat.png) repeat-y; }#r { background:url(right_pat.png) repeat-y;}#outer {overflow: hidden; margin: 0 auto; width: 100%;}</style><script type="text/javascript">var minpw = 600; // minimum page widthfunction runthis(){var t_b_img_width =14; //top and bottom image widthvar l_r_img_height=14; // left and right image heightvar corner_img_width=18;  //corner image widthsvar contentwidth= document.getElementById("outer").offsetWidth-(22+(corner_img_width*2)); //content width  to fill page (allow for scrollbar etc)var contentheight= document.getElementById("content").offsetHeight; // content div height         if (contentwidth < minpw-((corner_img_width*2)+5)) //restrict width to minimum of minpw (600)            {            contentwidth=minpw-((corner_img_width*2)+5);            }                            for(i=0; i<t_b_img_width; i++) //calculate minimum width required to display whole tile images for top and bottom        {        if((contentwidth+i) % t_b_img_width == 0)            {            contentwidth+=(i);            i=t_b_img_width;            }        }                    for(i=0; i<l_r_img_height; i++)//calculate minimum height required to display whole tile images for left and right        {        if((contentheight+i) % l_r_img_height == 0)            {            contentheight+=(i);            i=l_r_img_height;            }        }                //make required changes        document.getElementById("u").style.width=(contentwidth)+"px";        document.getElementById("d").style.width=(contentwidth)+"px";        document.getElementById("l").style.height=(contentheight)+"px";        document.getElementById("r").style.height=(contentheight)+"px";        document.getElementById("content").style.width=(contentwidth)+"px";        document.getElementById("outer").style.width=(contentwidth+(corner_img_width*2))+"px";}window.onload=runthis;</script></head><body><div id="outer">    <div class="top_bottom_row">        <div id="lu"></div>        <div id="u"></div>        <div id="ru"></div>    </div>    <div class="content_outer">        <div id="l"></div>        <div id="content">                    <p>kg kjgh kjg kjg kjgk jg kjg kjhg kjg kjg kjgh kjg kjhjgk jg kjg kjgk jg kjg kjg kjg kjg</p>    <p>kg kjgh kjg kjg kjgk jg kjg kjhg kjg kjg kjgh kjg kjhjgk jg kjg kjgk jg kjg kjg kjg kjg</p>    <p>kg kjgh kjg kjg kjgk jg kjg kjhg kjg kjg kjgh kjg kjhjgk jg kjg kjgk jg kjg kjg kjg kjg</p>    <p>kg kjgh kjg kjg kjgk jg kjg kjhg kjg kjg kjgh kjg kjhjgk jg kjg kjgk jg kjg kjg kjg kjg</p>                </div>        <div id="r"></div>    </div>    <div class="top_bottom_row">        <div id="ld"></div>        <div id="d"></div>        <div id="rd"></div>    </div></div></body></html>

[sharethewisdom]

thanks for the quick reply!took a quick look... when I ad window.onresize=runthis; it becomes clear that the frame is only reducible in size even when enlarging the windowI have no time now, leaving on holidays, but i'll take a look afterwards and post a solutionbye!

[sharethewisdom]

thanks

[Troy III]

Hi,I would like to repeat (the writing of) an image to create a pattern using javascript. That number depends on the width of the page and the width of the image. Before writing anything I would like to ask if this is a good solution. It will be added later to my resize listener, so that a nice frame appears that uses the maximum window dimentions.do I loop document.write to fill a div with images?or do I use a repeating background in a div setting its width= (page width/image width)as a whole number*(image width)in order that the positioning be precise to a pixel...I use the x libary for cross-browser use.thanks Bart

Sorry, but if I understand your aim correctly - it's theoretically impossible.------p.s.:of course, unless you are planning to dynamically resize the images too...

[Ingolme]

Sorry, but if I understand your aim correctly - it's theoretically impossible.------p.s.:of course, unless you are planning to dynamically resize the images too...

If you look in the post preceding your own, you will find that he already has solved the problem.

[sharethewisdom]

If you look in the post preceding your own, you will find that he already has solved the problem.

http://webs.hogent.be/bart_deroy/greek_fra...reek_frame.htmlcorrect, it is solved in a way, it anwers to my needs: just by changing the size of the div more or less tiles are visible (as being a repeated the background). This the most logic solution.on the other hand, a different approach hands out more possibilities, such as writing a table with a number of rows and/or a number of cells with certain dimensions and/or content, depending on the the width of the pageexample:

browser_window_width= 1000pxcell_width= 100pxnumbers_of_cells_to_write= browser_window_width/cell_widthdocument.write(<table><tr>); for(i=0; i<=numbers_of_cells_to_write; i++) {document.write("<td>cell" + i + "</td>");}document.write(</tr></table>);

but in a complexer form that enables the use of more rows, nice visual effects could be made depending on the window dimensions. (a better title for this topic would be "visuals using browser's width") feel welcome to post any findings, this topic can still be used. thanks again,bart

[chibineku]

That's really nice...though only a select few who visit your site will ever appreciate its complexity, lol.

[Synook]

This could have been done with CSS, by the way.

[chibineku]

This could have been done with CSS, by the way.

Not because I don't think you can, but out of sheer fascination, can you explain how? I always opt for CSS before JavaScript.

[Ingolme]

The only way to do it with CSS and not Javascript is to only have a fixed width and not make the box flexible. In that case, background images work fine. The pattern is broken if the box's width isn't a multiple of the size of each tile in the pattern.

[Synook]

Hmm, you're right. It only works if the box isn't patterned as such, only smooth.http://lab.aspektas.com/rdtech/index.php