pagePiling.js
pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections.
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?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>pagePiling.js plugin</title>
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" rel='nofollow' href="js/pagePiling.js-master/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" rel='nofollow' href="http://alvarotrigo.com/pagePiling/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" rel='nofollow' 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 rel='nofollow' href="/">Support</a></li>
<li> <a rel='nofollow' href="/">Team</a></li>
<li> <a rel='nofollow' href="/">Jobs</a></li>
<li> <a rel='nofollow' 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 rel='nofollow' href="#">Login </a></li>
<li><a rel='nofollow' href="#">Registrierung</a></li>
</ul>
<ul id="menu" class="nav navbar-nav navbar-right">
<li data-menuanchor="page1"><a rel='nofollow' href="#page1">Käufer</a></li>
<li data-menuanchor="page2"> <a rel='nofollow' href="#page2">Händler</a></li>
<li data-menuanchor="page3"> <a rel='nofollow' href="#page3">Support</a></li>
<li><a rel='nofollow' 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>
Source: (StackOverflow)
there
I have been using the pagePiling.js library for creating a scrollable website, and used the pp-scrollable class for allowing scroll for contents that are huge so that the user can scroll through the section content before moving on to another section.
The functionality is working fine on desktop browsers but isn't working on mobile browsers.
Has anyone had any similar issues with the plugins, if so please any help or tips is welcome.
Thanks,
Source: (StackOverflow)
I was wondering if it is possible in pagePiling.js to add a stop once the top/bottom of a section has been reached?
My main issue, is using the touch pad on a MBPro, if you scroll quickly it will hit the top/bottom of a section and quickly transition to the next section. I would, instead, like for it to stop when reaching a top/bottom boundary, and then require an additional scroll to make the transition.
EDIT: Normal sections do have somewhat of a delay, the problem is on sections using the .pp-scrollable where scrolling to the top/bottom of a section will quickly transition to the next section. It would be nice, if in the .pp-scrollable sections, an additional scroll is needed to proceed to a different section.
Source: (StackOverflow)
I'm very new to javascript and so I may be using the wrong type of plugin for my page, but I really like this effect and my assignment is due Monday.
The assignment requires that the site degrades gracefully to 1024px width. Which it mostly does except on laptops and possibly tablets (I don't have one so I can't test) that have a wide horizon and shorter vertical.
The plugin is vertically centred and so on the smaller sizing my content collides with my menu and to a lesser degree the footer.
I can't seem to find how the plug in is centering vertically or how to change it. Possibly there is a better way to handle this problem.
If you see a way to help me, I would really appreciate it.
Thanks.
www.helencrolls.com
Source: (StackOverflow)