Run JavaScript inside of Wordpress - javascript

I am trying to get the truck to drive across the screen Directly under my nav menu in Wordpress. The code executes perfectly in js fiddle , but when I try to load the JavaScript file, all I get is a still image (JavaScript is not loading)
Here is the working js fiddle:
http://jsfiddle.net/J2RPq/60/
Here is the code I applied to page.php:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script>
<div id="animate">
<img id="plane" src="http://thumb10.shutterstock.com/thumb_small/507037/507037,1274380827,2/stock-vector-black-and-white-big-rig-silhouette-53528596.jpg" /></div>
</script>
CSS
css :#animate { position: relative;}
Can someone help me with this error?

Regarding jQuery and Wordpress...
First, you should never load jQuery using the <script> tag when using Wordpress. Wordpress has it's own method for how stuff should be loaded. You can read more about there here: http://matthewruddy.com/using-jquery-with-wordpress/
Second, you may already have jQuery loaded in your Wordpress. Wordpress themes frequently already have jQuery installed, but it runs in No Conflict mode. This means that instead of using $ in your functions, you need to write out jQuery.
Hopefully that gives you a starting point troubleshoot...

You shouldn't need to load jQuery, WordPress should load a version already.
You have an extra </script> at the end of your html that doesn't appear to belong.
Make sure you place your script tag <script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script> inside of your <head> tag in header.php, try right before the line </head>.
Make sure your div is placed in page.php (assuming that's the correct template file). You should be able to see it even if the script isn't firing, and if you can't there is some other problem.

Related

loading jquery.min only for specific DIV id

I want to activate a poll script on myprestashop site, but during setup there is a little (but Big for me) problem.script uses a jquery.min file to load data but when i call it in head section , it ruins the whole site. i think its because of using different version of jquery.
but actully i cant define my jquery file to only run for that specific Div Section with specific id
Head section
<script src="ezpoll/js/jquery_min.js" type="text/javascript" language="javascript"></script>
any help would be appreciated
and thank you all for reading this

Image Slider is not loading correctly

On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js

prettyPhoto in Expression Engine

Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.

Site not loading completely when external script fails

I have a script on my site from easypolls.net which is basically a voting poll but if for example their site is down, or there is a problem loading the script then the rest of the content on my site isn't loading.
Here's the script:
<script type="text/javascript" src="http://www.easypolls.net/ext/scripts/emPoll.js?p=5075b1e0e4b08bb807c01061"></script><a class="OPP-powered-by" href="http://www.objectplanet.com/opinio/" style="text-decoration:none;"><div style="font: 9px arial; color: gray;"></div></a>
So how can I fix this, is it normal javascript issue? or am I doing something wrong?
The script is inside a div in the body section.
If you are currently referencing this script in the HEAD of your document, then you might try adding that script tag right before the closing BODY tag.
I would use js library such as yepnope.js to make an asynchronous call to that js file with errorTimeout property set 2-4 sec? and if it cant be retrieved you can always notify user in corresponding callback functions. Display message, hide the poll? or what ever you want with js/jQuery or similar.
There is some good information about this issue by Steve Souders
Are you trying to load your site in IE? Because IE breaks sometimes when a script file doesn't load properly.
Also try this:
<script type="text/javascript" src="http://www.easypolls.net/ext/scripts/emPoll.js?p=5075b1e0e4b08bb807c01061"></script>
Add a closing bracket to the end of the script. This is good practice, and might solve some problems

asp.net 2.0 site and location of <script/> tags causing problems/conflicting

I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.

Categories