Feature Request: Marquee behavior for UP direction.

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)

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.

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!

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.

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!

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!!!!!!!!!!!!

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!

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……

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

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

@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

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

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!

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.

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!

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.  

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!