I'm using WordPress.
I want to navigate my attachment page with left and right key.
Here is my codes, but not working;
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("j", function() {
//alert('j pressed' + document.getElementById("next").href);
//document.getElementById("next").click();
window.location=<?php echo $image->next_image_link ?>;
});
<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
If I change that
window.location=<?php echo $image->next_image_link ?>;
to this
window.location="http://mylink.com";
script working well. but I can't use WordPress based link (like next_image_link();)
What can I do?
Replace window.location=<?php echo $image->next_image_link ?>; with
window.location="<?php echo $image->next_image_link ?>";. Your string declariation is not valid so it can't work.
PHP doesn't echo link with inverted commas.
Edit: Wordpress doesn't print just the URL. It prints link element. So the solution will be
Binding to existing navigation
Using regex to cut off the htmt syntax
var element = '<?php echo $image->next_image_link ?>';
window.location = element.match(/href="([^"]*)/)[1];
i did myself,
firstly add this to top
<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
Then add this script too
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("right", function() {
document.getElementById('next-page').click();
});
function GoToLocation(url)
{
window.location = url;
}
Mousetrap.bind("left", function() {
document.getElementById('prev-page').click();
});
lastly, put "next-page" , "prev-page" ID to the location of the link tag
for example;
<a id="next-page"></a>
or
<a id="prev-page"></a>
So, when you press Left or Right keyboard button, script will work well. See ya
Related
I built a website (friedl-bau.at), but I want the menu on the mobile version to dissappear after clicking on a category. So for example if I click on "Sehenswert", I want the menu to be closed. I am using the inspiro theme. Any solutions?
Copy & Paste this code into your theme functions.php file :
add_action("wp_head", "prefix_hide_mobile_menu_onclick");
function prefix_hide_mobile_menu_onclick() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#menu-menue .menu-item').click(function() {
$('body').removeClass('side-nav-open');
});
});
</script>
<?php
}
I have this little snippet of code that works great in JSFiddle and in a Chrome extension. On clicking "button" it blurs the ID "content".
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
I've been through quite a few of the similar question that say to add $(document).ready(function(){
before and this });`
at the end giving this
$(document).ready(function(){
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
That has worked for me before but not helping with this little ditty of code.
When I add the second set of code I get "$ is not a function error"
Thanks in advance for the help.
***** ANSWER (since I can't post answers for some reason) ******
This is a Wordpress site and Wordpress uses jQuery.noConflict();
So, in Wordpress, $ is undefined ergo the message "$ is not a function error"
Instead of
$(document).ready(function(){
in Wordpress you need to use
jQuery(document).ready(function($) {
What worked is putting it in the child-themes funtion.php like this:
function load_dimmer_script(){
?>
<script>
jQuery(document).ready(function($) {
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
</script>
<?php
}
add_action( 'wp_footer', 'load_dimmer_script' );
What this does is this: If the menu toggle is defined as a button, when the menu is clicked the content of the page (#content) gets blurred. Click menu toggle again, it goes unblurred.
See nova-energy.net
Here's the one piece of CSS needed:
#content.alt {
filter: blur(4px) !important;
}
You have to wrap the JS code:
jQuery(document).ready(function($) {
// your code
)};
I want to remove Username Field on Woocommerce Registration Page, how do I do that? Or How do I use user email as username, or make the username field not required? Any help would be appreciated. Thanks a lot.
Yes, that is possible. Follow below steps properly.
Step-1: Remove Username textfield
add_action('login_head', function(){
?>
<style>
#registerform > p:first-child{
display:none;
}
</style>
<script type="text/javascript" src="<?php echo site_url('/wp-includes/js/jquery/jquery.js'); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#registerform > p:first-child').css('display', 'none');
});
</script>
<?php
});
Step-2: Remove Username error
//Remove error for username, only show error for email only.
add_filter('registration_errors', function($wp_error, $sanitized_user_login, $user_email){
if(isset($wp_error->errors['empty_username'])){
unset($wp_error->errors['empty_username']);
}
if(isset($wp_error->errors['username_exists'])){
unset($wp_error->errors['username_exists']);
}
return $wp_error;
}, 10, 3);
Step-3: Manipulate Background Registration Functionality.
add_action('login_form_register', function(){
if(isset($_POST['user_login']) && isset($_POST['user_email']) && !empty($_POST['user_email'])){
$_POST['user_login'] = $_POST['user_email'];
}
});
Put above code in your theme's functions.php file.
i'm using recaptcha in this page http://www.mawk3y.net/news2/contactus.php but suddenly style has been changed without any reason here's the code
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
</script>
<?php
require_once('recaptcha/recaptchalib.php');
$publickey = "key here";
echo recaptcha_get_html($publickey);
Just moved the recaptcha out of the main div containing the table and it has no problem now I didn't know the reason
I'm trying to build an admin settings page that will allow users to upload an image for their logo. I'm using this tutorial: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
I've changed it to add the scripts to enqueue rather than print as is now best practice. My code is as follows:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/bigg-options.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'bigg_options') {
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_styles', 'my_admin_styles');
}
And the Javascript:
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
It works, and the media upload window opens. But instead of it being a thickbox popup in the middle of the screen, as is normal, it appears at the bottom of the page, off to the left and partially obscured. Here's a screen shot of where it goes:
Any ideas on why it is doing this, and how to get it to position properly?
Use &modal=true in your tb_show():
tb_show('', 'media-upload.php?type=image&modal=true');
I believe you'll also need to add in a width and height.