Commenting the line that initates listener (small diff
to the source) in your HTML-file Javascript returns no
errors in Netscape 4.72 or IE 6.0 (on win98SE).
However I did not have the images to try with. And I
assumed you used the latest official release dist of
DynAPI (2.57)
On what browsers do you get errors? Under what OS? how
much RAM on the machine (DynAPI is rather heavy on
certain areas - hence the stress-tests in subfolder
"/test")?
Also, is there any diffs in the javascript source you
sent for imagenavigator.js when insering the source
into the HTML and the one where you got the errors?
PS If you can send me the imagefiles it'll be easier
for me to test it properly DS
Henrik Våglin [ [EMAIL PROTECTED] ]
--- ngy <[EMAIL PROTECTED]> skrev: > Hi forum,
> I am a newbee with javascript and therefore pretty
> much new with the
> dynapi. However I have tried to figure it out over
> the past week and
> have succeeded in making some changes to the dynapi
> Viewport in order to
> fulfill my need.
> What I am trying to use dynapi for, is something
> like an image
> navigator; i.e , I wanna give an image as a param
> and the widget that is
> created is a viewport with a small thumbnail of the
> same on the lower
> left hand corner that one can use to scroll through
> an image that doesnt
> fit into the viewport.
>
> code for the imagenavigator.js is as follows :
>
> /*
> DynAPI Distribution
> ViewPort Class
>
> The DynAPI Distribution is distributed under the
> terms of the GNU
> LGPL license.
>
> Requirements:
> dynapi.api.*
> dynapi.util [thread, pathanim]
> dynapi.gui [label]
> */
>
> // note: we need an onremove event
>
> function ImageNavigator(content,offsetX, offsetY,
> width, height) {
>
> this.DynLayer = DynLayer;
> this.DynLayer();
> this.moveTo(offsetX, offsetY);
> this.setSize(width, height);
>
> this.contentPane = new DynLayer();
> this.addChild(this.contentPane);
>
> this.bufferW = 0;
> this.bufferH = 0;
>
>
> this.mainImage = DynImage.getImage(content);
> this.max = new DynImage(this.mainImage);
> this.max.moveTo(0,0);
> this.max.setSize(width*2,height*2);
>
> this.navigator = new DynLayer(null,
> 0,height*0.75,width*0.25,
> height*0.25,"#000000", true);
> this.addChild(this.navigator);
>
> this.min = new DynImage(this.mainImage);
> this.min.setSize(width*0.25, height*0.25);
> this.navigator.addChild(this.min);
>
> this.highlighter = new DynLayer(null,
> 0,0,this.navigator.getWidth()*0.5,
> this.navigator.getHeight()*0.5,"red",
> true)
> this.navigator.addChild(this.highlighter);
> DragEvent.enableDragEvents(this.highlighter);
> DragEvent.setDragBoundary(this.highlighter);
>
> var highlightEvent = new
> EventListener(this.highlighter);
>
> highlightEvent.ondragstart = function(e){
> target=e.getTarget()
> this.jumpTo(-target.getX()*8,
> -target.getY()*8)
> };
>
> this.highlighter.addEventListener(highlightEvent);
>
> var scrollEvent = new EventListener(this);
> scrollEvent.onpathrun = function(e) {
>
> e.getTarget().invokeEvent('scroll');
> };
> this.contentPane.addEventListener(scrollEvent);
>
> var viewportListener = new EventListener(this);
> viewportListener.onresize = function(e) {
> var o =
> e.getTarget();
> if (!o.created
> || !o.content) return;
>
>
> o.findDimensions();
>
> if
> (!o.enableHScroll)
> o.contentPane.setX(0);
> else if
> (o.contentPane.x<-o.availableScrollX)
> {o.contentPane.setX(-o.availableScrollX);}
>
> if
> (!o.enableVScroll)
> o.contentPane.setY(0);
> else if
> (o.contentPane.y<-o.availableScrollY)
> {o.contentPane.setY(-o.availableScrollY);}
>
>
> o.invokeEvent("scroll");
> };
> viewportListener.oncreate = function(e) {
> var o =
> e.getTarget();
> if(is.def &&
> o.css)
> o.css.overflow='hidden'
> o.reset(false);
> };
> this.addEventListener(viewportListener);
>
> this.contentResizeListener = new
> EventListener(this);
> this.contentResizeListener.onresize =
> function(e) {
> var o
> = e.getTarget();
>
> o.findDimensions();
>
> o.invokeEvent("contentchange");
> };
> this.contentResizeListener.onload = function(e)
> { // for loadpanel
> var o =
> e.getTarget();
> if
> (o.created && o.content) {
>
> o.reset();
> }
> };
>
>
>
> this.setContent(this.max);
>
> }
> ImageNavigator.prototype = new DynLayer();
> ImageNavigator.prototype.reset = function(b) {
>
> this.contentPane.moveTo(0,0);
>
> this.findDimensions();
> if (b!=false)
> this.invokeEvent("contentchange");
> };
> ImageNavigator.prototype.setContent =
> function(content) {
> if
> (this.content &&
> this.contentPane.children.length>0) {
> if
> (this.content==this.max) return;
>
> this.max.removeFromParent();
>
>
this.max.removeEventListener(this.contentResizeListener);
> }
> if
> (!content) this.content =
> new DynLayer();
> else
> this.content = this.max;
>
>
> this.content.moveTo(0,0);
>
> this.contentPane.moveTo(0,0);
>
>
> this.contentPane.addChild(this.content);
>
>
this.content.addEventListener(this.contentResizeListener);
>
>
> this.findDimensions();
>
>
> this.invokeEvent("contentchange");
> };
> ImageNavigator.prototype.findDimensions = function()
> {
> if (!this.content) return;
>
>
this.contentPane.setSize(this.content.getWidth(),this.content.getHeight());
>
> this.availableScrollX =
>
this.content.getWidth()-this.getWidth()+this.bufferW;
> this.availableScrollY =
>
this.content.getHeight()-this.getHeight()+this.bufferH;
> this.enableHScroll =
> this.availableScrollX>0;
> this.enableVScroll =
> this.availableScrollY>0;
> };
>
> ImageNavigator.prototype.jumpTo = function(x,y) {
>
> this.content.moveTo(x,y);
>
> this.invokeEvent("scroll");
> };
>
> ImageNavigator.prototype.setRatio = function(rx,ry)
> {
>
> this.setRatioX(rx);
>
> this.setRatioY(ry);
> };
>
> ImageNavigator.prototype.setRatioX = function(rx) {
> if
> (rx!=null)
> this.contentPane.setX(-this.availableScrollX*rx);
> };
>
> ImageNavigator.prototype.setRatioY = function(ry) {
> if
> (ry!=null)
> this.contentPane.setY(-this.availableScrollY*ry);
> };
> ImageNavigator.prototype.getRatioX = function() {
> if
> (!this.content ||
> !this.enableHScroll) return 0;
> else if
> (this.contentPane.x==0)
> return 0;
> else if
> (this.contentPane.x==-this.availableScrollX) return
> 1;
> else return
>
>
1-(this.availableScrollX+this.contentPane.x)/this.availableScrollX;
> };
> ImageNavigator.prototype.getRatioY = function() {
> if
> (!this.content ||
> !this.enableVScroll) return 0;
> else if
> (this.contentPane.y==0)
> return 0;
> else if
> (this.contentPane.y==-this.availableScrollY) return
> 1;
> else return
>
>
1-(this.availableScrollY+this.contentPane.y)/this.availableScrollY;
> };
>
> ImageNavigator.prototype.scrollUp = function()
> {this.scrollSlide(null,0);};
>
> ImageNavigator.prototype.scrollDown = function()
> {this.scrollSlide(null,-this.availableScrollY);};
>
> ImageNavigator.prototype.scrollLeft = function()
> {this.scrollSlide(0,null);};
>
> ImageNavigator.prototype.scrollRight = function()
> {this.scrollSlide(-this.availableScrollX,null);};
>
>
> ImageNavigator.prototype.scrollSlide = function(x,y)
> {
> if
> (x!=null &&
> this.enableHScroll) {
>
> this.invokeEvent("scrollstart");
>
> this.contentPane.slideTo(x,this.contentPane.y);
> }
> else if
> (y!=null &&
> this.enableVScroll) {
>
> this.invokeEvent("scrollstart");
>
> this.contentPane.slideTo(this.contentPane.x,y);
> }
> };
> ImageNavigator.prototype.cancelScroll = function() {
>
> this.contentPane.stopSlide();
>
> this.invokeEvent("scrollend");
> };
>
>
>
> THE PROBLEM that I am facing is in the
> highlightEventListener that says
> "Error: this.jumpTo is not a function
> Source File:
> htmlcode/dynapi/src/lib/dynapi/gui/imagenavigator.js
> Line: 50"
>
> However, when I comment that line out and implement
> the listener in the
> HTML, it is working alright. here is the code for
> the HTML of the same:
>
> <html>
> <head>
> <title>DynAPI Image Viewer - ViewPort</title>
> <script type= "text/javascript"
> language="JavaScript"
> src="../src/dynapi.js"></script>
> <script language="Javascript">
> DynAPI.setLibraryPath('../src/lib/')
> DynAPI.include('dynapi.api.*')
> DynAPI.include('dynapi.event.*')
> DynAPI.include('dynapi.util.thread.js')
> DynAPI.include('dynapi.util.pathanim.js')
> DynAPI.include('dynapi.gui.viewport.js')
> DynAPI.include('dynapi.gui.label.js')
> DynAPI.include('dynapi.gui.dynimage.js')
> DynAPI.include('dynapi.gui.imagenavigator.js')
> DynAPI.include('dynapi.ext.*')
> </script>
> <script language="Javascript">
>
> DynAPI.onLoad = function() {
> iviewer = new ImageNavigator("machinery.jpg",
> 400, 200, 800, 600)
>
> /*var myListener=new
> EventListener(iviewer.highlighter)
> myListener.ondragstart=function(e){
> target=e.getTarget()
> iviewer.jumpTo(-target.getX()*8,
> -target.getY()*8)
>
> }
> myListener.ondragend=function(e){
> target=e.getTarget()
> iviewer.jumpTo(-target.getX()*8,
> -target.getY()*8)
> }*/
> iviewer.highlighter.addEventListener(myListener)
> DynAPI.document.addChild(iviewer)
>
> }
>
> </script>
> </head>
> <body bgcolor="#ffffff">
>
> </body>
> </html>
>
>
>
> I know that I do not have enough experience to but I
> tired. I could
> really do with some help. Also, some good website
> with some tutorials on
> JAVASCRIPT / DYNAPI would be of help
>
> thanks in advance
>
> Nikhil
>
>
>
>
-------------------------------------------------------
> This sf.net email is sponsored by: OSDN - Tired of
> that same old
> cell phone? Get a new here for FREE!
>
https://www.inphonic.com/r.asp?r=sourceforge1&refcode1=vs3390
> _______________________________________________
> Dynapi-Help mailing list
> [EMAIL PROTECTED]
>
https://lists.sourceforge.net/lists/listinfo/dynapi-help
_____________________________________________________
Gratis e-mail resten av livet på www.yahoo.se/mail
Busenkelt!
-------------------------------------------------------
In remembrance
www.osdn.com/911/
_______________________________________________
Dynapi-Help mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/dynapi-help
