I have a multi-page gravity form. I've echoed it using do_shortcode within the theme template.
I have content on the same page below the gravity form (which resides inside the wp editor (the_content() wrapped in a div with its own class) ).
Is there a way for me to hide this content on page 2 or later of the gravity form? I would still like it to appear on page 1 of the gf form.
Here was the final code that worked for me:
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(event, form_id, current_page){
jQuery('.page-content').toggle(current_page == 1);
});
</script>
I placed this in header.php
Lets say the class name of the div that is wrapping the_content() is "entry-content" and you want to hide it when the form is on second page. Add the following jQuery code to your theme and It will hide that div when someone goes to 2nd page. If they return back to 1st page of the form. It will show the content again.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
if(current_page == "1"){
jQuery('.entry-content').show();
} else {
jQuery('.entry-content').hide();
}
});
// ]]></script>
If you donot want to show the content even if they come back to page 1, then you can use the following code.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
jQuery('.entry-content').hide();
});
// ]]></script>
Documentation : https://www.gravityhelp.com/documentation/article/gform_page_loaded/
Related
I have in my menu a current menu item. How can I make that a page that is not in the menu, be marked as the current menu item of another page?
My idea is maybe to do it with Javascript and change the class. In that case where do you put that function?
Thanks
First of all I put the class "pricing" to the tab that I wanted to mark. Then I inserted my html with the Gutember editor and put the following Javascript code:
<script type="text/javascript">
let pricing = document.querySelector('.pricing');
document.addEventListener("DOMContentLoaded", evt => {
const current_pricing = () => {
pricing.classList.add('current-menu-item');
}
}
current_pricing()
</script>
I have created a registration plugin in WordPress and I want to display my register-employee.php(under view folder) file. When a user click on a button(used that url to display the file, something like that). Below is my folder structure hope would help.
>controller
>model
>public
>view
register-employee.php
register-member.php
Altough your description is very little,
I give you a really simple guide on how to do this:
First thing, opening a form on click is a javascript thing so the first thing you need to do is add your JavaScript file,
let's assume you have a file assets/js/register.js which looks like this:
var btn = document.querySelector('button.my-register-button');
btn.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('#my_registration_popup').style.display = 'block';
});
Then we need to add this file to wp_enqueue_scripts action in order to be added to Wordpress pages
add_action('wp_enqueue_scripts', function() {
wp_register_script('my-registration-plugin', YOUR_PLUGIN_URL . '/assets/js/register.js', [], null, true);
});
assuming that your register-employee.php file looks something like this:
<div id="my_registration_popup" style="display: none">
<!-- my form -->
</div>
First thing you need to do is to add above view to wp_footer action:
add_action('wp_footer', function() {
include PATH_TO_YOUR_PLUGIN . '/view/register-employee.php';
});
In wordpress, when using a theme, how can I prevent a click event from happening on a custom link. I am thinking of adding the following:
onClick="return false"
I am trying to prevent the page from scrolling down unexpectedly, when clicked.
do you have access to the theme edition? If so, you can try to use something like the code below, it's
add in footer.php
if you do not have access, but the theme has some custom field.
<script>
//JQUERY
(function ($) {
$('a[href=#]').click(function (e) {
e.preventDefault();
})
})(jQuery)
//JS PURE
document.querySelectorAll('a[href="#"]').forEach(function(ele, i){
ele.addEventListener('click', function (e) {
e.preventDefault();
})
})
</script>
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
Currently we are with a major problem with iframe-worldpay integration.
I'm currently using worldpay template form, if the template form is placed in my website the form is visible however when I load the worldpay template form inside an iframe the worldpay template form visibility set to hidden.
Worldly doesn't provide a solution for this scenario, is there any work around?
EDIT
Sample Code
<script src="https://xx.xxxx/xx/worldpay.js"></script>
<script type="text/javascript">
function WorldPay() {
/*WorldPay-START*/
Worldpay.setClientKey('<%=WorldPayClientKey%>');//<YOUR_CLIENT_KEY>
Worldpay.reusable = false;
Worldpay.templateSaveButton = false;
Worldpay.useTemplate('aspnetForm', 'paymentDetails', 'inline', function (obj) {
//Form Submission here
});
/*WorldPay-END*/
}
</script>
<div id="paymentDetails"></div> //WORLDPAY iframe loads here
If this page is not inside an iframe world pay loads else it does not