I recently had the requirement to enable zooming in and zooming out on a certain part of a Web Template. Looking around in SDN it seems that only the Geo Map has this feature embedded as standard. Here is an example of what you can do to enable zooming in a Web Template.
Embed a script item into you Web Template
In the Web Application Designer you find the Script Item under Miscellaneous. Drag the item on to the Web Template. Under the Web Template Parameters tab you find two entries (Script Language and Script). Click on the little button behind Script and a new window will launch into which you can code your JavaScript functions. I've added 3 functions that allow zooming in, zooming out and resetting to the original size. The coding is below. The div_container will contain the object for the area that is to be enlarged. You can modify the factor to your needs (currently 1.10).
function zoom_in(div_container)
{
if (document.getElementById(div_container).style.zoom == 0)
{
document.getElementById(div_container).style.zoom = 1;
}
document.getElementById(div_container).style.zoom = document.getElementById(div_container).style.zoom*1.10;
}
function zoom_out(div_container)
{
if (document.getElementById(div_container).style.zoom == 0)
{
document.getElementById(div_container).style.zoom = 1;
}
document.getElementById(div_container).style.zoom = document.getElementById(div_container).style.zoom*0.90;
}
function zoom_reset(div_container)
{
document.getElementById(div_container).style.zoom = 1;
}
Screenshot of JavaScript item:
Assign functions to buttons / links etc
You now need to assign the functions (defined in the previous paragraphs) to buttons / links so that users can make use of the functions.
Drag a button group onto the canvas. Define three buttons in the button group (Zoom in, Zoom out and Reset Zoom). For each button, define the Action Script Function and select the appropriate function for each button. Add the text ('print_content') behind the function so that it looks like this:
- Zoom in: zoom_in('print_content')
- Zoom out: zoom_out('print_content')
- Reset Zoom: zoom_reset('print_content')
The object print_content is the area that is to be enlarged.
Screenshot of Button assignment:
Passing the area that can be enlarged
Go to the XHTML view of the Web Template. Define the area that you want to have enlarged by adding the appropriate tags before and after the coding (this is up to you):
Web Template Coding to be enlarged
That is it. When running the Web Template it should now enlarge/reduce the area that you specified between the
tags.
Screen shot of DIV-tag:
Result
1 Comment
