Jump to content

If I have two columns, live orientation response


greenace92

Recommended Posts

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 by greenace92
Link to comment
Share on other sites

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'
	});
});
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.