<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.
Related
I have the following page http://link.org/ (tested and is valid W3 HTML), where I am using the jquery cycle slideshow function (old version).
But even though the cycle function file is definitely being called, I am still getting an error: $(...).cycle is not a function
Would someone be able to look and see what the issue might be?
Thanks!
For some weird reason jQuery tools are invoking ready event before page is completely loaded, change order of scripts from:
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
to
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
and your error will be gone.
Is there a Firefox extension capable of blocking a single function from embedded javascript in a page?
<html>
<head>
<script type='text/javascript'>
function onLoad(){
setTimeout(annoying, 1800000);
}
function annoying(){
//do something annoying
}
function useful(){
//do something useful
}
</script>
</HEAD>
<BODY onload="onLoad()">
<!--rest of page goes here-->
</BODY>
</HTML>
Perhaps Greasemonkey is the way to go.
The answer below is quite detailed technical, sorry if I went too far ;)
It depends a bit on how the function annoying() is used by the scripts. I am not yet an expert in JavaScript, some more experienced person's voice could be useful.
If annoying() is used by functions like window.setInterval(), window.setTimeout(), you probably can't overwrite the function directly, because of JavaScript quirks with scoping (closures). When the code window.setTimeout(annoying, 600) is executed, a reference to the "old" annoying is stored and that "old" version is executed. You might then try to get rid of the code that is invoking window.setTimeout on annoying instead.
In other cases, you can add a function with the same name and de facto overwrite the function with the following Greasemonkey userscript:
function addScript(sourceCode)
{
var script = document.createElement('script');
script.innerHTML = sourceCode;
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild); // insert the script as a first child of <HEAD>
}
addScript('function annoying(){alert("overwritten")}');
If you have code like below (I am unable to provide live demo, because it works differently on JSFiddle perhaps because its sandboxing), and the userscript above is launched for that domain, then after 600 milliseconds after page loads, you will have "Nasty alert" alert, but then any time you click the text, you will have "overwritten" alert.
<html>
<head>
<script type='text/javascript'>
function annoying(){
alert("Nasty alert");
}
function useful(){
//do something useful
}
window.setTimeout(annoying, 600); // closure; binds to the function as it is at the moment of execution
</script>
</head>
<body>
<a onclick="annoying()">Click me</a>
</body>
</html>
I know how to block it per page... I have a script here that is bugging me:
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head>
<body onload="JavaScript:timedRefresh(300000);">
What these idiots refuse to consider is that if I'm looking around for solutions, I could wind up with 10+ of these page open and 90% of my CPU time is then dedicated to refreshing their pages in the background! grr
I have firebug handy for web development and I just enter this JS command into the console
timedRefresh = function(value){alert(value);}
smile, click ok, and go on my way.
I've posted a solution here: https://stackoverflow.com/a/9699686/6355
Since it's little more than a link here it goes again: http://userscripts.org/scripts/show/125936
This does not help but instead exacerbates the problem.
The following are particularly pernicious and ugly if javascript is enabled:
<script>
setInterval("alert('irritate')",10)
</script>
or
<script>
(function(){(function r(){alert('irritate');setTimeout(r,10)})()})()
</script>
though this can be stopped (and all future TimeOuts) by:
javascript:setTimeout=function(){}
perhaps as the URI of a bookmark, provided it can be clicked fast enough.
However,
setInterval("alert('irritate')",10)
can only be stopped by
javascript:setInterval=function(){}
BEFORE the script is run.
Good luck with:
<script>
(function(){(function r(){alert('irritate');r()})()})()
</script>
or even simpler
<script>
( function r(){alert('irritate');r()} ) ()
</script>
Setting alert=function(){} will stop all messages but the script and its recursion of r will not stop until SO or system time out. Also, r is not in the global environment so r=function(){} is ineffective.
Some FF versions need an interesting solution, found on SO, if the alert response is mandatory, to kill the annoying page w/o killing the browser and other open tabs, by using ctrl-F4 to close the tab of the offending page. To aid the manual reflex and dexterity required to do this fast enough, ctrl-Enter is used to respond to the prompt and while ctrl-Enter is pressed F4 is typed.
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
I am trying to use jQuery in a highly conflict environment. .noConflict() doesn't work and I am trying to do something like
<script type="text/javascript">
document.write( document.write(unescape("%3Cscript src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
jQuery.noConflict();
var $ = jQuery;
</script>
Any ideas how to fix this ?
Are you sure it has nothing to do with the fact that you have:
document.write( document.write(unescape(...longstringhere...)); // Missing final close paren?
That would cause an error and then noConflict wouldn't work.
Also, do you need to be using Prototype and jQuery at the same time? The whole purpose of jQuery.noConflict() is to NOT set the jQuery variable to $ because Prototype uses it (I'm sure there are other reasons, but that's the main one in this case). jQuery and Prototype aren't good friends, usually.
Finally, are you absolutely positive (assuming you don't have the syntax error in your real code) that jQuery is getting loaded?
Did some quick research. Check this link and see if it helps any:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Basically, you might have to call jQuery first, and you will have to call Prototype BEFORE you use noConflict()
Don't use $ - that is the source of the conflicts. Substitute jQuery wherever you'd normally use it, like so:
jQuery('#my-id')
jQuery('.my-class')
and so on
I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo