Wordpress Javascript Issues

Question

I am fairly new to Javascript and very new to Wordpress. I am creating a theme and managed to get everything working except for my Javacript. It was working perfectly without Wordpress but not it doesn't seem to be working. I have read a few other threads regarding the correct formatting for Wordpress, Javascript but still can't get this working. This is my script, is anyone able to point me in the right direction? I am desperate.

(function ( $ ) { 
 $('input:radio[name="name"]').change(function(){
 if($(this).val() == 'Month to Month'){
 $( "#checkout-button" ).before( "<input type=\"hidden\" name=\"price\" value=\"12.00\"<\/input>"); 
 }if($(this).val() == 'Month to Month - Hello Giggles'){
 $( "#checkout-button" ).before( "<input type=\"hidden\" name=\"price\" value=\"12.00\"<\/input>"); 
 } 
 });
 $(".imgLiquidFill").imgLiquid({fill:true, horizontalAlign:'center', verticalAlign:'center'});
 $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
 $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
 $(".inline").colorbox({inline:true, width:"50%"});
 $(".radio-duration").click(function() {
 $(".duration-button").html("Select\<span class\=\"fui\-arrow\-right\"\>\<\/span\>");
 $(this).children(".duration-button").text("Selected");
 $('.radio-duration').not(this).stop().animate({
 opacity: 0.4
 }, 150);
 // Make this opaque
 $(this).stop().animate({
 opacity: 1.0
 }, 150);
 });
 $(".radio-gender").click(function() {
 $(".gender-button").html("Select\<span class\=\"fui\-arrow\-right\"\>\<\/span\>");
 $(this).children(".gender-button").text("Selected");
 $('.radio-gender').not(this).stop().animate({
 opacity: 0.4
 }, 150);
 $(this).stop().animate({
 opacity: 1.0
 }, 150);
 });
 $(".radio-style").click(function() {
 $(".check-style").css("color", "#1abc9c");
 $(".check-style").css("display", "inline-block");
 $(".style-button").html("Select\<span class\=\"fui\-arrow\-right\"\>\<\/span\>");
 $(this).children(".style-button").text("Selected");
 $('.radio-style').not(this).stop().animate({
 opacity: 0.4
 }, 150);
 // Make this opaque
 $(this).stop().animate({
 opacity: 1.0
 }, 150); 
 });
 $(".duration-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".duration-container div").click(function(e){
 $(this).closest(".duration-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });$(".duration-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".duration-container div").click(function(e){
 $(this).closest(".duration-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });
 $(".gender-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".gender-container div").click(function(e){
 $(this).closest(".gender-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });$(".gender-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".gender-container div").click(function(e){
 $(this).closest(".gender-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });
 $(".style-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".style-container div").click(function(e){
 $(this).closest(".style-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });$(".style-container :radio").hide().click(function(e){
 e.stopPropagation();
 });
 $(".style-container div").click(function(e){
 $(this).closest(".style-container").find("div").removeClass("selected-div");
 $(this).addClass("selected-div").find(":radio").click();
 });
var num = 10; //number of pixels before modifying styles
if ($(window).width() > 767) {
 $(window).bind('scroll', function($) {
 if ($(window).scrollTop() > num) {
 $('.navbar').addClass('navbar-condensed');
 $('.navbar .navbar-brand').addClass('navbar-brand-condensed');
 $('.navbar-nav').addClass('navbar-nav-condensed');
 } else {
 $('.navbar').removeClass('navbar-condensed');
 $('.navbar .navbar-brand').removeClass('navbar-brand-condensed');
 $('.navbar-nav').removeClass('navbar-nav-condensed');
 }
 });
}
//TESTIMONIALS
function fade($ele) {
 $ele.fadeIn(1000).delay(2000).fadeOut(1000, function() {
 var $next = $(this).next('.a-testimonial');
 fade($next.length > 0 ? $next : $(this).parent().children().first());
 });
}
fade($('#testimonials > .a-testimonial').first());
});

• Kai Qing: have you checked console? Maybe you're getting info there that would help
• user2793640: @KaiQing Yeah I checked it and there aren't any errors.
• Korvo: exactly where PHP fits in it?
• Kai Qing: well, js and wordpress are not really relevant to eachother except that wordpress has its own ways of adding js to the header or footer. You can add it directly in the header.php or footer.php, but in order for us to know what your main problem is we might need to see how you're including the dependencies. jQuery, colorbox, etc. And even how you're managing your html. For all we know you're dynamically adding to the dom. I don't think we can tell just from this snippet you provided.

Answer 1

Load the script file in your theme with wp_enqueue_script. It is WordPress' preferred way of including JavaScript.

• user2793640: Thanks. I have the enqueue scripts working but I am having issues with the actual script.

Answer 2

If you are using JQuery, you should do this at the beginning of the JQuery file:

jQuery(document).ready(function($){<--- notice the $ inside the function()? This will allow your code to work
//your code here
}

This would also work:

var $j = jQuery.noConflict();
$j(function(){
 //your code here
 });

Note that you have to define it like this because Wordpress runs in no conflict mode.

• user2793640: Thanks. I have the enqueue scripts working but I am having issues with the actual script.
• BlackHatSamurai: @user2793640 see my edit. That should at least get you going. Can't guarantee that all the code will work, but it should at least get you going.