Page Layout and Resizing Issues

The solution to the resizing issue involves "anchors."

This text is on the right. Go ahead and resize the page.

The trick involves three steps:

1. Change the "body" tag to read "body onresize=GRresize()". This is required for Microsoft Internet Explorer compatibility.

2. Change the background image tag in the table cell that is to contain the graph to read "name=anchorgif src=white.gif width=300 height=300". This allows divgraph.js to access the image x,y page coordinates.

3. Add the line Info.anchor="anchorgif" in dograph(). This tells divgraph.js which image is to be used as an anchor.

function dograph(){
 GRsetgraphwindow()
 Info=new Array()
 Info.style=".xaxisnum {font-size:8pt} .yaxisnum {font-size:8pt}"
 Info.xmin=Info.ymin=0
 Info.xmax=Info.ymax=10
 Info.xticmajor=Info.xticminor=1
 Info.yticmajor=Info.yticminor=1
 Info.graphleft=75
 Info.graphtop=50
 Info.graphwidth=200
 Info.graphheight=200
 Info.ptsize=4
 Info.xstep=4
 Info.anchor="anchorgif"
 GRdrawgraph("sin(x)*sin(x)*x","","",Info)
}

If you want to see what is necessary in general to make divs move to the correct place on the page, take a look at GRresize() and GRreplot(). It's really a very tricky process.

The next page illustrates using multiple anchors.

back to the list of examples