Problem with IPS Steps Javascript
4 posters
Page 1 of 1
Problem with IPS Steps Javascript
Hello,
I am using the following code for IPS Steps in registration:
On the first step the step bar displaying normally:
On the second & third step is not displaying:
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"> </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 April 18th 2015, 12:03 am; edited 1 time in total
Re: Problem with IPS Steps Javascript
Is that code made for your forum's version?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Problem with IPS Steps Javascript
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.
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.
Re: Problem with IPS Steps Javascript
Have you tried asking for help from where you got the code?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Problem with IPS Steps Javascript
->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"> </span>' +
' </li>' +
' </ul>' +
'</div>'
);
};
});
Note: The code has been encoded in UTF8, if you have problems with encoding, let me know!
JS
Re: Problem with IPS Steps Javascript
@Black-Shadow
Simply because the code does not contain the third part!
But no problem, here is the code with the third part:
Result:
So long,
JS
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"> </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"> </span>' +
' </li>' +
' </ul>' +
'</div>'
);
};
});
Result:
So long,
JS
Re: Problem with IPS Steps Javascript
Thanks @JScript Now it is solved.
@Roke. here is the CSS
@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;
}
Re: Problem with IPS Steps Javascript
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Javascript activation problem
» JavaScript problem!
» Problem with a refresh javascript
» Javascript in all pages problem
» Words problem in Javascript
» JavaScript problem!
» Problem with a refresh javascript
» Javascript in all pages problem
» Words problem in Javascript
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum