Menu
I´m very frustated since 3 days. Nobody can solve the problem and I have a presentation tomorrow... All is fine for horizontal scroll, firefox chrome, tablet... But the VERTICAL scroll for any content is strange, running a little bit and stopping. And I must wait 3/4 seconds for scrolling again... Also, the mouse wheel is extremely slow. I put my code and hope someone can see it and help me:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<link href="player/video-js.css" rel="stylesheet"/>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilosyfnext.css" rel="stylesheet" type="text/css" />
<script src="js/customScrollBarMobile.js" type="text/javascript"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="player/video.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
url: 'process.php',
success: function() {
$('#contact').hide();
$('#contact-form').append("<p class='thanks'>¡Gracias! Su formulario ha sido enviado.</p>")
}
});
}
});
});
</script>
<script>
$(function(){
$("#contenedorP").wrapInner("<table cellspacing='0'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
<script>
$(document).ready(function () {
$(".post").fadeTo(1, 0.8);
$( "#contenedorP" ).draggable({ axis: 'x' });
$(".post").hover(
function () {
$(this).find("#scroll_column").fadeTo("normal", 1);
$(this).fadeTo("fast", 1);
},
function () {
$(this).find("#scroll_column").fadeTo("normal", 0);
$(this).fadeTo("normal", 0.8);
}
);
//Moveme//
// CALCULO HASTA DONDE SE TIENE QUE DESPLAZAR LA CAPA//
$('#flekdek').click(function() {
if ($(':animated').length) {
return false;
}
if($('#wrapper').width() - $(window).width() + $('#wrapper').position().left >= 0) {
$('#wrapper').animate({left: '-=780'}, 1500, "easeOutQuad", function() {
console.debug("position " + $('#wrapper').position().left + "ancho total " + $('#wrapper').width() +
"ancho ventana " + $(window).width());
});
}
});
$('#flekizq').click(function(e) {
// console.debug("offset " + $('#wrapper').offset().left + " position " + $('#wrapper').position().left +
// "ancho total de la capa" + $('#wrapper').width() + "ancho ventana " + $(window).width());
if ($('#wrapper').position().left!=0)
{
if ($(':animated').length) {
return false;
}
$('#wrapper').animate({left: '+=780'}, 1500, "easeOutQuad", function() {
});
}
});
});
//fade in//
$(function() {
$("#contenedorP").fadeIn(1000);
$('div').on('click', function(){
$('#flekdek').click();
return false;
});
});
//scroll everywhere//
(function($){
$(document).ready(function(){
$(".content").mCustomScrollbar({mouseWheel:true});
});
})(jQuery);
</script>
<script>
//MY fix div para izquierda derecha//
$('#fixed').bind('mousewheel', function(e){
var scrollTo= (e.wheelDelta*-1) + $('#wrapper').scrollTop();
$("#wrapper").scrollTop(scrollTo);
});
// ir al div elegido no funciona //
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
</script>
<script type="text/javascript">
$("#wrapper").mCustomScrollbar(
"vertical",200,"easeOutCirc",1.05,"auto","yes","yes",10
);
if (jQuery.browser.mobile == true) {
$("#wrapper").mCustomScrollbarMobile("vertical",200,5);
}
</script>
</head>
<body>
<!--flechas-->
<div id="flekizq" class="left_button"><img src="img/flecha_left.png" alt=""></DIV>
<div id="flekdek" class="right_button"><img src="img/flecha_right.png" alt=""></DIV>
<div id="top">
<h1 id="topmenu">menu</h1>
<div id="menutop">
<ul>
<li><a href="#div00" class="scroll">00</a></li>
<li><a href="#div04" class="scroll">01</a></li>
<li><a href="#div05" class="scroll">02</a></li>
<li><a href="#div06" class="scroll">03</a></li>
<li><a href="#div07" class="scroll">04</a></li>
<li><a href="#div08b" class="scroll">05</a></li>
<li><a href="#div08" class="scroll">06</a></li>
<li><a href="#div09" class="scroll">07</a></li>
<li><a href="#div10" class="scroll">08</a></li>
<li><a href="#div11" class="scroll">09</a></li>
<li><a href="#div12" class="scroll">10</a></li>
<li><a href="#div13" class="scroll">11</a></li>
</ul>
</div>
<div id="nextcopy">ENVIAR UN EMAIL</a></div>
</div>
<div id="contenedorP" class="fadeOnLoad">
<div id="wrapper">
<div class="post">
<div id="div00" class="content"></div>
<div id="div01" class="content">
<p><img src="img/C01.png" alt=""/></p>
</div>
</div>
<div class="post">
<div id="div02"class="content">
<p><img src="img/C02a.jpg" alt="" ></p>
<p><img src="img/C02c.jpg" alt="" ></p>
<p><img src="img/C02d.jpg" alt="" ></p>
<p><img src="img/C02formuoff.jpg" alt="" ></p>
<!--temp formulario-- ponerlo al final -->
<div id="contact-form">
<form id="contact" method="post" action="">
<fieldset>
<label for="name">Nombre</label>
<input type="text" name="name">
<label for="email">E-mail</label>
<input type="email" name="email">
<label for="phone">Tlf.</label>
<input type="text" name="phone">
<label for="website">Web Site</label>
<input type="url" name="url">
<label for="message">Su pregunta/Commentario</label>
<textarea name="message"></textarea>
<input type="submit" name="submit" id="submit" value="Send Message" />
</fieldset>
</form>
</div><!-- /end #contact-form -->
<p><img src="img/C02e.jpg" alt="" ></p>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</div>
<div class="post">
<div id="div03"class="content">
<p><img class="menuHover" src="img/menu/menuT.png" alt=""></p>
<p><a href="#div00" class="scroll"><img class="menuHover" src="img/menu/menu01.png" alt=""></a></p>
<p><a href="#div04" class="scroll"><img class="menuHover" src="img/menu/menu02.png" alt=""></a></p>
<p><a href="#div05" class="scroll"><img class="menuHover" src="img/menu/menu03.png" alt=""></a></p>
<p><a href="#div06" class="scroll"><img class="menuHover" src="img/menu/menu04.png" alt=""></a></p>
<p><a href="#div07" class="scroll"><img class="menuHover" src="img/menu/menu05.png" alt=""></a></p>
<p><a href="#div08b" class="scroll"><img class="menuHover" src="img/menu/menu06.png" alt=""></a></p>
<p><a href="#div08" class="scroll"><img class="menuHover" src="img/menu/menu07.png" alt=""></a></p>
<p><a href="#div09" class="scroll"><img class="menuHover" src="img/menu/menu08.png" alt=""></a></p>
<p><a href="#div10" class="scroll"><img class="menuHover" src="img/menu/menu09.png" alt=""></a></p>
<p><a href="#div11" class="scroll"><img class="menuHover" src="img/menu/menu10.png" alt=""></a></p>
<p><a href="#div12" class="scroll"><img class="menuHover" src="img/menu/menu11.png" alt=""></a></p>
<p><img class="menuHover" src="img/menu/menupie.png"alt=""></a></p>
</div>
</div>
<div class="post">
<div id="div04" class="content">
<p><img src="img/C04.jpg" alt="" ></p>
</div>
</div>
<div class="post">
<div id="div05" class="content">
<p><img src="img/C05.jpg" alt="" ></p>
</div>
</div>
<div class="post">
<div id="div06"class="content">
<p><img src="img/C06.jpg" alt="" ></p>
</div>
</div>
<div class="post">
<div id="div07"class="content">
<p><img src="img/C07.jpg" alt="" ></p>
</div>
</div>
<div class="post">
<div id="div08b"class="content">
<p><img src="img/equipo.png" alt=""></p>
<p class="E1rollover">xxxx</p>
<p class="E2rollover">xxxx</p>
<p class="E3rollover">xxx</p>
<p class="E4rollover">xxxxx</p>
<p class="E5rollover">xxxxx</p>
<p class="E6rollover">xxxx</p>
<p class="E7rollover">xxxx</p>
<p class="E8rollover">xxxxx</p>
<p class="E9rollover">xxxxx</p>
<p class="E10rollover">xxxxx</p>
</div>
</div>
<div class="post">
<div id="div03"class="content">
<p><img class="menuHover" src="img/menu/menuT.png" alt=""></p>
<p><a href="#div00" class="scroll"><img class="menuHover" src="img/menu/menu01.png" alt=""></a></p>
<p><a href="#div04" class="scroll"><img class="menuHover" src="img/menu/menu02.png" alt=""></a></p>
<p><a href="#div05" class="scroll"><img class="menuHover" src="img/menu/menu03.png" alt=""></a></p>
<p><a href="#div06" class="scroll"><img class="menuHover" src="img/menu/menu04.png" alt=""></a></p>
<p><a href="#div07" class="scroll"><img class="menuHover" src="img/menu/menu05.png" alt=""></a></p>
<p><a href="#div08b" class="scroll"><img class="menuHover" src="img/menu/menu06.png" alt=""></a></p>
<p><a href="#div08" class="scroll"><img class="menuHover" src="img/menu/menu07.png" alt=""></a></p>
<p><a href="#div09" class="scroll"><img class="menuHover" src="img/menu/menu08.png" alt=""></a></p>
<p><a href="#div10" class="scroll"><img class="menuHover" src="img/menu/menu09.png" alt=""></a></p>
<p><a href="#div11" class="scroll"><img class="menuHover" src="img/menu/menu10.png" alt=""></a></p>
<p><a href="#div12" class="scroll"><img class="menuHover" src="img/menu/menu11.png" alt=""></a></p>
<p><img class="menuHover" src="img/menu/menupie.png"alt=""></a></p>
</div>
</div>
<div class="post">
<div id="div08"class="content">
<p><img src="img/C08.jpg" alt="" ></p>
</div>
</div>
<div class="post">
<div id="div09"class="content">
<p><img src="img/C09.jpg" alt=""></p>
</div>
</div>
<div class="post">
<div id="div10"class="content">
<p><img src="img/C10.jpg" alt=""></p>
</div>
</div>
<div class="post">
<div id="div11"class="content" style="background:white">
<p><img src="img/videocab.jpg" alt=""></p>
<video id="example_video_1" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_corona.jpg" preload="auto" data-setup="{}" style="background:white">
<source type="video/mp4" src="videos/coronas.mp4"/>
<source type='video/webm' src="videos/coronas.webm"/>
</video>
<video id="example_video_2" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_real.jpg" preload="auto" data-setup="{}" style="background:white">
<source type="video/mp4" src="videos/real.mp4"/>
<source type='video/webm' src="videos/real.webm"/>
</video>
<video id="example_video_3" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_oriflame.jpg" preload="auto" data-setup="{}" style="background:white">
<source type="video/mp4" src="videos/globaldream.mp4"/>
<source type='video/webm' src="videos/globaldream.webm"/>
</video>
<video id="example_video_4" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_carnaval.jpg" preload="auto" data-setup="{}" style="background:white">
<source type="video/mp4" src="videos/carnaval.mp4"/>
<source type='video/webm' src="videos/carnaval.webm"/>
</video>
<video id="example_video_5" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_india.jpg" preload="auto" data-setup="{}" style="background:white">
<source type="video/mp4" src="videos/india.mp4"/>
<source type='video/webm' src="videos/india.webm"/>
</video>
<p><img src="img/cortina_video.png" alt=""></p>
<video id="example_video_6" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_traditions.jpg" preload="auto" data-setup="{}"style="background:white">
<source type="video/mp4" src="videos/tradition.mp4"/>
<source type='video/webm' src="videos/tradition.webm"/>
</video>
<video id="example_video_7" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_coronas2.jpg" preload="auto" data-setup="{}"style="background:white">
<source type="video/mp4" src="videos/coronas2.mp4"/>
<source type='video/webm' src="videos/coronas2.webm"/>
</video>
<video id="example_video_8" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_venecia.jpg" preload="auto" data-setup="{}"style="background:white">
<source type="video/mp4" src="videos/venecia.mp4"/>
<source type='video/webm' src="videos/venecia.webm"/>
</video>
<video id="example_video_9" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_suntory.jpg" preload="auto" data-setup="{}"style="background:white">
<source type="video/mp4" src="videos/suntory.mp4"/>
<source type='video/webm' src="videos/suntory.webm"/>
</video>
<video id="example_video_10" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_orangina.jpg" preload="auto" data-setup="{}"style="background:white">
<source type="video/mp4" src="videos/origina.mp4"/>
<source type='video/webm' src="videos/origina.webm"/>
</video>
</br>
</br>
</div>
</div>
<div class="post">
<div id="div12"class="content">
<p><img src="img/C12.jpg" alt=""></p>
</div>
</div>
<div class="post">
<div id="div13"class="content">
<p><img src="img/C13.jpg" alt=""></p>
</div>
</div>
</div>
</div>
<div id="footer" style="clear:both">
<!--Control wrapper DEKIZQ-->
<ul>
<!--li id="flekizq" align="center"><img src="img/flecha_left.png" alt=""></li>-->
<li id="fleknext"align="center"><img src="img/logopeke.png" alt=""></li>
<!--li id="flekdek" align="center"><img src="img/flecha_right.png" alt=""></li>-->
</ul>
<!--Control wrapper DEKIZQ-->
</div>
</body>
<script>
$(window).load(function() {
$(".content").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes");
});
</script>
</html>
My css:
html {
overflow: hidden;
}
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: white;
color: #999;
overflow-x: hidden;
background: url(../img/BG2.jpg) repeat;
}
#contenedorP{
display:none;
position:absolute;
left:0px;
}
#wrapper{
height:555px;
max-height:555px;
position: absolute;
left:0px;
-moz-box-shadow: 0px 6px 5px #888;
-webkit-box-shadow: 0px 6px 5px #888;
box-shadow: 0px 6px 5px #888;
margin-top:22px;
margin-bottom: 20px;
padding-top: 2px;
width: 4442px;
overflow:hidden;
background: white!important;
}
.left_button{
POSITION:fixed;
left:0px;
top:300px;
font-size:50px;
margin-left: 5px;
z-index:100;
opacity: 0.4;
}
.right_button{
POSITION:fixed;
right:0px;
top:300px;
font-size:50px;
margin-right:5px;
z-index:100;
opacity: 0.4;
}
.left_button:hover{
POSITION:fixed;
left:0px;
top:300px;
font-size:50px;
z-index:100;
opacity: 1;
}
.right_button:hover{
POSITION:fixed;
right:0px;
top:300px;
font-size:50px;
z-index:100;
opacity: 1;
}
#scroll_column{
display:none;
}
#div03{
background: #888888;
margin-right:5px;
}
.menuHover{
opacity: 1;
}
.menuHover:hover{
opacity: 0.4;
}
#fixed {
position: fixed;
right: 50%;
}
#menutop li{
color: grey;
text-align: center;
cursor: pointer;
display: inline-block;
margin-top: 6px;
margin-left:5px;
}
#menutop li a{
color: grey;
text-decoration: none;
}
#menutop li a:hover{
color: white;
}
#nextcopy{
font-size: 14px;
color: #C4C4C4;
padding-right:85px;
margin-right:5px;
margin-top: -10px;
float: right;
background: url(../img/top_mail.jpg) center right no-repeat;
}
#nextcopy a{
color: grey;
text-decoration: none;
}
#nextcopy a:hover{
color: white;
}
#footer{
left:0px;
margin-top: 5px;
width: 100%;
position: absolute;
top: 590px;
}
#footer li#fleknext{
text-align: center;
margin-top:4px;
}
li#flekdek, li#flekizq{
color: grey;
text-align: center;
cursor: pointer;
display: inline-block;
margin-top: 3px;
}
.mCustomScrollBox a img{
margin-right:-5px;
margin-top:15px;
}
img:hover{
cursor:pointer;
}
#top{
z-index:99;
background: black;
height:25px;
width: 100%;
position:fixed;
top:0px;
-moz-box-shadow: 3px #888;
-webkit-box-shadow:3px #888;
box-shadow: 3px #888;
}
h1#topmenu{
font-size: 14px;
color: #C4C4C4;
margin-left:25px;
padding-top: 3px;
float: left;
}
/*def*/
* {
margin: 0;
padding: 0;
}
tr {
vertical-align: top;
}
.post {
}
p {
font-size: 1.2em;
margin: 0 0 05px 0;
}
h2 {
font-family: Sans-serif;
font-size: 3.0em;
letter-spacing: -1px;
color: #ccc;
}
table, table td {
padding: 0; border-spacing: 1px}
/*Init Scrolll*/
{
margin: 0;
padding: 0;
}
.bsa_it_ad {
padding: 8px 4px 8px 12px !important;
position: relative;
border: 0 !important;
background: #D6D5D5 !important;
border-top: 0 !important;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
font: 11px "Lucida Grande", Sans-Serif !important;
}
.bsa_it_ad:before, .bsa_it_ad:after {
content: "";
position: absolute;
top: 0;
left: 6px;
width: 100%;
height: 100%;
background: #989898;
border-bottom: 6px solid #989898;
z-index: -1;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.content{
margin:0px;
margin-top: 2px;
height:610px;
max-height:610px;
padding:0px;
overflow:auto;
float:left;
/*background:#282828;
background:#121212;*/
}
.bsa_it_ad:before {
top: 0;
left: 12px;
z-index: -2;
background: #6C6666;
border-bottom: 12px solid #6C6666;
}
.bsa_it_ad a {
margin: 0 !important;
padding: 0 !important;
}
.bsa_it_ad a img {
border: 0 !important;
position: static !important;
}
.bsa_it_ad a:hover img {
margin: 0 !important;
}
.bsa_it_ad a:hover {
background: none !important;
}
.bsa_it_i {
margin: 0 15px 0 0 !important;
}
.bsa_it_t {
font-size: 14px !important;
margin: 12px 0 0 0 !important;
}
.bsa_it_d {
padding-right: 10px;
}
.bsa_it_p{
display: none !important;
}
#demo-bar-ad {
width: 416px;
position: absolute;
right: 0;
top: -20px;
font: 11px "Lucida Grande", Sans-Serif !important;
}
#bsap_aplink {
position: absolute;
color: #999;
text-decoration: none;
bottom: 8px !important;
right: 8px !important;
padding: 0 !important;
}
.bsa_it_p a:hover {
background:none !important;
}
#demo-top-bar {
text-align: left;
background: #e18728;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
box-shadow: 0 0 10px black;
padding: 20px 0 15px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
}
#demo-top-bar:before, #demo-top-bar:after {
content: "";
position: absolute;
top: 0;
left: 6px;
width: 100%;
height: 100%;
background: #e18728;
border-bottom: 6px solid #8F5314;
z-index: -1;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#demo-top-bar:before {
top: 0;
left: 12px;
background: #6C6666;
border-bottom: 12px solid #62390E;
}
#demo-bar-buttons {
display: inline-block;
width: 236px;
text-align: center;
vertical-align: top;
font-size: 0;
}
#demo-bar-buttons a {
font-size: 12px;
color: white;
display: block;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
color: #333;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
/*Formulario*/
/*-------------------------------------
FORM CORE
------------------------------------------*/
form#contact fieldset {
padding: 10px 20px 20px 20px;
margin: 0 auto;
border: 0;
background-color: #fff;
width: 290px;
text-align: left;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-moz-box-shadow: 0px 0px 10px #d3d3d3;
-webkit-box-shadow: 0px 2px 10px #d3d3d3;
box-shadow: 0px 0px 10px #d3d3d3;
}
form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea {
margin: 3px 0 0 0;
padding: 6px;
width: 260px;
font-family: arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}
form#contact textarea {
width: 275px;
height: 150px;
}
form#contact label {
display: block;
font-size: 13px;
color: #666;
margin-top: 10px;
font-weight: bold;
}
form#contact label.error {
width: 270px;
margin: 3px 0 0 0;
display: block;
color: #cf0101;
font-size: 11px;
text-align: right;
}
form#contact .placeholder {
color: #aaa;
}
form#contact .button {
display: inline-block;
margin: 15px 0 0 90px;
padding: 5px 15px 5px 15px;
background-color: #ff9e00;
border: none;
color: #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
form#contact .button:hover {
background-color: #fc8500;
cursor: pointer;
}
form#contact .button:active {
margin-top: 16px;
background-color: #f08004;
cursor: pointer;
}
972
Call
$(".content").mCustomScrollbar()
just once, after that, only update it. Also, be sure to call this function after the table is generated...the code is confusing, multiple readys...
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
