Flex Ticker

example 15


  1. here we are dealing with responsive design what if you want the ticker look in certain way on laptops and another design for the tablets and another one for the mobile
  2. you can define the responsive attribute with array of objects ( 1 object or more )
  3. every object have 2 required attributes the first is breakpoint
  4. breakpoint attribute will define the screen width in pixels where the options for the size will applied, so for example if the value is 600 then the options object will be applied to the width 600px and below
  5. please note breakpoint is not the screen size but the ticker wrapper size
  6. so if you in screen with width 1200px and the ticker in wrapper with 600 pixels and you set the breakpoint to 600 then this breakpoint options will be applied
  7. you can define multiple objects where every object will have a breakpoint and the breakpoint will applied is the nearest larger breakpoint to the wrapper width
  8. that mean lets say we have a 400 breakpoint and a 600 breakpoint and a ticker with wrapper width 500 then the breakpoint 600 will applied but if the wrapper width is 300 then the breakpoint 400 will applied.
  9. please note that developers will not see the differnet options by resizing browser, you need to refresh after resize
  10. the second required attribute is options which take an object of the attributes that will have differnet value
  11. in the options attribute you can define object that have all the ticker same attribute but you can't redefine the follwing attributes, effect,direction,sep,sepPath so these attributes will be the same as the default ticker values

Default: []

example 1: ticker that have 2 designs 1 for laptops and the other for mobiles

for developers to see how the ticker will look in mobiles resize the brwoser and refersh

please note that the ticker will take the width of the wrapper so be sure the wrapper width is the one less than 600 pixels

  • 1- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing
  • 2- Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
  • 3- It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
  • 4- It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages
  • 5- and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  • 6- It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

example 2: we will define differnet designs for mobile tablets and laptops

  • 1- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing
  • 2- Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
  • 3- It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
  • 4- It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages
  • 5- and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  • 6- It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.