I have this script:
$(document).ready(function(){
$("text1").click(function(){
$(this).hide();
});
});
Code html:
<div class="div1">
<p class="text1">text to appear when the user puts the mouse over</p>
</div>
I want to apply this script to my website in Wordpress.
I put this code in functions.php
add_action( 'wp_enqueue_scripts', 'script_echipa' );
function script_echipa()
{ wp_enqueue_script( 'script', get_template_directory_uri() . '/js/echipa.js', array('jquery'), null, true );
}
It is a very simple script that works smoothly on local Wordpress but we did not implement it.
Is something wrong?
Can you help me to solve this problem?
Thanks in advance!
You forgot to add a . before the selector for class text1 --> "text1"
$(document).ready(function(){
$(".text1").click(function(){
$(this).hide();
});
});
WordPress uses noconflict so you have to wrap your scripts in jQuery(function($) {}); in order to be able to use the dollar sign. Like so:
jQuery(function($) {
$(".text1").click(function() {
$(this).hide();
});
});
Related
The header is designed using "Elementor - Header, Footer & Blocks" plugin. The dropdown is not working. Tried activating, deactivating plugin, clearing cache.
Website Link:
https://www.party-monsters.com/
Try this below code. code goes in your active theme functions.php file.
function add_custom_js(){
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.hfe-has-submenu .hfe-menu-item').on('click',function(e){
e.preventDefault();
if( $(this).closest('li').find('.sub-menu').css('opacity') === '0' ){
$(this).closest('li').find('.sub-menu').css({"visibility": "visible", "opacity": "1"});
}else{
$(this).closest('li').find('.sub-menu').css({"visibility": "hidden", "opacity": "0"});
}
});
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );
Tested and works.
Somehow this doesn't work. The #autoverkocht should be hidden by default, unless the .b-car-info__price is hidden, #autoverkocht should be shown.
jQuery(document).ready(function($){
$("#autoverkocht").css({
display: "none",
visibility: "hidden"
});
})
if($('.b-car-info__price').is(":hidden")){
$('#autoverkocht').css('visibility', 'visible');
}
It's either the jQuery above or the functions.php code below that doesn't work.
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/autoverkocht.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
You can use inline styling like below:
<div id='autoverkocht' style='display: none;'>
</div>
or use css styling like this:
#autoverkocht{
display: none;
}
And in the jquery do this:
<script>
jQuery(document).ready(function($){
if($('.b-car-info__price).is(":hidden")){
$('#autoverkocht').show();
}
});
</script>
Think jQuery toggle and hide is what you need .
$('#autoverkocht').hide()
$('#autoverkocht, .b-car-info__price').on(
'click',
function()
{
$('#autoverkocht, .b-car-info__price').toggle()
}
);
Hope this is what you require ......
I want to auto update the cart when quantity is changed. I got this working code in functions.php, but it's only working for the first click. How to adjust it so it's working for every click?
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('click', '.quantity .button', function(){
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
try it like this..
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery( 'div.woocommerce' ).on( 'change', '.qty', function () {
jQuery( "[name='update_cart']" ).trigger( "click" );
} );
</script>
<?php
endif;
}
I it's because the html is being replaced, div.woocommerce click event is no longer there... if you attached it to body, it might work...
The reason that is happening is because your dom is refreshed with the Ajax and events are flushed.
What you need to do is listen to the event 'updated_cart_totals' which will tell you that dom is updated and after that reactivate your listeners.
function quantity_upd() {
$(".woocommerce-cart-form").on("change", ".qty", function() {
$("[name='update_cart']").removeAttr('disabled');
$("[name='update_cart']").trigger("click");
});
}
$( document ).on( 'updated_cart_totals', function() {
quantity_upd();
}
Please adjust it for your theme and HTML, it can vary
The reason it only works on the first click is because everytime you update the form, it refreshes itself. So instead of doing:
jQuery('div.woocommerce').on('click', '.quantity .button', function() {
You need to switch div.woocommerce to document:
jQuery('document').on('click', '.quantity .button', function() {
You can use plugin like below.
https://wordpress.org/plugins/woo-update-cart-on-quantity-change/
Also this plugin is working for you.
https://wordpress.org/plugins/woocommerce-ajax-cart/
Please use plugin for your safe side because plugin works in every wordpress version and woocommerce version.
OR
You can try custom code with minor modifications like below.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script type="text/javascript">
jQuery(document).on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
OR
jQuery("body").on("click", "div.woocommerce .quantity .button", function(e) {
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
As I don't know your HTML structure so I built a sample jQuery which is working on storefront theme.
Here is a sample code.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('keyup', '.quantity .qty', function(){
//console.log('clicked');
jQuery("[name='update_cart']").trigger("click"); });
</script>
<?php
endif;
}
Rather than try to trigger the click, how about removing the "disabled" attribute from the Update Cart button so the user can click it. The cart page already works this way where when the quantity is changed on an item, the Update Cart button becomes clickable.
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('body').on('click', 'div.woocommerce .quantity .button', function(){
jQuery("[name='update_cart']").prop("disabled", false);
});
</script>
<?php
endif;
}
The update button is actually disabled when the page loads, so you need basically to enable it, right before triggering the click event.
Use this code:
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").removeAttr('disabled');
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
endif;
}
Copy this code to functions:
function bbloomer_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}
End this to style:
button[name='update_cart'] {
display: none !important;
}
OK,
so I've got this weird situation. I'm trying to include Paul Underwood's simple smooth scroll script (http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery) in a Wordpress one-pager running on Wordpress 3.8.1.
However, the smooth scroll ain't working.
The script works perfectly on JFiddle, I've checked it for errors, but it's a simple copy-paste from the source, so that shouldn't be the problem. I'm pretty sure I've enqueued it properly in functions.php (yes, I also registerd jQuery). And it should work in noConflict.
So what am I missing here? It won't surprise me if it's a stupid little mistake...
Anyway, thanks in advance everyone :)
The HTML:
<img class="arrow" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow-down.png" alt="scroll down">
The script:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
});
the functions.php
function my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
As your code says that you have two doc ready handlers and you can remove the inner doc ready first line is better:
jQuery(document).ready(function($) { // keep it, its better.
$(document).ready(function() { //<---remove this line and its closing
so final code should be:
jQuery(document).ready(function($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
}); // end of animate
}); // end of click
}); // end of doc ready
Wordpress uses jQuery instead of $ by default. Try to replace all your $'s to jQuery.
jQuery(document).ready(function() {
jQuery('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = jQuery(target);
jQuery('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
}); // end of animate
}); // end of click
}); // end of doc ready
Try this one.
EDIT: Oh, I've just seen that you are giving the $ as a parameter of the function. My fault.
But have you checked if you probably include jQuery twice?
OK, so I figured it out, guys.
As I predicted, it was some stupid little thing.
There was a relic
body{overflow-x: hidden}
in my stylesheet.
This is what's been trolling me - removed the line, and now everything works fine.
Thanks for the help, though :-)
I'm trying to create a 404.php page and would like to remove the "current state" class from a link, only on that page.
As of right now this is what I've got...
jQuery( function() {
if ( TEMPLATE_URI + '/404.php'.hasClass( '.current_page_parent' ) ) {
jQuery( '.menu' ).removeClass( '.current_page_parent' );
}
});
which does not seem to be working.
I am a beginner in the subject of jQuery so any help would be appreciated!
I think this should work :
if(window.location.href.indexOf('404.php') != -1){
jQuery('.current_page_parent').removeClass('current_page_parent')
}
Also, when using removeClass, you don't need to put the dot.
WordPress automatically uses the file 404.php to show 404 error pages. So you don't have to check for 404.php in your code.
Just put this Javascript code in the file 404.php, preferrably at the bottom:
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.menu').removeClass('current_page_parent');
});
</script>
Otherwise, you can use the function is_404() in any template (PHP) file to see if the current page is a 404 error page. Something like this:
<?php if (is_404()): ?>
jQuery('.menu').removeClass('current_page_parent');
<?php endif; ?>
Thank you for the help #Christian Daven and #Karl-Andre Gagnon! Basically what I did was combine bits of both answers and got this (which I have placed in my 404 Template page)...
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery( '.current_page_parent' ).removeClass( 'current_page_parent' );
});
</script>