I created a simple html business presentation page, nothing special with pagePiling.js, and for the sidebar I chose the semantic ui-sidebar.
Everything works fine in different browsers with different doctrines. I do not know what to change. If I leave doctype, chrome will display everything correctly. But Mozilla Firefox needs a doctype for jquery to return the right window.size. When I installed, the sidebar stops working.
Problem: without doctype everything works, but firefox does not execute the jquery window.height () command correctly.
Problem: with Doctype html mozilla works correctly, but the sidebar plugin stops working correctly.
Following html construct with remote content. Anyone help please?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>pagePiling.js plugin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="js/pagePiling.js-master/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/pagePiling/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" href="http://studentcouch.de/sidebar.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://alvarotrigo.com/pagePiling/jquery.pagepiling.min.js"></script>
<script type="text/javascript" src="http://studentcouch.de/sidebar.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],
sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5', 'Page 6', 'Page 7', 'Page 8']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$("#page5image").height($(window).height()*0.7);
$('html').click(function(){
$('#examplesList').hide();
});
$('.sidebartoggle').click(function() {
$('.ui.sidebar').sidebar('show');
});
});
</script>
<style>
.sidebartoggle {
}
}
#pp-nav.custom .pp-tooltip{
color: #AAA;
}
#markup{
display: block;
width: 450px;
margin: 20px auto;
text-align: left;
}
</style>
</head>
<body>
<div class="ui right vertical sidebar">
<ul class="navside">
<li> <a href="/">Support</a></li>
<li> <a href="/">Team</a></li>
<li> <a href="/">Jobs</a></li>
<li> <a href="/">Kontakt</a></li>
</ul>
</div>
<div class="pusher">
<div style="background-color:white" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><img src="" style="height:50px"/></div>
<ul class="nav navbar-nav">
<li><a href="#">Login </a></li>
<li><a href="#">Registrierung</a></li>
</ul>
<ul id="menu" class="nav navbar-nav navbar-right">
<li data-menuanchor="page1"><a href="#page1">Käufer</a></li>
<li data-menuanchor="page2"> <a href="#page2">Händler</a></li>
<li data-menuanchor="page3"> <a href="#page3">Support</a></li>
<li><a href="#" class="sidebartoggle">Menü</a></li>
</ul>
</div>
</div>
<div id="pagepiling">
<div id="section1" class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Side one</h1>
</div>
</div>
</div>
</div>
<div id="section2" class="section">
<div class="row">
<div class="col-md-6">
<h1> side two </h1>
<img id="page5image" class="center" src="http://studentcouch.de/device_page5.png" style="display:block;" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>