Show the browser scrollbar when zooming an image in the Flexbook

Good afternoon experts!

I'm trying to customize the FlexBook with the Landscape Zoomer (created by Ely Greenfield) but there's one thing that I want to do but can't:

I was able to change the zoom level to go over 100%, but when the image is zoomed in, it is way bigger than  the browser and the scrollbar doesn't show up.

I was wondering if it would be possible to make the browser vertical scrollbar appears when the image becomes bigger then the canvas size? Is it only possible with some javascript?

The application that inspired my project can be found here: http://www.zinio.com/express2?issn=0008-6002
I don't know if it's some Flex or Flash, but the effect is really cool and professionnal.

Thanks a lot for your help guys.
Frank


flexbook.txt
The_Kingpin08Asked:
Who is Participating?
 
julianopolitoConnect With a Mentor Commented:
I did it, but needed to change flexbook source code and it is a little tricky. I'll send you the updated flexbook class, so you replace there. I added 2 new events: inEdge and outEdge. Also added a public property "turnedCorner".
Here I'm doing the cursor change to busyCursor cause I do not have a zoom cursor image at hand.

Then add the methods below to your app, and call them in the flexbook component

inEdge="inEdgeHandler()"
outEdge="outEdgeHandler()"

public  function inEdgeHandler():void{		
	if(book.turnedCorner != 0){
		CursorManager.setBusyCursor();	
	}					
}
public  function outEdgeHandler():void{		
	CursorManager.removeBusyCursor();
}	

Open in new window

FlexBook.as.txt
0
 
julianopolitoCommented:
frank, can you send me all the files you are using? (images, styles, custom components....)

Because everytime I try to test your file i need to adapt everything , and then i don't have the original problem in hand.

;)
thanks
0
 
julianopolitoCommented:
Sorry I posted in the wrong question..... I'll repost there

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_23148409.html
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
julianopolitoCommented:
again, send me all the working files you have now, so I can see what happens exactly when zooming, and if we can set the scrollbars correctly
0
 
The_Kingpin08Author Commented:
Sure, there you go!

rename to .rar
myFlexbook.rar.txt
0
 
The_Kingpin08Author Commented:
Would it be easier to zoom the pages inside the container, and instead of showing the scrollbars, let the user move the page with the cursor?
0
 
julianopolitoCommented:
I could not make it happen yet. Trying to figure a way out.
0
 
The_Kingpin08Author Commented:
Here's an alternative I'm trying right now (still debugging). I'm not sure it's gonna work but I think it's worth the try.

What do you think?


public function dragOn( event : MouseEvent ):void {
				book.startDrag();
				book.addEventListener(MouseEvent.MOUSE_UP,dragOff);
			}
			
			public function dragOff( event : MouseEvent ):void {
				book.stopDrag();
				book.removeEventListener(MouseEvent.MOUSE_UP,dragOff);
			}
			
			public  function focusOn(target:*):void {
			/* When the user clicks on a page, if it already has the focus we zoom out to the original size.
			   If the page gets the focus, we zoom in the image.*/ 	
				
				/* We store the current X,Y values of the book for later */
				var bookXPos:int = book.x;
				var bookYPos:int = book.y;
				
				/* We check if the page is already zoomed in... */
				if(landscape.selection.length == 1 && landscape.selection[0] == target)
				{ 
				  /*landscape.selection = [];landscape.height=100;*/
				  
				  /* The image already has the focus, so we must reset the scale and position of the book */
			      book.height = book.height / 2;
			      book.width = book.width / 2;
			      book.x = bookXPos;
			      book.y = bookYPos;
			      
			      /* We reset the cursor to normal mode */
			      book.useHandCursor=false;
				  book.buttonMode=false;
				  book.mouseChildren=false
				  
				  /* Stop the drag so the user can turn the pages again */
			      book.removeEventListener(MouseEvent.MOUSE_DOWN,dragOn);
 
				  /* The mouse wheel is accessible again to zoom */
				  book.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel);
				}
				else
				{ 
				  /*landscape.selection = [target];landscape.height=10;*/
				  
				  /* The image gets the focus, so we must change the scale of the page */
				  book.height = book.height * 2;
				  book.width = book.width * 2;
				  
				  /* The cursor becomes the little hand */
				  book.useHandCursor=true;
				  book.buttonMode=true;
				  book.mouseChildren=true
				  
				  /* The user can now drag the page around to see the whole content */
				  book.addEventListener(MouseEvent.MOUSE_DOWN,dragOn);
				  
				  /* We deactivate the zoom with the mouse wheel */
				  book.removeEventListener(MouseEvent.MOUSE_WHEEL,onWheel);
				}
			}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.