We Keep Coding

JavaScript effects are not working on Elementor edit page

I'm developing an elementor widget. The widget font view js is working fine but the elementor edit page js effects are not working. I'm using some hooks to try. Now, What is the perfect way to js loading for elementor edit page.
WP Plugin Link:- https://github.com/Ferdaussk/image-compare.git
Problem Video:- https://drive.google.com/file/d/1lOy1TEHUszLXEYvdJueZQrOuqsaax-nX/view?usp=sharing
All assets enqueue hooks which I used
public function bwdic_all_assets_for_the_public(){
wp_enqueue_script( 'bwdic_compare_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_two_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-two.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_three_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-three.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_four_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-four.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_five_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-five.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_six_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-six.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_main_css' => array('bwdic_path_define'=>BWDIC_ASFSK_ASSETS_PUBLIC_DIR_FILE . '/css/style.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_define'], null, '1.0', 'all');
}
}
public function bwdic_all_assets_for_elementor_editor_admin(){
wp_enqueue_script( 'bwdic_compare_admin_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/admin/js/custom-one.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_admin_icon_css' => array('bwdic_path_admin_define'=>BWDIC_ASFSK_ASSETS_ADMIN_DIR_FILE . '/icon.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_admin_define'], null, '1.0', 'all');
}
}
public function bwdic_all_assets_for_the_frontens_scripts(){
wp_enqueue_script( 'bwdic_compare_admin_the_main_one_jsaa', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
}
public function __construct() {
// For public assets
add_action('wp_enqueue_scripts', [$this, 'bwdic_all_assets_for_the_public']);
// For fontend scripts
add_action( 'elementor/frontend/init', [ $this, 'bwdic_all_assets_for_the_frontens_scripts' ] );
// For Elementor Editor
add_action('elementor/editor/before_enqueue_scripts', [$this, 'bwdic_all_assets_for_elementor_editor_admin']);
}

You should check your console in chrome developer tools.
Sometimes there is bug when elementor editor doesn't apply ur javascript changes in real time. If you check console, you will know what I mean

Why my wordpress plugins don't load the javascript code in order to let me use them?

I'm trying to develop my own theme and i've run in the following issue:
I use WP-RECIPE and I can't use the button "print recipe", but if I install other theme that button is working. So I thought it's because of the plugin, so I installed something random like 'social share', same output. What's wrong?
PRINT
This is my functions.php for styles and scripts:
<?php
//JAVASCRIPT SI CSS
function pezona_enqueue_styles() {
wp_enqueue_style(
'layout',
get_stylesheet_directory_uri() . '/assets/css/layout.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil',
get_stylesheet_directory_uri() . '/assets/css/stil.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil-responsive',
get_stylesheet_directory_uri() . '/assets/css/stil-responsive.css',
array(),
false,
'all'
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_styles' );
function pezona_enqueue_scripts() {
wp_enqueue_script(
'main-js',
get_stylesheet_directory_uri() . '/assets/javascript/lazysizes.min.js',
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_scripts' );
?>
Any ideea guys? thanks.

import script in wordpress

Problem
Hello to all, I don't understand why I cannot enter in an external file in WordPress through the script register:
if I try to load a simple console.log('here') inside the external file, simply I'm not able to launch it. It's like he didn't find the file.
maybe am I wrong something in the declarations?
Code
This is the register script
<?php
function wp_load_styles_on_init()
{
if (!is_admin()){
/* REGISTER SCRIPT */
wp_deregister_script('jquery');
wp_register_script('jquery', get_the_theme_uri() . '/js/jquery-3.1.1.min.js', array(), null, true);
wp_register_script('bootstrap-js', get_the_theme_uri() . '/js/bootstrap-3.3.7/js/bootstrap.min.js', array('jquery'), null, true);
wp_register_script('slide-push-menu-js', get_the_theme_uri() . '/js/slide-push-menu/js/menu.js', array('jquery','bootstrap-js'), null, true);
wp_register_script('ie10-workaround-js', get_the_theme_uri() . '/js/ie10-workaround/ie10-viewport-bug-workaround.js', array('jquery','bootstrap-js'), null, true);
// wp_register_script('infinite-scroll', get_the_theme_uri() . '/js/infinite-scroll-helper.js', array('jquery'), null, true);
wp_register_script('slick', get_the_theme_uri() . '/js/slick-1.6.0/slick.min.js', array('jquery'), null, true);
wp_register_script('waypoints', get_the_theme_uri() . '/js/jquery.waypoints.min.js', array('jquery'), null, true);
wp_register_script('visible-js', get_the_theme_uri() . '/js/jquery.visible.min.js', array('jquery'), null, true);
wp_register_script('functions-js', get_the_theme_uri() . '/js/site-functions.js', array('jquery','bootstrap-js','ie10-workaround-js'), null, true);
wp_register_script('home-function', get_the_theme_uri() . '/js/home-function.js', array('jquery'),null, true);
wp_localize_script('home-function', 'ajax_post_params', array('ajax_url' => admin_url('admin-ajax.php')));
wp_register_script('load-more', get_the_theme_uri() . '/js/load-more.js', array('jquery'),null, true);
wp_localize_script('load-more', 'ajax_single_params', array('ajax_url' => admin_url('admin-ajax.php')));
wp_register_script('fancybox', get_the_theme_uri() . '/js/jquery.fancybox.min.js', array('jquery'), null, true);
wp_register_script('adv-function', get_the_theme_uri() . '/js/adv-functions.js', array('jquery'), null, true);
wp_register_script('top-banner-adv-functions', get_the_vision_theme_uri() . '/js/top-banner-adv-functions.js', array('jquery'), null, true);
wp_register_script('final-banner-adv-functions', get_the_theme_uri() . '/js/final-banner-adv-functions.js', array('jquery'), null, true);
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js');
wp_enqueue_script('slide-push-menu-js');
wp_enqueue_script('ie10-workaround-js');
wp_enqueue_script('waypoints');
wp_enqueue_script('visible-js');
wp_enqueue_script('functions-js');
if(is_front_page()){
wp_enqueue_script('home-function');
wp_enqueue_script('slick');
wp_enqueue_script('adv-function');
wp_enqueue_script('top-banner-adv-functions');
}
if(is_single() || is_category() || is_author()):
// wp_enqueue_script('infinite-scroll');
// wp_enqueue_script('single-function');
wp_enqueue_script('load-more'); // and this one
if(is_single() && get_query_var('post_type') != 'room'):
wp_enqueue_script('adv-function');
wp_enqueue_script('top-banner-adv-functions');
wp_enqueue_script('final-banner-adv-functions');
endif;
endif;
if(get_query_var('post_type') == 'room' || is_tax()):
wp_enqueue_script('fancybox');
wp_enqueue_script('adv-function');
wp_enqueue_script('top-banner-adv-functions');
endif;
// $queried_post_type = get_query_var('post_type');
// if ( is_single() && 'video' == $queried_post_type):
// wp_dequeue_script('infinite-scroll');
// wp_dequeue_script('single-function');
// endif;
/* REGISTER STYLE */
wp_register_style( 'bootstrap', get_the_vision_theme_uri() . '/js/bootstrap-3.3.7/css/bootstrap.min.css', array(), '', 'all' );
wp_register_style( 'ie10-workaround', get_the_vision_theme_uri() . '/js/ie10-workaround/ie10-viewport-bug-workaround.css', array('bootstrap'), '', 'all' );
wp_register_style( 'slide-push-menu', get_the_vision_theme_uri() . '/js/slide-push-menu/css/menu.css', array('bootstrap'), '', 'all' );
wp_register_style( 'fontello', get_the_vision_theme_uri() . '/css/fontello.css', array(), '', 'all' );
wp_register_style( 'slick', get_the_vision_theme_uri() . '/js/slick-1.6.0/slick.css', array(), '', 'all' );
wp_register_style( 'style', get_the_vision_theme_uri() . '/css/style.css', array(), '20180313', 'all' );
wp_register_style( 'custom', get_the_vision_theme_uri() . '/css/custom.css', array(), '', 'all' );
wp_register_style( 'fancybox', get_the_vision_theme_uri() . '/css/jquery.fancybox.min.css', array(), '', 'all' );
wp_enqueue_style('bootstrap');
wp_enqueue_style('slide-push-menu');
wp_enqueue_style('ie10-workaround');
wp_enqueue_style('tv-google-fonts', 'https://fonts.googleapis.com/css?family=Crimson+Text', false);
wp_enqueue_style('ds-google-fonts','https://fonts.googleapis.com/css?family=Droid+Serif',false);
wp_enqueue_style('amiri-google-fonts','https://fonts.googleapis.com/css?family=Amiri',false);
wp_enqueue_style('fontello');
wp_enqueue_style('slick');
wp_enqueue_style('style');
wp_enqueue_style('custom');
if(get_query_var('post_type') == 'room'):
wp_enqueue_style('fancybox');
endif;
}
}
add_action( 'wp_enqueue_scripts', 'wp_load_styles_on_init' );
the interesting lines are the two unindented and this one down below
if(is_single() || is_category() || is_author()):
// wp_enqueue_script('infinite-scroll');
// wp_enqueue_script('single-function');
wp_enqueue_script('load-more'); // and this one
Now, what I don't understand it's why the file load-more.js isn't even called.
Down below there is the tree of the files:
Update
i'm trying to go deep, and i lookin what the function get_the_theme_uri() actually does. Down below you will find the related code:
define('MY_WORDPRESS_FOLDER', $_SERVER['DOCUMENT_ROOT']);
define('MY_THEME_FOLDER', str_replace('\\', '/', dirname(__FILE__)));
//define('MY_THEME_PATH', '/themes');
define('MY_THEME_PATH', '/' . substr(MY_THEME_FOLDER, stripos(MY_THEME_FOLDER, 'wp-content')));
function get_the_theme_uri()
{
return MY_THEME_PATH;
}

Object [object Object] has no method 'FixedScroll' Wordpress

Said website: http://sebastiangraz.com/projects/kbt
I wanted to add a script (FitScroll) to my wordpress template: http://codepen.io/ozgursagiroglu/full/tdpDr
This is how I enqueued it:
function kbt_scripts() {
wp_enqueue_style( 'kbt-style', get_stylesheet_uri() );
wp_enqueue_script( 'kbt-fitscroll', get_template_directory_uri() . '/js/fitscroll.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-js', get_template_directory_uri() . '/js/js.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-validate', get_template_directory_uri() . '/js/jquery.validate.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'kbt-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
I called the script with a noconflict wrapper
jQuery(document).ready(function ($) {
$('body').FixedScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
I made sure I don't load jQuery twice. I've checked everywhere.
I still get this message
Uncaught TypeError: Object [object Object] has no method 'FixedScroll'
Any ideas? Thank you

Its FitScroll not FixedScroll try this,
jQuery(document).ready(function ($) {
$('body').FitScroll({ // FitScroll not FixedScroll
elements: '.module', // required
delay: 500 // millisecond, optional
});
});

jQuery(document).ready(function ($) {
$('body').FitScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});

You need to use Fitscroll instead of FixedScroll:
jQuery(document).ready(function ($) {
$('body').FitScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
Next time, if you confused whether the name is correct or not, just digging directly into your plugin which is in your case located at the URL: http://sebastiangraz.com/projects/kbt/wp-content/themes/kbt/js/fitscroll.js?ver=20120206
And from this you can figure out the correct name of the function which is this:
$.fn.FitScroll = function(opt){
// Plugin code here
}

How to use jquery and wp_enqueue_script

I´ve spent a good while trying to figure this out. Im trying to add a script that need an external jquerylibrary. I can make it work by inserting my script between scripttags, however i understand thats not the correct way to do it, and it breaks another script on the site.
I spent a fair amount of time tonight trying to figure out how to add the script correct, and i just cant get it.
I understand something like this is the correct way to enqueue the script:
function my_scripts_method() {
wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.9.1.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
My main question is, how do i write my functions so it calls the library, and at the same time failsafe it so it only loads once, and doesnt crash with other scripts? This is the script:
$(document).ready(function () {
$("#menu-item-16").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-17”).hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-18”).hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
});
Edit:
Second question, several librarys and a stylesheet.
As said above i have a little more complex script that you guys might be able to help me out.
I have this code in the header right now, and it works.
`<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"> </script>
<script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
$.fn.fullpage({
verticalCentered: true,
resize : true,
slidesColor : ['#AF1700', '#359973', '#F46321', '#A6C7DB'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: true,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: true,
css3: false,
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#element1, .element2',
normalScrollElements: '#element1, .element2',
keyboardScrolling: true,
touchSensitivity: 15,
continuousVertical: false,
animateAnchor: false,
setScrollingSpeed: 1000,
});
});
</script>
`
From my newfound insights, i tried this, and it didnt work:
`
function fullpage() {     wp_enqueue_script('jquery'); 
    
wp_register_style( ’fullpage-css', get_template_directory_uri() . '/js/jquery.fullPage.css','','', 'screen' );   
wp_register_script( 'jquery.1.8.3', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array('jquery'),'',true  );
 wp_register_script( 'jquery.1.9.1', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array('jquery'),'',true  );
 
wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'',true  );
 wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'',true  );
wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', '', null,''  );
wp_enqueue_style( 'fullpage-css' ); // Enqueue our stylesheet
    
wp_enqueue_script( 'jquery.1.8.3' );  // Enqueue our first script
 
wp_enqueue_script( 'jquery.1.9.1' ); // Enqueue our second script
 
wp_enqueue_script( 'fullpage' );  // Enqueue our third script
    
wp_enqueue_script( 'fullpagecode' ); // Enqueue fourth script
 
wp_enqueue_script( ’slimscroll’ ); // Enqueue fifth script
  
}add_action( 'wp_enqueue_scripts', ’fullpage’ ); `

Don't run your jquery in a script. This will break other scripts in wordpress.
Make a .js file (eg. example.js and put this in your theme folder under a /js directory) and 'enqueue' it in your functions.php file like this.
function theme_styles() {
wp_register_style( 'fullpage-css', get_template_directory_uri() . '/css/jquery.fullPage.css' );
wp_enqueue_style( 'fullpage-css' );
}
add_action('wp_enqueue_scripts', 'theme_styles');
function theme_scripts() {
wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'1.0.0',true );
wp_enqueue_script( 'fullpage' );
wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'1.0.0',true );
wp_enqueue_script( 'fullpagecode' );
wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', array('jquery'), null, true );
wp_enqueue_script( 'slimscroll' );
}
add_action('wp_enqueue_scripts', 'theme_scripts');
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$src is the path to the js file.
$deps is where you define this script requires jquery, like this. array('jquery')
You don't need to include jquery as wordpress has this built in.
Then in your .js file in your theme folder wrap your code in a No Conflict wrapper. Using $() will return undefined otherwise.
jQuery(document).ready(function($) {
$("#menu-item-16").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-17").hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-18").hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
});