0

I've read a similar question here, but can't seem to get around it in this case, so would appreciate any clarification. I have a page in php that runs several instances of JavaScript that work on cue on localhost. However one particular instance of JavaScript (that makes an arrow hide when it scrolls beyond 10px) does not run, but when i run the same from an html version of the same php page, the arrow action works as desired. Why is this the case? Here is the code of the page in jsfiddle (exactly the same is used for respective sections in the php page.)

To clarify i have added this bit of JavaScript in the following manner at the end (after footer, before body end) of the index.php file (along with other blocks of JavaScript which work as desired for their respective targets):

<script type="text/javascript">
 $(window).scroll(function () {
    if ($(this).scrollTop() > 10) 
        document.getElementById('arr_downpoint').style.visibility = 'hidden';

else 
       document.getElementById('arr_downpoint').style.visibility = 'visible';
    });
</script>

I have added jquery as follows (and it works for all other instances on the php page except for the arrow):

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Lastly, there are no console errors. Would like to know why only this block of JavaScript isn't working from php, but works from HTML (while the other JavaScript instances work fine on both php and HTML), and how to find out what's wrong?

RESOLUTION: Just found that I'd erroneously added # while assigning arrowpoint id. That's why the script couldn't do anything with the arrowpoint, since <a> now had a # as part of its name. sorry about that careless oversight, for the time it may have taken to consider.

Community
  • 1
  • 1
Agni Scribe
  • 252
  • 3
  • 18
  • Can you show / share the PHP code? – putvande Jan 27 '16 at 08:38
  • the php code for the relevant parts are exactly the same html as I've used above, i'm making calls to the database in the part after the header and not the header itself (which is shown in the jsfiddle). – Agni Scribe Jan 27 '16 at 08:55
  • 1
    The browser does not see a difference between "normal" html and the html generated by a php script, it is all html. So are there any differences between the two html source codes? Perhaps php warnings that mess-up your javascript? – jeroen Jan 27 '16 at 09:01
  • for the header section which I am showing in the jsfiddle, the code is exactly the same. – Agni Scribe Jan 27 '16 at 09:06

1 Answers1

0

If you are trying to load the page directly from the file (your page url start with 'file://...') the problem is that the browser is trying to load jquery using the same protocol (file instead of http) because you didn't specify a protocol for the external files (the src attribute starts with '//', which mean something like "use the same protocol of the current page"). You can verify if this is the reason behind your problem, opening the browser console looking for errors like:

GET file://code.jquery.com/jquery-1.11.3.min.js net::ERR_FILE_NOT_FOUND
GET file://code.jquery.com/jquery-migrate-1.2.1.min.js net::ERR_FILE_NOT_FOUND
Uncaught ReferenceError: $ is not defined

To fix this problem, you should always run you html from a server (like Apache with PHP, as you already did) or you can write the external scripts url including the protocol (but this can cause other problems if you will run your page under https)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
obiTheOne
  • 105
  • 2
  • 5