Prototype-UI interrupts with my current code, can't fix it!

After 3 days of working on one 'Dragable Windows Interface' i discovered that the core isn't allowing me to make more than one window on a page.

I decided to switch to Prototype-UI interface but it seems like it interrupts with my current Jquery code, any ideas how to fix this?

This is the error that Web Console shows me when i attach Prototype-UI JS files:

[16:39:42.443] $("BODY") is null @ http://XXX.XXX/smart_panel/res/main.js:4

so basically this is the code that makes the problem: (Jquery bg image stretcher).

$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/spb3.jpg'], imageWidth: 1360, imageHeight: 765
});
});

After i've tried to delete this i got another error on the next JQuery plugin ($('#dock2') is null).

And its really frustrating to try over and over again when you are not a JavaScript pro (I think the practice is the best learning process tho).

So after deleting those three lines:

<script type="text/javascript" src="res/prototype.js"></script>
<script t开发者_运维问答ype="text/javascript" src="res/effects.js"></script>
<script type="text/javascript" src="res/window.js"></script> 

Which is the files of Prototype-UI everything is normal again and i get no errors, so is there any way that this interface was designed to work as a standalone without any other JS/JQ scripts? I don't think so and that's why i need your help.

Here is the link to Prototype-UI: http://docs.prototype-ui.com/trunk

If there is no way to fix it, can someone please suggest a GOOD Dragable windows plugin that will allow me to create multiply resizeable-dragable windows on a page? :\

Best Regards, Rico S.

If you're trying to use jQuery and Prototype in the same page, you're going to have to deal with the fact that only one of them will win out in the fight for "$". It sounds like you're importing Prototype after jQuery, which means that your code that expects "$" to be the jQuery master function is actually the Prototype "getElementById" shortcut.

I don't remember whether Prototype has a conflict prevention hook, but jQuery definitely does. What you can do is after importing the jQuery library, add a small <script> block like this:

<script> jQuery.noConflict(); </script>

After that point, the libraries can co-exist, but all your code that wants to do jQuery stuff will have to use the function name "jQuery" and not "$".

You may want to look into the jQuery UI widget collection. There's a "dialog" widget in there that is (or can be) draggable and resizeable. Whether multiple such dialogs can be present on the page concurrently, I don't know, mostly because that's a bad user interface pattern (in my opinion) and I'd never do it.