Link to home
Start Free TrialLog in
Avatar of The_Kingpin08
The_Kingpin08

asked on

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
Avatar of julianopolito
julianopolito
Flag of Brazil image

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
ASKER CERTIFIED SOLUTION
Avatar of julianopolito
julianopolito
Flag of Brazil image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
Avatar of The_Kingpin08
The_Kingpin08

ASKER

Sure, there you go!

rename to .rar
myFlexbook.rar.txt
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.
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