Skip to content

Instantly share code, notes, and snippets.

@Code-Crash

Code-Crash/A-Pen-by-Pravin.markdown

Last active August 29, 2015 13:56
Show Gist options
  • Save Code-Crash/9019857 to your computer and use it in GitHub Desktop.
Save Code-Crash/9019857 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Pravin.
Raw
index.html
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div class="container">
<header id="header">
<div class="container1">
<div class="site_name">
Welcome to self Navigation Demo
</div>
</div>
</header>
<ul class="nav">
<li><a href="#section1">Image 1</a></li>
<li><a href="#section2">Image 2</a></li>
<li><a href="#section3">Image 3</a></li>
<li><a href="#section4">Image 4</a></li>
<li><a href="#section5">Image 5</a></li>
</ul>
<div class="manage_center">
<section class="center" id="section1">
<img src="http://i.imgur.com/TgVZjU4.jpg" height="100%" width="100%"/>
</section>
</div>
<div class="manage_center">
<section class="center" id="section2">
<img src="http://i.imgur.com/umbxbJ6.jpg" height="100%" width="100%"/>
</section>
</div>
<div class="manage_center">
<section class="center" id="section3">
<img src="http://i.imgur.com/fb2GcsM.jpg"height="100%" width="100%" />
</section></div>
<div class="manage_center">
<section class="center" id="section4">
<img src="http://i.imgur.com/5nVUYOV.jpg"height="100%" width="100%"/>
</section></div>
<div class="manage_center">
<section class="center" id="section5">
<img src="http://i.imgur.com/bS5gvpM.jpg" height="100%" width="100%"/>
</section></div>
<!--<div class="op">
<div class="ch1"></div>
<div class="ch2">Hello</div>
</div>-->
<footer id="footer">
<div class="container1">
Welcome
</div>
</footer>
</div>
</body>
</html>
Raw
script.js
(function($) {
var version = '1.4.13',
optionOverrides = {},
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
// one of 'top' or 'left'
direction: 'top',
// jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollElement: null,
// only use if you want to override default behavior
scrollTarget: null,
// fn(opts) function to be called before scrolling occurs.
// `this` is the element(s) being scrolled
beforeScroll: function() {},
// fn(opts) function to be called after scrolling occurs.
// `this` is the triggering element
afterScroll: function() {},
easing: 'swing',
speed: 400,
// coefficient for "auto" speed
autoCoefficent: 2,
// $.fn.smoothScroll only: whether to prevent the default click action
preventDefault: true
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options, extra) {
options = options || {};
if ( options === 'options' ) {
if ( !extra ) {
return this.first().data('ssOpts');
}
return this.each(function() {
var $this = $(this),
opts = $.extend($this.data('ssOpts') || {}, extra);
$(this).data('ssOpts', opts);
});
}
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
thisOpts = $.extend({}, opts, $link.data('ssOpts') || {}),
exclude = opts.exclude,
excludeWithin = thisOpts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = thisOpts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !thisOpts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
if ( thisOpts.preventDefault ) {
event.preventDefault();
}
$.extend( clickOpts, thisOpts, {
scrollTarget: thisOpts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
if ( options === 'options' && typeof px === 'object' ) {
return $.extend(optionOverrides, px);
}
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if (typeof options === 'number') {
opts = $.extend({link: null}, $.fn.smoothScroll.defaults, optionOverrides);
scrollTargetOffset = options;
} else {
opts = $.extend({link: null}, $.fn.smoothScroll.defaults, options || {}, optionOverrides);
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
}
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
if ( !(/^(?:HTML|BODY)$/).test($scroller[0].nodeName) ) {
scrollerOffset = $scroller[scrollDir]();
}
} else {
$scroller = $('html, body').firstScrollable(opts.direction);
}
// beforeScroll callback function must fire before calculating offset
opts.beforeScroll.call($scroller, opts);
scrollTargetOffset = (typeof options === 'number') ? options :
px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(?:index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
$(document).ready(function() {
$('ul.nav a').smoothScroll();
});
Raw
style.css
*{
margin:0;
padding:0;
text-decoration:none;
font-family:sans-serif,Calibri;font-weight:bold;
}
body{
background-color:#eee;
}
#header{
z-index:1000;
display: block;
position:fixed;
top:0px;
background-color: black;
width:100%;
}
#header .container1{
box-shadow: 0 10px 15px red;
-moz-box-shadow:0 10px 15px red;
-webkit-box-shadow:0 10px 15px red;
width:940px;
margin:0px auto;
text-align:Center;
border:0px;
background-color:black;
height:55px;
font-family:Calibri;
}
.nav {
margin:20% auto;
list-style: none;
position: fixed;
z-index:10000;
left:50px;
}
.nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
font-family:Calibri;
box-shadow:0 10px 150px blue;
-moz-box-shadow:0 10px 150px blue;
-webkit-box-shadow:0 10px 150px blue;
}
.nav a:hover {
background: #dedede;
}
.nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.site_name{
color:white;
}
.manage_center{
position:relative;
margin:auto auto;
width:100%; /* top r8 botm left *//*top/bottom right.left*/
background:cyan;
border-top:1px solid blue;
border-bottom:1px solid blue;
text-align:center;
clear:both;
height:100%;
}
.center{
position:relative;
margin:0px auto;
width:100%; /* top r8 botm left *//*top/bottom right.left*/
background:cyan;
border-top:1px solid blue;
border-bottom:1px solid blue;
text-align:center;
clear:both;
}
/*
.center::before{
position:relative;
content: "pravin";
background-color: red;
height:10%;
top:50%;
}
.center::after{
position:relative;
content: " ujfjf";
background-color: #1578B1;
height:10%;
}
/*
.op{
position:relative;
top:100px;
background:cyan;
left:100px;
height:200px;
width:200px;
}
.op .ch1{
position:absolute;
color:red;
background:black;
opacity:0.5;
height:100%;
width:100%;
}
.op .ch2{
position:relative;
color:white;
text-align:center;
}
*/
#footer{
clear:both;
z-index:1;
display: block;
position:fixed;
background-color: black;
width:100%;
bottom:0px;
}
#footer .container1{
width:940px;
margin:0px auto;
text-align:Center;
border:0px;
background-color:black;
height:55px;
font-family:Calibri;
box-shadow:0 10px 150px blue;
-moz-box-shadow:0 10px 150px blue;
-webkit-box-shadow:0 10px 150px blue;
color:white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment