Forums

WordPress › Support » Plugins and Hacks » Hacks

Help with JQuery (10 posts)

  1. chinchanchan
    Member
    Posted 1 year 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

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

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

  3. chinchanchan
    Member
    Posted 1 year ago #

    Thanks esmi, i will read and try it out.

  4. chinchanchan
    Member
    Posted 1 year ago #

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

  5. mattyza
    Member
    Posted 1 year 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.

  6. chinchanchan
    Member
    Posted 1 year 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', 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

  7. mattyza
    Member
    Posted 1 year 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.

  8. chinchanchan
    Member
    Posted 1 year 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>
    <script type='text/javascript' src='http://localhost/praisebook/wp-content/themes/thematic/jquerytransposer.js?ver=1.0'></script>
    <script type='text/javascript' src='http://localhost/praisebook/wp-content/themes/thematic/gotranspose.js?ver=1.0'></script>
    '

  9. mattyza
    Member
    Posted 1 year 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.

  10. chinchanchan
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags