Problem with IPS Steps Javascript

Hello,
I am using the following code for IPS Steps in registration:

Code:


jQuery(document).ready(function() {
if(jQuery('.main-content.standalone:contains("Οι διαχειριστές και οι συντονιστές")').length) {jQuery('#pun-visit + .pun-crumbs').after('<div class="ipsSteps clearfix"><ul><li class="ipsSteps_active"><strong class="ipsSteps_title">Βήμα 1</strong><span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;">
<strong class="ipsSteps_title">Βήμα 2</strong><span class="ipsSteps_desc"> Λογαριασμός</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;"><strong class="ipsSteps_title">Βήμα 3</strong><span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow"> </span></li></ul></div>');}if(jQuery('.main #ucp div:contains("Πληροφορίες εγγραφής")').length) {jQuery('#pun-visit + .main #ucp div:contains("Πληροφορίες εγγραφής")').before('<div class="ipsSteps clearfix" style="margin-bottom: 8px;"><ul><li class=""><strong class="ipsSteps_title">Βήμα 1</strong><span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"> </span></li><li class="ipsSteps_active" style="width: 83px;"><strong class="ipsSteps_title">Βήμα 2</strong><span class="ipsSteps_desc">Ο λογαριασμός σας</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;"><strong class="ipsSteps_title">Βήμα 3</strong><span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow">&nbsp;</span></li></ul></div>');}});


On the first step the step bar displaying normally:


On the second & third step is not displaying:

bump

Bump

Is that code made for your forum's version?

Hello @SLGray,
Yes its written for f/m punbb forum version. I believe on the second and third steps the javascript is not finding the elements due my skin. I tried to find the elements but I confused somewhere and I just fix it only for the first step which I modified the element and I cant find the other two elements after some tries into the javascript.

Have you tried asking for help from where you got the code?

SLGray wrote:Have you tried asking for help from where you got the code?

->

---

@Black-Shadow

Hello!

The code contained errors in JavaScript and HTML, do a test with the fix what I did:

Code:


jQuery(function() {
   if (jQuery('.main-content.standalone:contains("Οι διαχειριστές και οι συντονιστές")').length) {
      jQuery('#pun-visit + .pun-crumbs').after(
         '<div class="ipsSteps clearfix">' +
         '   <ul>' +
         '      <li class="ipsSteps_active">' +
         '         <strong class="ipsSteps_title">Βήμα 1</strong>' +
         '            <span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;"> ' +
         '         <strong class="ipsSteps_title">Βήμα 2</strong>' +
         '            <span class="ipsSteps_desc">Λογαριασμός</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 3</strong>' +
         '         <span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '   </ul>' +
         '</div>'
      );
   }
   if (jQuery('#ucp div.main-head:contains("Πληροφορίες εγγραφής")').length) {
      jQuery('#ucp div.main-head:contains("Πληροφορίες εγγραφής")').before(
         '<div class="ipsSteps clearfix" style="margin-bottom: 8px;">' +
         '   <ul>' +
         '      <li>' +
         '         <strong class="ipsSteps_title">Βήμα 1</strong>' +
         '            <span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li class="ipsSteps_active" style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 2</strong>' +
         '         <span class="ipsSteps_desc">Ο λογαριασμός σας</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 3</strong>' +
         '         <span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow">&nbsp;</span>' +
         '      </li>' +
         '   </ul>' +
         '</div>'
      );
   };
});


Note: The code has been encoded in UTF8, if you have problems with encoding, let me know!

JS

Hello @JScript @SLGray,
Now fixed and the step 2, on the third step is not displaying.

@SLGray yes I opened a code request on forum which i found the code but i havent any response yet.

@Black-Shadow
Simply because the code does not contain the third part!

But no problem, here is the code with the third part:

Code:


jQuery(function() {
   // 1
   if (jQuery('.main-content.standalone:contains("Οι διαχειριστές και οι συντονιστές")').length) {
      jQuery('#pun-visit + .pun-crumbs').after(
         '<div class="ipsSteps clearfix">' +
         '   <ul>' +
         '      <li class="ipsSteps_active">' +
         '         <strong class="ipsSteps_title">Βήμα 1</strong>' +
         '            <span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;"> ' +
         '         <strong class="ipsSteps_title">Βήμα 2</strong>' +
         '            <span class="ipsSteps_desc">Λογαριασμός</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 3</strong>' +
         '         <span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '   </ul>' +
         '</div>'
      );
   }
   // 2
   if (jQuery('#ucp div.main-head:contains("Πληροφορίες εγγραφής")').length) {
      jQuery('#ucp div.main-head:contains("Πληροφορίες εγγραφής")').before(
         '<div class="ipsSteps clearfix" style="margin-bottom: 8px;">' +
         '   <ul>' +
         '      <li>' +
         '         <strong class="ipsSteps_title">Βήμα 1</strong>' +
         '            <span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li class="ipsSteps_active" style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 2</strong>' +
         '         <span class="ipsSteps_desc">Ο λογαριασμός σας</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 3</strong>' +
         '         <span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow">&nbsp;</span>' +
         '      </li>' +
         '   </ul>' +
         '</div>'
      );
   };
   // 3
   if (jQuery('#form_confirm div.main-head:contains("Πληροφορίες εγγραφής")').length) {
      jQuery('#form_confirm div.main-head:contains("Πληροφορίες εγγραφής")').before(
         '<div class="ipsSteps clearfix" style="margin-bottom: 8px;">' +
         '   <ul>' +
         '      <li>' +
         '         <strong class="ipsSteps_title">Βήμα 1</strong>' +
         '            <span class="ipsSteps_desc">Όροι Χρήσης</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 2</strong>' +
         '         <span class="ipsSteps_desc">Ο λογαριασμός σας</span><span class="ipsSteps_arrow"></span>' +
         '      </li>' +
         '      <li class="ipsSteps_active" style="width: 83px;">' +
         '         <strong class="ipsSteps_title">Βήμα 3</strong>' +
         '         <span class="ipsSteps_desc">Επιβεβαίωση</span><span class="ipsSteps_arrow">&nbsp;</span>' +
         '      </li>' +
         '   </ul>' +
         '</div>'
      );
   };
});


Result:


So long,

JS

What's the CSS for this?

Thanks @JScript Now it is solved.
@Roke. here is the CSS

Code:


.ipsSteps {
    background: #E9E9E9;
    height: 55px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    .ipsSteps li:first-child {
    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    }
    .ipsSteps ul li {
    float: left;
    padding: 11px 33px 5px 18px;
    color: #323232;
    background-image: url('http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png');
    background-repeat: no-repeat;
    background-position: 100% -56px;
    position: relative;
    height: 39px;
    text-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px;
    }
    .ipsSteps_title {
    display: block;
    font-size: 14px;
    padding-bottom: 4px;
    }
    .ipsSteps_desc {
    font-size: 11px;
    }
    .ipsSteps ul li:first-child .ipsSteps_arrow {
    display: none !important;
    }
    .ipsSteps .ipsSteps_active {
    background-position: 100% 0;
    color: white;
    text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.8);
    }
    .ipsSteps_active .ipsSteps_arrow {
    display: block;
    position: absolute;
    left: -23px;
    top: 0;
    width: 23px;
    height: 55px;
    background: url('http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png') no-repeat 0 -112px;
    }