4
Я создал простую страницу бизнес-презентации html, ничего особенного с pagePiling.js, а для боковой панели я выбрал семантическую ui-sidebar.Правильный Doctype с помощью Semantic Ui Sidebar - разные браузеры
Все работает отлично в разных браузерах с различными доктринами. Я не знаю, что измениться. Если я оставлю doctype, хром отобразит все правильно. Но Mozilla Firefox нуждается в doctype, чтобы jquery вернул правый window.size. Когда я устанавливаю, боковая панель перестает работать.
Проблема: без doctype все работает, но firefox не выполняет команду jquery window.height() правильно.
Проблема: с Doctype html mozilla работает правильно, но плагин боковой панели перестает работать правильно.
После сборки html с удаленным контентом. Кто-нибудь помогает, пожалуйста?
<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() {
/*
* Plugin intialization
*/
$('#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');
}
}
});
/*
* Internal use of the demo website
*/
$('#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 {
}
/* Section 1
* --------------------------------------- */
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#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>
Предоставьте способ воспроизвести проблему. Мы не знаем, что делает 'sidebar.js' ... Попробуйте воспроизвести его [здесь] (http://jsfiddle.net/97tbk/418/). – Alvaro
Проверка подлинности вашего HTML заканчивается на: Line 120, Column 14: Stray end tag div. Избавьтесь от этого и снова проверьте пожалуйста – ggzone
Вот скрипка http://jsfiddle.net/97tbk/590//Im, использующая pagePiling.js и semantic-ui-sidebar. В скрипке семантическая боковая панель ui не работает, я не знаю почему. Локально без доктрины все работает отлично. – gope