BSP/HowTo: Add a Maginfying glass to your application

I posted a copy of the article in my blog  (http://cmehil.com/craig/blog/geoBlog/viewblog.php?id=22) feel free to check it out.

Well it really made me think about what I was doing and how. Now although you may think by the time you finish reading this that you just wasted your time, I hope not. I hope you do what I did and realize that perhaps we are all overlooking something.

I set to work to figure out how to take care of this problem and since I am a BSP freak (got the T-Shirt ot prove it) I thought why not try and incorporate this into a BSP application?

So first things first this only works in IE 5.5+ 100%. Other browsers well sometimes you get a little lucky and sometimes not.

Also, credits to the author that I got the script from Christian Patzer  (mailto:cpatzer@djc.com), it was found over on Dynamic Drive  (http://www.dynamicdrive.com/dynamicindex3/zoom.htm). You can download the files from there as well.

For this example I’ve created a new BSP Application and I’ve added the images to the MIME objects and .js file and zoom.html as Pages with flow logic.

Then I’ve created a zoom_head.htm as a page fragment with the following code (readme.txt file in download)

/***********************************************

• DHTML Magnifier (Christian Patzer, cpatzer@REMOVETHISdjc.com)

• Script featured on Dynamicdrive.com DHTML code library

• Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

//if IE5.5+ (detected via window.createPopup)

if (window.createPopup)

document.write(”)

Then I created a zoom_end.htm under my page fragements with the following code.

if (window.createPopup)document.write(“

“);

With those items in place I was then able to move onto my BSP. Instead of just creating a new one I decided why not add this to one of the ones already in place?

Therefore in my PageLayout

I added the following lines right after my <htmlb:form> line.

<br>
<br>
<%@ include file = "zoom_head.htm" %><br>
<br>
then I added this line<br>
<br>
<%@ include file = "zoom_end.htm" %><br>
<br>

right before my </htmlb:form>

I did make a small change the JS file. I had to redo the print out otherwise my BSP gave me JS unterminated string errors, I also changed the line for the iframe to not do the zoom.html plus the basedir.

zoomBoxHTML  = “

“;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “

“;

zoomBoxHTML = “<iframe src='”iframeSrc+”‘ name=zoom width=150 height=100 style=’border:0px;padding:0px;’>”;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “

“;

zoomBoxHTML += “!|title=Zoom In|style=cursor:hand|OnClick=zoomIn()|src=!”;

zoomBoxHTML += “!|height=1|width=2|src=!”;

zoomBoxHTML += “!|title=Zoom Out|style=cursor:hand;|OnClick=zoomOut()|src=!”;

zoomBoxHTML += “!|height=1|width=2|src=!”;

zoomBoxHTML += “!|title=Close|OnMouseOut=|OnClick=hideZoomBox();|src=|vspace=1 OnMouseDown=!”;

zoomBoxHTML += “!|title=Resize|hspace=0|style=cursor:SE-resize|onMouseDown=activateResize()|src=|vspace=0!”;

zoomBoxHTML += “”;

zoomBoxHTML += “

“;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “”;

zoomBoxHTML += “

| “;

This all leaving you with a nice new feature for those hard of seeing.

!https://weblogs.sdn.sap.com/weblogs/images/2538/magnify.jpg|height=185|alt=image|width=506|src=https://weblogs.sdn.sap.com/weblogs/images/2538/magnify.jpg|border=0!</body>