[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • 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 chandrakanthTechnical LeadCommented:
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 chandrakanthTechnical LeadCommented:
yes you can, you need to specify proper width and css for the frames
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 chandrakanthTechnical LeadCommented:
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

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