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

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
}

Related

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.

What prevents wp_enqueue_script inside a loop_start

The wp_enqueue_script operates fine as a stand alone script in the main function file. However, when this is placed inside a loop_start function (isolated to run on a specific page), the javascript it calls does not load. Both the 'page name' and post ID work in is_page( ) validated by $message.
add_action( 'loop_start', 'run_on_config_page' );
function run_on_config_page() {
if ( is_page( 1885 ) ) {
function config_scripts() {
wp_enqueue_script( 'config_scripts', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ) , '0.0.1', time(), true );
}
add_action( 'wp_enqueue_scripts', 'config_scripts' );
// $message = "Load Script Here";
// echo "<script type='text/javascript'>alert('$message');</script>";
}
}
You are doing it wrong. Use this code to fulfill your requirement.
function config_scripts() {
if( is_page( 1885 ) ){
wp_enqueue_script( 'config_scripts', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ) , '0.0.1', time(), true );
}}
add_action( 'wp_enqueue_scripts', 'config_scripts' );

wp_register_script only works with 2 arguments

I am trying to add a custom JavaScript file in my child theme. After a few hours, I finally got it working with the following code:
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js'
);
wp_enqueue_script( 'resources-page' );
I don't understand why this would fail (the resources_page.js doesn't get called at all) if I do it like this (with the rest of the params):
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery '),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
Can someone explain?
Try it this way, packing the whole thing into a function which you then put into an action hook:
function register_scripts() {
wp_register_script('resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery'),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
}
add_action('wp_enqueue_scripts', 'register_scripts');

JavaScript loads but doesn't run - Wordpress

I'm developing a Wordpress theme and can't get JavaScript to run. When I view the source code the scripts have loaded and the file paths are correct.
Here is the functions.php code that loads the scripts:
function theme_js() {
// Conditional scripts
global $wp_scripts;
wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
'', '', false );
wp_register_script( 'respond_js', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js',
'', '', false );
$wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9');
$wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9');
// Footer scripts
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js',
array('jquery'), null, true );
wp_enqueue_script( 'color_js', get_template_directory_uri() . '/bootstrap/js/jquery.color.js',
array('jquery'), null, true );
wp_enqueue_script( 'header_js', get_template_directory_uri() . '/bootstrap/js/header.js',
array('jquery'), null, true );
wp_enqueue_script( 'rollover_js', get_template_directory_uri() . '/bootstrap/js/rollover.js',
array('jquery'), null, true );
}
add_action ( 'wp_enqueue_scripts', 'theme_js' );
Can anybody tell me why they won't run?
For reference - header.js:
$(window).scroll(function () {
//After scrolling 300px from the top...
if ($(window).scrollTop() >= 300) {
$(".navbar").stop().animate({backgroundColor: "#1e3b4e"}, 600);
$(".navbar-nav > li > a").css("color", "#ffffff");
$("#logo").attr("src", "img/logo.png");
//Otherwise remove inline styles and thereby revert to original stying
} else {
$(".navbar").stop().animate({backgroundColor: "rgb(255, 255, 255, 1)"}, 400);
$(".navbar-nav > li > a").css("color", "#1e3b4e");
$("#logo").attr("src", "img/newlogo.png");
}
});

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");
}
);
});

Categories