I'm hoping of having this captcha on my website:
http://lirullu.com/
how would i test the outcome of this in a php form? Here is the code I have in my form.php file currently:
<script type="text/javascript">
$(window).load(function() {
var righthash1 = "cc03412089f87b9c509aaaa1";
$("#hf023d03").sortable({
items: ".cnt", stop: function () {
hash = "";
$("#hf023d03 .cnt").each(function (a, b) { hash += $(b).attr("id"); }); if (hash == righthash1) {
$(".slg1").fadeIn("fast");
} else {
$(".slg1").fadeOut("fast");
}
}
});
});
</script>
<div id="first_cnt">
<h2>Are you a traveline hero?</h2>
<span class="htext">(drag the answer)</span>
<div class="d1" id="hf023d03">
<div class="cnt" id="509aaaa1"><span class="yes">S</span></div>
<div class="cnt" id="89f87b9c"><span class="yes">E</span></div>
<div class="cnt" id="cc034120"><span class="yes">Y</span></div>
</div>
<div class="slg1">
<h3>is the correct answer!</h3>
</div>
</div>
I would seriously consider using Google's reCaptcha which has possibly the nicest API.
https://www.google.com/recaptcha
You can follow the tutorials and guides, it provides you the PHP and the Javascript you need to integrate the system with any website you create.
Related
I'd like to preface that I am new to web development, so I apologize, I know this question seems to be out there a lot. I have tried many solutions, but I just can't seem to get anything to work.
I am working on a webpage that has a series of tutorial videos, each is in their own modal with descriptions. Is there a way I can stop the video from playing upon closing without needing to create ID tags for each video or use bootstrap? (I'm honestly not even sure how to use it, if I'm being honest.) I've seen a lot of solutions, but none of them seem directly applicable to my existing code.
<button id="myBtn">Video Title</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Video Title</h3>
</div>
<div class="modal-body">
<p>
Video description Prose
<div class="video-container">
<iframe class="responsive-iframe" src="https://drive.google.com/file/d/1M-nlvbG_WUuIq-sjHdntgk1VrhdVnKDh/preview" width="950" height="550"></iframe>
</div>
</p>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
Here is the corresponding script I'm using at the bottom of the page.
<script>
var datamap = new Map([
[document.getElementById("myBtn"), document.getElementById("myModal")],
[document.getElementById("myBtn1"), document.getElementById("myModal1")],
[document.getElementById("myBtn2"), document.getElementById("myModal2")],
[document.getElementById("myBtn3"), document.getElementById("myModal3")],
[document.getElementById("myBtn4"), document.getElementById("myModal4")],
[document.getElementById("myBtn5"), document.getElementById("myModal5")],
[document.getElementById("myBtn6"), document.getElementById("myModal6")],
[document.getElementById("myBtn7"), document.getElementById("myModal7")]
]);
datamap.forEach((value, key) => {
doModal(key, value);
});
function doModal(anchor, popupbox) {
// Get the <span> element that closes the modal
var span = popupbox.getElementsByClassName("close")[0];
anchor.addEventListener("click", function (event) {
popupbox.style.display = "block";
});
span.addEventListener("click", function (event) {
popupbox.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == popupbox) {
popupbox.style.display = "none";
}
var
});
}
</script>
You can register handlers for custom modal events that Bootstrap fires, just as you can for built-in events like "click."
It's been a long while since I've done it without jQuery, but something like this should work:
const modals = document.getElementsByClassName("modal");
for (let i = 0; i < modals.length; i++) {
window.addEventListener("hide.bs.modal", function(e) {
// do your stuff
});
}
That's as far as I can go since you haven't included in your question is any detail on the video file itself. I would also question why you're using an iframe instead of a video element.
I have a page in php home.php and it has views something like this
home.php
<?php
?>
<div id="showView">
Show User
Show Car
</div>
<div id="userView">
<p>This is view where user profile is shown</p>
</div>
<div id="carView">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$("#user").click(function(e)
{
//This where I am confused
var car = $("#carView").html();
$("#showView").append(car);
});
});
</script>
Now I am confused that how to pick userView and append to showView I tried a bit of coding but it didn't help and it didn't show result. Moreover is there any way that when that userView is appended then its html is shown when I view-source a page?
You have two options:
1) you generate the html on the fly using jquery (Not recommended)
<div id="showView">
Show User
Show Car
<div id="view_content"></div>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
if ($(this).attr('id') == 'user') {
viewHTML = '<div id="userView"><p>This is view where user profile is shown</p></div>';
} else if ($(this).attr('id') == 'car') {
viewHTML = '<div id="userView"><p>This is view where user car is shown</p></div>';
}
$("#view_content").html(viewHTML);
});
});
</script>
2) show/hide the container on trigger
<div id="showView">
Show User
Show Car
</div>
<div id="userView" class="view_content" style="display:none">
<p>This is view where user profile is shown</p>
</div>
<div id="carView" class="view_content" style="display:none">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
$('[class=view_content]').hide();
if ($(this).attr('id') == 'user') {
$('#userView').show();
} else if ($(this).attr('id') == 'car') {
$('#carView').show();
}
});
});
</script>
I don't recommend any of these solutions, you should use MVC for a better code.
i've been trying to learn yii recently and so i started to work on an simple form with bootstrap. im using yii 1.1.x version not version 2 so i had to install bootstrap manually and write coding based on it.
anyway coming back to the problem it seems that my has-success class is being called correctly by jquery but it does'nt seem so for the has-error...
can someone help and im grateful for your help
<script>
$(document).ready(function() {
$('#contact_name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (is_name) {
$('#contact_name').removeClass("has-success").addClass('has-error');
} else {
$('#contact_name').removeClass("has-error").addClass('has-success');
}
});
});
</script>
<h1>Example Form Validation</h1>
<br>
<div class="form " id="cla">
<?php $form=$this->beginWidget('CActiveForm',array( 'id' =>'form','htmlOptions'=> array('class'=> 'form-horizontal', 'name' => 'forvalidate', 'id' => 'registration-form' ))); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<div class="form-group col-lg-5" id='contact_name'>
<?php echo $form->label($model,'name',$htmloptions = array('class'=>'control-label ',)); ?>
<div class="controls">
<?php echo $form->textField($model,'name',array('name' =>'name' ,'class'=>'form-control col-xs-5', 'aria-describedby'=>'inputSuccess4Status')); ?>
</div>
</div>
</div>
<?php $this->endWidget(); ?>
</div>
<!-- form -->
Try
$('#contact_name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (!is_name) {
$('#contact_name').parent().removeClass("has-success").addClass('has-error');
} else {
$('#contact_name').parent().removeClass("has-error").addClass('has-success');
}
});
I think "has-error" and "has-success" classes don't apply directly on the input but the div where the inputs are
You have to add these classes. See the highlighted code below:
$(document).ready(function() {
$('#contact_name').on('input', function() {
var is_name = $(this).val();
if (is_name) {
$('#contact_name').removeClass("has-success").addClass('has-error');
// ^^^^^^^^^^^^^^^^^^^^^^^
} else {
$('#contact_name').removeClass("has-error").addClass('has-success');
// ^^^^^^^^^^^^^^^^^^^^^^^^
}
});
});
I have written this code. Here after logging into facebook, the document needs to redirect to check3.php. Here is the code..
<html>
<body>
<div id="header">
<h1>ReviewBox</h
<ul id="nav">
<li>Real Reviews For Real People</li>
<li style="background: url(images/request.png);display:block; margin : 0 10px 0 0;float:right;text-indent: -9999px; width : 200px; height: 30px;">Request Review From Friends</li><br/>
</ul><br/><br/><br/><br/></div>
<div id="container">
<div id="content">
<p>Someone is always out there, waiting to know what you have to say.
So why not speak out with ReviewBox?</p><br/>
<h6>Get Started!</h6><br/><br/>
<center>
<div id="fb-root"></div>
<script language="javascript" src="json2.js"> </script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'xxxxxxxxxxxx', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button perms="read_stream,publish_stream,email,offline_access">
Login with Facebook
</fb:login-button>
<br/><br/>
<p>Like ReviewBox :</p><br/><center>
<fb:like href="https://www.facebook.com/apps/application.php?id=xxxxxxxxxx" send="false" width="220" show_faces="true" font=""></fb:like></center>
<script>
FB.api('/me',function(response) {
setCookie("fbname",response.name,365);
setCookie("fbid",response.id,365);
setCookie("checker",1,1);
var username=getCookie("fbid");
if (username!="undefined" && username!="")
{
alert("Welcome Again, " + response.name + "!");
sample();
//window.location.reload();
}
else
{
alert("Welcome Guest! Please Login with Facebook To Get Started With ReviewBox!");
username=response.id;
username2=response.name;
if (username!=null && username!="")
{
setCookie("fbid",username,365);
setCookie("fbname",username2,365);
setCookie("checker",1,1);
}
}
});
function sample()
{
document.form1.submit();
}
</script>
<form name="form1" action="check3.php" method="post">
<input type="hidden" name="fb_user" id="fb_user" value="" />
</form>
</body>
</html>
But when I run this code and after logging into facebook the code inside sample() function is not executed.. as a result my page does not redirects to check3.php.
Any suggestion?
Learn,
First of all, determine whether or not the Facebook reponse object actually contains a value. It is possible that the API is for some reason, not returning an ID result?
Once you verify that the API is indeed returning a value, perhaps use that in your "if" statement, instead of username?
I don't know exactly what is wrong, but I am fairly certain that the "fbid" value is not being set inside the cookie, which to me implies that the API is not returning a correct result, or you are passing in invalid parameters to the API.
Good luck!
H
I'm reading up all I can on jQuery, but this week I like(need) to finish a website and I could find a solution to this problem in the last eight hours.
Setting
I'm using a ajaxed wp theme which I'm customising to my own liking.
Problem
I've wrote a simple function to change the header image and the header text when you click on the main navigation links.
The function does work in the header.php but doesn't work in a custom front page (main_navp.php) I've included in index.php.
On navp.php there's an image when onclicked should do the same changes as a click on the nav bar.
index.php
<?php get_header(); ?>
<div id="main-content"><div id="inside">
<?php get_template_part('main_navp'); ?>
<?php if// HERE IS THE WP LOOP (not used so left out) //?>
<div class="pagination">
<span class="older"><?php next_posts_link('« Older Entries') ?></span>
<span class="newer"><?php previous_posts_link('Newer Entries »') ?></span>
</div>``
<?php else : ?>
<h1>no posts...</h1>
<?php endif; ?>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The function is included in the header.php in the ..head>
<script type="text/javascript">
$(document).ready(function()
{
$("a[title='Gigs']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)");
$("a#nav_text").html("Gigs");
});
$("a[title='Bio']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)");
$("a#nav_text").html("Biography");
});
$("a[title='Gitaarles']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("li[id='homew']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)");
$("a#nav_text").html("Home");
});
});
</script>
In the main_navp.php (included in index.php afther the header.php) the function does not work on this item. But it should be triggered by $("p[id='les_mp']").live("click", function() as seen above.
<div id="boxred_b">
<div class=head_box><a>Gitaarles</a></div>
<p class="homeles" id="les_mp">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" />
</p>
The main jquery is caled in the header.php
<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>
In the footer.php are all of the rest of the jquery functions.
<!-- http://benalman.com/projects/jquery-urlinternal-plugin/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.ba-urlinternal.min.js'></script>
<!-- http://www.asual.com/jquery/address/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.address-1.3.2.min.js'></script>
<script>
// Original JavaScript by Chris Coyier
// Updated October 2010 by Stewart Heckenberg & Chris Coyier
$(".home li.home").removeClass("home").addClass("current_page_item");
$("#column-wrap").append("<img src='<?php bloginfo('template_directory'); ?>/images/ajax-loader.png' id='ajax-loader' />");
$("#s").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
if ($(".widget_categories li").length%2 != 0) {
$(".widget_categories ul").append("<li><a> </a></li>");
}
if ($(".widget_tag_cloud a").length%2 != 0) {
$(".widget_tag_cloud").append("<a> </a>");
}
// The reason this JavaScript is in footer.php instead of its own file is basically the next line.
var base = '<?php bloginfo('url'); ?>',
$mainContent = $("#main-content"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
$('a:urlInternal').live('click', function(e) {
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
$('#searchform').submit(function() {
var s = $searchInput.val();
if (s) {
var query = '/?s=' + s;
$.address.value(query);
}
return false;
});
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #inside', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base);
location = base + '/#' + diff;
}
});
</script>
</div>
I've tried to keep things as short as possible. If you like any more information please ask.
-update
using the live function in the header doesn't seem to solve the problem.
I'm using XAMPP to run the website locally. If it helps I could make an online wp installation or could provide the webside (html/java) source.
Because you are Ajax-ing your page, the events are not subscribed to your new elements. Try using the .live() command.
Also, is this ok?
$("p[id='les_mp']").click(, function()...
Don't know for sure about that comma.
I've tried using the live function in the code like this.
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
in the
$(document).ready(function()
{ .... }
in header.php
Still it doesn't work when be onclicked in main_nav.php
When I put the code out of the main_nav in to the header.php
it works.
You may want to use the method in the link below to refactor the ajax stuff to a separate file. Not sure if it helps with the original problem, but i've seen things work after doing that http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global
basically you get your url into a variable that is being printed and your scripts have access to using wp_localize_script