Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Offline
Support Offline
It's past support hour. We are taking some rest and will come back stronger tomorrow. Promise!
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00
Our current time: Monday 8:11 am
Add a reply View Replies (4)

Resolved Add nav tab on a form bottom

  1. itadminMC
    itadminMC
  2. General
  3. Saturday, March 16 2019, 08:49 AM
Hello,
We would like to add the nav tabs (look at the screenshot joined) at the bottom of the form because our form is long. This advoid to scroll to the top to click on the other tab.
Could you tell us where and how to modify the php code?
Thank for your help.
Bertrand
Responses (4)
admin
admin Accepted Answer
Admin
Hi,
tabs are generated via javascript, so try this solution:

Add following Javascript code to your template 
function footbar(){

	if(jQuery('#jsn-profile-tabs').length == 0) return;

	if(jQuery('#jsn-profile-tabs-foot').length) jQuery('#jsn-profile-tabs-foot').remove();



	var a = jQuery('#jsn-profile-tabs').clone();

	a.first().attr('id','jsn-profile-tabs-foot');

	a.appendTo('#jsn-form');



	jQuery('#jsn-profile-tabs-foot a').click(function(){

		var index = jQuery(this).closest('li').attr('data-index');

		jQuery('#jsn-profile-tabs li[data-index="'+index+'"] a').click();

	});

}



jQuery(document).ready(function(){

	if(jQuery('#member-profile').length) setInterval(function(){ footbar() }, 1000);

});


Add following CSS code to your template: 
#jsn-form.z-tabs > ul#jsn-profile-tabs-foot li > a{font-size:14px;}

#jsn-form.z-tabs > ul#jsn-profile-tabs-foot li > a span{display:block;font-size:12px;font-weight:normal;}
  1. more than a month ago
  2. General
  3. # 1
itadminMC
itadminMC Accepted Answer
Hi,

Customised it and that works great as expected. We are very appreciated your reactivity.

Thanks a lot.
Bertrand
  1. more than a month ago
  2. General
  3. # 2
itadminMC
itadminMC Accepted Answer
Just miss something for mobile device. We tried to change to


 	jQuery('#jsn-profile-tabs-foot a').on('click', function(){

.....

	});

even with 'click touchstart' or 'click touch'
We tried on Safari and Firefox on mobile, and also changed the script like below.



	var clickEvent = (function() {

  	if ('ontouchstart' in document.documentElement === true)

    	return 'touchstart';

  	else

  		return 'click';

    })();

	jQuery('#jsn-profile-tabs-foot a').on(clickEvent, function(){

		var index = jQuery(this).closest('li').attr('data-index');

		jQuery('#jsn-profile-tabs li[data-index="'+index+'"] a').click();

	});

}


Do you have an idea?
Thanks
  1. more than a month ago
  2. General
  3. # 3
admin
admin Accepted Answer
Admin
Hi,
I don't know the correct event but you can bind multiple events with a code like
function footbar(){

	if(jQuery('#jsn-profile-tabs').length == 0) return;

	if(jQuery('#jsn-profile-tabs-foot').length) jQuery('#jsn-profile-tabs-foot').remove();



	var a = jQuery('#jsn-profile-tabs').clone();

	a.first().attr('id','jsn-profile-tabs-foot');

	a.appendTo('#jsn-form');



	jQuery('#jsn-profile-tabs-foot a').bind('click keydown touch ontouchstart',function(){

		var index = jQuery(this).closest('li').attr('data-index');

		jQuery('#jsn-profile-tabs li[data-index="'+index+'"] a').click();

	});

}



jQuery(document).ready(function(){

	if(jQuery('#member-profile').length) setInterval(function(){ footbar() }, 1000);

});
  1. more than a month ago
  2. General
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.