Hi there folks!
To be honnest i didnt know were to post this thread on the forum since i havent found any category for this topic, i have a suggestion for the functions at sentora forum. As you know many posts are long. Since we have to scrool it down, sometimes we have to dragg all up, or click on "return to top" wich call div #top. and jumps up without any animation and we get the link as: http://forums.sentora.org/something#top wich is not so cool, dont get me wrong...
So i suggest a simple ugrade and very simple to integrate wich will make us as members with a more interesting funcionality over this forum. I have created a simple .js file that can be called to any pages by adding one simple line of code and it will bring to top in a more intuitive look and animated. This is very lightweight i use it a lot in some of my webdesign projects. All members are free to copy and use it.
Here is the .js file code (requires jquery wich the forum already have)
Implementation:
- Save the script provided on top as "gotop.js"
- Create and Add a image file called "gotop.png" at -> http://sentora.org/images/sentora/ directory.
- Just add this line of code to call up the script on the index.php file (template file) -> Check bellow!
That's it! Simple and lightweight solution that will bring Sentora Forum a new shine!
I hope this contribution can make members experience better!
To be honnest i didnt know were to post this thread on the forum since i havent found any category for this topic, i have a suggestion for the functions at sentora forum. As you know many posts are long. Since we have to scrool it down, sometimes we have to dragg all up, or click on "return to top" wich call div #top. and jumps up without any animation and we get the link as: http://forums.sentora.org/something#top wich is not so cool, dont get me wrong...
So i suggest a simple ugrade and very simple to integrate wich will make us as members with a more interesting funcionality over this forum. I have created a simple .js file that can be called to any pages by adding one simple line of code and it will bring to top in a more intuitive look and animated. This is very lightweight i use it a lot in some of my webdesign projects. All members are free to copy and use it.
Here is the .js file code (requires jquery wich the forum already have)
Code:
/*
Sentora.org
Scrool to top
@wormsunited contribution
*/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]},
controlHTML: '<img src="../images/sentora/gotop.png" style="width:50px; height:50px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:10, offsety:10}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#main', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:''})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()Implementation:
- Save the script provided on top as "gotop.js"
- Create and Add a image file called "gotop.png" at -> http://sentora.org/images/sentora/ directory.
- Just add this line of code to call up the script on the index.php file (template file) -> Check bellow!
Code:
<script type="text/javascript" src="http://forums.sentora.org/jscripts/gotop.js"></script>That's it! Simple and lightweight solution that will bring Sentora Forum a new shine!
I hope this contribution can make members experience better!
