Keep the save/delete/cancel buttons of the detail view visible while scrolling down long forms

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Keep the save/delete/cancel buttons of the detail view visible while scrolling down long forms

Post by a.gneady » 2015-09-30 08:24

Hello,

If you have a long detail view form, you might want to "float" the save buttons at the right so that when you are at the bottom of the form and want to save, you won't have to scroll up to find the buttons. You can do this using the following JavaScript code in hooks/footer-extras.php (the scrolling would apply to the detail view of all tables).

Code: Select all

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
<script>
	function screen_size(sz){
		return $j('.device-' + sz).is(':visible');
	}
</script>

<script>
	$j(function(){
		/* scroll action buttons of DV on scrolling DV */
		$j(window).scroll(function(){
			if(!screen_size('md') && !screen_size('lg')) return;
			if(!$j('.detail_view').length) return;
			
			/* get vscroll amount, DV form height, button toolbar height and position */
			var vscroll = $j(window).scrollTop();
			var dv_height = $j('[id$="_dv_form"]').eq(0).height();
			var bt_height = $j('.detail_view .btn-toolbar').height();
			var form_top = $j('.detail_view .form-group').eq(0).offset().top;
			var bt_top_max = dv_height - 1.2 * bt_height;
			
			if(vscroll > form_top){
				var tm = parseInt((vscroll - form_top) / 5) * 5 + 60;
				if(tm > bt_top_max) tm = bt_top_max;
				
				$j('.detail_view .btn-toolbar').css({ 'margin-top': tm + 'px' });
			}else{
				$j('.detail_view .btn-toolbar').css({ 'margin-top': 0 });
			}
		});
</script>
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

Post Reply