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:
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.

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.

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


public  function inEdgeHandler():void{		
	if(book.turnedCorner != 0){
public  function outEdgeHandler():void{		

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sorry I posted in the wrong question..... I'll repost there
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

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
The_Kingpin08Author Commented:
Sure, there you go!

rename to .rar
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?
I could not make it happen yet. Trying to figure a way out.
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 {
			public function dragOff( event : MouseEvent ):void {
			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 */
				  /* Stop the drag so the user can turn the pages again */
				  /* The mouse wheel is accessible again to zoom */
				  /*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 */
				  /* The user can now drag the page around to see the whole content */
				  /* We deactivate the zoom with the mouse wheel */

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.