1

It's the first time I post here, even if I've been using this site for quite a long time now. Here is my issue : I'm using jquery-steps to create a validation/checkout form and I'd like to disable tab navigation, which allows users to jump between steps freely (from step 1 to step 3 for example). The tabs have to remain visible.

I realize that the solution might be quite simple, but I'm really stuck for now :/ ...

Thanks for your help, please excuse any english mistake !

MrVonKitty
  • 55
  • 1
  • 7

3 Answers3

4

Ok, after some extended research, I managed to find an alternative solution to my problem. I noticed that all headers are stored inside a ".steps" div. Thus, I added a new CSS property : 

.steps {
  pointer-events: none;
}

which disables all mouse actions for that particular class. I know it's not the cleanest solution possible but hey, it works for me :) !

(thx for your help rafael)

MrVonKitty
  • 55
  • 1
  • 7
0

Have you already checked out the examples of jquery-steps.com? If not, check out the advanced form example here! See also this blog article which describes How to create a Form Wizard using jQuery Steps in detail.

Rafael Staib
  • 1,226
  • 12
  • 14
  • thanks for your advices ! I did check all the examples (and documentation) available on jquery-steps.com, and read the article you just sent me. Unfortunately, my problem persist, I can't find a solution to disable tabbed navigation ! After some extended search, it might have something to do with aria-controller, that's all I could find :/ ... thanks anyway ! – MrVonKitty Dec 09 '14 at 15:29
0

Ran into the same problem today and managed to fix it by adding disabled class to the li elements inside the div.steps. Using pointer-events CSS was not a solution for me as had to disable certain step navigations at certain points. Although this approach might break your CSS i.e. if you have disabled and done classes and disabled styles are overwriting the done ones, nothing a bit of tweaking won't fix though.

Oleg Rayskiy
  • 1
  • 1