Adding a GitHub plugin that uses JS – please help

  • Resolved zanzaboonda

    (@zanzaboonda)


    8 years, 4 months ago

    Hi there,

    I’m having trouble implementing this and am hoping someone can help me figure out what I’m doing wrong. I’ve been using WP for 10+ years, but I’m not a coder, so please bear with me.

    I’m looking at this plugin on GitHub.
    https://github.com/PCaponetti/jquery.slotMachine

    I uploaded the JS files to my server, and using the Header and Footer Scripts plugin (https://wordpress.org/plugins/header-and-footer-scripts/), I added the following code to the header.

    <link rel="stylesheet" type="text/css" href="wp-includes/css/slot-machine-main.css" />
<script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/jquery.slotMachine-0.5.1.js"></script>
<script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/main.js"></script>

    I then created a list, per the info on GitHub.

    <div id="roller1">
						<ul>
							<li>tiny</li>
							<li>little</li>
							<li>pocket-sized</li>
							<li>pretty</li>
						</ul>
						<ul>
							<li>fluffy</li>
							<li>snuggly</li>
							<li>baby</li>
							<li>lovey</li>
						</ul>
						<ul>
							<li>bunny</li>
							<li>puppy</li>
							<li>kitten</li>
							<li>turtle</li>
						</ul>

					</div>
					<div style="clear: both;">
					</div>
					<br />
					<div id="btn_shake" class="button">
						Spin!</div>
					<div style="clear: both">
					</div>

    When I put the list in the sidebar (as a test), it works perfectly. 🙂

    However, I want to be able to use this code in a post, utilizing the same JS code but a different list each time.

    When I put the list in a post, it just shows up as a list and doesn’t do anything. Interestingly, the sidebar that works on the home page no longer works once I navigate to the post; it winds up looking just like a list again.

    I’ve reviewed the WP codex on JS (https://codex.wordpress.org/Using_Javascript, but I don’t really understand it.

    Does anyone know what I could be doing wrong? I’m pulling my hair out. lol

    Any help or insight would be greatly appreciated.

    Thank you kindly in advance for your time and assistance.

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

    (@kjodle)

    8 years, 4 months ago

    Have you tried an absolute, rather than a relative, URL for the JS files?

    Instead of:
    <script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/main.js"></script>

    Try this:
    <script type="text/javascript" src="http://www.example.com/wp-includes/js/pcaponetti-slot-machine/main.js"></script>

    Thread Starter zanzaboonda

    (@zanzaboonda)

    8 years, 4 months ago

    Thank you so much for your reply. 🙂

    On your recommendation, I just did. Didn’t work for me. :'(

    Using the WP codex info on JS, I tried it with the / at the beginning, as well. Interestingly, this fixed the one in the sidebar (when viewing the post), but the one in the post itself still does not work. It almost looks to me as if the css file is not registering for the post because it still just appears in the list format.

    I’ve tried everything I can think of. I’m going crazy.

    Here’s a screenshot of what it looks like now. http://zwoodle.com/micromondays/wp-content/uploads/sites/11/2015/12/Screenshot-2015-12-05-at-11.03.26-PM-Edited.png

    Any thoughts on that?

    Thanks so much again. I really appreciate it.

    kjodle

    (@kjodle)

    8 years, 4 months ago

    You shouldn’t include this line:

    <script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/jquery-1.6.2.min.js"></script>

    WordPress already loads its own version of jQuery.

    I’m not finding any instructions on that GitHub page. It’s pretty old (3 years) and it doesn’t say it’s for WordPress (although I don’t see any reason why it wouldn’t work on WordPress).

    Can you provide a link to the page in question?

    Thread Starter zanzaboonda

    (@zanzaboonda)

    8 years, 4 months ago

    Ah, thank you. I took that out, now.

    Here’s the post. FYI – this is a shell site; I’m just trying to get this working, first.

    I wrote to the plugin author, and this is what he said:

    The basic idea would be to link up jquery, which more than likely is already on your page with a tag like:

    <script type="text/javascript" src="<PUT THE PATH TO JQUERY HERE>/jquery-1.6.2.min.js"></script>

    Then link my plugin with a tag like the following, but make sure the src attribute points to the plugin file that you uploaded:

    <script type="text/javascript" src="<PUT THE PATH TO MY PLUGIN HERE>/jquery.slotMachine-0.5.1.js"></script>

    Then you make a < ul > type list. The best way to do this is by copy/pasting what I have in my example page and modify the items in the
    < li > tags to what you would like and add more < /li >
    < li >’s as you need them.

    [Same as what’s on there.]

    Using that example code, you want to put the following <script> tag near the bottom of a page (near the ending </body> tag)

    <script type="text/javascript">
$(document).ready(function () {
	if ($("#roller1").length > 0) {
		$("#roller1").slotMachine({'pxsPerSecond': 35, 'button': $("#btn_shake")});
	}
});
</script>

    Hope this helps!

    I tried putting that code in the post, but nothing happened.

    Thank you so, so much for your help. You’ve renewed my faith in the WP community. 🙂

    kjodle

    (@kjodle)

    8 years, 4 months ago

    Using that example code, you want to put the following <script> tag near the bottom of a page (near the ending </body> tag)

    That’s very likely where we’re getting hung up. The easiest way to implement this would be via a child theme, unless there is a plugin that lets you add code just before the closing </body> tag.

    Thread Starter zanzaboonda

    (@zanzaboonda)

    8 years, 4 months ago

    I just tried that. Didn’t work, either. 🙁 I tried a few different plugins for inserting into headers and footers, and I created a child theme and updated the footer to include that. Nothing happens. 🙁

    Taking out <script type="text/javascript" src="wp-includes/js/pcaponetti-slot-machine/jquery-1.6.2.min.js"></script> Actually kept the plugin from working in the sidebar. Does that mean there’s a conflict, somewhere?

    Thread Starter zanzaboonda

    (@zanzaboonda)

    8 years, 4 months ago

    I was tabling this for later and started working on some other things with the site. I switched the theme from Twenty Fifteen, and… the freaking thing works! Grr…

    I feel no victory in this. lol None. I’m not even sure what I’ve got now is the theme that I want. But it seems to me that Twenty Fifteen is doing something to strip out the code, even with the various plugins, etc. (Do you know why that would be?) I’m going to have to play with it a bit.

    Anyways, thank you SO much for all of your help. I really appreciate it!

    kjodle

    (@kjodle)

    8 years, 4 months ago

    I’ll have some time over Christmas break to take a closer look at this.

    Query: Which theme did you switch to? Does it work in other themes besides that one?

    Thread Starter zanzaboonda

    (@zanzaboonda)

    8 years, 4 months ago

    Hi kjodle,

    Thanks so much again for replying! I’m currently using Colinear, but I believe it worked when I tried a couple of others, as well. I’ll play around with it again to verify that once I get back into town. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Adding a GitHub plugin that uses JS – please help’ is closed to new replies.