Home/ Questions/Q 6965381
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:03:16+00:00

jQuery wont load. I’m a noob. Tried many things, various syntax tweaks. heres how

  • 0

jQuery wont load. I’m a noob. Tried many things, various syntax tweaks. heres how it stands…

Using jQuery on my hard drive, current version jquery-1.7.1 (also tried v1.7.1.min).

have tried to use the following plugins

1) .scrollTo-1.4.2-min
2) .jqDock.min & jquery.jqDock
3) .jtruncate(current) & jquery.jtruncate.pack
Am using IE8 and Chrome to check on local.

Debugging says…

(jquery-1.7.1.js) invalid character Line 1 (NB: line 1 is just the
beginning of the credit info greyed out text /*! )
(jquery.jtruncate.js) jQuery is undefined Line 1 (NB: line 1 is
(function(jQuery){ ) (my page name) Object doesnt support this
property or method Code 0 Line 17 Char 5 (NB: line 17 is $(”).jTruncate({ )

My head code… 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cressida Haughton - Artist Statement and Biography</title>
    <meta name="description" content="Cressida Haughton - Artist Statement and Biography">

    <meta name="keywords" content="Cressida Haughton,Lab Rat Orchestra,installation,contemporary artist,Coventry,Midlands,Cressida,">

<link href="_css/maintest2.css" rel="stylesheet" type="text/css" />

<script src="/_js/jquery-1.7.1.js" type="text/javascript" ></script>

<script src="_js/jquery.jtruncate.js" type="text/javascript" ></script>

<script>window.jQuery || document.write("<script src='_js/jquery-1.7.1.min.js'>\x3C/script>")</script> 

<script type="text/javascript">


$(document).ready(function(){
        $('<div id="statement" />').jTruncate({
            length: 200,
            minTrail: 0,
            moreText: "[more]",
            lessText: "[less]",
            ellipsisText: "(truncated)",
            moreAni: "fast",
            lessAni: 2000
        });
    });

Then theres some java generated by Dreamweaver, (Rollover image/swap image guff), then page specific CSS (see below) i also have site wide external css sheet. 

    #statement {
        position:absolute;
        left:285px;
        right: 190px;
        top:130px;
        width: 607px;
        height: 321px;
    }

Then html body.

Can anyone help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have just tried the following and it appears to work ok (Chrome), I am by no means an expert in jQuery but this line 

    $('<div id="statement"/>')

    does not look write to me, I have commented where I have changed it, look at http://www.w3schools.com/jquery/jquery_ref_selectors.asp or more info.

    <body>
  <head>
   <title>test</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
   </script>
   <script type="text/javascript">
     /* jtruncate - should be external js file */
     (function($){$.fn.jTruncate=function(h){var i={length:300,minTrail:20,moreText:"more",lessText:"less",ellipsisText:"...",moreAni:"",lessAni:""};var h=$.extend(i,h);return this.each(function(){obj=$(this);var a=obj.html();if(a.length>h.length+h.minTrail){var b=a.indexOf(' ',h.length);if(b!=-1){var b=a.indexOf(' ',h.length);var c=a.substring(0,b);var d=a.substring(b,a.length-1);obj.html(c+'<span class="truncate_ellipsis">'+h.ellipsisText+'</span>'+'<span class="truncate_more">'+d+'</span>');obj.find('.truncate_more').css("display","none");obj.append('<div class="clearboth">'+'<a href="#" class="truncate_more_link">'+h.moreText+'</a>'+'</div>');var e=$('.truncate_more_link',obj);var f=$('.truncate_more',obj);var g=$('.truncate_ellipsis',obj);e.click(function(){if(e.text()==h.moreText){f.show(h.moreAni);e.text(h.lessText);g.css("display","none")}else{f.hide(h.lessAni);e.text(h.moreText);g.css("display","inline")}return false})}}})}})(jQuery);
    </script>
  </head>
  <body>
    <!-- truncatable div element -->
    <div id="statement">
      <p>This is a statement</p>
    </div>  
    <script type="text/javascript">
       $(document).ready(function(){
          /* changed from $('<div id="statement" />') */
          $('#statement').jTruncate({
              length: 5,
              minTrail: 0,
              moreText: "[more]",
              lessText: "[less]",
              ellipsisText: "(truncated)",
              moreAni: "fast",
              lessAni: 2000
          });
      });
    </script>
  </body>
</html>

    Hope this helps, merry christmas 🙂

    • 0