Help with JQuery

  • chinchanchan

    (@chinchanchan)


    13 years, 4 months ago

    Hi,

    I’ve found an opensource jquery for transposing guitar chords in a html file i want this to work in wordpress posts

    here it is

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><br />
  <script type="text/javascript" src="jquery.transposer.js"></script><br />
  <script type="text/javascript"><br />
    $(function() {<br />
    	$("pre").transpose();<br />
    });<br />
  </script><br />
  <link rel="stylesheet" type="text/css" href="jquery.transposer.css" /><br />
</head><br />
<body style="margin: 30px"><br />
  <pre data-key="C"><br />
       C              G                 Am          F<br />
When I find myself in times of trouble, Mother Mary comes to me<br />
C                 G              F   C/E   Dm   C<br />
Speaking words of wisdom, let it be</p>
<p>    C             G                Am                F<br />
And in my hour of darkness, She is standing right in front of me<br />
C                 G              F   C/E   Dm   C<br />
Speaking words of wisdom, let it be</p>
<p>       Am         G          F          C<br />
Let it be, let it be, let it be, let it be<br />
                 G              F   C/E   Dm   C<br />
Whisper words of wisdom, let it be<br /></pre>

    Thank you, i hope you can help me

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    13 years, 4 months ago

    http://codex.wordpress.org/Using_Javascript
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Thread Starter chinchanchan

    (@chinchanchan)

    13 years, 4 months ago

    Thanks esmi, i will read and try it out.

    Thread Starter chinchanchan

    (@chinchanchan)

    13 years, 4 months ago

    i followed the guide, but i cant get it too work…

    Matt Cohen

    (@mattyza)

    13 years, 4 months ago

    Hi chinchanchan,

    JavaScript in WordPress, the first time, can seem confusing.

    I’ve written a blog post explaining using JavaScript in WordPress which will hopefully shed some light on the subject.

    Essentially, it’s a matter of “enqueuing” the JavaScripts you’re looking to run, as well as the call.

    This is the call:

    ‘$(function() {
    $(“pre”).transpose();
    });’

    You would place the call in it’s own JavaScript file and enqueue it like the others, but as the last file to make sure all the other scripts are loaded.

    I hope this helps. 🙂

    Cheers,
    Matty.

    Thread Starter chinchanchan

    (@chinchanchan)

    13 years, 4 months ago

    Hi Matty,

    I’ve read your guide and heres what i came up with

    ‘function transposer_js () {
    wp_enqueue_script(‘jq’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&#8217;, array(‘jquery’), ‘1.0’, false);

    wp_enqueue_script(‘jtranspose’, TEMPLATE_URL . ‘jquery.transposer.js’, array(‘jquery’, ‘jq’), ‘1.0’, false);
    wp_enqueue_script(‘transpose’, TEMPLATE_URL . ‘transpose.js’, array(‘jquery’, ‘jq’, ‘jtranspose’), ‘1.0’, false);
    }

    add_action(‘init’, ‘transposer_js’, 1);’

    i still cannot make it work. And when i view the sourcecode where js should be loading i see TEMPLATE_URL + the js file, i believe it is not pointing to the file correctly.

    Sorry about this Im a complete noob

    Thanks
    -Chin

    Matt Cohen

    (@mattyza)

    13 years, 4 months ago

    Hi Chin,

    At first glance, I see two issues arising.

    1. You’re including jQuery twice.

    WordPress comes bundled with a version of jQuery. Therefore, you don’t need to enqueue your own. If you’d like to run the version that’s on Google Code, there are tutorials online on how to replace the bundled version with the version on Google Code.

    Therefore, the “jq” enqueue isn’t necessary.

    2. TEMPLATE_URL usage.

    As mentioned in the tutorial on my blog, “* TEMPLATE_URL is a constant I have setup that holds the direct URL path to the current theme’s directory. This is the path as it is typed in a web browser, beginning with http://.”

    Essentially, you’d want to either setup this constant or replace it with the following:

    trailingslashit( get_bloginfo( 'template_directory' ) )

    This should point to the files correctly.

    I hope this helps. 🙂

    Cheers,
    Matty.

    Thread Starter chinchanchan

    (@chinchanchan)

    13 years, 4 months ago

    Hi Again,

    I have successfully included the files, they are loading correctly.
    jquerytransposer.js and gotranspose.js

    i created gotranspose.js inside that file is this code

    ‘$(function() {
    $(“pre”).transpose();
    });’

    but it is still not working here is the source

    ‘<script type=’text/javascript’ src=’http://localhost/praisebook/wp-includes/js/jquery/jquery.js?ver=1.4.2′></script&gt;
    <script type=’text/javascript’ src=’http://localhost/praisebook/wp-content/themes/thematic/jquerytransposer.js?ver=1.0′></script&gt;
    <script type=’text/javascript’ src=’http://localhost/praisebook/wp-content/themes/thematic/gotranspose.js?ver=1.0′></script&gt;
    ‘

    Matt Cohen

    (@mattyza)

    13 years, 4 months ago

    Hi Chin,

    Excellent to hear things are coming along. 🙂

    It’s difficult to diagnose the error without seeing the page when it loads.

    Maybe visit http://jquery.com/ and make sure you’re working with jQuery correctly in gotranspose.js.

    There may be a JavaScript conflict on the page between one or more of the scripts being loaded in. A good way to see this is to use either Safari or Google Chrome’s code inspector, or FireFox’s Firebug extension.

    Cheers,
    Matty.

    Thread Starter chinchanchan

    (@chinchanchan)

    13 years, 4 months ago

    Thanks for the help Matty, i will surely check jQuery’s site and learn more about it.

    Thanks for the tips.

    have a great day!

    -Chin

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Help with JQuery’ is closed to new replies.

Tags