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 {
|
.self-introduce {
|
||||||
margin-top: 2.2rem;
|
margin-top: 1.875rem;
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
border-bottom: 1px solid #dddddd;
|
}
|
||||||
|
|
||||||
|
p, .aboutme-index {
|
||||||
|
color: #5D5D5D;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
.blog-title {
|
.blog-title {
|
||||||
border-bottom: 1px solid #dddddd;
|
margin-top: 1rem;
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptag {
|
.ptag {
|
||||||
|
|
@ -19,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding-top: 0.5rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-more {
|
.read-more {
|
||||||
|
|
@ -45,10 +44,11 @@
|
||||||
.blog-over {
|
.blog-over {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
|
border-bottom: 1px solid #DCDCDC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recent-title {
|
.recent-title {
|
||||||
border-bottom: 1px solid #dddddd;
|
border-bottom: 1px solid #DCDCDC;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,16 +15,17 @@
|
||||||
= link_to t('home.read'), blog_path(@newest), class: 'read-more'
|
= link_to t('home.read'), blog_path(@newest), class: 'read-more'
|
||||||
p.published-at #{t('home.created_at')} #{format_date(@newest.created_at)}
|
p.published-at #{t('home.created_at')} #{format_date(@newest.created_at)}
|
||||||
|
|
||||||
h4.recent-title #{t('home.recent')}
|
- if @recent.present?
|
||||||
ul.recent-content
|
h4.recent-title #{t('home.recent')}
|
||||||
- @recent.each do |re|
|
ul.recent-content
|
||||||
li = link_to "#{re.title}",blog_path(re)
|
- @recent.each do |re|
|
||||||
|
li = link_to re.title,blog_path(re)
|
||||||
|
|
||||||
.large-3.columns.large-offset-1.self-introduce.self-introduce-index
|
.large-3.columns.large-offset-1.self-introduce.self-introduce-index
|
||||||
/*Adjust it in common/welcome*/
|
/*Adjust it in common/welcome*/
|
||||||
= render 'common/welcome'
|
= render 'common/welcome'
|
||||||
h4 #{t('subscribes.title')}
|
h4 #{t('subscribes.title')}
|
||||||
.row.ng-cloak ng-controller='AboutController'
|
.row
|
||||||
.small-12.medium-6.large-12.columns
|
.small-12.medium-6.large-12.columns
|
||||||
ul.subscribe-ul
|
ul.subscribe-ul
|
||||||
li
|
li
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue