Hi everybody,
I've developed my APP with phonegap-cordova...everythings is ok but my APP's menu scrolls only on Galaxy S3,S4, Note 10 and not on Ace and S1 ( I could test my APP only on these devices)....attached you can find the HTML page and the relative CSS code. Any helps or hints is welcome
Thanks in advance
Cheers
Claudio
HTML CODE :
AND STYLE.CSS CODE:
I've developed my APP with phonegap-cordova...everythings is ok but my APP's menu scrolls only on Galaxy S3,S4, Note 10 and not on Ace and S1 ( I could test my APP only on these devices)....attached you can find the HTML page and the relative CSS code. Any helps or hints is welcome
Thanks in advance
Cheers
Claudio
HTML CODE :
HTML:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My APP</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/framework.css" rel="stylesheet" type="text/css">
<link href="styles/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" rel="stylesheet" type="text/css">
<link href="styles/swipebox.css" rel="stylesheet" type="text/css">
<link href="styles/colorbox.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-shortcuts">
<a href="tel:---" class="shortcut-call"></a>
<a href="---" class="shortcut-facebook"></a>
<a href="#" class="shortcut-close"></a>
</div>
<div class="sidebar-logo">
<img src="images/misc/logo.png" height="56" alt="img">
</div>
<div class="sidebar-breadcrumb">MENU</div>
<div class="navigation-item">
<a href="index.html" class="nav-item home-icon">Home<em class="unselected-item"></em></a>
</div>
<div class="navigation-item">
<a href="contact.html" class="nav-item info-icon">Info & Contatti<em class="unselected-item"></em></a>
</div>
<div class="navigation-item">
<a href="bum.html" class="nav-item appointment-icon">Prenota con BUM<em class="unselected-item"></em></a>
</div>
<div class="sidebar-decoration"></div>
<div class="navigation-item">
<a href="impostazioni.html" class="nav-item features-icon">Impostazioni<em class="unselected-item"></em></a>
</div>
<div class="sidebar-breadcrumb">SCUOLA CALCIO</div>
<div class="navigation-item">
<a href="#" class="nav-item features-icon submenu-deploy">Pulcini<em class="dropdown-item"></em></a>
<div class="nav-submenu">
<a href="comunicati_p.html"> Comunicati <em class="unselected-item"></em></a>
<a href="rose_p.html"> Rose <em class="unselected-item"></em></a>
<a href="risultati_p.html"> Risultati <em class="unselected-item"></em></a>
</div>
</div>
<div class="sidebar-breadcrumb">APP CREATA DA -----<br>COPYRIGHT 2014. ALL RIGHTS RESERVED!</br></div>
</div>
</div>
<div id="content" class="page-content">
<div class="page-header">
<a href="#" class="deploy-sidebar"></a>
<img class="header-logo" src="images/misc/logo-header.png" width="121" alt="img">
<a href="#" class="deploy-contact"></a>
</div>
<div class="content">
<div class="decoration"></div>
<div class="container no-bottom">
<img src="img/logo_accademia.png" class="responsive-image2" alt="img">
<h3>Benvenuto Bomber!</h3>
<p>
text
</p>
</div>
</div>
</div>
</body>
</html>AND STYLE.CSS CODE:
Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: 34495e; /* for the tint */
}
.overlay{
pointer-events:none;
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
z-index:9999;
}
.all-elements{
overflow-x:hidden;
}
.page-content{
background-color:#FFFFFF;
z-index:10;
display:block;
min-height:580px;
}
.page-content-wrapper{
display:block;
margin-top:0px;
margin-bottom:0px;
padding:20px;
padding-bottom:15px;
}
.page-sidebar{
background-image:url(../images/misc/menu-bg.png);
background-repeat:repeat;
background-size:75px 75px;
width:274px;
display:block;
position:absolute;
z-index:2;
top:0px;
left:0px;
bottom:0px;
overflow:hidden;
position:fixed;
}
.page-sidebar-scroll{
z-index:2;
width:294px;
overflow: scroll;
overflow-x: hidden;
/* -webkit-overflow-scrolling: touch;*/
height:100%;
}
/*Content Controls*/
.homepage-slider{
z-index:9;
margin-top:-50px;
}
.content-controls{
z-index:15;
height:50px;
}
.sidebar-shortcuts{
background-color:#1e1e1e;
height:50px;
border-bottom:solid 1px #2a2a2a;
}
.sidebar-shortcuts a{
opacity:0.8;
}
.sidebar-shortcuts a:hover{
background-color:rgba(255,255,255,0.1);
}
.shortcut-call{
background-image:url(../images/misc/shortcut_phone.png);
background-position:16px 11px;
background-repeat:no-repeat;
background-size:25px 25px;
width:58px;
height:50px;
position:absolute;
border-right:solid 1px rgba(0,0,0,0.2);
border-bottom:solid 1px rgba(0,0,0,0.2);
}
.shortcut-facebook{
background-image:url(../images/misc/shortcut_facebook.png);
background-position:16px 11px;
background-repeat:no-repeat;
background-size:27px 27px;
left:52px;
width:58px;
height:50px;
position:absolute;
border-right:solid 1px rgba(0,0,0,0.2);
border-bottom:solid 1px rgba(0,0,0,0.2);
}
.shortcut-twitter{
background-image:url(../images/misc/shortcut_twitter.png);
background-position:17px 11px;
background-repeat:no-repeat;
background-size:0px 0px;
left:105px;
width:58px;
height:50px;
position:absolute;
border-right:solid 1px rgba(0,0,0,0.2);
border-bottom:solid 1px rgba(0,0,0,0.2);
}
.shortcut-search{
background-image:url(../images/misc/shortcut_magnifier.png);
background-position:16px 12px;
background-repeat:no-repeat;
background-size:27px 27px;
left:160px;
width:58px;
height:50px;
position:absolute;
border-right:solid 1px rgba(0,0,0,0.2);
border-bottom:solid 1px rgba(0,0,0,0.2);
}
.shortcut-close{
background-image:url(../images/misc/shortcut_close.png);
background-position:17px 12px;
background-repeat:no-repeat;
background-size:25px 25px;
left:105px;
width:58px;
height:50px;
position:absolute;
border-right:solid 1px rgba(0,0,0,0.2);
border-bottom:solid 1px rgba(0,0,0,0.2);
}
.sidebar-search{
background-color:#1e1e1e;
height:50px;
border-bottom:solid 1px #2a2a2a;
display:none;
}
.search-field{
width:190px;
background-color:#1a1a19;
height:33px;
border-radius:33px;
border:solid 1px #181819;
line-height:33px;
color:#515050;
background-image:url(../images/misc/shortcut_magnifier.png);
background-repeat:no-repeat;
background-size:22px 22px;
background-position:10px 5px;
padding-left:40px;
margin-left:10px;
margin-top:8px;
}
.search-close{
margin-right:12px;
background-position:10px 0px;
float:right;
background-image:url(../images/misc/shortcut_close.png);
background-repeat:no-repeat;
height:50px;
width:50px;
background-size:25px 25px;
margin-top:-29px;
opacity:0.8;
}
.sidebar-logo{
padding-top:10px;
padding-left:25px;
margin-bottom:10px;
}
.sidebar-breadcrumb{
border-top:solid 1px rgba(255,255,255,0.05);
border-bottom:solid 1px rgba(255,255,255,0.05);
background-color:#1a1a1a;
font-size:10px;
padding-top:5px;
padding-bottom:5px;
padding-left:20px;
}
.sidebar-decoration{
height:2px;
background-color:rgba(0,0,0,0.15);
border-bottom:solid 1px rgba(255,255,255,0.07);
}
.nav-submenu a:first-child{
margin-top:-1px;
}
.nav-submenu a:last-child{
border-bottom:solid 0px #000000!important;
}
.nav-submenu a{
border-top:solid 1px rgba(255,255,255,0.05);
border-bottom:solid 1px rgba(0,0,0,0.1);
line-height:55px;
padding-left:60px;
background-image:url(../images/misc/nav-submenu.png);
background-repeat:no-repeat;
background-size:8px 8px;
background-position:30px 24px;
color:rgba(255,255,255,0.4);
}
.nav-submenu{
display:none;
}
.navigation-item .sidebar-decoration{
display:none;
}
.active-submenu{
display:block;
}
.nav-item{
height:55px;
border-bottom:solid 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 0 0px rgba(255,255,255,0.05);
}
.nav-item:hover{
background-color:rgba(255,255,255,0.05);
}
.nav-submenu a:hover{
background-color:rgba(255,255,255,0.05);
}
.nav-submenug a:hover{
background-color:rgba(255,191,0,0.05);
}
.selected-item{
position:absolute;
width:10px;
height:10px;
border-radius:10px;
background-color:#2ecc71;
right:45px;
margin-top:23px;
}
.unselected-item{
position:absolute;
width:8px;
height:8px;
border-radius:8px;
background-color:rgba(255,255,255,0.08);
right:47px;
margin-top:23px;
}
.dropdown-item{
background-image:url(../images/misc/nav-dropdown.png)!important;
background-size:14px 13px;
position:absolute;
width:14px;
height:14px;
right:45px;
margin-top:23px;
}
.submenu-deploy em{
background-image:url(../images/misc/nav-dropup.png);
background-size:14px 13px;
position:absolute;
width:14px;
height:14px;
right:45px;
margin-top:23px;
}
.link-item{
background-image:url(../images/misc/nav-link.png);
background-size:14px 13px;
position:absolute;
width:14px;
height:14px;
right:45px;
margin-top:23px;
}
.nav-item{
opacity:0.8;
background-position:20px 15px;
background-size:25px 25px;
background-repeat:no-repeat;
color:#FF0000;
font-size:12px;
padding-left:60px;
line-height:55px;
}
.nav-itemx{
opacity:0.8;
background-position:20px 15px;
background-size:25px 25px;
background-repeat:no-repeat;
color:#FFFFFF;
font-size:12px;
padding-left:60px;
line-height:55px;
}
.nav-itemg{
opacity:0.8;
background-position:20px 15px;
background-size:25px 25px;
background-repeat:no-repeat;
color:#FFA500;
font-size:14px;
padding-left:60px;
line-height:55px;
}
.nav-itemb{
opacity:0.8;
background-position:20px 15px;
background-size:25px 25px;
background-repeat:no-repeat;
color:#007FFF;
font-size:12px;
padding-left:60px;
line-height:55px;
}
.nav-itemv{
opacity:0.8;
background-position:20px 15px;
background-size:25px 25px;
background-repeat:no-repeat;
color:#03C03C;
font-size:12px;
padding-left:60px;
line-height:55px;
}
.dropdown-item{
background-image:url(../images/misc/nav-dropdown.png);
}
.home-icon{
background-image:url(../images/icons/misc/home.png);
}
.features-icon{
background-image:url(../images/icons/settings/cog2.png);
}
.features-iconx{
background-image:url(../images/icons/misc/cup.png);
}
.features-iconxx{
background-image:url(../images/icons/user/group.png);
}
.gallery-icon{
background-image:url(../images/icons/media/image2.png);
}
.info-icon{
background-image:url(../images/icons/misc/infoabout.png);
}
.appointment-icon{
background-image:url(../images/icons/time/monthcalendar.png);
}
.facebook-icon{
background-size:17px 17px;
background-position:25px 19px;
background-image:url(../images/misc/social/facebook.png);
}
.twitter-icon{
background-size:17px 17px;
background-position:25px 19px;
background-image:url(../images/misc/social/twitter.png);
}
.google-icon{
background-size:17px 17px;
background-position:25px 19px;
background-image:url(../images/misc/social/google.png);
}
.info-update{
background-image:url(../images/misc/notification-blue.png);
background-size:42px 42px;
background-position:20px 0px;
background-repeat:no-repeat;
height:50px;
padding-left:80px;
}
.notification-update{
background-image:url(../images/misc/notification-yellow.png);
background-size:42px 42px;
background-position:20px 0px;
background-repeat:no-repeat;
height:50px;
padding-left:80px;
}
.warning-update{
background-image:url(../images/misc/notification-red.png);
background-size:42px 42px;
background-position:20px 0px;
background-repeat:no-repeat;
height:50px;
padding-left:80px;
}
.tick-update{
background-image:url(../images/misc/notification-green.png);
background-size:42px 42px;
background-position:20px 0px;
background-repeat:no-repeat;
height:50px;
padding-left:80px;
}
.page-update{
margin-top:15px;
margin-bottom:10px;
}
.page-update strong{
color:rgba(255,255,255,0.6);
display:block;
}
.page-update em{
color:rgba(255,255,255,0.4);
display:block;
font-size:10px;
font-style:normal;
}
.update-icon{
background-image:url(../images/misc/nav-dropdown.png);
background-size:14px 14px;
background-repeat:no-repeat;
position:absolute;
right:45px;
margin-top:12px;
width:14px;
height:14px;
}
.active-update-icon{
background-image:url(../images/misc/nav-dropup.png)!important;
}
.page-update-text{
color:rgba(255,255,255,0.5);
font-size:12px;
width:220px;
margin-left:auto;
margin-right:auto;
}
.page-update-text{
display:none;
}
.page-header{
background-color:#1e1e1e;
height:49px;
width:100%;
position:fixed;
z-index:999999;
}
.page-header-clear{
height:49px;
}
.header-logo{
width:111px;
margin-left:auto;
margin-right:auto;
margin-top:-38px;
}
.deploy-sidebar{
background-image:url(../images/misc/deploy-nav.png);
background-size:18px 12px;
background-repeat:no-repeat;
background-position:16px 18px;
height:50px;
width:50px;
opacity:0.8;
}
.deploy-sidebar:hover{
background-color:rgba(255,255,255,0.1);
}
.deploy-contact{
background-image:url(../images/icons/settings/cog2.png);
background-size:28px 22px;
background-repeat:no-repeat;
background-position:18px 18px;
height:50px;
width:50px;
float:right;
margin-top:-53px;
opacity:0.8;
}
.deploy-contact:hover{
background-color:rgba(255,255,255,0.1);
}
/*About Faces / Quotes */
.quote-item em{
text-align:center;
display:block;
color:#e34e47;
margin-bottom:10px;
}
.quote-item h4{
text-align:center;
margin-bottom:0px;
}
.quote-item strong{
text-align:center;
font-style:normal;
font-weight:400;
display:block;
width:250px;
margin-left:auto;
margin-right:auto;
}
.quote-item img{
border-radius:100px;
width:100px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
/*Thumbnails Columns*/
.thumb-clear{
height:20px;
display:block;
width:100%;
}
.thumb-left{
display:block;
padding-bottom:10px;
}
.thumb-left a{
display:block;
text-align:right;
}
.thumb-left img{
width:100px;
height:100px;
border-radius:100px;
float:left;
margin-right:20px;
}
.thumb-left strong{
color:#1a1a1a;
display:inline-block;
padding-top:5px;
padding-bottom:5px;
font-size:13px;
}
.thumb-left em{
font-style:normal;
}
.thumb-right{
display:block;
padding-bottom:10px;
}
.thumb-right img{
width:100px;
height:100px;
border-radius:100px;
float:right;
margin-left:20px;
}
.thumb-right strong{
color:#1a1a1a;
display:inline-block;
padding-top:5px;
padding-bottom:5px;
font-size:13px;
}
.thumb-right em{
font-style:normal;
}
.customer-slider div a img{
width:40px;
margin-left:auto;
margin-right:auto;
}
/*Social Boxes*/
.facebook-box{
background-image:url(../images/misc/social/facebook.png);
background-size:26px 23px;
background-repeat:no-repeat;
background-position:10px 10px;
background-color:#3b5998;
height:40px;
line-height:40px;
color:#FFFFFF;
padding-left:60px;
margin-bottom:20px;
}
.social-box em{
position:absolute;
height:40px;
width:1px;
background-color:#FFFFFF;
margin-left:-15px;
}
.social-box:hover{
opacity:0.9;
}
.twitter-box{
background-image:url(../images/misc/shortcut_phone.png);
background-size:20px 17px;
background-repeat:no-repeat;
background-position:12px 13px;
background-color:#4099ff;
height:40px;
line-height:40px;
color:#FFFFFF;
padding-left:60px;
margin-bottom:20px;
}
.google-box{
background-image:url(../images/icons/time/monthcalendar.png);
background-size:20px 17px;
background-repeat:no-repeat;
background-position:12px 13px;
background-color:#d34836;
height:40px;
line-height:40px;
color:#FFFFFF;
padding-left:60px;
margin-bottom:20px;
}
/*Footer Socials*/
.copyright{
font-size:10px;
}
.footer-socials{
width:110px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
.footer-socials a{
float:left;
margin-left:5px;
margin-right:5px;
}
.facebook-footer{
background-image:url(../images/misc/facebook.png);
background-repeat:no-repeat;
background-size:25px 26px;
height:25px;
width:25px;
}
.goup-footer{
background-image:url(../images/misc/goup.png);
background-repeat:no-repeat;
background-size:25px 25px;
height:25px;
width:25px;
}
.twitter-footer{
background-image:url(../images/misc/twitter.png);
background-repeat:no-repeat;
background-size:25px 25px;
height:25px;
width:25px;
}
/*Wide Portfolio*/
.wide-active{
margin-top:20px;
display:none;
}
.wide-item-wrapper{
background-color:#FFFFFF;
padding-bottom:1px;
margin-top:3px;
}
.wide-folio{
margin-top:-17px;
margin-bottom:20px;
}
.wide-item{
margin-bottom:3px;
}
.wide-item .responsive-image{
margin-bottom:0px;
}
.responsive-image2{
margin-bottom:0px;
margin-top:15px;
max-width:100%;
max-height:100%;
}
.wide-image{
max-height:100px;
overflow:hidden;
}
.wide-item-titles{
position:relative;
z-index:99999;
top:30px;
margin-bottom:-45px;
pointer-events:none;
}
.wide-item-titles h4{
font-family:'Open Sans', sans-serif;
font-weight:200;
font-size:16px;
text-transform:uppercase;
color:#FFFFFF;
position:relative;
z-index:999999;
text-align:center;
margin-bottom:5px;
}
.wide-item-titles p{
color:#FFFFFF;
margin-bottom:0px;
color:rgba(255,255,255,0.5);
text-align:center;
position:relative;
z-index:999999;
}
.wide-item-content{
display:none;
margin-top:20px;
margin-left:20px;
margin-right:20px;
}
@media (min-width:760px) {
.wide-image{
max-height:150px;
}
.wide-item-titles{
top:55px;
margin-bottom:-45px;
}
}
.contact-call{
padding-top:5px;
color:#666;
padding-left:30px;
background-image:url(../images/misc/contact_phone.png);
background-position:0px 5px;
background-repeat:no-repeat;
background-size:18px 18px;
height:30px;
display:block;
}
.contact-text{
color:#666;
margin-bottom:5px;
padding-left:30px;
background-image:url(../images/misc/contact_message.png);
background-position:0px 2px;
background-repeat:no-repeat;
background-size:18px 18px;
height:20px;
display:block;
margin-bottom:2px;
}
.contact-mail{
color:#666;
margin-bottom:5px;
padding-left:30px;
background-image:url(../images/misc/contact_mail.png);
background-position:3px 3px;
background-repeat:no-repeat;
background-size:14px 14px;
height:20px;
display:block;
margin-top:5px;
margin-bottom:2px;
}
.contact-facebook{
color:#666;
margin-bottom:5px;
padding-left:30px;
background-image:url(../images/misc/contact_facebook.png);
background-position:0px 0px;
background-repeat:no-repeat;
background-size:20px 20px;
height:20px;
display:block;
margin-top:5px;
margin-bottom:2px;
}
.contact-twitter{
color:#666;
margin-bottom:5px;
padding-left:30px;
background-image:url(../images/misc/contact_twitter.png);
background-position:0px 0px;
background-repeat:no-repeat;
background-size:20px 20px;
height:20px;
display:block;
margin-top:5px;
margin-bottom:2px;
}