This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Sentora Forum Suggestion
#1
Sentora Forum Suggestion
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)


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!

Wink
'' Life is full of important choices ''
Help Sentora Donate now => http://sentora.org/donate Blush
Reply
Thanks given by:
#2
RE: Sentora Forum Suggestion
LOL TGates (tagged him!) is put to work today.. Tongue
I also have posted some forum suggestions.. Tongue

My Sentora DemoMy GithubAuxio Github
Zentora themeS-Type themeCstyleX theme
flat-color-iconssmall-n-flat-icons

Sentora's development takes way too long, so i'm transitioning to HestiaCP.
Reply
Thanks given by:
#3
RE: Sentora Forum Suggestion
LOL!

But is true this places the forum and the website more clean and professional Wink
Indeed @TGates, please look at this Thread's
'' Life is full of important choices ''
Help Sentora Donate now => http://sentora.org/donate Blush
Reply
Thanks given by:
#4
RE: Sentora Forum Suggestion
Will check it out guys! Smile
-TGates - Project Council

SEARCH the Forums or read the DOCUMENTATION before posting!
Support Sentora and Donate: HERE

Find my support or modules useful? Donate to TGates HERE
Developers and code testers needed!
Contact TGates for more information
Reply
Thanks given by:


Possibly Related Threads…
Thread Author Replies Views Last Post
Can anyone suggest best Sentora alternative servermaster 1 381 12-22-2023, 10:41 AM
Last Post: TGates
Forum SSL && Email problems republicus 1 1 ,113 02-22-2023, 08:14 AM
Last Post: TGates
Sentora 2.0 Beta Ron-e 6 11 ,946 01-01-2022, 11:56 AM
Last Post: TGates

Forum Jump:


Users browsing this thread: 1 Guest(s)