[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 312
  • Last Modified:

Horizontal scrolling website with frames which are centered

Hi,

I'm trying to build a website which has horizontal scrolling frames of 900px x 600px, the 'active' frame is centered in the middle and each frame has right and left margins of 100px.
If the screen is wide enough the end of the left frame can show on the screen and the left of the next screen.

Here is an example: http://www.peter-pearson.com/ 
it also has to have navigation like <a href="#section2">2</a>

How should i do this?

Thanks a lot!!
0
peps03
Asked:
peps03
  • 3
  • 3
2 Solutions
 
sivagnanam chandrakanthCommented:
The example site is having the body width as 10861px; and each page is a div with width as 400 px

When user clicks the next link they are showing the next div and hiding the previous one

http://www.peter-pearson.com/js/plugins.js - see this for full understanding

below is the code they are using to scroll

function scrollHere($target){
		$.scrollTo($target, 1400, {
			offset: getOffset()
		});
	}

Open in new window


Hope it explains
0
 
peps03Author Commented:
Thanks you!
Is it also possible to show the edges of the previous and next frames?
0
 
sivagnanam chandrakanthCommented:
yes you can, you need to specify proper width and css for the frames
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
peps03Author Commented:
Hmm i see.
What would i need to adjust to only have a 100px margin left and right of each frame?

And is it also possible to center the slides vertically in the middle?
0
 
sivagnanam chandrakanthCommented:
set amrgin-left and right as 100px for each frame(ie, each div)

For vertical align add style to frame as vertical-align:middle
0
 
peps03Author Commented:
Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now