Horizontal Scrolling Page Script

Okay, I am trying to make a website that scrolls from left to
right, & up and down when the user rolls their mouse across the
screen, like this page (hit enter site first, then let the page
load):
http://www.sonypictures.com/movies/21/
I either need the code or if somebody could point me to a
page where there's a good tutorial on how this works. I know basic
Action Scripting, but I'm having trouble figuring this one out. I
tried something with invisible buttons but it just doesn't flow (it
jumps on rollout) like the site I linked above!
PLEASE SOMEBODY HELP ME! I NEED TO TURN IN A PRICE QUOTE TO
THE CUSTOMER SOON! So I need to know how long this is going to take
me

The method is called parallax scrolling.
First search pulls up
http://webscripts.softpedia.com/script/Multimedia/Parallax-scrolling-21131.html
but I'm sure you can find better resources.
Hope that helps,
Adam
http://www.visitmyworld.co.uk

Similar Messages

Horizontally scrolling page views and vertically scrolling table views

This may be a feature request, and I'm trying to figure out if I'm trying to do too much in an iPhone app, but I want to have an outer view scroll horizontally with pages - easy to do with the UIPageControl and UIScrollView.
Within each page, however, I have a view (or nested views). In one of those views, I want to be able to scroll vertically (it's a table view) - but I can't! The message never gets down to the tableview because it's eaten on top - or at least it seems like it. It looks like I can do it in the simulator, but not on the phone.
Is this doable?

"Iain71" <[email protected]> wrote in
message
news:g6kj3r$s5p$[email protected]..
> This is the sort of thing I've seen on a few sites, and
wondered about
> before.
> Sometimes they can look a bit overboard, but I've just
seen one on this
> site
> that looks pretty well done, and doesn't take over the
page :
>
>
http://www.timesatlas.com/Pages/Default.aspx
>
> It's the bit below the main atlas pic, with the
different versions of the
> atlas.
>
> Does anyone know of any extensions, or tutorials for
recreating something
> along those lines? (Not sure if it's Flash or not?)
I'm pretty sure Project Seven (www.projectseven.com) has an
extension that
does almost exactly that.
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Horizontally scrolling page segment

This is the sort of thing I've seen on a few sites, and
wondered about before. Sometimes they can look a bit overboard, but
I've just seen one on this site that looks pretty well done, and
doesn't take over the page :
scrolling
example
It's the bit below the main atlas pic, with the different
versions of the atlas.
Does anyone know of any extensions, or tutorials for
recreating something along those lines? (Not sure if it's Flash or
not?)
Cheers.

"Iain71" <[email protected]> wrote in
message
news:g6kj3r$s5p$[email protected]..
> This is the sort of thing I've seen on a few sites, and
wondered about
> before.
> Sometimes they can look a bit overboard, but I've just
seen one on this
> site
> that looks pretty well done, and doesn't take over the
page :
>
>
http://www.timesatlas.com/Pages/Default.aspx
>
> It's the bit below the main atlas pic, with the
different versions of the
> atlas.
>
> Does anyone know of any extensions, or tutorials for
recreating something
> along those lines? (Not sure if it's Flash or not?)
I'm pretty sure Project Seven (www.projectseven.com) has an
extension that
does almost exactly that.
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Horizontal scroll bar for each page of the ADF page???

Hi Everyone,
I have developed one ADF page which is working very fine.
The width and height of the page is more by which it is showing vertical scroll bar and horzontal scroll bar at the end(bottom) of the page.
But the requirement is that the horzontal scroll bar should be displayed for every page when we scroll down but it is displaying at only bottom of the page.
How can i include horizontal scroll bar?
Any suggestions wil be really useful.
Thanks.

See if this works:
<af:form id="f1">
<af:panelStretchLayout id="psl1">
<f:facet name="center">
<af:panelGroupLayout id="pgl2" layout="scroll">
<af:panelGroupLayout id="pfl1"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:form>
Drop your content inside the second panelGroupLayout

Horizontal scroll bar for the adf page

Hi,
We have around 7 tables in single jsff page. Here , we have a requirement like :
We need to show horizontal scroll bar for the entire page instead of each table. Is there any way to get this.
As of now, we have horizontal scroll bar for each table, but our customer is not accepting this, that want the scroll bar for the entire page.
Please suggest the approach.
Thanks

I have grouped all the tables in panelgrouplayout.So, what is the problem (because it is not quite clear what you need)?
If your PanelGroupLayout is with layout="horizontal", then the tables will be rendered next to each other horizontally but there will be no horizontal scrollbar on the page.
If your PanelGroupLayout is with layout="scroll", then the tables will be next to each other vertically and there will be a horizontal and a vertical scrollbar on the page (if necessary).
If you need your tables to be relocated next to each other horizontally and to have a horizontal scrollbar on the page, then use a PanelGroupLayouts(horizontal) inside a PanelGroupLayout(scroll):
<af:panelGroupLayout layout="scroll">
<af:panelGroupLayout layout="horizontal">
    <af:table> ... </af:table>
    <af:table> ... </af:table>
    <af:table> ... </af:table>
</af:panelGroupLayout>
</af:panelGroupLayout>If your problem is that you still have horizontal scrollbars inside the tables, then you should set appropriate widths to the corresponding tables (e.g. to <af:table> tags) such that they are large enough to fit the sum of corresponding column widths.
ya, I know that its not god design, but its customer requirement, so we need to do that.If you expect some table(s) to be stretched automatically according to the size of browser's window, then you should re-think your UI design because PanelGroupLayouts do not stretch their children. A possible solution is to use a combination of PanelSplitters or other layout containers that stretch their children.
Dimitar

Horizontal scroll bar moves with page up/down

I'm new at this and apologize if I don't have the right forum, but can't find any reference to my problem anywhere. A month or so ago the horizontal scroll bar at the bottom of the screen started moving up or down with the page as I used the vertical scroll bar to page up or down. The bar partly disintegrates if I click on it, but mostly remains in place and obscures text on that line. If there is more than one page I can make the bar disappear by scrolling the to the next page, and then back. This happens only when I'm on the internet, and appears in news pages ( e.g. NY Times, BBC) and on my e-mails (I use Hotmail). I have a Mac mini, 1.66 GHz, OS 10.4.11, all other updates offered by Apple. I'm sure this is not a Safari problem, and my searches for Apple viruses, Trojans, Worms, has found nothing about this (there are discussions about vertical scrolling, but these don't seem to relate to my problem). So can anyone tell me what this is and how to get rid of it? Thanks for any help. TJ Wont

I've got the same problem. It started when the BBC introduced adverts onto their News website. As the page loads an advert (or sometimes whitespace) appears between the tab and the BBC News banner. This is then shifted to the right hand side when the page fully loads.
I suspect that there's some fancy DHTML going on that Safari isn't rendering properly.
Problem doesn't occur if the Safari window is maximised to full screen width.

Tabs in a page enable horizontal scrolling,How NOT to do that?

I have a page with 17 tabs, each tab has a different permission group, so each user can see only the tab for his group.
Some users have access to more than one group, so they can see more than one tab.
When a user with more than 5 or 6 tabs logs in, that number os tabs enables the horizontal scrolling, making the page looks horrible, and some tabs end up outside the visible area.
I need to 'break' the tabs in lines, so it does not enable the horizontal scrolling.
Is it possible to do that?
Is its possible, how can I do that???

the best way how NOT to do the scrolling is to have shorter tab names or view on a higher resolution. there is no way to make them default to a new line of necessary.
Frankly, I would look back at the layout and design aspects of the page because 17 tabs is a TON of information to download each time you access a page even if you cant see them all.
You could have the information separated as pages instead of tabs or use item level security instead of tab level to fix this problem.

Designing for iPad. Horizontal Scroll & Different Page Sizes.

Putting together a pdf for iPad using cs6.
I have content that fits a standard iPad format BUT I also have these very long timelines (170cm x 21 cm). These need to be displayed zoomed in – with the reader swiping right to accessing the remainder of the content (so a horizontal scroll).
Whenever I test it on the iPad it displays the full image (so zoomed out and tiny).
Just to clarify – I have two different page sizes in the same document – standard iPad size and then these annoyingly long ones....
So how do I make sure I view them right on the iPad? I need the zoom/fixed start on the long images.
Sorry a bit of a novice with anything for iPad.
Thanks!

Hi,
Go the page in which u have added the iview.
choose page layout.
Set "1 Column (Full Width)" for the column property
The Default Layout should be 1 Column (Full Width).
Regards,
Krishna Kumar

How can I eliminate unwanted horizontal scroll bars from certain pages on my site?

A few pages on my website have a horizontal scroll bar at the bottom of the browser. I have several other pages in the exact same format and none of them have the horizontal scroll. No elements are off the edge of the page or anything. I'm a designer and don't know code, which is why I'm using Muse, but all the forums I've checked so far give coding solutions that I don't understand or know how to apply to my Muse site. Anyone have any suggestions?

Can you post a URL for your site? (You could publish a free temporary site on Adobe Business Catalyst and provide the URL.)
Other than the page being wider than the browser window or there being content that's outside the page bounds, I don't know what else to tell you to look for. If you provide a URL, we can probably detect what's causing the horizontal scrollbar and let you know what needs to change.

Whenever I play anything on Windows Media Player Classic, the middle mouse button does not work as a vertical scroll in firefox, but instead shows a horizontal scroll that does not scroll the web pages. How can I fix this problem?

Hi
I have a windows 7 and whenever I play anything on Windows Media Player Classic, the middle mouse button does not work as a vertical scroll in firefox, but instead shows a horizontal scroll that does not scroll the web pages. How can I fix this problem?
I hope that was clear.
Thnx

Hello kmanthie,
I just sent you a private message. If you are not sure how to check your forum messages, this post has instructions.
I worked on behalf of HP.

One-page website and horizontal scrolling

Can someone please tell me how I can have the horizontal
scrolling of the images while the title and the menu above are
fixed and static? I'm trying to design a very simple photo website
with minimal HTML pages. Two examples are below. Thanks
http://www.rohai.com/sf1.html
http://eliotshepard.com/set/group-swim

You can learn a lot about a web site and how it was created
by simply
viewing the page source and CSS. Another really great tool to
have is
Firefox's Web Developer Toolbar. Can't live without it.
In answer to your question. Frames are one way to do this
(but not
optimal). A scrolling division is another way to do this. But
I have to
tell you that having lots of scrollbars on a page is annoying
as hell and
not very user friendly. People who can't use a mouse for
whatever reasons
won't enjoy your site much either.
CSS:
#photos {
overflow:scrolling}
HTML:
<div id="photos">
your photos go here
</div>
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"tinglers" <[email protected]> wrote in
message
news:g6lmc0$6rk$[email protected]..
> Can someone please tell me how I can have the horizontal
scrolling of the
> images while the title and the menu above are fixed and
static? I'm trying
to
> design a very simple photo website with minimal HTML
pages. Two examples
are
> below. Thanks
>
>
http://www.rohai.com/sf1.html
>
>
http://eliotshepard.com/set/group-swim
>

Left Aligning an Anchor object in a horizontal scroll

I'm sure the answer to this is going to be so simple I'll be forced to learn how to kick myself.
I have a website that contains a static header section and a table row that contains a number of pictures in a horizontal scroll. The rest of the page does not scroll, just this one table row.
I want to be able to designate some of the pictures as the starting point for a new section.   So I created an reference link at the top of the page,
<a href="#portraits">PORTRAITS</a>
and then designated one of the pictures to be the target
Start of table row
<table><tr>
<td>...........pictures
<td><a name="portraits">
<img src="gallery/5a.gif" alt="" class="transparent5" /></a>
<p class="notes">PORTRAITS</p>
<p class="title">→ </p></td>
<td>
........continues on,
So the question is, once a user clicks the reference how can I ensure the target aligns on the left side of the page?    currently what is happening is it is just being brought into view on the right hand side.     This isn't the estetic the site owner wants.
Thanks for looking.

Hi Nancy, (or anyone else with input )
I can't seem to invoke the horizontal scroll for the site. It may be because I have the scrolling in a single table within the body and the script seems to be calling out the full <body> tag for the target.
my feeble attempt is here - http://www.lightmonkey.ca/indexjs.html
The button list looks like this,
<ul id="nav" class="scroll" >
    <a href="#portraits">PORTRAITS </a>
    <a href="#performance">PERFORMANCE    </a>
    <a href="#editorial">LIFESTYLE + EDITORIAL    </a>
    <a href="#industrial">INDUSTRIAL </a>
    <span class="style6"><a href="http://lightmonkeyphotography.wordpress.com/" target="_blank">BLOG  </a></span>
    <a href="#contact">CONTACT </a></ul></td>
So I think the JS function will call 'ul.scroll' according to the syntax from the tutorial site, (bold in snippet at bottom)
The start of the scrolling table looks like this,
<div id="main"><div id="gallery">
<table><tr>
<td><a name="portraits">
<img src="gallery/5.gif" alt="" class="transparent5" /></a>
<p class="notes">PORTRAITS</p>
<p class="title">→ </p></td>
<td>
etc
so what would be the function target? (target, my term, also in bold in the snippet below)

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="reffile/easing.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.scroll a').bind('click',function(event){
                    var $anchor = $(this);
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                    $('html, main').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
        </script>
Any suggestions on this?
Thanks again! tried to just figure it out but 3 dozen combinations have not worked out....

Horizontal scrolling with captioned images?

Hey everybody I'm helping a friend with his new site and need help figuring this out:
- I want to add left-aligned text captions below each of the horizonal scrolling images.
- I also want the images/captions to automatically resize to fit every window size (as the images currently do) - would be great if the image caption texts would automatically resize and become smaller with smaller window sizes.
Example here (this is a test without captions): http://briankokoska.com/indextest2.html
If somebody could please try to code the page including the word "caption" left-aligned underneath each of the images I would be very greatful. This way i can add the proper captions myself.
Thanks in advance for your help!!!

Horizontal scrolling and fixed divisions don't work well in mobile devices.
Try this code in a new, blank document and SaveAs test.html. This works much better in mobile/tablet devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIAN KOKOSKA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
width: 98%;
color: #000;
padding: 0 1%;
font-size: 125%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
header {
position: fixed;
top: 0;
right: 3%;
margin: 0;
width: 35%;
font-weight: bold;
text-align: right;
background: rgba(255,255,251,0.5)
header * { padding-right: 1% }
header address a {
padding-top: 25px;
margin-bottom: 0;
color: red
header p { margin-top: 25px; }
header h2 a {
color: blue;
font-size: 75%;
margin-top: -10px;
section { display: table; }
article { display: table-row; }
/**Captions**/
article p {
display: table-cell;
vertical-align: middle;
margin: 2%;
padding: 2%;
color: red;
/**re-usable classes**/
.center { text-align: center }
.right { text-align: right }
.red { background: rgba(255,0,0,0.5); }
.white { background: rgba(204,204,204,0.5) }
.blue { background: rgba(0,102,204,0.5) }
/**links**/
a img { border: none }
a {
text-decoration: none;
color: #000;
display: block;
line-height: 2em;
a:hover, a:active, a:focus { text-decoration: underline }
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 1024px) {
body { font-size: 90% }
img { width: 100% }
header {
width: 100%;
position: static;
padding: 0.5%
article p {
display: block;
padding: 0;
font-size: 90%
</style>
</head>
<body>
<header>
<h1 class="right">BRIAN KOKOSKA</h1>
<address>
<a href="mailto:[email protected]">[email protected] </a>
</address>
<h2><a href="http://mfineart.ca/artists/brian-kokoska-selected-works/" target="_blank">Macaulay & Co. Fine Art</a></h2>
<p class="blue"><a href="http://briankokoska.com/installationviews">INSTALLATION VIEWS</a><p>
<p class="white"><a href="http://briankokoska.com/selectedworks">SELECTED WORKS</a></p>
<p class="red"><a href="http://briankokoska.com/info">INFORMATION</a></p>
</header>
<section>
<article>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest2.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest2.jpg">
</a></p>
<p> Caption goes here... </p>
<p>image here</p>
Etc.....
</article>
</section>
</body>
</html>
Nancy O.

Smooth Horizontal scroll

Hey,
I'm making this website and I need to implement a smooth Jquery horizontal scroll. Can anyone help me?
My website contains 3 parts; home, maintoblue (middle-part), blue (page with actual content). Right now I've linked an object on the home page to the blue page. however, when you click on this object (which is a blank.gif) it goes to the "blue" page instantly, while I want it smoothly to scroll to the "blue"page, so that visitors will see the "maintoblue" page passing by.
My code is as follows, I need a smooth scroll from "home" to "blue"
<body>
<div id="home" class="container"><a href="#blue" title="logo"><a href="#blue" title="luuk van kuijck"><img src="../blank.gif" alt="blank" width="300" height="100" hspace="100" vspace="395" border="0" /></a></div>
<div id="maintoblue" class="container">
        </div>
<div id="blue" class="container alt">
<span class="home"><a href="#home" alt="website home"><img src="../home.png" width="50" height="26" alt="home" /></a></span>
Thank you so much in advance

Dear Nancy,
That's exactly what I need!
However, I dont get it to work.. I have downloaded the scripts, added it to my code.. but there's no result. If I click on the image it goes to the blue page instantly, it doesn't scroll.. Do you think this is because I want it to scroll horizontally?
This is how my code looks like right now:
<link href="../style.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script type='text/javascript' src='../js/jquery.scrollTo-min.js'></script>
    <script type='text/javascript' src='../js/jquery.scrollTo.js'></script>
</head>
<body>
<div id="home" class="container"><a title="$.scrollTo( '#blue', 800, {easing:'elasout'} );" href="#blue"><img src="../blank.gif" alt="blank" width="300" height="100" hspace="100" vspace="395" border="0" /></a></div>
<div id="maintoblue" class="container">
        </div>
<div id="blue" class="container alt">
<span class="home"><a title="$.scrollTo( '#home', 800, {easing:'elasout'} );" href="#home"><img src="../home.png" width="50" height="26" alt="home" /></a></span>
................etc
Hope you can help me out one more time. Thanks a lot.

Help with code for inserting horizontal scroll bar in photo gallery in Business Catalyst site?

Hi,
I am using Business Catalyst and Dreamweaver to create a trial site.
I am not sure if this is the correct forum to post this request but anyway I have inserted a photo gallery module at the bottom of the sidebar in the homepage of my test site.
Can anyone advise on whether jquery or any other code can be inserted into the page or module code that will replace the "next" hyperlink below the first 4 photos with a horizontal scroll bar at bottom of the gallery so users can just scroll through all 12 images ?
Kind Regards, Matt.
http://craftime-bs6.businesscatalyst.com/

Alyssa,
Have you tried putting this rule back as it was originally:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto; /*was 9px*/
    color: #EF9CCF;
    background-color: #FFF;
That is, changing your 9px back to auto.
And giving us a link (as you did) is much better than printing out the code for us! Thanks!
Beth

Horizontal Scrolling Page Script

Similar Messages

Maybe you are looking for