wordpress creating js error unable to find function

I’m using the latest version of chrome on a windows 10 64 bit desktop. The site is hosted at BlueHost. The page in question can be found here https://www.sustainablewestonma.org/campaigndetail/

I’m really a newbe at wordpress. If I reinstall wordpress will I lose my site? If I remove plugins won’t the site stop working?

The error only appears on that specific page. It’s a place where I’m using jquery. Here’s the code for the page:

<link href="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/css/myflexslider.css" rel="stylesheet" type="text/css">
<link href="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/flexslider.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/jquery.flexslider.js"></script>
<script src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/js/myFlexslider.js"></script>
<div class="all-mobile">
  <h1>Mobile version under construction</h1>
</div>
<div class="det-container">
  <div class="det-topFlex">
    <div class="det-left flexslider">
      <ul class="slides">
        <li><img src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/demo/images/kitchen_adventurer_caramel4.jpg">
          <div class="det-sliderCaption">
            <div class="caption">Caption one.</div>
          </div>
        </li>
        <li><img src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/demo/images/kitchen_adventurer_donut.jpg">
          <div class="det-sliderCaption">
            <div class="caption">Caption two.</div>
          </div>
        </li>
        <li><img src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/jquery/flexslider/demo/images/kitchen_adventurer_lemon.jpg">
          <div class="det-sliderCaption">
            <div class="caption">Caption three.</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="det-right det-verticalFlex">
      <span><b>Get Involved</b></span>
      <div class="det-4links">
        <span><a href="https://sustainablewestonma.org/get-involved">Sign up for our<br class="wp">Quarterly Newsletter</a></span></div>
      <div class="det-4links"> <span><a href="https://www.sustainablewestonma.org/calendar/">Attend an<br class="wp">
            Event</a></span></div>
      <div class="det-4links"> <span><a href="https://sustainablewestonma.org/get-involved">Volunteer with<br class="wp">SWAG</a></span></div>
      <div class="det-4links"> <span><a href="https://www.sustainablewestonma.org/donate/">Donate to help<br class="wp">our work</a></span></div>
    </div>
  </div>
</div>

and here’s the css

.flex-control-nav.flex-control-paging{
   display:none;
}

ul.flex-direction-nav{
   list-style:none;
   margin:0;
}
.det-sliderCaption{
   display:flex;
   justify-content:center;
}

.flexslider{
   margin:0!important;
   border:none!important;
}

.slides{
   margin:0!important;
}

.caption{
   position:absolute;
   bottom:1vw;
   color:white;
}

.det-container{
   margin-top:2vw;
}

.det-topFlex{
   display:flex;
   justify-content:space-between;     
}

.det-topFlex .det-left{ 
   width:64%;  
}

.det-topFlex .det-right{
   width:37%;
   margin-left:2%;  
   padding-bottom:3vw;
   background-color:#b3d7f7;  
}

.det-topFlex .det-top img{
   width:100%;
   height:100%;  
}

.det-verticalFlex{
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:space-between;  
   background-color:#b3d7f7;   
}

.det-topFlex .det-right span{
   text-align:center;
   font-size:2vw;  
   color:#538231;   
   margin:1.6vw 0;
}  

.det-4links span{
   display:block;
   color:white;
   background-color:#538231;
   width:17vw;
   font-size:1.5vw!important;
   text-align:center;
   border-radius:3vw;     
}

.det-4links a{
   text-decoration:none;
   color:white;
}
.det-4links a:visited{
   color:white;
}

I tried the healthcheck plugin and it says everything is running smoothly. By the way, your suggestion to ask a host provider for help is pretty comical.

This is a wordpress issue coming from using jquery and linking to resources inside the body tag. While not recommended linking within the body should not create the problem.

If you use the code supplied and set up a new page with it you should be able to reproduce the error. Can you help?

removing the jquery load fixed the problem but created another one. I’m calling myFlexslider.js which has the following function:

$(window).load(function() {
          $('.flexslider').flexslider({
             animation: "fade",
             easing: "swing",  
             direction: "horizontal",  //String: Select the sliding direction, "horizontal" or "vertical"
             reverse: false,
             animationLoop: true,  
             slideshow: true,  //Boolean: Animate slider automatically
             slideshowSpeed: 10000,  //Integer: Set the speed of the slideshow cycling, in milliseconds
             animationSpeed: 2000, //Integer: Set the speed of animations, in milliseconds
             initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
             randomize: false, //Boolean: Randomize slide order
          });
       });

The console says $ is not a function. I changed that to jquery and it says jquery not defined

added

jQuery(document).ready(function($) {

and that fixed the last problem. Thank you for your help!

• This reply was modified 6 years, 6 months ago by rssail.