You are viewing limited content. For full access, please sign in.

Question

Question

Keep navigation bar for tabs static

Forms
Updated August 17, 2015
asked on August 14, 2015

Hello,

I am referring to the post:

https://answers.laserfiche.com/questions/51952/did-the-code-ever-post-for-how-to-create-tabs-on-forms

 

Basically, I have managed the forms to have tabs, which works fine, however since some of the tabs have more data the page is long.

what I am looking for is a way to keep the tabs always visible or floating as we scroll down the page.

Thanks in advance!

Sahil

0 0

Answer

SELECTED ANSWER
replied on August 17, 2015

On line 48 of your CSS, you put the semicolon outside of the closing brace so that's why the CSS on line 51 wasn't getting applied. All you need to do is just switch the placement of those two characters. Also, I updated the CSS suggestion I gave so that the navbar now stays on top of the form fields (using z-index). Use this as your CSS

.navbar {
  text-align:center;
}

.navbar div {
  padding-top: 12px;
  cursor: pointer;
  width: 165px;
  height: 60px;
  border-radius: 6px;
  background-color: #D8DDB5;
  text-align: center;
  margin: auto;
  border: 2px white solid;
  display:inline-block;
  font-size: 2px;
  font-weight:normal;
  color: #5B8772;
 // position: relative;
 // top: 0;
  //left: 0;
 // z-index: 9999;
  //width: 100%;
 // height: 50px;
}

.navbar div:hover {
  //background-color: #B5CC8E;
   
   background-color: Orange;
  
}
.navbar .selected{
  background-color: #B5CC8E;
  
}



.hidden{
  display: none;
}
#q257, #q258 {width: 20%;}

.cf-form {padding: 0px 10px 40px;}
#cf-formtitle {margin-bottom:0px;}
li[attrtype="custom"].form-focused {background-color:white;}
#q258, #q257 {display: inline-block; width: 350px;}


.fixed {position: fixed;top: 0;margin: auto;z-index: 1;}

 

1 0

Replies

replied on August 14, 2015 • Show version history

If the div for your tabs is still using the class, navbar, then try adding this to your JavaScript

$(window).scroll(function(){
  var sticky = $('.navbar'),
  scroll = $(window).scrollTop();
  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

and this to your CSS

.fixed {position: fixed;top: 0;margin: auto;z-index: 1;}

You may have to play around with the CSS a little.

0 0
replied on August 17, 2015

Thanks Alex,

But Unfortunately there is no effect...

 

Below is the CSS:

 

.navbar {
  text-align:center;
}

.navbar div {
  padding-top: 12px;
  cursor: pointer;
  width: 165px;
  height: 60px;
  border-radius: 6px;
  background-color: #D8DDB5;
  text-align: center;
  margin: auto;
  border: 2px white solid;
  display:inline-block;
  font-size: 2px;
  font-weight:normal;
  color: #5B8772;
 // position: relative;
 // top: 0;
  //left: 0;
 // z-index: 9999;
  //width: 100%;
 // height: 50px;
}

.navbar div:hover {
  //background-color: #B5CC8E;
   
   background-color: Orange;
  
}
.navbar .selected{
  background-color: #B5CC8E;
  
}



.hidden{
  display: none;
}
#q257, #q258 {width: 20%;}

.cf-form {padding: 0px 10px 40px;}
#cf-formtitle {margin-bottom:0px;}
li[attrtype="custom"].form-focused {background-color:white;}
#q258, #q257 {display: inline-block; width: 350px};


.fixed {position: fixed;top: 0;margin: auto;}

 

& this is the JS:

$(document).ready(function () {
  
  
//start pagination
    $('.navitem').on('touchstart click', function () {
      
		$('.section1,.section2,.section3,.section4,.section5,.section6,.section7,.section8,.Submit').hide(); //Hide all sections first  
        $('.navbar').find('.navitem').removeClass('selected'); //Unselect tabs
      
        if ($(this).hasClass('tab1')) {
            $('.section1').show();
            $('.navbar').find('.tab1').addClass('selected');
        }
        else if ($(this).hasClass('tab2')) {
            $('.section2').show();
            $('.navbar').find('.tab2').addClass('selected');
        }
        else if ($(this).hasClass('tab3')) {
            $('.section3').show();
            $('.navbar').find('.tab3').addClass('selected');
        }
        else if ($(this).hasClass('tab4')) {
            $(".section4").show();
            $('.navbar').find('.tab4').addClass('selected');
        }
      	else if ($(this).hasClass('tab5')) {
            $('.section5').show();
            $('.navbar').find('.tab5').addClass('selected');
        }
      	else if ($(this).hasClass('tab6')) {
            $('.section6').show();
            $('.navbar').find('.tab6').addClass('selected');
        }
      	else if ($(this).hasClass('tab7')) {
            $('.section7').show();
            $('.navbar').find('.tab7').addClass('selected');
        }
        else if ($(this).hasClass('tab8')) {
            $('.section8').show();
            $('.navbar').find('.tab8').addClass('selected');
          }
    })
    
    $('.navitem.tab1').trigger('click'); //Click on first tab
//end pagination
  
});

$(window).scroll(function(){
  var sticky = $('.navbar'),
  scroll = $(window).scrollTop();
  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

 

Can you please advice?

 

Regards,

Sahil

0 0
View 3 previous replies
replied on August 17, 2015

In your CSS, you need to switch the last semicolon and closing brace on line 48. Also, for the new line of CSS, use this instead

.fixed {position: fixed;top: 0;margin: auto; z-index: 1;}

This way the navbar stays on top of the form fields instead of below.

0 0
replied on August 17, 2015

Alex,

I'm confused, can you not just put the final version....

Thanks in advance! 

0 0
replied on August 17, 2015

Please! 

0 0
SELECTED ANSWER
replied on August 17, 2015

On line 48 of your CSS, you put the semicolon outside of the closing brace so that's why the CSS on line 51 wasn't getting applied. All you need to do is just switch the placement of those two characters. Also, I updated the CSS suggestion I gave so that the navbar now stays on top of the form fields (using z-index). Use this as your CSS

.navbar {
  text-align:center;
}

.navbar div {
  padding-top: 12px;
  cursor: pointer;
  width: 165px;
  height: 60px;
  border-radius: 6px;
  background-color: #D8DDB5;
  text-align: center;
  margin: auto;
  border: 2px white solid;
  display:inline-block;
  font-size: 2px;
  font-weight:normal;
  color: #5B8772;
 // position: relative;
 // top: 0;
  //left: 0;
 // z-index: 9999;
  //width: 100%;
 // height: 50px;
}

.navbar div:hover {
  //background-color: #B5CC8E;
   
   background-color: Orange;
  
}
.navbar .selected{
  background-color: #B5CC8E;
  
}



.hidden{
  display: none;
}
#q257, #q258 {width: 20%;}

.cf-form {padding: 0px 10px 40px;}
#cf-formtitle {margin-bottom:0px;}
li[attrtype="custom"].form-focused {background-color:white;}
#q258, #q257 {display: inline-block; width: 350px;}


.fixed {position: fixed;top: 0;margin: auto;z-index: 1;}

 

1 0
replied on August 17, 2015

Alex,

Works Perfectly!!!

Thanks a lot!!!

 

 

0 0
replied on August 17, 2015

Just one more question, I have 7 Tabs in the navbar, is there a way as per my CSS to make a Background Color of the whole area  which is HTML where all the Tabs are?

 

Currently all the Tabs float when I scroll, I want the Background to be of different Color, so that it Looks better....

 

Thanks.

S

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...