I have a script embedded in a page, which is as follows:
<script type="text/javascript">
function fireNlPopup()
{
setOpacity(0);
centre();
document.getElementById("NlPopup").style.display = "block";
fadeInNlPopup();
}
//Other functions here
</script>
this makes the following appear as a popup in-window:
<div id='NlPopup' name='NlPopup' class='nl'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutNlPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Your next lecture is X, with Y, at Z.
</td></tr>
</table>
</div>
and finally, this is all called by a button:
<button type="button" style="button" onClick="fireNlPopup()">Next Lecture</button>
The problem is when I try and put the script is a different file. I have a file, called popup.js, with the exact same code (since it works when embedded in my php file, i assumed if i copied it rote into a js file and called that, it would work.
When i call the js file, I use:
<script type="text/javascript" src="popup.js">
</script>
and then all the content between the script tags go into popup.js. However, despite the code working fine when it's embedded, the second I take it out and put it in its own file, it doesn't work. I've double and triple checked, my code works fine, is syntaxed correctly, and that's why I left it out the code snippet. for some reason it just stops working. Am I calling the file incorrectly? It is on my server, I have checked that too =P
I'm probably being really stupid, but any help would be really useful. I've been stuck on this for ages.
Thanks =)
EDIT: for those who want a look, page is live here: http://oliverlea.com/3yp/tt.php
Also, using Chrome to view source, the file does load as a link.
Thanks for the help =)
EDIT 2:
First, yep the script tag is in the head of my file.
Second:
Ok, so regardless of whether I use src="popup.js" "/popup.js" or "./popup.js" I get nothing. The url always loads in Chrome's source viewer, and even by changing the permissions of the file to 0755, it still makes no difference.
I am completely flummoxed by this.
The script needs to be parsed before it can be referenced. This is a classic case of a race condition. Make sure the script is in the <head> if you're going to reference it in the DOM like that. Also make sure your pathing is correct in your src="/path/to/popup.js"
This is an encoding issue with the popup.js file. Please see below for my analysis. Some browsers "fix" this for you and others do not. The solution is to save popup.js file in standard encoding, on Windows machine try saving in Notepad.
EDIT: Added summary (above). Complete analysis of your problem is below:
Your page works in IE9, but not in Chrome or Firefox. Further, I copied the page and your CSS and JS (but not images) into a local project and it works for me there as well (even in chrome and Firefox).
I then loaded your live page into FireFox and opened FireBug, and when I clicked "Next Lecture", the console showed me that FireNlPopup is undefined.
On further review, I went to view source in FireFox on your live page, and clicked "popup.js"
The result looked like this:
It seems like you are using a text editor of some sort to create your popup.js file which is encoding in a weird format; use standard Notepad or Notepad++, (i.e., not Wordpad) or use Eclipse or Visual Studio to save the popup.js file, and you should be good.
Try using:
<script type="text/javascript" src="/popup.js"></script>
or if that doesn't work:
<script type="text/javascript" src="./popup.js"></script>
It is probably not finding the path, but using Firebug or Chrome's console should be able to tell you.
I had a different cause, but same symptoms. Essentially I didn't make the connect that a script file on a server, needs an addition to the routing table to retrieve it. A bit dumb in hindsight, but I may save someone else some time.
FWIW, I added (using node.js);
// script routes
app.get('/scripts/:script', script_server.serve);
and in script_server.js
exports.serve = function(req, res){
res.sendfile(req.param('script'));
};
Related
It's been a while since I've touched web development, and I'm trying to get back into it. For some reason, however, I seem to be having trouble getting my JS scripts to run. I've tried linking a JS file using <script src="script.js"></script>, and even though the script file is in the same directory as my index.html, it seems to be ignoring it entirely. I've got some event listeners from jQuery, but at the very beginning of the code is a console.log("sanity check");.
So, after that didn't work, I tried writing the script directly in the html file like so:
<script>
console.log("WHAT IS GOING ON?!");
alert("It's finally working!");
</script>
and that STILL didn't work. Help!
Edit:
Here is the relevant HTML:
<head>
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
<script>
console.log("WHAT THE CRAP IS GOING ONNNN");
alert("JS is running");
</script>
</head>
Here is the JS,
console.log("sanity check");
$(document).ready(function() {
console.log("Helloooo and good moonring!");
$("#back").hover(function() {
console.log ("*eyeroll* YES. I can hear you.");
$("#back").attr("cursor", "pointer");
}, function() {
$("#back").attr("cursor", "default");
});
});
None of it is working. I'm running it locally. The inspect tool in Chrome shows no errors whatsoever.
Edit 2:
I took a closer look at the code in the inspect tool. Still, nothing seeming to be wrong with it, but I have noticed that it isn't updating to the saved changes upon refreshing the page. This is clearly problematic, and very confusing. Also added type="text/javascript" and changed script.js to ./script.js (and the same with the jQuery file).
This snippet works, no?
<script>
console.log("WHAT THE CRAP IS GOING ONNNN");
alert("JS is running");
</script>
Make sure these are checked and messages aren't hidden. Also maybe change "console.log" to "alert" just to make sure but check to make sure messages aren't being filtered out.
Solved! Earlier, before I came across this issue, I decided to change my folder from "Web Design Project" to "WebDesignProject", because there were some things I wanted to look at in Terminal. Apparently my text editor, Atom, decided that this meant that the folder I had left open called "Web Design Project" was an entirely different folder. Those changes that I made were then mapped not to "WebDesignProject," but instead a new folder, once again named "Web Design Project."
In conclusion. Never put spaces in your project folder name. And, when you change the folder name, restart EVERYTHING. Atom should fix this phenomenon.
I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!
I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/
In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers
How to hide the src as shown in below. If the example.php contents php , MySQL functions and forms. So how do I hide the src when some visitor checks view source in the page.
<iframe src="example.php" height="300" width="200" scrolling="no" sandbox="allow-forms" seamless="seamless" id="example1"></iframe>
<div id="panel">
content
</div>
Even if you can find a way to hide the iframe src, the visitor can see it by debug tools such as firebug.
First, the user won't get the .php-File like you see it on the Server (if you have a PHP-Server).
It will get parsed and what will remain is plain HTML.
So your user won't see SQL-Queries, etc.
But what you're trying to do is impossible. That's not how HTML works. What you see when you click "show Sourcecode" is exactly what the browser uses to display the Page. So if you won't deliver a src-value for your iFrame, than the browser won't be able to show it correctly
In the past I searched also something for this problem and I found a node.js plugin that can protect your code with obfuscation and other stuff. Please read his readme to understand why you can´t protect javascript code for 100% and how you should do it. He explained it very well.
https://www.npmjs.com/package/location-hide
There is also a LIVE DEMO:
http://www.forbiddentube.online/samplepage
You import as example your index.html or every other file that fs can read and the output will be like this:
Before:
<script src="_/sample.js" type="text/javascript"></script>
After:
<script data-wchIyvpKUkArTeyUIZsCekKZRROZZzMNErjvtdIqWGkytjDyhJ="bCCnkxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJktkXTWDnc" type="text/javascript"></script>
Then in a external js file you can add the generated jquery code that will be generated in a external file:
$(document).ready(function() {
var qRlhGXpAjYCmwyVlAnbJmUABkGzIavYdkcVArRvICzLhaeJbbV = document.querySelectorAll('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]');
$('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]').attr("src", "_/sample.js");
$('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]').attr("src", "").delay( 10000 );
});
Since Version 1.3.6 is FSIG(Fake Script Include Generator) part of this project.
This nice tool allow you to add fake include scripts. As example
<script src="_/Dniw94XqAh6v69sMOy3PlajC0WlMZASgxs37FlnVcW5cX4k8vuwLTcyD3tWYxZPH1OBxRrnFRtKVf5bXbd24rNcdVfWNuBrhvaMl.js"></script>
<script src="_/TXCRCSq5xo335CGmApFbqWggJuiZmIzuPXGgHKWuQljXqIvKSdVeO4qNUmTcaIRlVpZ0wfA6h1I9MviVOs0KiD7bdRgNYiSy3gUD.js"></script>
<script src="_/vYmuX2f5tY3L0WGIBclT5j1qWyF2g5bEj026ZW90HzIaCMFjneLB2lYmofRbMy51YKXuiMbhNmNICKSk99OS6yoTTly2wAWVGQMp.js"></script>
This code will be paste at the end of your crypted file. You should cut it out and paste it directly before your
I used this plugin for my blogs and it works like a charm.
I'm using ASP.Net Dynamic Data. I have the following line in my site.master page.
<script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
The path is correct and file exists. But when I load the page I can see in the Net panel of firebug that it cant find the file. Error message is "404 Not Found"
Approach - 1
You should modify the code like as mentioned in below ways...
~/Scripts/jquery-ui-1.8.20.custom.min.js
"<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"
in the first case replace the .. with ~
Approach - 2
Alternatively, Right click the Page and select View Source. click the link of your Script file and check if it navigating to your actual Script file? Otherwise make the necessary changes as mentioned above.
I dont trust your url :)
use :
<script src='ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")' type="text/javascript"></script>
also , please verify - you load the jQuery.js BEFORE you load this line.
When you use ../ at the beginning of a url, it is the browser's current url that is taken as the base. So that url will only work when you are at exactly one directory level down from the site root, like this:
http://myserver:myport/myvirtualdir/somedir/somepage.aspx
Or this:
http://myserver:myport/myvirtualdir/somedir/ (using a default page or view)
Then, the browser will load the following script:
http://myserver:myport/myvirtualdir/Scripts/jquery-ui-1.8.20.custom.min.js
But if you are at any other directory depth, the browser will use the wrong url for the script. Like if you are at the root default page:
http://myserver:myport/myvirtualdir/Default.aspx
Then the browser will try to load the script from the wrong directory:
http://myserver:myport/Scripts/jquery-ui-1.8.20.custom.min.js
That is why you need to resolve the url on the serverside, like a couple of people have already said here. That will provide the browser with a working url for your script. There's a difference between file paths and urls.
The fact that you are getting a 404 means that the url that the browser is trying to reach is simply not correct, from the browser's point of view, which is in fact the only point of view that is valid, even if you, the developer, is convinced that you are doing it right...
<script src="<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"></script>
As Royi mentioned make sure you have the jquery.js before you have your jquery-ui.js
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
Here is a tip. open site.Master designer then drag and drop the .js file from the Solution Explorer into the designer. It would create the path for you.
When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");