Skip to main content

How to Create Floating Marquee

Hello frnds today post , how to create floating Marquee in Lightning Component
so let us begin.............

Step=>1. goto developer console
                            File=>New=>Lightning Component

                  FloatingMarq.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>

Step=>2.

       FloatingMarqController.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);
    },
})


Step=>3.

      FloatingMarqHelper.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
        }
    }
})


                                Output:




Thanks.!


Buy me a coffeeBuy me a coffee

Comments

Popular posts from this blog

How to used slds-hide/show class for div hide and show in lightning component

Hello friends today post ,how to create a lightning component to use slds-hide/show class, very easy to use class and aplly.. so let us start ... firstly create a lightning component and there are two or three div or anything when you want to hide/show ... so see given bellow example and udes slds-hide/show class Step=>1.                   goto developer console=>File=>New=>Lightning Component                           sldshideshow.cmp <aura:component >     <aura:attribute name="First" type="string" default="slds-show"/>     <aura:attribute name="Second" type="string" default="slds-hide"/>         <center>     <div class="slds-box" style="width:300px;height:300px;margin-top:15px;">         <div class="{!v.First}">         ...

Create Overlays with the New Modal Component

Hello friends, Now modal tag is available in #LWC, we can create a modal using the #LWC Standard tag. snapshot given below with code. Step-1 Create LWC component Step-2 Add below code Step-3 I am showing how my component is look like. Thanks for reading