If a menu is selected I want the webpage to be scrolled down to the end of a page in wordpress.
How do I set that?
Thanks in advance.
First we need to create our custom links through WordPress menu :
Go to Menu and add custom link with url # and with whatever text you want.
Then click screen option to tick the CSS Class Option
From the new element which we created in the firs step click the arrow on the right side and in the CSS Classes add down
Now you should have custom link in your menu with custom class same like pic below:
now we need to add our Javascript code to WordPress Footer.
open your theme child functions.php and add the following code.
function scrolldown()
{
?>
<script>
jQuery(document).ready(function ($) {
$(".down").click(function() {
$('html, body').animate({
scrollTop: $("footer").offset().top
}, 1500);
});
});
</script>
<?php
}
add_action('wp_footer', 'scrolldown');
That's it :)
A Simple jQuery Plugin for Animating Scroll,See this page
animatescroll
Related
I have the below code. I need a button like add media in the edit page of admin, in which on click shows a popup and displays my custom html with a form in it.
I tried with below but I am getting the unnecessary things like Upload files tab, Media library tab etc., I don't need all these but I just need my custom form on button clicked.
index.php
function add_cp_media_button() {
echo 'cp Forms';
}
function include_cp_media_button_js_file() {
wp_enqueue_script('media_button', plugins_url( '/js/cp.js', __FILE__ ), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_media', 'include_cp_media_button_js_file');
cp.js
jQuery(function($) {
$(document).ready(function(){
$('#cp-forms-btn').click(open_media_window);
});
function open_media_window() {
//I want to display the form with select drop down with my names populated in the dropdown, after selecting the item, I need to insert the text to the editor.
}
});
Could someone help me on this
i have created a Multi-pages survey form in "gravity form". By default its go on next page when i click on "Next" button. Is there any way to open next page with out click on "Next Button"
My form - http://dev23.cashframework.com/
For example if i choose "Purchase" option (radio Button) then automatically open next page of form.
I have tried to do that all through "Condition Logic" but no success
You can use jQuery trigger to trigger the next button once the radio input has been changed:
$(function(){
jQuery('#input_1_2 input:radio').change(function() {
jQuery('#gform_next_button_1_4').trigger('click');
});
});
You can then use CSS to hide the next button.
just to add to the first answer:
add this to your functions.php file
add_action( 'wp_enqueue_scripts', 'autoprogress' );
function autoprogress() {
wp_enqueue_script(
'autoprogress',
get_template_directory_uri() . '/js/autoprogress.js',
array('jquery') /
);
}
then create a JS file called autoprogress.js and create individual jquery functions for each radio section and next button (inspect the element). so #input_1_1, #input_1_2 etc
$(function(){
jQuery('#input_#_# input:radio').change(function() {
jQuery('#gform_next_button_#_#').trigger('click');
});
});
I wouldn't recommend hiding the next button as if the user goes back they cannot progress without selecting a new answer.
use this snippet to auto advance on already selected radio buttons
$(function(){
jQuery('#input_#_# input:radio').click(function() {
jQuery('#gform_next_button_#_#').trigger('click');
});
});
You can use "Multi page auto advance for gravity forms" plugin. You can download it for free in wordpress.
I have an Author page on my Wordpress site (author.php). The problem though is that when im visiting the author page, Wordpress highlights the blog menu item. I want to have another menu item as parent. How do I go about it? I dont want to use no JS/jQuery for this.
Thanks
It's not clear that how your author page url looks like. In general its like site url/author/"author name".
If your site has a single author then you can add the author page link as a custom menu item .
Or you can use jQuery function to search "author" in your url and add active class in desired menu item
<script type="text/javascript">
$(document).ready(function () {
if(if(window.location.href.indexOf("author") > -1))
{
$("#author_menu").addClass('active');
}
});
</script>
Not the cleanest solution, but I use something like this for a few instances of current page menu highlighting for pages that aren't child/parent related in any way:
<?php if (is_author()) { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-"**about_us_page_class**"').addClass('current-menu-item');
}); });
</script>
<?php } ?>
I have the following code to initially hide sub navigation of a sidebar menu in wordpress:
$(document).ready(function() {
$(".children").hide();
$("#menu-item").click(function() {
$('.children').slideToggle('medium');
});
});
I have it working correctly in jsfiddle(http://jsfiddle.net/MLUb8/), but can't get it working in wordpress. Where should it be placed within my theme for this to work? I've tried the header.php, footer.php and template file.
You should put the code in a separate file and include it using wp_enqueue_script (the value for $deps should be array( 'jquery' ):
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Additionally, WordPress uses noconflict, so you should slightly modify your code, like so:
jQuery(document).ready(function($) {
$(".children").hide();
$("#menu-item").click(function() {
$('.children').slideToggle('medium');
});
});
It actually worked directly within the template file itself. No need to embed from a separate file.
I'm looking for a WP function that add the Read-only parameter to all Pages's Titles's input, that will make the Page's title unalterable.
Thanks a lot in advance.
This can be accomplished with some simple JavaScript/jQuery. Create a file called admin_title_disable.js, and queue it up within functions.php. For example:
functions.php:
wp_register_script('admin_title_disable', '/path/to/admin_title_disable.js');
function disableAdminTitle () {
wp_enqueue_script('admin_title_disable');
}
add_action('admin_enqueue_scripts', 'disableAdminTitle');
Now, in your js file:
jQuery(document).ready(function ($) {
$('#title').attr('disabled','disabled');
});
This will set both post and page title input fields with a disabled attribute. Hope this helps!
If you want to restrict this script to a particular admin page, wrap the add_action hook in a conditional that compares $_GET['page']. You can also take advantage of the $hook parameter that is available when using admin_enqueue_scripts to check for the page. See here.
Update::
WordPress makes it a little tricky to tell between post and page edit screens, but there is a hidden input that you can take advantage of. :) Here's an updated version of the jQuery that will only run on page edit screens:
jQuery(document).ready(function ($) {
//find the hidden post type input, and grab the value
if($('#post_type').val() === 'page'){
$('#title').attr('disabled','disabled');
}
});
No need to make a seperate js file. Adding this to your function.php will do the same that Matthew showed.
function admin_footer_hook(){
?>
<script type="text/javascript">
if(jQuery('#post_type').val() === 'post'){
jQuery('#title').prop('disabled', true);
}
</script>
<?php
}
add_action( 'admin_footer-post.php', 'admin_footer_hook' );
This Solution Will disable clicking on the post title and editing it using CSS. CSS targets post type "page" only. It has been tested on Gutenberg visual editor. Users Can still edit title from "Quick Edit".
Add this code to your functions.php file.
function disable_title_edit() {
if(!current_user_can('administrator')){
if( !current_user_can('administrator')){ ////Only allow Admin
echo '<style>.post-type-page .edit-post-visual-editor__post-title-wrapper{
pointer-events: none;
}</style>'; } }
}
add_action('admin_head', 'disable_title_edit', 100);