The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Problem with IPS Steps Javascript

View previous topic View next topic Go down

Solved Problem with IPS Steps Javascript

Post by Van-Helsing on Tue Apr 14, 2015 3:49 pm

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:


Last edited by Black-Shadow on Fri Apr 17, 2015 11:03 pm; edited 1 time in total

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Van-Helsing on Wed Apr 15, 2015 4:12 pm

bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Van-Helsing on Thu Apr 16, 2015 10:00 pm

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by SLGray on Thu Apr 16, 2015 10:58 pm

Is that code made for your forum's version?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Van-Helsing on Thu Apr 16, 2015 11:05 pm

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.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by SLGray on Fri Apr 17, 2015 8:32 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by JScript on Fri Apr 17, 2015 9:14 pm

@SLGray wrote:Have you tried asking for help from where you got the code?
scratch -> What the fuck ?!?


@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

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Van-Helsing on Fri Apr 17, 2015 10:04 pm

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.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by JScript on Fri Apr 17, 2015 10:30 pm

@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

JScript
Forumember

Male Posts : 741
Reputation : 167
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Roke. on Fri Apr 17, 2015 10:45 pm

What's the CSS for this?

Roke.
New Member

Posts : 17
Reputation : 1
Language : Italian, English

http://www.zanimanga.italians.tv

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by Van-Helsing on Fri Apr 17, 2015 11:02 pm

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;
    }

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Problem with IPS Steps Javascript

Post by SLGray on Fri Apr 17, 2015 11:48 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum