EricaL
05-09-2010, 01:37 AM
Hi all,
I'm working on creating a horizontally scrolling website. I'm using jQuery, along with scrollTo and localscroll to make the horizontal scroll animated. The scrolling works in all browsers except for Safari, and I'm unsure why. I'm not familiar with coding in Javascript so any help/tips are appreciated.
This is my markup:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navcu Photography :: Photography by Marco Navic</title>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script language="Javascript" src="js/menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
</head>
<body>
<div id="masterdiv">
<div id="menu">
<img id="logo" src="images/logo.png" border="0" alt=""/><br />
<img class="divider" src="images/divider.png" border="0" alt="" />
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><div class="menutitle" onclick="SwitchMenu('sub1')">About</div>
<ul class="submenu" id="sub1">
<li><a href="#about"><span style="color: #7CA297;">+</span> About Navcu</a></li>
<li><a href="#bio"><span style="color: #7CA297;">+</span> Biography</a></li>
<li><a href="#skills"><span style="color: #7CA297;">+</span> Skills</a></li>
</ul>
</li>
<li><div class="menutitle" onclick="SwitchMenu('sub2')">Photography</div>
<ul class="submenu" id="sub2">
<li><a href="#interior"><span style="color: #7CA297;">+</span> Interior</a></li>
<li><a href="exterior"><span style="color: #7CA297;">+</span> Exterior</a></li>
<li><a href="#portrait"><span style="color: #7CA297;">+</span> Portrait</a></li>
<li><a href="#print"><span style="color: #7CA297;">+</span> Print</a></li>
</ul>
</li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<img class="divider" src="images/divider.png" border="0" alt="" />
<p id="copyright">Copyright 2010 Erica and Monica designed this site. We will probably have credit link here too.</p>
</div>
<div id="container">
<div id="home">
<div class="page"><a name="menu" class="content"><img src="images/pages/1.png" border="0" alt="" /></a></div>
<br /><br /><br /><br />
<div id="slider" class="content"><b>THIS OBNXIOUSLY BRIGHT BOX REPRESENTS THE FLASH IMAGE SLIDER THAT WILL DISPLAY RECENT PHOTOGRAPHS BY NAVCU PHOTOGRAPHY!!!!!!</b></div>
<p class="content" id="news">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="titlebar"></div>
<div id="trans1"></div>
<div id="about">
<h2><a name="about" class="content">+ About Navcu Photography</a></h2>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum
nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor
ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris
interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper
ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum
auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor
at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus
tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
<p class="content"><a href="#bio">-></a></p>
</div>
<div id="bio">
<h2><a name="bio" class="content">+ About the Photographer</a></h2>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum
nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor
ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris
interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper
ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum
auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor
at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus
tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
This is my CSS:
html {
overflow: hidden;
}
body {
background: #AFAFAF;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
height: 100%;
width: 100%;
margin: 0;
}
#masterdiv {
height: 100%;
}
#menu {
width: 360px;
height: 100%;
background: url('../images/menu.png');
background-repeat: no-repeat;
background-position: top left;
float: left;
overflow: visible;
position: fixed;
z-index: 500;
}
#logo {
margin-left: 20px;
margin-right: d20px;
padding: 8px;
}
img.divider {
margin-left: 70px;
margin-right: 20px;
padding: 8px;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
#navigation ul {
margin: 0 auto;
}
#navigation li {
list-style: none;
font-size: 20px;
}
#navigation a {
color: #000;
text-decoration: none;
}
.submenu li {
list-style: none;
}
.menutitle {
cursor: pointer;
}
#copyright {
text-align: center;
color: #A2A1A6;
margin: 6px;
}
#container {
width: 6000px;
height: 1000px;
}
.page {
float: right;
padding: 5px;
}
#home {
width: 960px;
margin-left: 25px;
float: left;
padding: 20px;
}
#slider {
background: #E42DAE;
width: 570px;
height: 250px;
}
#titlebar {
background: #699284;
width: 100%;
position: absolute;
top: 410px;
height: 75px;
}
#trans1 {
background: url('../images/transitions/one.png');
position: relative;
margin-left: 0;
margin-top: 0;
float: left;
width: 2432px;
height: 100%;
}
#news {
position: relative;
margin-top: 175px;
}
#about {
background: #699284;
width: 950px;
position: relative;
padding: 20px;
height: 100%;
float: left;
}
#bio {
background: #699284;
position: relative;
margin-left: 0;
width: 950px;
padding: 20px;
height: 100%;
float: left;
z-index: 2;
}
.content {
margin-left: 385px;
}
.blank {
background: #699284;
width: 950px;
max-width: 100%;
position: relative;
margin-left: 950px;
height: 100%;
float: left;
}
#clear {
clear: both;
}
I'm using this function, if this helps:
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
You can also see the live page here (http://ericaftw.com/school/culminating/index2.html).
Thanks in advance,
Erica.
I'm working on creating a horizontally scrolling website. I'm using jQuery, along with scrollTo and localscroll to make the horizontal scroll animated. The scrolling works in all browsers except for Safari, and I'm unsure why. I'm not familiar with coding in Javascript so any help/tips are appreciated.
This is my markup:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navcu Photography :: Photography by Marco Navic</title>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script language="Javascript" src="js/menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
</head>
<body>
<div id="masterdiv">
<div id="menu">
<img id="logo" src="images/logo.png" border="0" alt=""/><br />
<img class="divider" src="images/divider.png" border="0" alt="" />
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><div class="menutitle" onclick="SwitchMenu('sub1')">About</div>
<ul class="submenu" id="sub1">
<li><a href="#about"><span style="color: #7CA297;">+</span> About Navcu</a></li>
<li><a href="#bio"><span style="color: #7CA297;">+</span> Biography</a></li>
<li><a href="#skills"><span style="color: #7CA297;">+</span> Skills</a></li>
</ul>
</li>
<li><div class="menutitle" onclick="SwitchMenu('sub2')">Photography</div>
<ul class="submenu" id="sub2">
<li><a href="#interior"><span style="color: #7CA297;">+</span> Interior</a></li>
<li><a href="exterior"><span style="color: #7CA297;">+</span> Exterior</a></li>
<li><a href="#portrait"><span style="color: #7CA297;">+</span> Portrait</a></li>
<li><a href="#print"><span style="color: #7CA297;">+</span> Print</a></li>
</ul>
</li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<img class="divider" src="images/divider.png" border="0" alt="" />
<p id="copyright">Copyright 2010 Erica and Monica designed this site. We will probably have credit link here too.</p>
</div>
<div id="container">
<div id="home">
<div class="page"><a name="menu" class="content"><img src="images/pages/1.png" border="0" alt="" /></a></div>
<br /><br /><br /><br />
<div id="slider" class="content"><b>THIS OBNXIOUSLY BRIGHT BOX REPRESENTS THE FLASH IMAGE SLIDER THAT WILL DISPLAY RECENT PHOTOGRAPHS BY NAVCU PHOTOGRAPHY!!!!!!</b></div>
<p class="content" id="news">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="titlebar"></div>
<div id="trans1"></div>
<div id="about">
<h2><a name="about" class="content">+ About Navcu Photography</a></h2>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum
nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor
ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris
interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper
ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum
auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor
at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus
tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
<p class="content"><a href="#bio">-></a></p>
</div>
<div id="bio">
<h2><a name="bio" class="content">+ About the Photographer</a></h2>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum
nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor
ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris
interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper
ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum
auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor
at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus
tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
This is my CSS:
html {
overflow: hidden;
}
body {
background: #AFAFAF;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
height: 100%;
width: 100%;
margin: 0;
}
#masterdiv {
height: 100%;
}
#menu {
width: 360px;
height: 100%;
background: url('../images/menu.png');
background-repeat: no-repeat;
background-position: top left;
float: left;
overflow: visible;
position: fixed;
z-index: 500;
}
#logo {
margin-left: 20px;
margin-right: d20px;
padding: 8px;
}
img.divider {
margin-left: 70px;
margin-right: 20px;
padding: 8px;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
#navigation ul {
margin: 0 auto;
}
#navigation li {
list-style: none;
font-size: 20px;
}
#navigation a {
color: #000;
text-decoration: none;
}
.submenu li {
list-style: none;
}
.menutitle {
cursor: pointer;
}
#copyright {
text-align: center;
color: #A2A1A6;
margin: 6px;
}
#container {
width: 6000px;
height: 1000px;
}
.page {
float: right;
padding: 5px;
}
#home {
width: 960px;
margin-left: 25px;
float: left;
padding: 20px;
}
#slider {
background: #E42DAE;
width: 570px;
height: 250px;
}
#titlebar {
background: #699284;
width: 100%;
position: absolute;
top: 410px;
height: 75px;
}
#trans1 {
background: url('../images/transitions/one.png');
position: relative;
margin-left: 0;
margin-top: 0;
float: left;
width: 2432px;
height: 100%;
}
#news {
position: relative;
margin-top: 175px;
}
#about {
background: #699284;
width: 950px;
position: relative;
padding: 20px;
height: 100%;
float: left;
}
#bio {
background: #699284;
position: relative;
margin-left: 0;
width: 950px;
padding: 20px;
height: 100%;
float: left;
z-index: 2;
}
.content {
margin-left: 385px;
}
.blank {
background: #699284;
width: 950px;
max-width: 100%;
position: relative;
margin-left: 950px;
height: 100%;
float: left;
}
#clear {
clear: both;
}
I'm using this function, if this helps:
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
You can also see the live page here (http://ericaftw.com/school/culminating/index2.html).
Thanks in advance,
Erica.