Skip to content
This repository has been archived by the owner on Jun 9, 2021. It is now read-only.

Visibility mode added #137

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Visibility mode added #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions jquery.nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
scrollChange: false,
visibility: false
},

init: function() {
Expand All @@ -71,6 +72,20 @@
//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

//Hide sections except the frist one, if visibility mode is set to true
if (this.config.visibility == true) {
var i = 0;
for (var s in this.sections) {
var sec = '#' + s;
if (i == 0) {
$(sec).show();
} else {
$(sec).hide();
}
i++;
}
}

return this;
},

Expand Down Expand Up @@ -144,6 +159,18 @@
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);

//If visibility mode is set to true: Show the selected section and hide all others
if (this.config.visibility == true) {
for (var s in self.sections) {
var sec = '#' + s;
if (sec == newLoc) {
$(sec).show();
} else {
$(sec).hide();
}
}
}

if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
Expand Down Expand Up @@ -220,4 +247,4 @@
});
};

})( jQuery, window , document );
})( jQuery, window , document );
49 changes: 49 additions & 0 deletions visibilitytest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery One Page Nav</title>
<link href="demo.css" rel="stylesheet" media="all">
</head>

<body>
<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="http://google.com" class="external">Some other link</a></li>
</ul>

<div id="container">
<div class="section" id="section-1">
<h1>Filter Out Links</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="section" id="section-2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="section" id="section-3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<!--[if lte IE 8]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
<!--[if gt IE 8]><!--><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--<![endif]-->
<script src="jquery.nav.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav({
filter: ':not(.external)',
visibility: true,
});
});
</script>
</body>
</html>