Live Updates

Description

Updating the scroll content via programm logic is shown in this demo.

Javascript Example

Below is the equivalent javascript code using the pure vanilla js version of SuperScroll. 

                                        
                                            
const mySuperMarquee = new SuperMarquee( document.getElementById( "supermarquee" ) );
document.getElementById( "update-scroll-content" ).addEventListener( "click", e => {
    mySuperMarquee.setScrollContent( document.getElementById( "demo-scroll-content" ).value );
});    
                                            
                                    
                                        
                                            
<div id="supermarquee"></div>
<div class="demo-ui-container">        
    <input id="demo-scroll-content" 
    class="input form-control demo-input"
    placeholder="Enter scroll content here and press Update" 
    type="text" /> 
    <button id="update-scroll-content"
    class="btn btn-primary">UPDATE</button>
</div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        font-size: 48px;
     }
    .demo-button-container {
        margin-top: 24px;
    }
    #demo-scroll-content {
        border-radius: 2rem;
        margin: 16px 0;
    }    
    .demo-input {
        text-align: center;
    }

jQuery Example

The demo above is constructed with the jQuery version of this library. See the code below to find out more. 

                                        
                                            
    $( "#supermarquee" ).supermarquee();
    $( "#update-scroll-content" ).click( function() {
        $( "#supermarquee" ).supermarquee( "setScrollContent", $( "#demo-scroll-content" ).val() );
    });
                                            
                                    
                                        
                                            
<div id="supermarquee"></div>
<div class="demo-ui-container">        
    <input id="demo-scroll-content" 
    class="input form-control demo-input"
    placeholder="Enter scroll content here and press Update" 
    type="text" /> 
    <button id="update-scroll-content"
    class="btn btn-primary">UPDATE</button>
</div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        font-size: 48px;
     }
    .demo-button-container {
        margin-top: 24px;
    }
    #demo-scroll-content {
        border-radius: 2rem;
        margin: 16px 0;
    }    
    .demo-input {
        text-align: center;
    }

 

BACK