If I have two columns, live orientation response

[greenace92]

Hello,

 

I have a pretty basic two panel design, no code yet but it is pretty straight forward

 

What I'm concerned about is how a website can react to an orientation change, not simply be re sizing but by relocating items. 

 

So in portrait mode, I have panel a, the top half say 50%, and panel b, 50% bottom half

 

I rotate it (the phone) to the left of my perspective (viewer) and the top panel goes to the left, and the bottom panel goes to the right. 

 

In the meantime some scrolling animation is in play and the direction of the scroll changes, from sideways to up and down...

Is that possible without refreshing the page? 

Edited December 4, 2014 by greenace92

[maxxd]

You can do media queries on the width and height of the browser, or use JavaScript and attach a Listener to the window.matchMedia() object:

var devOr = window.matchMedia("(orientation: portrait)");
// The Listener will fire whenever this either matches or ceases to match
devOr.addListener(function(){
	$('.column_1').css({
		float:'none'
	});
});

[CroNiX]

This is called Responsive Design, where the webpage reformats itself for different screen resolutions (desktop vs mobile) and orientation (portrait/landscape). I'd suggest looking into the bootstrap css framework.

[greenace92]

yeah I guess the rotation part is automatic when using mobile devices

 

So then I'll just have the css be different although the html part is bad when you can't modify that 

 

Thank you for your responses