Accessing the browser scrollbars through flash

[tmclikes]

This is kind of a flash question and kind of a JavaScript question too maybe, anyway here goes.

Flash scrollbars kind of annoy me, and I don't really see the reason not to use the ones built into a browser, they are standard and from a usability point of view make more sense to me than custom scroll bars.

However I also like full browser flash sites as it allows me to use all the maximum space available, and dynamically place content as the window is resized. The problem is if the browser size drops below certain dimensions all my elements begin to overlap, unless of course I stop them and activate scroll bars.

My question is, is there a way to trick the browser into thinking that, maybe using a flash and javaScript combo, once the flash movie reaches a certain size, the document size is now that big, i.e. resulting in the browsers own scrollbars being activated.

I hope I am explaining myself properly, although I doubt it but hopefully somebody might be able to decipher these ramblings and point me the right direction...

Thanks in advance!

-T.

[Medyman]

Hey...that's an interesting question.

I've never done anything like that myself, but after some researching, this is what i've found:

http://www.flashcodersny.org/wordpress/?p=30


Edit...
I found a close example at www.defunker.com. After looking at the html on the defunker.com site, i saw that he used the js file called flash_resize.js and a div layer called "flashid". Well it all matches up with an example here: http://www.mustardlab.com/developer/flash/objectresize/
You may want to check it out.


Here is also something similiar which uses javascript calls from flash to resize a div layer. That's what makes the scrollbar resize. Also, the movie centers with ease when you resize your browser.
Example: http://www.markgriffo.com/scrollTest/
Source: http://www.markgriffo.com/scrollTest/ScrollBarTest.zip

[tmclikes]

Mate thats great, perfect in fact I found the Mark Griffo version most usefull as the others seem to use tables in the HTML and that's probably not the best idea...

Thanks again for the links, you really helped me out here!!

-T.

[Medyman]

Sure...

Let us know how it turns out. I'm kind of curious on what your end results will be.

[tmclikes]

Hey Medyman,
I finally got something together after a long and head hurting process... What you supplied really got me going, so thanks again for that! I had to adapt it quite significantly for my needs, it was almost there but not quite.

The main problem was that I couldn't jump back and forth between 100% div layer and a set size div layer. I could only alter the size of it. That was a large chunk of the work taken care of though.

Before this I used a stage listener in flash to update the positions of different elements around the stage

resizeListener = new Object();
Stage.addListener(resizeListener);
resizeListener.onResize = Delegate.create(this, positionClip);

and when the stage went below a certain size I would call the JavaScript function that would resize the div layer that the flash sat in and thus activated the scroll bars.

However now that the stage was a fixed size and no longer being resized there was no way to tell the javascript to resize the div to 100% when the window was increased beyond the min dimensions again.

To solve that I used a combination of the ExternalInterface.addCallback class in flash and some onresize javascript to send the new dimensions back to flash when the browser got resized, and update the div layer when required.

Flash function:

        ...
        ExternalInterface.addCallback("onChange", this, onChange);
	}
	
public function onChange(w:Number, h:Number):Void {
		stageW = w;
		stageH = h;
		positionClip();
	}

private function positionClip():Void{
		if(stageW <= movieWidth){
			var result:Object = ExternalInterface.call("setFlashWidth", "flashcontent", movieWidth, "px");
		}else
		if(stageW >= movieWidth){
			var result:Object = ExternalInterface.call("setFlashWidth", "flashcontent", 100, "%");
		}
		
		if(stageH <= movieHeight){
			var result:Object = ExternalInterface.call("setFlashHeight", "flashcontent", movieHeight, "px");
		}else
		if(stageH >= movieHeight){
			var result:Object = ExternalInterface.call("setFlashHeight", "flashcontent", 100, "%");
		}
		
		var i:Number;
		for(i in clipArray){
			setupPosObj(clipArray[i].myCoor, clipArray[i].myId);
			clipArray[i].myId._x = posObj.posX;
			clipArray[i].myId._y = posObj.posY;
			if(i >= clipArray.length-1){
		}
	}

javaScript function:

function setFlashWidth(divid, newW, stateVal){
	document.getElementById(divid).style.width = newW+stateVal;
}
function setFlashHeight(divid, newH, stateVal){
	document.getElementById(divid).style.height = newH+stateVal;		
}
function setFlashSize(divid, newW, newH){
	setFlashWidth(divid, newW);
	setFlashHeight(divid, newH);
}
function canResizeFlash(){
	var ua = navigator.userAgent.toLowerCase();
	var opera = ua.indexOf("opera");
	if( document.getElementById ){
		if(opera == -1) return true;
		else if(parseInt(ua.substr(opera+6, 1)) >= 7) return true;
	}
	return false;
}

//get the correct reference
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}
function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
	myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  thisMovie('main').onChange(myWidth, myHeight);
}

Theres some more going on besides this, but its all getting very long winded now...

I guess I could just update the size without going back through flash, but I set the movie dimensions through my custom repositioning class, so this way I don't really need to update the javascript again.

I'm sure there's a smoother way, but at least I'm on the right track... I think

Cheers,

-T.

Check out my results here

The movie is set to kick into scroll bar mode at 955x700

[Medyman]

Good work!

[Mojo_Risin]

tmclikes - that is great work you have done. I'm banging my head to get this to work. would you be willing to share your source files in that test you posted (http://www.tmclikes.com/testing/screenScaling/). I'd like to examine you fla file. You could just email them to me if you don't want to post them up here.

I would be forever grateful!

John