What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Feature Request: Marquee behavior for UP direction.

    Asked by bkp.success on November 18, 2014 at 10:36 AM

    please provide me the html code (If possible) for marquee behavior for UP direction. Because the ticker is proving us only left and right direction and it is not showing in mobile device.

    (Original thread: http://www.jotform.com/answers/460780)

    Marquee marquee tool
  • Profile Image

    Answered by DarkFx on November 18, 2014 at 11:34 AM

    Hi bkp.success,

     

    There have a marquee behavior for "UP direction" please try this code below.

    <marquee  behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

    or you can just check this site for more marquees.  Html Marquee Code

     

    Hope this helps.

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 18, 2014 at 11:46 AM

    Hello bkp.success,

    Yes you are right. The "Ticker" widget only has option to set the marquee behavior to left/right.  

    Unfortunately, it is also not possible to add the "<marquee>" tag in "Text" field of form. Editor security mechanism seems to be deleting the the marquee tag. Please check the screenshot below:

     

     

    Let me send a query to our back end team to see if it is possible to update the existing "Ticker" widget or allow <marquee> tag in "Text" field. We will get back to you as soon as we have any update from them.

    Thank you!

  • Profile Image

    Answered by brssi_exam on November 19, 2014 at 03:44 AM

    Hi ashwin_d,

    Thanks a lot for your reply. I shall be very grateful to you if you kindly response with your  positive/negative answer in this page in future.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 19, 2014 at 05:09 AM

    Hello brssi_exam,

    Sure we will keep you posted. I have already sent the feature request to our back end team and we will get back to you as soon as we have any update from them

    Thank you!

  • Profile Image

    Answered by brssi_exam on November 26, 2014 at 10:24 PM

    Hi ashwin_d;

    Is there any update?

    this marquee behavior for UP direction is very important for my form.... for that reason I can not put the field in my form. It is my request to your development team to allow this marquee behavior in text field (Because the ticker is proving us only left and right direction and it is not showing in mobile device). Please.....

    Have a good day!!!!!!!!!!!!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 27, 2014 at 03:00 AM

    Hello brssi_exam,

    Unfortunately, we have not received any update on this from our back end team.  We will not be able to provide any ETA on this but we will get back to you as soon as we have any update from them.

    Thank you!

     

  • Profile Image

    Answered by bkp.success on January 04, 2015 at 06:56 AM

    Hi;

    I know that you and your team are always trying to provide us a better service and a good experience. I have a request to you that please allow us to use html code for Marquee behavior for UP direction in Jotform.

     <marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

     

    Because the ticker is proving us only left and right direction and it is not showing in mobile device.  

    I need it very much…

     

    Thank You……

  • Profile Image

    Answered by Ben on January 04, 2015 at 12:13 PM

    Hi,

    Unfortunately this is still not available. I would however want to offer you an alternative marquee that scrolls up or any other direction that you might need.

    You can see it in action here: http://form.jotformpro.com/form/50034900197954

    What do you do?

    Simply add this to the Text field:

    <div class="ben_marque_holder"><div class="ben-scroll_up">going up</div></div>

    Once you have added it, inject this to your jotform CSS codes:

    .ben_marque_holder {
         overflow: hidden;
         height: 50px;
    }
    .ben-scroll_up {
         animation-duration: 5s;
         animation-iteration-count: infinite;
         animation-name: ben-scrolling_up;
         position: relative;
    }
    @keyframes ben-scrolling_up {
         0% { top: 50px; }
         100% { top: -20px; }
    }
    .ben-scroll_up:hover {
        animation-play-state: paused;
    }

    You can see how to do add it following these steps: Inject Custom CSS Codes

    Now, since this is done through CSS, you would need to alter the details slightly depending on how you use it and I have marked the ones that should be changed with bold.

    Please do note that only numbers are bold and they are the only ones that we should change.

    Now how to set it all up:

    top:50px should always be the same as the height:50px above. What I mean is that if height:70px is set, then top:70px should be set as well and in most cases -20px would not need to be altered, unless you have some custom styles applied, which should then need to be taken into account.

    The animation-duration: 5s; basically controls the speed of the scrolling up, so if we were to put it at 2s it would go much faster, while if we place 10s it will be slowly going up giving us enough time to see what it says.

    I do hope that this helps and if it does, do let us know and I will turn it into a guide with of course a few more goodies :)

    Best Regards,
    Ben

  • Profile Image

    Answered by bkp.success on January 04, 2015 at 12:33 PM

    Hi Ben;

    I have check your provided code even  http://form.jotformpro.com/form/50034900197954 this form. But unfortunatly it is not working and when I open your provided form it is showing normal "going up" word.....

    I may be wrong... please check it.... and thank you for trying to solve my problem... 

  • Profile Image
    JotForm Support

    Answered by abajan on January 04, 2015 at 04:59 PM

    @bkp.success

    It actually does work in some browsers but not WebKit based ones. The following amendments (in bold) to Ben's CSS will fix the issue:

    .ben_marque_holder {
       overflow: hidden;
       height: 50px;
    }

    .ben-scroll_up {
       -webkit-animation-duration: 5s;
       animation-duration: 5s;
       -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
       -webkit-animation-name: ben-scrolling_up;
       animation-name: ben-scrolling_up;
       position: relative;
    }

    @-webkit-keyframes ben-scrolling_up {
       0% { top: 50px; }
       100% { top: -20px; }
    }

    @keyframes ben-scrolling_up {
       0% { top: 50px; }
       100% { top: -20px; }
    }

    .ben-scroll_up:hover {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }

    The result should be like this clone of Ben's jotform.

    Upon researching vendor prefixes, I found the following useful articles which helped me to solve the problem:

    Which Vendor Prefixes are Needed?

    Vendor Prefixes Are Useless

    Anyway, should you require our assistance in implementing Ben's workaround, we'd be happy to provide it.


    Happy New Year

  • Profile Image

    Answered by bkp.success on January 04, 2015 at 10:08 PM

    Hi abajan;

    Wish you a very very happy new year. Actually I have checked your provided code and now it is working in all browsers and it is perfect when I enter only one line of sentence. If I insert 2nd or 4th...up to the numbers more than one lines in the text field with URL, it is not working (http://form.jotform.me/form/50038086960456). Even it is not showing all provided line in text box and .... Is there any solution... I am asking you because only you (Jotform) genius can solve it.. with my little knowledge on coding I am unable to do it.. Please provide me a solution.. I shall be very grateful to you for your unconditional support….

    Thank you..

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 04, 2015 at 11:33 PM

    Hello bkp.success,

    Updating the injected custom css code with the following code should solve the problem you are having:

    .ben_marque_holder {

    overflow: hidden;

    height: 50px;

    }.ben-scroll_up {

    -webkit-animation-duration: 5s;

    animation-duration: 5s;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    -webkit-animation-name: ben-scrolling_up;

    animation-name: ben-scrolling_up;

    position: relative;

    }@-webkit-keyframes ben-scrolling_up {

    0% { top: 150px; }

    100% { top: -70px; }

    }@keyframes ben-scrolling_up {

    0% { top: 150px; }

    100% { top: -70px; }

    }.ben-scroll_up:hover {

    -webkit-animation-play-state: paused;

    animation-play-state: paused;

    }

    The marquee tag should display all the options you have added in demo form. Please check the screenshot below:

     

    I would suggest you to implement it in your actual form and we will help you with any changes required in the custom css code.

    Thank you!

  • Profile Image

    Answered by bkp.success on January 05, 2015 at 12:06 AM

    Hi ashwin_d;

    I have implemented it in my form and you can see here in this link http://form.jotform.me/form/50038086960456 and the problem with showing all option is solved but you can see in this form when the 2nd line touch the top of the form then the speed is decrease and it suddenly vanished and then it start again... it actually not gives the marquee effect... I want this same effect (you can see here Text Scrolling Upwards: http://www.quackit.com/html/codes/html_marquee_code.cfm )

     

    If possible please help me…. I hope I am able to understand my requirement.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 05, 2015 at 01:38 AM

    Hello bkp.success,

    I have made some css changes in your test form. Do check and get back to us if it looks okay now:

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by test3 on January 05, 2015 at 02:17 AM

    Hello;

    Thank you very much for your support.... :) 

    I have noticed that when I increase line number then I also need to change the parameter of CSS code every time...and in my case line number is not fixed it may be increased or decreased every day..it is quit difficult for me to change the css code every time. By the way I am tiring to implement this idea in different way.  

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 05, 2015 at 04:08 AM

    Hello bkp.success,

    That is correct, you will have to update the custom css code every time your marquee text changes. This issue will resolve once the option to move marquee text to UP direction is added in the widget itself.

    Thank you!