Solved

sticky button position

Posted on 2013-11-25
8
279 Views
Last Modified: 2014-01-01
Hi,

I have a mobile form that expands and displays a considerable amount of fields.
What I would like is to display the submit button in a fixed position at the bottom of the viewport until the user scrolls down to where the button 'should be' located and then it rejoins its position in the page if you were to scroll past it.

Is this easy to do?

Thanks
0
Comment
Question by:Al4ddin2
  • 3
  • 3
8 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39674910
You can fix the the position of an element relative to the viewport with:

.yourbutton {position;:fixed; left:10px; bottom:0px;}

To get it out of the fixed positioning, you will need to detect when the scroll goes far enough to show thw bottom of the form, and then change the button to absolute positioning within the form.

The tricky part id going to be determining the actual point where the scroll position actually reaches the trigger point in anything responsive or dynamic where the dimension of the page change based on user actions.

Cd&
0
 

Author Comment

by:Al4ddin2
ID: 39683604
Hi,

I think I understand what is needed, when the button is beneath the viewport then apply a class to give it a fixed position, then when it's actual position in the DOM comes back into the viewport the class is removed.
The point I am struggling with is how to determine, a) how to addClass at the correct time b) when to removeClass

Thanks
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 39684317
There is an article by Ben Olson on his blog that explains how to create the hooks, detect the position and respond using jquery:

http://www.benknowscode.com/2013/07/detect-dom-element-scrolled-with-jquery.html

Rather than try to modify the style values, you will probably find swapping styles cleaner, and it is more efficient as well.

Cd&
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Al4ddin2
ID: 39692555
Thanks that looks great, so does http://www.appelsiini.net/projects/viewport even more so perhaps as I can target if it is above/below etc too.
however, for my purpose neither are working as I want to add a class to a button to say that if its location in the page is below the fold then give it a fixed position at the bottom of the screen until its actual position comes back into the viewport and then remove the class so it resumes its natural position.
Can you get this to work in my situation? as when I give it a fixed position it then appears in the viewport, passes the check and the class is removed.

Aaaargh! :-)

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39693150
Without seeing how the page is reacting to the events it is impossible to visualize what is happening.  You need to post the link so I can see what it is doing.

Cd&
0
 

Author Comment

by:Al4ddin2
ID: 39694732
Unfortunately I don't have a link to post as it's all in sandbox at the moment. But using the links above are you able to position a div (that is someway down a long page, below the fold) fixed to the bottom of the screen until it's actual position comes into view?

I have it adding and removing classes at the appropriate times until I add a fixed position to the class I am appending.

Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now