Correct Doctype with Semantic Ui Sidebar – different browsers-open source projects Semantic-Org/Semantic-UI
I’ve created a simple html business presentation page, nothing special with pagePiling.js and for sidebar i chose semantic-ui-sidebar.
Everything works fine in different browsers with different doctypes. I don’t know what to change. If i leave the doctype chrome will display everything correctly. But Mozilla Firefox needs doctype so that jquery will return the right window.size. When i set , the sidebar stops working.
-
Problem: Without doctype everything works, but firefox doesnt execute jquery command window.height() correct.
-
Problem: With Doctype html mozilla works correct but the sidebar plugin stops working correctly.
Following the html construct with deleted content. Somebody help please?
pagePiling.js plugin
$(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');
});
});
.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;
}