Why is waypoints not working? - javascript

On My computer C drive, I created a test.html file and inside it I have
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#waypoint').waypoint(function() {
alert('You have scrolled to my waypoint.');
}, {
offset: '100%'
});
});
</script>
<div id="waypoint">WAYPOINT</div>
I don't get the alert popup, yet the exact same code in JSFIDDLE works fine. What gives?

Afaik some browsers don't load external resources (.js files) when simply opended by double clicking the .html file. Please check, whether there's file:// in your browser's URL bar.
If so, install XAMPP (or something similar, depending on your OS) on your machine, put your file somewhere under htdocs and retry.
Also JSFiddle wraps your code in a valid HTML Document. You might add <html><head>... to your HTML to make it valid. Especially since you're dealing with viewport scrolling that might be required for the plugin to work.
Last to be said is that the include order of your .js files matter, since they're loaded in order. Since waypoints depends on jQuery (as it is a jQuery plugin) it needs to be loaded FIRST.

Related

Strip off the path of the href after the file is loaded into the browser

When I load a web page and do a view source, then I can see
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"/>
If I type in www.example.com/css/bootstrap/bootstrap.min.css in the address bar of the browser, then I can see the whole css file.
Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?
Any help is appreciated.
Thanks
Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?
No. Most browsers implement "view source" by re-requesting the page from your server (which may or may not come from cache) and then showing that text, exactly; you don't have an opportunity to run client-side code to remove link or style elements (and it would have to be client-side code, because naturally you can't do this server-side and still have the page render correctly for normal requests).
Even if you could run client-side code before the "view source" was shown, you can't do this with CSS anyway: Altering or removing the link element will remove the stylesheet associated with it. Even if you could (guessing at your reason for this), it wouldn't prevent anyone from being able to see your CSS with the most trivial amount of effort.
You could do something similar with JavaScript on your page (you can remove the script tag entirely once it's been run, it won't affect the code it loaded), but not with CSS, and that just prevents people from seeing the script elements in the debugging tools, not "view source."
Any pointers on removing the JavaScript tags...
Sure, as you're using jQuery, it's as simple as putting:
$("script").remove();
...in code that runs after all the other script code has run. Here's an example:
$(".dp").datepicker();
$("script").remove();
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>
Pick a date: <input type="text" class="dp">
</label>
Note that the jQuery UI datepicker keeps working, even though we removed the jQuery and jQuery UI script elements from the DOM. But again, they'd still be there in a "view source," because the above is client-side code.

Difficulty using standard Firefox javascript debugger

I can't find and set breakpoints for inline javascript that is included in the HTML file. Under debugger->sources it just lists all the external .js files that are loaded for debugging. Where can I find the inline javascript that is in the html? Below you can see it only lists sources which are external js files that are loaded. When I say inline, I mean javascript included between <script type="text/javascript"></script> tages
Note: I know I can use Firebug, but that is not the solution I am looking for.
Assuming the inline scripts are parsed and run, they'll show up in the list of sources using the page name (e.g., foo.html or similar). If you don't see them there, hit F5. If you still don't, it may be that an error prior to them has prevented them from being parsed and run.
For instance, here I have scratchpad.html with script.js, anotherscript.js, and an inline block:
Select http://localhost:3000
Find the snippet you want to debug.
Click the line number where you want to place the breakpoint.
Nice. You just set a breakpoint in your embedded JS.
Assuming that http://localhost:3000 shows you the html you loaded. If not, there will be some tab in that list which does that.
There is a 'prettify source' option in the Sources pane, click that and then add the breakpoint.

Load multiple external css issue

I found an example here https://code.google.com/p/fastcssloader/ for loading several stylesheets using only 1 link rel=...
Everything worked fine until I tried to use the code linked above.
My link code:
<link rel="stylesheet" type="text/css" href="/styles/css_include.php" />
I literally copied the code and put the above .php in the directory where my styleshees are but no matter which style I choose from the options page I created (which stores a cookie telling which stylesheet to load on all pages) it always loads the second one in that directory. Any idea what is happening?
EDIT: This was using Chrome. Apparently the second stylesheet is cached somewhere (even though I must have pressed ctrl f5 a dozen times) because when I open the page in IE8 (dont ask) the stylesheet is not loaded at all. What am I doing wrong? Why doesn't the code load the stylesheets even though I copied it exactly? Is it the directory? I tried making the directory "." and "/styles" and a combination of them all.
EDIT: I moved the css_include.php file into the directory where my pages are stored and referenced it accordingly and now it doesn't load any stylesheet at all, so at least keeping css_include.php in the /styles directory loaded SOMETHING. I am at a loss here...

JavaScript SRC path not working

I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)

Embed javascript as base64

I'm working on a small GreaseMonkey script where I would like to embed a jQuery plugin (Markitup) so that the script is fully self contained (images + js) except for jQuery which is served from google.
I found the site http://www.greywyvern.com/code/php/binary2base64 which says that you can embed javascript with the href if you base64 encode the script, much like serving images as basse64 from CSS.
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
So i tried that but couldn't get it to work at all, using Firefox 3.0.5 on OS X.
I put together a small test page to isolate the problem but couldn't get it to work at that page either.
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>
<script href="data:text/javascript;base64,YWxlcnQoJ2FzYWRhc2QnKTsK"></script>
<script>alert('a');</script>
</body>
</html>
The base64 string (YWxlcnQoJ2FzYWRhc2QnKTsK) says alert('asadasd'); so I'm supposed to get two alerts but the only one I see is the second one where the alert is located as text inside the script tag.
Am I doing something wrong or why isn't this working, any ideas?
maybe just a thought but maybe the "href" should be "src" instead.
If you'd check script tag syntax you'd get
<script src="..."
^^^
src NOT href
Using data URIs here doesn't work in IE 6 btw.
That's funny, I am working on precisely the same problem: making a Greasemonkey script to add markItUp to all textareas of a page.
Now, I don't have an issue with the library script itself. I don't see why you want to insert it as Base64, anyway. As pointed out, it will be larger.
You can put it directly in the GM script if you want (some people do that with jQuery), or add dynamically a <script src="someURL"></script> to the document and wait for loading (there are numerous examples of that on the Net)(inconvenience: creates a traffic on the sites holding the files), or, like I am currently trying, using the latest (0.8) feature of GM:
// #require jquery.js
// #require markitup.js
// #resource miuStyle style.css
The required JS files are automatically loaded into the GM script from a local copy, which is fast and always available. Don't use the packed versions, they don't work here. I also had issues with set.js so I just put in directly in the script.
It works well, but I don't have style nor icons yet.
I must put the miuStyle text in the Web page, I think, and change it so all background images refer to the same image hosted on Photobucket or similar, with offset. I haven't found a way to use local images (in CSS), alas, even with #resource.
My response doesn't address your problem, alas (but John's remark seems valid), but it might put you to another, simpler solution.
Base-64 makes the file larger, but it makes it more machine readable so it actually increases pagespeed. I can definitely see why you'd want this, unless you want to look at 50 lines of gibberish in your file. FYI, I just read a study that base 64 actually loads slower on mobile so if your app is heavy mobile I'd stay away

Categories