Problems interacting with javascript

[Availor]

I've noticed this some time ago, but I thought that it was a problem with the specific moduel. Now I know that there's a problem - WebsiteBaker cannot accept other javascript. If I put javascript into a template and install a module that uses javascript, the template's javascript will not work. I've tested it with several scripts. I have one demo.
http://www.websitebakerden.com/pages/menu/imageflow.php You can see that when I installed Ruude's module the original javascript (the glider at the bottom) does not work. It will be the same with smooth gallery module or every module that uses javascript. Does anyone else familiar with that?

[Availor]

To be more precise (made some more tests) WB modules don't work with jquery tools.... I wonder why is that 

[Ruud]

Hi Availor,

For me, the imageflow script (fully javascript) including the scrollbar works fine.
Tested with FF2, FF3, IE7 and IE8.

I get one error:

Code: [Select]

Error: $("#myController") is null
Source: http://www.websitebakerden.com/pages/menu/imageflow.php
Line: 17
This is on some init from the jquery script. It doesn't give problems on the working of the gallery.
Also the lightbox script popups fine.

The problem with (changing) scripts is that browsers will cache them. Reloading with Shift-F5 and/or clearing the browser-cache is mostly needed.

Ruud

[Availor]

Ruude, I didn't mean that the problem is with the module.
When I make a template I try to implement javascript functions like tabs, accordion menu and so on. It seems that two jquery modules canno coexist. This script (http://www.javascriptkit.com/script/script2/dropdownpanel.shtml) Is top pabel script I wanted to implement into my template. http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm This is a carousel script (You can find lots of goodies at www.ajaxdaddy.com - If you run them one by one everything is fine. If you add any WB module or two scripts only one will work. The problem is not with the module but with the script.
In this example (http://www.websitebakerden.com/pages/menu/imageflow.php) You can see that the glider below does not work (tested on ie7 and FF) because i added the imageflow gallery module. It would be the same if I added smooth gallery, cssdocks menu or anything else.

Bottom line is for some reason two modules cannot live together - only one will work. I wonder if there is a work around. Otherwise all the scripts cannot be implemented inside WB and that's a shame.

[Ruud]

A quick google shows that jQuery.js and Prototype.js (and probably other libraries) don't like each other because they use the same techniques.

Here is a story with a possible fix for you.
http://www.dynamicdrive.com/forums/showthread.php?t=29668

In short, replace all occurrences of $ into $j in your jquery.flow.1.1.js.

Hope that helps.

Ruud

[Availor]

Nope, sorry still doesn't work 
I've attached the file of the template in case anyone is interested in looking further into it. Jquery tools are very effecient for complex websites.


[gelöscht durch Administrator]

[Ruud]

Sorry it took so long

Replace the script part in your index.php to this:

Code: [Select]

<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("#myController").jFlow({
        slides: "#mySlides",
        width: "580px",
        height: "200px",
        duration: 400
    });
});
</script>

That worked for me.

Ruud

[Availor]

Sorry it took so long wink

LOL you're helping in your free time

Thanks a lot it works!  So basically if you can explain what you did - if I want to implement another script like top sliding panel,  you just added this line "jQuery.noConflict();" ?

P.S. I'm making a bundle of ready-to use scripts and menus so people can download them and just copy&paste in their site.

Will post a link - should finish it within the next hour or so...

[Ruud]

(I'm my own boss, I don't have free time)

It wasn't just the noConflict.

the "jQuery(document).ready(function(" line originally started with $(document).....
This line says something like "If the page and the script engine (DOM) is ready then you can go on.

prototype.js (and maybe others too) are doing the same thing.

It will always stay problematic to include multiple scripts in one page. Especially these very nice and unreadable we-can-do-everything scripts.

Ruud

[Availor]

It is very strange.
In here it works perfectly fine (http://www.websitebakerden.com/demo/portal/) There are three more scripts (scrolling news, dhtml menu, tabs)

In here it does not work http://www.websitebakerden.com/pages/modules/spry-widgets.php - I removed the imageflow module. These all are spry widgets used by dreamweaver they are exactly the same... Anyway I see there is a long way ahead to make everything perfect