У меня есть этот сайт: Ссылка
Проблема, с которой я сталкиваюсь, заключается в том, что на мобильных устройствах у тела есть это необычное белое пространство с правой стороны:
Этот сайт состоит из одной страницы с несколькими разделами, значки навигации используются для плавной прокрутки страницы вниз.
Чтобы попытаться решить проблему, я использовал рекомендуемый: body{ overflow-x:hidden; }, и это устраняет проблему, но по какой-то причине моя система прокрутки не работает.
Есть ли способ заставить этот сайт имитировать body{ overflow-x:hidden; } без его использования, даже с помощью jquery?
Вот код:
HTML:
<!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" />
<meta name="viewport" content="width=768; initial-scale=1.0;" />
<title>Georgia Elliott Illustration</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="js/twitter/jquery.tweet.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="apple-touch-icon-precomposed" href="http://1.gravatar.com/blavatar/94661061bf2aad5cdce6115262923c20?s=114" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/smooth.js"></script>
<script type="text/javascript" src="js/twitter/jquery.tweet.js"></script>
<script type='text/javascript'>
jQuery(function($){
$("#twitter-feed-main").tweet({
username: "creative_exp",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "We said:",
auto_join_text_ed: "We:",
auto_join_text_ing: "We were:",
auto_join_text_reply: "We replied to:",
auto_join_text_url: "We were checking out:",
loading_text: "Loading Tweets..."
});
});
</script>
</head>
<body>
<div id="splat"></div>
<div id="logo">
<a href="#home"></a>
</div>
<div id="header">
<div id="nav" class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="whole">
<div class="content">
<div id="home-page" class="page">
<div class="page-back"></div>
<a id="home"></a>
<div class="inner-page">
<h1>Welcome</h1>
<div class="indent">
</div>
</div>
</div><!--END home-page-->
<div id="page1" class="page">
<div class="page-back"></div>
<a id="about"></a>
<div class="inner-page">
<h1>About Me</h1>
<div class="indent">
About page content goes here.
</div>
</div>
</div><!--END page1-->
<div id="page2" class="page">
<div class="page-back"></div>
<a id="portfolio"></a>
<div class="inner-page">
<h1>Portfolio</h1>
<div class="indent">
Portfolio page content goes here.
<div id="portfolio-items">
<ul id="port-ul1">
<li id="port-item1">Test</li>
</ul>
<ul id="port-ul2">
<li id="port-item2">Test 2</li>
</ul>
<ul id="port-ul2">
<li id="port-item3">Test 3</li>
</ul>
</div>
</div>
</div>
</div><!--END page2-->
<div id="page3" class="page">
<div class="page-back"></div>
<a id="contact"></a>
<div class="inner-page">
<h1>Contact Me</h1>
<div class="indent">
Contact page content goes here.
</div>
</div>
</div><!--END page3-->
<div id="terms-page-ie" class="page">
<div class="page-back"></div>
<a id="terms-ie"></a>
<div id="cross-terms-ie" class="cross-terms-ie">X</div>
<div class="inner-page">
<h1>Terms</h1>
<div class="indent">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="share" class="pull_right">
<ul>
<a href="https://www.facebook.com/georgia.e.elliott" target="_new"><li class="pull_left"><span>Facebook</span></li></a>
<a href="javascript:void(0);" id="twitter"><li class="pull_left"><span>Twitter</span></li></a>
<a href="http://georgiaelishaillustrator.wordpress.com/" target="_new"><li class="pull_left"><span>Blog</span></li></a>
</ul>
</div>
<div id="footertext"> © 2012 Georgia Elliott | All rights reserved. | Site By: <a href="http://dandd.dpwebdev.co.uk" target="_new">D&D Creative</a> | <a href="javascript:void(0);" id="terms-link">Terms</a><img src="img/ajax-loader.gif" class="ie-loader" style="vertical-align:middle;" /><img src="img/footer.png" id="ge-il-btm" style="vertical-align: middle; position: absolute; left: 0; right: 0; margin: 0 auto;" /></div>
</div>
<div id="terms-container">
<div id="terms">
<div id="cross-terms" class="cross">X</div>
<div class="inner-content">
<h3>Terms and Conditions</h3>
<div class="indent" style="overflow:auto; height:300px;">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
<div id="overlay"></div>
<div id="twitter-feed-container">
<div id="twitter-feed-cross">X</div>
<div id="twitter-arrow"></div>
<div id="twitter-feed-main">
</div>
<a href="" id="see-twitter" target="_new" >See More...</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#terms-link").click(function() {
$('#terms-page-ie').show();
$('#terms-link').hide();
$('.ie-loader').show();
var $targetId = $('#terms-page-ie'), $targetAnchor = $('[name=#terms-page-ie]');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1500);
}
$('.ie-loader').fadeOut(2500);
});
$("#cross-terms-ie").click(function() {
$('#terms-page-ie').hide();
$('#terms-link').show();
$('html, body').animate({scrollTop: 0}, 1000);
});
$("#twitter").click(function() {
$('#twitter-feed-container').fadeToggle(800);
});
$("#twitter-feed-cross").click(function() {
$('#twitter-feed-container').fadeOut(800);
});
$
});
</script>
</body>
</html>
CSS:
/* CSS Document */
/* FONTS */
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.ttf');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.eot');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.svg');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.woff');
}
* {
margin:0;
font-family:'PT Sans';
}
html, body {
height:100%;
width:100%;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.content {
height:100%;
}
a {
color:#6CF;
}
a:hover {
color:#69F;
}
a:active {
color:#C06;
}
/* LOGO */
#logo {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new-front.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
#splat {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
/* HEADER STYLES */
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:32px;
font-size:12px;
padding-left:8px;
}
/* NAV STYLES */
.nav {
position: fixed;
right: 0;
width: 400px;
height: 40px;
line-height: 36px;
}
#nav ul {
width: 435px;
height: 40px;
padding-left: 0px;
}
#nav li {
float:left;
margin:0 30px;
list-style:none;
}
#nav li a {
color:#FFF;
text-decoration:none;
border-bottom:dotted 1px #FFF;
}
#nav li a:hover {
color:#69F;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
#nav li a:active {
color:#C06;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
/* PAGE STYLES */
.page {
width:100%;
}
.inner-page {
max-width: 880px;
min-width: 680px;
margin: 0 auto 0 430px;
padding: 70px 0 48px 0;
}
.page-texture {
background-image:url(../img/overlay-pattern.png);
background-color:transparent;
background-repeat:repeat;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
}
#home-page {
color:#000000;
background:#FFF url(../img/overlay-pattern.png);
height:1000px;
}
#page1 {
background:#CCC url(../img/overlay-pattern.png);
height:1200px;
color:#000000;
}
#page2 {
background:#999 url(../img/overlay-pattern.png);
height:2000px;
}
#page3 {
background:#666 url(../img/overlay-pattern.png);
height:780px;
}
#terms-page-ie {
display:none;
background:#333 url(../img/overlay-pattern.png);
color:#FFFFFF;
}
.inner-content {
padding:20px;
}
.indent {
margin-left:20px;
margin-top:8px;
}
.hidden-overflow {
overflow:hidden;
}
.cross {
right:5px;
top:2px;
position:absolute;
font-family:"Raleway";
font-size:16px;
cursor:pointer;
}
.cross-terms-ie {
font-family:"PT Sans";
font-size:16px;
cursor:pointer;
position:absolute;
right:5px;
margin-top:42px;
}
img.ie-loader {
display:none;
}
#terms-container {
display:none;
position:fixed;
width:100%;
height:100%;
margin:auto;
top:0;
left:0;
}
#terms {
position:absolute;
width:700px;
height:400px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
background:#000000;
color:#FFFFFF;
z-index:100;
}
#overlay {
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-color:#000000;
opacity:0.4;
filter:alpha(opacity=40);
}
/* FOOTER STYLES */
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:40px;
font-size:12px;
padding-left:8px;
z-index:1000;
}
#footertext a {
text-decoration:none;
border-bottom:1px dotted #ffffff;
color:#ffffff;
}
@media (max-width: 1230px) {
#ge-il-btm {
display:none;
}
}
#share {
margin-right:8px;
}
#share li {
list-style:none;
padding:0 8px;
}
#share li:hover {
background:#6CF;
color:#000000;
}
#share a li {
text-decoration:none;
color:#FFFFFF;
}
/* PORTFOLIO STYLES */
#portfolio-items ul {
background: black;
border: 1px #6CF solid;
list-style-image: url(../img/bullet.png);
color: #6CF;
width: 400px;
cursor: pointer;
height: 20px;
margin: 10px 0 0 0;
padding: 10px 30px 10px 30px;
}
/* FLOAT STYLES */
.pull_left {
float:left;
}
.pull_right {
float:right;
}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight:normal;
}
h1 { font-size:48px; font-family:"Raleway"; margin-bottom:30px; }
h2 { font-size:42px; font-family:"Raleway"; }
h3 { font-size:36px; font-family:'Lato'; }
h4 { font-size:30px; font-family:'Lato'; }
h5 { font-size:24px; font-family:'Lato'; }
h6 { font-size:18px; font-family:'Lato'; }
#terms-page-ie h5 {
border-bottom: 1px dotted #FFFFFF;
margin: 0px 0px 10px 0px;
}
#terms-page-ie p {
margin: 0 0 25px 0;
}
.shadow {
text-shadow:-1px 1px 3px #000000;
}
/* LOADING SCRREN */
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
height: 8px; width: 8px;
background: #6CF;
display: inline-block;
margin: 12px 2px;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px);opacity: 1;}
100% {opacity: 0;}
}
/* TWITTER FEED */
#twitter-feed-container{
width: 300px;
position: fixed;
bottom: 49px;
right: 25px;
height: 340px;
background: #000000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
display: none;
color:#CCCCCC;
font-size:13px;
}
#twitter-feed-container a{
color:#CCCCCC;
}
#twitter-feed-container a.tweet_avatar{
border-bottom:none !important;
}
.tweet_list li {
margin-bottom:4px;
padding: 0.5em 0.5em 12px 0.5em !important;
}
#twitter-arrow {
width:0;
height:0;
right: 30px;
bottom: -16px;
position:absolute;
border: .65em solid;
border-color: #000000 transparent transparent transparent;
}
#twitter-feed-main {
height: 305px;
overflow: hidden;
position: absolute;
bottom: 30px;
right: 8px;
width: 285px;
}
#twitter-feed-cross {
font-family: "PT Sans";
font-size: 16px;
cursor: pointer;
float: right;
right: 10px;
top: 8px;
z-index: 10000;
position: absolute;
}
#twitter-logo {
background: url(../img/social/doodles.png) -9px -10px;
height: 70px;
width: 70px;
position:absolute;
}
a#see-twitter {
position:absolute;
bottom:5px;
right:8px;
}
JS для плавной прокрутки
$(document).ready(function() {
$('html, body').animate({scrollTop: 0}, 1000);
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1500);
return false;
});
}
}
});
});
