floating field

User 1982097 Photo


Registered User
72 posts

Is there a way to create a field that floats and stays in a static location on a form - js/ajax?
I have a field that provides a running total of the number of items entered in fields on a form but it is not always visible while the person is scrolling down to enter into fields.
Any suggestions?
Thx
love this form builder btw!
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

I guess that would be flash? If so never mind
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

Here's a quick example. I made it with a div that shows the total along with an input. You can adjust the scripts to fade out the div once the input total is in view.
If you want an actual input to float I can adjust the scripts.
http://progrower.coffeecup.com/forms/fl … ing-total/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,181 posts

Here's a quick one with an actual form builder input being used. No fancy fade in or out.
http://progrower.coffeecup.com/forms/fl … g-total-2/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1982097 Photo


Registered User
72 posts

Nice - that's exactly what I'd like to do. How do I make the field "float"?
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

Can this be done inside of the formbuilder tool?
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

telimon wrote:
Can this be done inside of the formbuilder tool?
just in an html field?
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

I did it all within formbuilder.
Add two html elements to your page at the top.
In the top most paste this.
<style>#item1{
display: inline-block;
border:solid;
height: 20px !important;
width: 100px !important;
position: fixed;
bottom: 100px;
right: 30px;
}

@media only screen and (min-width: 768px) {
#item1{
right: 30px;
bottom: 40px;
}
}
@media only screen and (min-width: 1024px) {
#item1{
height: 20px;
width: 100px;
right: 30px;
bottom: 30px;
}
}
</style>

In the second one paste this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>var jQ = $.noConflict();
jQ(document).ready(function(){
jQ("input[name='running_total']").attr('readonly', true);
jQ("input[name^='number']").each(function() {
jQ(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
jQ("input[name^='number']").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
jQ("input[name^='running_total']").val(sum.toFixed(2));
}</script>

Adjust the #item1 in the top html element to the item id wrapping your input.
Adjust the Input name name='running_total' in the js to the input that's wrapped by that item id.
I'm using number inputs in my example that are all named number1, number2, and so on so my calculation function is looking for values in inputs starting with the name number.name^='number'.
I don't know what your calculating but If your already targeting an input then you should only need to use the top css and adjust to your needs.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1982097 Photo


Registered User
72 posts

awesome - thanks! I'll give it a shot
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

Post back if your need help. A link would be great if so.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.