Floating Text In Salesforce Lightning Component – HTML Marquee Tag Alternate

Hi guys , today in this post we are going to learn how we can create floating div or floating text content in salesforce lightning component. we can say this is alternate of HTML marquee (deprecated) tag.

Lightning Component : floatingDemo.cmp

<aura:component>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="intervalId" type="Integer" default="0"/>
    
    <div id="parentDIV" style="overflow:hidden">
        <p style="position:relative;" id="tofloat">
            <b><span style="color:red">Important Note : </span>
            I am Floating (Left to Right) Imformation...</b>
        </p>
    </div>
    
</aura:component>

JavaScript Controller : floatingDemoController.js

({
    doInit : function(component, event, helper) {
        var lWidth = window.innerWidth ;//Get the window's width
        //The setInterval() method calls a function or 
        //evaluates an expression at specified intervals (in milliseconds).
        window.setInterval($A.getCallback(function() { 
            helper.shiftDiv(component, event,lWidth);
        } ), 100);
    },
})

JavaScript Helper : floatingDemoHelper.js

({
    shiftDiv: function(component, event,lWidth) {
        var changeposition = component.get("v.intervalId");
        var floatElement = document.getElementById('tofloat');	  
        if(changeposition < lWidth){
            floatElement.style.left = changeposition+'px';
            changeposition = changeposition + 5;
            component.set("v.intervalId",changeposition);
        }
        //reset the left to 0
        else{
            component.set("v.intervalId",0);
            floatElement.style.left = "0px";
            changeposition = component.get("v.intervalId");//resetting so as to hit the if block again
        }
    }
})

Check Also : Alternate/Workaround for contains() function in aura:if Condition in Lightning Component

Component CSS : floatingDemo.css

.THIS#parentDIV{
    border: 5px solid;
    border-radius: 6px;
    background: beige;
    height: 50px;
    margin: 5px;
    padding: 2px;
}

demo.app [Lightning Application]

<aura:application extends="force:slds">
    <c:floatingDemo/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

Check also : How To Detect a Device In Salesforce Lightning Component ?

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  or Developer Forums 🙂

About The contributor: 

• Somnath Sharma

  1 Post Contribute