Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / Using xWinscrollto in horizontal scrolling application? from js newbie

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

  • Index
  •  » X Applications
  •  » Using xWinscrollto in horizontal scrolling application? from js newbie

#1 April 15, 2011 2:55:02 pm

shaun1258
New Member
Registered: April 15, 2011
Posts: 3

Using xWinscrollto in horizontal scrolling application? from js newbie

Hello!

I am a student in New Media, and I am trying to implement the xWinscroll to animation script in one of my project sites.  After some playing around with what was needed to implement the script, I finally got it working on a vertical page (and it looks great, my gratitude to the author).  However, the site I am designing is actually a horizontal layout.  I was wondering if anyone had used this script for horizontal scrolling, or could help me out with the appropriate modifications to the script?

Thanks in advance!
Shaun

********************************************
<EDIT>

I finally figured out the syntax, at least that gives me a horizontal scroll.  The original syntax I was using was from the script section of the demo page:
    xWinScrollTo(window, 0, xPageY('lnk' + n), t);

Which I changed to:

    xWinScrollTo(window, xPageY('lnk' + n), 0,  t);

This achieves a scrolling effect to the left (which is what I want), but only if one of my divs is at some point below the fold.  What I am trying to do is have an entire site on one page, horizontally laid out, with named anchors in each div for use with the js.  An idea of what the site looks like:

<div "site">[Home][Programs][Curriculum][Policies][Faculty] </div>

Basically, the site div is set up to be the width of all of the divs contained inside (the test page I've been working with is 6000px).  Each div in between is set up to be a "maximum" browser width so that each div fills up the browser just like an individual page.  Named anchors in each div are positioned in the top left corner in each div with the id "lnk#".

Like so (forgive my syntax, this is a working file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<title>test</title>

<style type="text/css">

*{
    margin:0;
    padding:0;
    }

.menu{
    height: 300px;
    width: 100px;
    position: fixed;
    top:90px;
    left:0;
    background-color: white;
}

.site{
            height:800px;
            width:1000px;
            }
           
.welcome{
                 height:800px;
                 width:1268px;
                 background-color: red;
                 float:left;
                 }
.program{
                 /*position: absolute;
                 margin-left: 1268px;*/
                 height:800px;
                 width:1268px;
                 background-color: yellow;
                 float:left;
                 }
                
.curriculum{
                 /*position: absolute;
                 margin-left: 2536px;*/
                 height:800px;
                 width:1268px;
                 background-color: blue;
                 float:left;
                 }
                
.policies{
                 /*position: absolute;
                 margin-left: 3804px;*/
                 height:800px;
                 width:1268px;
                 background-color: green;
                 float:left;
                 }
</style>

<script type='text/javascript' src='x.js'></script>
<script type='text/javascript' src='xwinscrollto.js'></script>
<script type='text/javascript'>

function go(n)
{
  var t = (n < 5) ? n * 500 : n * 300;
  xWinScrollTo(window, xPageY('lnk' + n), 0,  t);
  return false;
}
function goTop()
{
  xWinScrollTo(window, 0, 0, 1000);
  return false;
}
</script>

<base target="_top" />
<link rel="stylesheet" type="text/css" href="../toasterbits.css" />
</head>

<body>
<div class="site">
<div class="menu"><h3><a href='#lnk1' onclick="return go (1)">Program</a><h3>
<h3><a href='#lnk2' onclick="return go (2)">Curriculum</a><h3>
<h3><a href='#lnk3' onclick="return go (3)">Policies</a><h3>
<div><a href='#topofpg' name='lnk2' id='lnk2' onclick='return goTop()'>Top</a></div></div>
<div class="welcome"><a href="#welcome"></a><h1 id="welcome">Welcome</h1></a><br />

</div>
<div class="program"><a id='lnk1'><h1>Program</h1></a><a href="#welcome">back</a></div>
<div class="curriculum">
<div><a href='#topofpg' name='lnk2' id='lnk2' onclick='return goTop()'>Top</a></div>
<h1>Curriculum</h1><a href="#welcome">back</a></h1>
</div>
<div class="policies"><a id='lnk3'><h1>Policies</a> <a href="#welcome">back</a></h1></div>
</div>
</body>
</html>

Last edited by shaun1258 (April 15, 2011 11:48:40 pm)

Offline

 

#2 April 17, 2011 2:11:57 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Using xWinscrollto in horizontal scrolling application? from js newbie

Hi shaun1258, Welcome to the forums!

For others, here are some related pages:

http://cross-browser.com/x/examples/scroller5.html

http://cross-browser.com/x/examples/xanimation.scroll.php
http://cross-browser.com/x/lib/view.php?s=xAnimation.scroll

http://cross-browser.com/x/examples/xwinscrollto.php
http://cross-browser.com/x/lib/view.php?s=xWinScrollTo

I made very minimal changes to the code you posted, and it started working. I gave ".site" a big width and gave "body" the same width.

body {
  width: 6000px;
  height: 100%;
}
.site {
  height:800px;
  width:6000px;
}



In the Js, only one small change was needed - using xPageX instead of xPageY.

  xWinScrollTo(window, xPageX('lnk' + n), 0,  t);



Thanks!

Offline

 

#3 April 17, 2011 2:14:40 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Using xWinscrollto in horizontal scrolling application? from js newbie

One more, "somewhat" related, demo: http://cross-browser.com/x/examples/layout8.html

Offline

 

#4 April 17, 2011 8:49:34 pm

shaun1258
New Member
Registered: April 15, 2011
Posts: 3

Re: Using xWinscrollto in horizontal scrolling application? from js newbie

Thanks for the reply!  I really should have checked my code before posting.  I kept switching the size of the .site div from 1000 to 7000 px just to see what the results of my changes to the js were.  As it stands, I'm using both x and y to give an overall floaty effect to the site.

Thanks again!

Offline

 
  • Index
  •  » X Applications
  •  » Using xWinscrollto in horizontal scrolling application? from js newbie

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load