Making window with Scrollable Text

Discussion in 'Learning Javascript' started by TheChilliPL, Jul 10, 2017.

  1. TheChilliPL

    TheChilliPL Villager Member

    Messages:
    23
    Likes Received:
    3
    First Language:
    Polski [Polish]
    I'm trying to make my Quest System and it goes well, but I wonder if there's some way to make window with scrollable text (Quest Description).
    I want text to be scrollable only if long enough, by using mouse scroll (and if it's possible, by touch/mouse dragging)
     
    #1
  2. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,586
    Likes Received:
    1,365
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    In JS Yes.
    You will need to familiarize yourself with the filter() method
    https://www.w3schools.com/jsref/jsref_filter.asp

    Here is a source code that I use to build a slider system.
    There is probably another way, but this is the simplest.
    This is for my items menu slider scroll, but it is identical for my quest system.
    These the base to put a system with a scroll slider .
    PHP:
    //□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
        //1: Construit Items_List_Global (fait une liste en array)
        //$gameVariables.menu_items.build_list_Item();
        
    menu_items.prototype.build_list_Item = function(){
            
    this.alpha_itemsList $gameParty.items();
        }
    //□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
    //□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
        //2: Construit une list avec filtre base sur alpha_itemsList
        //$gameVariables.menu_items.build_list_Item_Filtered()
        
    menu_items.prototype.build_list_Item_Filtered = function(){
            var 
    filter this.currentFilter;
            
    this.filtered_itemsList this.alpha_itemsList.filter(function ($item) {
                return 
    $item.has_filter(filter); // has_filter return true or false see items_Data proto
            
    });
        }
    //□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
    //□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
        //3: sort la list filtered_itemsList // ['None','Name','Quantity','Price','Weight','LastReceved'];
        //$gameVariables.menu_items.sort_list_Item_Filtered()
        
    menu_items.prototype.sort_list_Item_Filtered = function(){
            if(
    this.currentSorting === 0){ // sort par default None : par .id <
                
    console.log('sort par default None: ');
                
    this.filtered_itemsList.sort(function(ab){return a.id-b.id });
            }else if (
    this.currentSorting === 1){ // sort par Name :  ._name <
                
    console.log('sort par Name : ');
                
    this.filtered_itemsList.sort(function(ab){ return a._name-b._name });
            }else if (
    this.currentSorting === 2){ // sort par Quantity :  .getQTY() <
                
    console.log('sort par Quantity: ');
                
    this.filtered_itemsList.sort(function(ab){ return (a.getQTY())-(b.getQTY()) }); // lag voir une solution TODO:
            
    }else if (this.currentSorting === 3){ // sort par Price :  ._valur <
                
    console.log('sort par Price: ');
                
    this.filtered_itemsList.sort(function(ab){ return (a._valur)-(b._valur) });
            }else if (
    this.currentSorting === 4){ // sort par Weight :  ._weight <
                
    console.log('sort par Weight: ');
                
    this.filtered_itemsList.sort(function(ab){ return (a._weight)-(b._weight) });
            }else if (
    this.currentSorting === 5){ // sort par LastReceved :  ._weight <
                
    console.log('sort par LastReceved: ');
                
    // TODO, probablement fair une variable suplementaire , a chaque new items, scan tous et ++1, saufe le item obtenue qui est remi a 0
            
    }
        }
    //□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
    //□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
        //4: build currentpage with filtered_itemsList
        //$gameVariables.menu_items.buildPage()
        
    menu_items.prototype.buildPages = function(){
            
    // note: max item in page are 15
            
    this.page_itemsList = [[]]; // reset list page (+ 1 page[] vierge oubligatoir)
            
    var maxIPP 15;
            var 
    nb_page Math.ceil(this.filtered_itemsList.length/maxIPP);
            for(var 
    i=0;i<nb_page;i++){
                
    this.page_itemsList[i] = this.filtered_itemsList.slice(maxIPP*i,maxIPP*(i+1));
            }
        }
        
    //□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
    you can make similar like this but for quest .
    Replace the sliding of the item scroll by a scroll text.
     
    Last edited: Jul 10, 2017
    #2

Share This Page