Style css adjust
This commit is contained in:
yafeilee
parent
e700fdac7e
commit
e9e89f19f3
|
|
@ -0,0 +1,225 @@
|
|||
/*
|
||||
* DD ScrollSpy Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
|
||||
* Last updated: Aug 1st, 14'
|
||||
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
|
||||
*/
|
||||
|
||||
// Aug 1st, 14': Updated to v1.2, which supports showing a progress bar inside each menu item (except in iOS devices). Other minor improvements.
|
||||
|
||||
if (!Array.prototype.filter){
|
||||
Array.prototype.filter = function(fun /*, thisp */){
|
||||
"use strict";
|
||||
|
||||
if (this == null)
|
||||
throw new TypeError();
|
||||
|
||||
var t = Object(this);
|
||||
var len = t.length >>> 0;
|
||||
if (typeof fun != "function")
|
||||
throw new TypeError();
|
||||
|
||||
var res = [];
|
||||
var thisp = arguments[1];
|
||||
for (var i = 0; i < len; i++){
|
||||
if (i in t){
|
||||
var val = t[i]; // in case fun mutates this
|
||||
if (fun.call(thisp, val, i, t))
|
||||
res.push(val);
|
||||
}
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
}
|
||||
|
||||
(function($){
|
||||
|
||||
var defaults = {
|
||||
spytarget: window,
|
||||
scrolltopoffset: 0,
|
||||
scrollbehavior: 'smooth',
|
||||
scrollduration: 500,
|
||||
highlightclass: 'selected',
|
||||
enableprogress: '',
|
||||
mincontentheight: 30
|
||||
}
|
||||
|
||||
var isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent) // detect iOS devices
|
||||
|
||||
function inrange(el, range, field){ // check if "playing field" is inside range
|
||||
var rangespan = range[1]-range[0], fieldspan = field[1]-field[0]
|
||||
if ( (range[0]-field[0]) >= 0 && (range[0]-field[0]) < fieldspan ){ // if top of range is on field
|
||||
return true
|
||||
}
|
||||
else{
|
||||
if ( (range[0]-field[0]) <= 0 && (range[0]+rangespan) > field[0] ){ // if part of range overlaps field
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
$.fn.ddscrollSpy = function(options){
|
||||
var $window = $(window)
|
||||
var $body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
|
||||
|
||||
|
||||
return this.each(function(){
|
||||
var o = $.extend({}, defaults, options)
|
||||
o.enableprogress = (isiOS)? '' : o.enableprogress // disable enableprogress in iOS
|
||||
var targets = [], curtarget = ''
|
||||
var cantscrollpastindex = -1 // index of target content that can't be scrolled past completely when scrollbar is at the end of the doc
|
||||
var $spytarget = $( o.spytarget ).eq(0)
|
||||
var spyheight = $spytarget.outerHeight()
|
||||
var spyscrollheight = (o.spytarget == window)? $body.get(0).scrollHeight : $spytarget.get(0).scrollHeight
|
||||
var $menu = $(this)
|
||||
var totaltargetsheight = 0 // total height of target contents
|
||||
function spyonmenuitems($menu){
|
||||
var $menuitems = $menu.find('a[href^="#"]')
|
||||
targets = []
|
||||
curtarget = ''
|
||||
totaltargetsheight = 0
|
||||
$menuitems.each(function(i){
|
||||
var $item = $(this)
|
||||
var $target = $( $item.attr('href') )
|
||||
var target = $target.get(0)
|
||||
var $progress = null // progress DIV that gets dynamically added inside menu A element if o.enableprogress enabled
|
||||
if ($target.length == 0) // if no matching links found
|
||||
return true
|
||||
$item
|
||||
.off('click.goto')
|
||||
.on('click.goto', function(e){
|
||||
if ( o.spytarget == window && (o.scrollbehavior == 'jump' || !history.pushState))
|
||||
window.location.hash = $item.attr('href')
|
||||
if (o.scrollbehavior == 'smooth' || o.scrolltopoffset !=0){
|
||||
var $scrollparent = (o.spytarget == window)? $body : $spytarget
|
||||
var addoffset = 1 // add 1 pixel to scrollTop when scrolling to an element to make sure the browser always returns the correct target element (strange bug)
|
||||
if (o.scrollbehavior == 'smooth' && (history.pushState || o.spytarget != window)){
|
||||
$scrollparent.animate( {scrollTop: targets[i].offsettop + addoffset}, o.scrollduration, function(){
|
||||
if (o.spytarget == window && history.pushState){
|
||||
//history.pushState(null, null, $item.attr('href'))
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
$scrollparent.prop('scrollTop', targets[i].offsettop + addoffset)
|
||||
}
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
if (o.enableprogress){ // if o.enableprogress enabled
|
||||
if ($item.find('div.' + o.enableprogress).length == 0){ //if no progress DIV found inside menu item
|
||||
$item.css({position: 'relative', overflow: 'hidden'}) // add some required style to parent A element
|
||||
$('<div class="' + o.enableprogress + '" style="position:absolute; left: -100%" />').appendTo($item)
|
||||
}
|
||||
$progress = $item.find('div.' + o.enableprogress)
|
||||
}
|
||||
var targetoffset = (o.spytarget == window)? $target.offset().top : (target.offsetParent == o.spytarget)? target.offsetTop : target.offsetTop - o.spytarget.offsetTop
|
||||
targetoffset += o.scrolltopoffset
|
||||
var targetheight = ( parseInt($target.data('spyrange')) > 0 )? parseInt($target.data('spyrange')) : ( $target.outerHeight() || o.mincontentheight)
|
||||
var offsetbottom = targetoffset + targetheight
|
||||
if (cantscrollpastindex == -1 && offsetbottom > (spyscrollheight - spyheight)){ // determine index of first target which can't be scrolled past
|
||||
cantscrollpastindex = i
|
||||
}
|
||||
targets.push( {$menuitem: $item, $des: $target, offsettop: targetoffset, height: targetheight, $progress: $progress, index: i} )
|
||||
})
|
||||
if (targets.length > 0)
|
||||
totaltargetsheight = targets[targets.length-1].offsettop + targets[targets.length-1].height
|
||||
}
|
||||
|
||||
function highlightitem(){
|
||||
if (targets.length == 0)
|
||||
return
|
||||
var prevtarget = curtarget
|
||||
var scrolltop = $spytarget.scrollTop()
|
||||
var cantscrollpasttarget = false
|
||||
var shortlist = targets.filter(function(el, index){ // filter target elements that are currently visible on screen
|
||||
return inrange(el, [el.offsettop, el.offsettop + el.height], [scrolltop, scrolltop + spyheight])
|
||||
})
|
||||
if (shortlist.length > 0){
|
||||
curtarget = shortlist.shift() // select the first element that's visible on screen
|
||||
if (prevtarget && prevtarget != curtarget)
|
||||
prevtarget.$menuitem.removeClass(o.highlightclass)
|
||||
if (!curtarget.$menuitem.hasClass(o.highlightclass)) // if there was a previously selected menu link and it's not the same as current
|
||||
curtarget.$menuitem.addClass(o.highlightclass) // highlight its menu item
|
||||
if (curtarget.index >= cantscrollpastindex && scrolltop >= (spyscrollheight - spyheight)){ // if we're at target that can't be scrolled past and we're at end of document
|
||||
if (o.enableprogress){ // if o.enableprogress enabled
|
||||
for (var i=0; i<targets.length; i++){ // highlight everything
|
||||
targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
|
||||
}
|
||||
}
|
||||
curtarget.$menuitem.removeClass(o.highlightclass)
|
||||
curtarget = targets[targets.length-1]
|
||||
if (!curtarget.$menuitem.hasClass(o.highlightclass))
|
||||
curtarget.$menuitem.addClass(o.highlightclass)
|
||||
return
|
||||
}
|
||||
if (o.enableprogress){ // if o.enableprogress enabled
|
||||
var scrollpct = ((scrolltop-curtarget.offsettop) / curtarget.height) * 100
|
||||
curtarget.$menuitem.find('div.' + o.enableprogress).css('left', -100 + scrollpct + '%')
|
||||
for (var i=0; i<targets.length; i++){
|
||||
if (i < curtarget.index){
|
||||
targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
|
||||
}
|
||||
else if (i > curtarget.index){
|
||||
targets[i].$menuitem.find('div.' + o.enableprogress).css('left', '-100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (scrolltop > totaltargetsheight){ // if no target content visible on screen but scroll bar has scrolled past very last content already
|
||||
if (o.enableprogress){ // if o.enableprogress enabled
|
||||
curtarget.$menuitem.removeClass(o.highlightclass)
|
||||
for (var i=0; i<targets.length; i++){
|
||||
targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updatetargetpos(){
|
||||
if (targets.length == 0)
|
||||
return
|
||||
var $menu = targets[0].$menu
|
||||
spyheight = $spytarget.outerHeight()
|
||||
spyscrollheight = (o.spytarget == window)? $body.get(0).scrollHeight : $spytarget.get(0).scrollHeight
|
||||
totaltargetsheight = 0
|
||||
cantscrollpastindex = -1
|
||||
for (var i = 0; i < targets.length; i++){
|
||||
var $target = targets[i].$des
|
||||
var target = $target.get(0)
|
||||
var targetoffset = (o.spytarget == window)? $target.offset().top : (target.offsetParent == o.spytarget)? target.offsetTop : target.offsetTop - o.spytarget.offsetTop
|
||||
targetoffset += o.scrolltopoffset
|
||||
targets[i].offsettop = targetoffset
|
||||
targets[i].height = ( parseInt($target.data('spyrange')) > 0 )? parseInt($target.data('spyrange')) : ( $target.outerHeight() || o.mincontentheight)
|
||||
if (o.enableprogress){ // if o.enableprogress enabled
|
||||
var offsetbottom = targetoffset + targets[i].height // recalculate cantscrollpastindex
|
||||
if (cantscrollpastindex == -1 && offsetbottom > (spyscrollheight - spyheight)){
|
||||
cantscrollpastindex = i
|
||||
}
|
||||
}
|
||||
}
|
||||
totaltargetsheight = targets[targets.length-1].offsettop + targets[targets.length-1].height
|
||||
}
|
||||
|
||||
spyonmenuitems($menu)
|
||||
|
||||
$menu.on('updatespy', function(){
|
||||
spyonmenuitems($menu)
|
||||
highlightitem()
|
||||
})
|
||||
|
||||
$spytarget.on('scroll resize', function(){
|
||||
highlightitem()
|
||||
})
|
||||
|
||||
highlightitem()
|
||||
|
||||
$window.on('load resize', function(){
|
||||
updatetargetpos()
|
||||
})
|
||||
|
||||
}) // end return
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
.self-introduce {
|
||||
margin-top: 2.2rem;
|
||||
margin-top: 1.875rem;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
p, .aboutme-index {
|
||||
color: #5D5D5D;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.blog-title {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding: 0.5rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ptag {
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
padding-top: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
|
|
@ -45,10 +44,11 @@
|
|||
.blog-over {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
|
||||
.recent-title {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,16 +15,17 @@
|
|||
= link_to t('home.read'), blog_path(@newest), class: 'read-more'
|
||||
p.published-at #{t('home.created_at')} #{format_date(@newest.created_at)}
|
||||
|
||||
h4.recent-title #{t('home.recent')}
|
||||
ul.recent-content
|
||||
- @recent.each do |re|
|
||||
li = link_to "#{re.title}",blog_path(re)
|
||||
- if @recent.present?
|
||||
h4.recent-title #{t('home.recent')}
|
||||
ul.recent-content
|
||||
- @recent.each do |re|
|
||||
li = link_to re.title,blog_path(re)
|
||||
|
||||
.large-3.columns.large-offset-1.self-introduce.self-introduce-index
|
||||
/*Adjust it in common/welcome*/
|
||||
= render 'common/welcome'
|
||||
h4 #{t('subscribes.title')}
|
||||
.row.ng-cloak ng-controller='AboutController'
|
||||
.row
|
||||
.small-12.medium-6.large-12.columns
|
||||
ul.subscribe-ul
|
||||
li
|
||||
|
|
|
|||
Loading…
Reference in New Issue