TOPIC:

over Formular a bar to show on which side of how many 1 year 10 months ago #235214

  • C3zehn's Avatar Topic Author
  • C3zehn
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 75
  • Thanks: 1
Hello,

I would like to have a bar at my form above where it indicates to me Page 1 of 5 when I go to the next page Page 2 of 5 as an example if the user is finished I would like to have a PDF that is all that is in the form is summarized is this possible?
Thank you
Andy
Attachments:

Please Log in or Create an account to join the conversation.

over Formular a bar to show on which side of how many 1 year 10 months ago #235225

  • MarioPuco's Avatar
  • MarioPuco
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 5958
  • Karma: 119
  • Thanks: 557

Please Log in or Create an account to join the conversation.

Last edit: Post by MarioPuco.

over Formular a bar to show on which side of how many 1 year 10 months ago #235249

  • Eddy.vh's Avatar
  • Eddy.vh
  • Away
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 592
  • Karma: 4
  • Thanks: 98
Hello.

Mario's link leads to a forum discussion where the populated code does not work because it uses <a href="#"...> which then redirects to the site's homepage. It is better to use a code like the following, no link, no redirection, just a passage from one page to another.
It remains to format the style of the list at the top of the page using CSS
function ff_FormName_init()
{
JQuery('#bfPage1').prepend('<ul class="marker"><li class="active"><span onclick="ff_switchpage(1);">1</span></li><li><span onclick="ff_switchpage(2);">2</span></li><li><span onclick="ff_switchpage(3);">3</span></li><li><span onclick="ff_switchpage(4);">4</span></li></ul>');

JQuery('#bfPage2').prepend('<ul class="marker"><li><span onclick="ff_switchpage(1);">1</span></li><li class="active"><span onclick="ff_switchpage(2);">2</span></li><li><span onclick="ff_switchpage(3);">3</span></li><li><span onclick="ff_switchpage(4);">4</span></li></ul>');

JQuery('#bfPage3').prepend('<ul class="marker"><li><span onclick="ff_switchpage(1);">1</span></li><li><span  onclick="ff_switchpage(2);">2</span></li><li class="active"><span onclick="ff_switchpage(3);">3</span></li><li><span onclick="ff_switchpage(4);">4</span></li></ul>');

JQuery('#bfPage4').prepend('<ul class="marker"><li><span onclick="ff_switchpage(1);">1</span></li><li><span  onclick="ff_switchpage(2);">2</span></li><li><span onclick="ff_switchpage(3);">3</span></li><li class="active"><span onclick="ff_switchpage(4);">4</span></li></ul>');
} // ff_FormName_init

I attach an example form as an attachment.

File Attachment:

File Name: Package_Sa...orms.zip
File Size:8 KB
Attachments:

Please Log in or Create an account to join the conversation.

over Formular a bar to show on which side of how many 1 year 10 months ago #235257

  • C3zehn's Avatar Topic Author
  • C3zehn
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 75
  • Thanks: 1
Hello
my problem is the beam as well how do i get this?
Attachments:

Please Log in or Create an account to join the conversation.

over Formular a bar to show on which side of how many 1 year 10 months ago #235258

  • C3zehn's Avatar Topic Author
  • C3zehn
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 75
  • Thanks: 1
Hello
my problem is the beam as well how do i get this?

Please Log in or Create an account to join the conversation.

over Formular a bar to show on which side of how many 1 year 10 months ago #235285

  • Eddy.vh's Avatar
  • Eddy.vh
  • Away
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 592
  • Karma: 4
  • Thanks: 98
Hello.

With a little css.
The following styles are valid for the code I provided above.
Just paste it at the end of the file /media/breezingforms/themes/nameOfYourTheme/theme.css
/* PAGE MARKER AVEC LISTE DE CHANGEMENT DE PAGE */
.bfQuickMode ul.marker {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  padding: 0;
}
.bfQuickMode ul li {
  flex: 1 1 auto;
  position: relative;
  text-align: center;
  transition: 0.3s;
}
.bfQuickMode ul li span {
  display: inline-block;
  height: 35px;
  width: 35px;
  line-height: 32px;
  background: deepskyblue;
  border: 2px solid deepskyblue;
  border-radius: 50%;
  transition: 0.4s;
}
.bfQuickMode ul li span:hover {
  cursor: pointer;
  background: #99e5ff;
}
.bfQuickMode ul li span:before, .bfQuickMode ul li span:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 2px;
  background: deepskyblue;
  top: 50%;
  left: 0;
  z-index: -1;
}
.bfQuickMode ul li.active span {
  background: #99e5ff;
}
.bfQuickMode ul li:not(:last-child) span:after {
  left: 50%;
}
.bfQuickMode ul li:first-child span:before, .bfQuickMode ul li:last-child span:after {
  height: 0;
}

Good luck.

Regards
The following user(s) said Thank You: MarioPuco

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.100 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!