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.

  1. Problem: Without doctype everything works, but firefox doesnt execute jquery command window.height() correct.

  2. 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;
            }

        
    
    
        
            
        
        
            
                
                    
                    
                    
                
            
            
                
                    
                        
                            
                                

Side one

                            
                        
                    
                
                
                        
                            
                                

side two