Slider Captcha

Slider Captcha 2.6.2

No permission to download
The slider is too wide on narrow devices.

IMG_3279[1].webp

Also why does it load this font - styles/default/slidercaptcha/entypo/fontello.eot
and make loads and loads of definitions like
.sc-icon-note > span:before {
content: "\e918"; }
in slidecaptcha.css ?
Seriously, is all that 1,250 lines of css really necessary?
 
Last edited:
The slider is too wide on narrow devices.

View attachment 88935
Currently, i fix the slider width is 300px in the captcha_slidercaptcha template.
width: 300px;

You can change it to : width: '100%' (Responsive) or other values.

More info here - https://github.com/ist-dsi/jquery-ui-slider-captcha

Also why does it load this font - styles/default/slidercaptcha/entypo/fontello.eot
and make loads and loads of definitions like
.sc-icon-note > span:before {
content: "\e918"; }
in slidecaptcha.css ?
Seriously, is all that 1,250 lines of css really necessary?

That font is a part of the original jQuery Ui Slider Captcha - https://github.com/ist-dsi/jquery-ui-slider-captcha
It's an icon font. Users can customize the slider icons by changing the init js. For an example:
HTML:
$( '#slider' ).sliderCaptcha({
face: {
icon: 'plus', // icon name
iconAfterUnlock: 'stop' // and this
}
});

And yes, you can remove icons which you don't use.
 
Last edited:
what is the secret key for ? ? I don't use it atm but the slider works fine so I don't understand the use of it.
 
Got a server error:
ErrorException: session_start(): open(:/home/sites/php-session/sess_3pbe01cc8v4f4g02tpd4q6irn6, O_RDWR) failed: No such file or directory (2) - library/SliderCaptcha/ControllerPublic/Index.php:9
Generated By: Unknown Account, 14 minutes ago
Stack Trace
#0 [internal function]: XenForo_Application::handlePhpError(2, 'session_start()...', '/home/sites/avf...', 9, Array)
#1 /home/sites/avforums/public_html/library/SliderCaptcha/ControllerPublic/Index.php(9): session_start()
#2 /home/sites/avforums/public_html/library/XenForo/FrontController.php(347): SliderCaptcha_ControllerPublic_Index->actionToken()
#3 /home/sites/avforums/public_html/library/XenForo/FrontController.php(134): XenForo_FrontController->dispatch(Object(XenForo_RouteMatch))
#4 /home/sites/avforums/public_html/index.php(13): XenForo_FrontController->run()
#5 {main}
Request State
array(3) {
["url"] => string(51) "https://www.avforums.com/index.php?scvalidate/token"
["_GET"] => array(1) {
["scvalidate/token"] => string(0) ""
}
["_POST"] => array(2) {
["action"] => string(7) "sctoken"
["time"] => string(10) "1415877102"
}
}
 
ahh, my bad, i forgot to remove a line in the php file - library/SliderCaptcha/ControllerPublic/Index.php
Line 9 : if(!isset($_SESSION)) session_start();
Its not necessary because the slider is not based on Session

I will update the addon to fix that.
 
what is the secret key for ? ? I don't use it atm but the slider works fine so I don't understand the use of it.
The slider validation hash is based on time, visitor IP and it would be better if also based on a secret key that is generated by website administator.
 
If your website is using FontAwesome, just replace your slidercaptcha.css template with this css
HTML:
@charset "UTF-8";

/* GENERAL STYLES */
.slider_captcha {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #a3a3a3;
  background: #eeeeee;
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 46px;
  padding: 0;
  -moz-border-top-left-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -ms-border-top-left-radius: 3px;
  -ms-border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-top-right-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -ms-border-top-right-radius: 3px;
  -ms-border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .slider_captcha span {
  cursor: default;
  position: relative;
  line-height: 46px; }
  .slider_captcha > span {
  margin: 0 auto; }

.swipe-knob {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  width: 46px;
  height: 46px;
  background-color: #72d5ee;
  color: white;
  -moz-border-top-left-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -ms-border-top-left-radius: 3px;
  -ms-border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-top-right-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -ms-border-top-right-radius: 3px;
  -ms-border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px; }
  .swipe-knob:not(.type_filled)[class*=" sc-icon-"] > span:after {
  display: none; }
  .swipe-knob:not(.type_filled) span {
  display: table;
  width: 100%;
  height: 100%;
  cursor: move; }
  .swipe-knob:not(.type_filled) span:after {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f054";
  cursor: move; }
  .swipe-knob:not(.type_filled).swipe_ended {
  background-color: #868d8f;
  right: 0;
  cursor: auto; }
  .swipe-knob:not(.type_filled).swipe_ended span {
  width: 100%;
  height: 100%; }
  .swipe-knob:not(.type_filled).swipe_ended span[class*=" sc-icon-"]:after {
  display: none; }
  .swipe-knob:not(.type_filled).swipe_ended span:after {
  content: "\f00c"; }
  .swipe-knob.type_filled {
  left: 46px;
  margin-left: -100%;
  width: 100%;
  cursor: move;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .swipe-knob.type_filled[class*=" sc-icon-"] span {
  position: absolute;
  right: 19px;
  top: 0;
  cursor: move; }
  .swipe-knob.type_filled[class*=" sc-icon-"] span:after {
  display: none; }
  .swipe-knob.type_filled[class*=" sc-icon-"] span:before {
  display: block;
  vertical-align: none; }
  .swipe-knob.type_filled span {
  position: absolute;
  right: 19px;
  top: 0;
  cursor: move; }
  .swipe-knob.type_filled span:after {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f054"; }
  .swipe-knob.type_filled.swipe_ended {
  background-color: #868d8f;
  right: 0;
  cursor: auto; }
  .swipe-knob.type_filled.swipe_ended span:after {
  content: "\f00c"; }

.knob-destiny {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px; }
 

Attachments

I've got a couple of reports recently of Facebook registrations failing due to "captcha error". Since there is no way to determine if XF registrations were by facebook, I cannot tell if these are isolated or all facebook registrations have stopped.
Does Slider Captcha also present on Facebook registrations? Could it be failing?
 
I've got a couple of reports recently of Facebook registrations failing due to "captcha error". Since there is no way to determine if XF registrations were by facebook, I cannot tell if these are isolated or all facebook registrations have stopped.
Does Slider Captcha also present on Facebook registrations? Could it be failing?
The slider captcha is not rendered on social registrations.
 
The slider is too wide on narrow devices.

View attachment 88935

[...]

Fixed just adding this in Extra.css:
Code:
.slider_captcha {
    width: 100% !important;
}

mMryPHpl.png

great captcha, thanks @LeoTran
 
Last edited:
While I had many questions and concerns at the start of this thread, I've finally given this a go after you've fixed some of the issues I was raising. I gotta say, I'm quite impressed. This is my spam cleaner logs over the last few days (just showing dates and times, not usernames):
7WjoBZ5.png

gDBV8T4.png

kXy0EIn.png


You can roughly tell where I installed it. It was installed at 1:20pm on Saturday and my team is very quick at picking up spam. I think most of what we have cleaned since installing have been actual humans spamming, not bots like we were dealing with previously.

Thank you for this great addon.
 
@LeoTran - One thing I'm noticing is a drastic decrease in registrations. Anywhere between 200-600/day (so I doubt spam bots account for that). I did have one staff member try it out on his iPod Touch (gen 5 I think) and said the slider didn't work. Just wondering if you know anything about it not working on certain touch devices.
 
@AzzidReign , There are some big forums using this captcha such as
https://www.avforums.com
http://www.swedroid.se/forum/

I have not heard any feedbacks like that. And i can not check the slider on Ipod Touch, that depends on the Slider jquery, so sorry i can't provide the details.

There is an option you should double check is Timeout: Admin CP -> Options -> Slider Captcha -> Timeout
If you set that timeout too low, that could be the problem.
 
Hi @LeoTran. Thanks for this great captcha.
[Suggestion] Would be great if there are the possibility to show some warning / overlay when the new user press the sign up button without slide the captcha ...(yes, some times happen with some users) :oops:
Some of them says, look, doesn't work: :oops:
u3xkhGJ.gif

Some overlay or something like this:
ba3cb77c15dd2a393b410cc921a76107.png
would be great. :)
 
@AzzidReign , There are some big forums using this captcha such as
https://www.avforums.com
http://www.swedroid.se/forum/

I have not heard any feedbacks like that. And i can not check the slider on Ipod Touch, that depends on the Slider jquery, so sorry i can't provide the details.

There is an option you should double check is Timeout: Admin CP -> Options -> Slider Captcha -> Timeout
If you set that timeout too low, that could be the problem.
I had it set to 1.5 min, so I guess that could have been too short for mobile devices. I've bumped it up to 3 min to see if that helps. Does anyone suggest a good time frame?
 
Hello,
could I request please that rather than using the fontello font, you use fontawesome? Lots of people already use this and it would save on resources as well as a bunch of css.
Thanks
Exactly. The best way to optimise resources is use the only things that we need. Fa have more than 500 icons, and we need in most of cases just around 10-15 only :coffee:
 
Top Bottom