Javascript functions not being called - javascript

My website uses a nav bar which toggles divs on and off to go to different "pages". Recently the buttons have stopped responding (nothing happens when clicked, and nothing appears in the console), and I have not been able to figure out why.
My nav bar is formatted like so:
videos<br>
graphic design<br>
web design<br>
My pages are formatted like so:
<div id="videos" class="page">Videos page</div>
The JS is:
$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});
for each button. My JS file is being loaded, and I can view it in the console, so it's not an issue with that. I have been struggling with this for hours and I am at a loss. Can anybody help me understand why the nav bar is not behaving as expected?
EDIT: I have moved my external JS and jQuery to just before the closing </body> tag, and the problem persists. I have put up the complete website at http://hdf.bl.ee/test/index.html if anyone thinks there is an issue not in the code I posted.

Odds are that you're running that code before the element exists, and so $("videosButton") matches no elements, and so hooks up no handlers. Make sure the code is in a script tag after the markup for the elements in the HTML, or as a second-best approach, use jQuery's ready callback. Provided you do that, the function will get called:
$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
videos<br>
graphic design<br>
web design<br>
My pages are formatted like so:
<div id="videos" class="page">Videos page</div>

It turns out the issue was something else entirely. Even though I moved my site's external JS file and the link to jQuery down to the </body> tag, they were being ignored because I had left one <script> in the <head> (the link to the Google API). When I moved that down with the other scripts, everything sudden began working. I am not sure why that was causing the other scripts to be ignored, but it solved my problem.

Related

Using HTML5 tooltip gets page ruined on Google Chrome

So I wrote this page from scratch, using php, python and bash. The page collects data from the server, and displays it.
I would like to add tooltips on the world map, such that the user could see the station name on click/mouseover. I followed this tutorial.
1- I wrapped my world image with #wrapper
2- I added the CSS code
3- I added the Javascript code.
This appeared to look fine in the beginning and the tooltip is working, but on Google Chrome, like 90% of the time (I'm on Windows 10 viewing this) I suddenly see that the world map gets messed up, as follows, getting over the data plots:
While it should look like this:
I noticed that this problem happens in Google Chrome, and not on Mozilla Firefox or Microsoft Edge... Why is this happening? I have the feeling that a simple float command could fix it. Could you please help me with this? Why is this happening?
If you require any additional information please ask.
UPDATE:
I noticed removing this part of the script solves the problem:
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
But then the tooltip doesn't work.
You have your rome.js included in head section. If it will be loaded earlier then html body, it will be executed earlier then dom content loaded.
So the first time evertything works, because js is loading with dom content. After first refresh js will be taken from cache and executed too early.
So you should prevent that using jquery $(document).ready() method or DOMContentLoaded event.
Or you could simply include your rome.js in the end of the body section.
There are two things not working out here:
You don't have a doctype.
You have some <style> and <script> tags before your <html>. They should be inside your <head> or <body>

Run JavaScript inside of Wordpress

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.

Changing div content via jquery with another html file's content

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.
What I'm trying to do:
I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.
My HTML part with the navigation menu:
<ul id="nav_main">
<li class="navLink">link here</li>
</ul>
The div that is supposed to change dynamically (on click) is labeled as this:
<div id="main_content">
<p></p>
</div>
The other .html file that I pull data from has a div that looks like this:
<div id="one">blahbalhblahblahlbhalbhlah</div>
The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:
$(document).ready(function(){
$("#nav_main li").on("click", function() {
// here was my first attempt:
$("#main_content p").load("contentholder.html #one");
// my second attempt, using get():
$.get("contentholder.html", function(data) {
$("#main_content p").html(data)
});
});
My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.
All these files are on my local drive. Any help would be greatly appreciated
$(document).ready(function(){
// your code here
});
You are missing the function(){
In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.
See more info here: Get HTML code of a local HTML file in Javascript

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.

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