Hey guys,
sorry to bother you with this one, I read the pages about the
nonconflict script etc,...but I 've spent the whole day trying to
figure out how to solve this.
Basicly I have a script made on a mootools library.
I now want to add jQuery's Fancybox to the page. When I do this my
mootools accoridon style menu won't work anymore.
When I delete the jQuery.js file it works again.
I understand its a problem with the '$' which is used in both scripts.
But I really cant find the way to solve it by using the nonconflict
way.
I will post the code I have in my head.
Only the last rules of the script are jQuery lines.
All the rest is either the mootools script, and a dynamic content
script I use (but this one doenst hav any conflict with either
mootools as jQuery.
I really hope someone can get me on my way since I am quite a beginner
in javascript.
Thanks
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
script type=text/javascript src=htr_ex2_bestanden/mootools2.js/
script
script type=text/javascript src=htr_ex2_bestanden/ajax-dynamic-
content.js/script
script type=text/javascript src=htr_ex2_bestanden/ajax.js/
script
link rel=stylesheet type=text/css href=fancy.css
media=screen /
script type=text/javascript src=jquery.js/script
script type=text/javascript src=jquery.metadata.js/script
script type=text/javascript src=jquery.pngFix.pack.js/script
script type=text/javascript src=jquery.fancybox.js/script
script language=javascript
!--
function changeColor(obj,color){
obj.style.backgroundColor = color;
}
function ClearForm() {
document.testform.email.value= ;
}
/script
script type=text/javascript
window.onload = function(){
//select the first button
var button1 = $('button1');
//select the second button
var button2 = $('button2');
//select the first content element
var content1 = $('contentElement1');
//select the second content element
var content2 = $('contentElement2');
//The height transition we attach to 'contentElement1'
var b1Toggle = new Fx.Style('contentElement1', 'height',{duration:
500});
//The height transition we attach to 'contentElement2'
var b2Toggle = new Fx.Style('contentElement2', 'height',{duration:
500});
//add an onclick event listener to button1
button1.addEvent('click', function(){
//toggle height transition (hide-show)
if(content2.getStyle('height').toInt() 0){
//hide
b2Toggle.start(0);
}if(content1.getStyle('height').toInt() 0){
//hide
b1Toggle.start(0);
}else{
//show
b1Toggle.start(c1Height);
}
return false;
});
//add an onclick event listener to button2
button2.addEvent('click', function(){
//toggle height transition (hide-show)
if(content1.getStyle('height').toInt() 0){
//hide
b1Toggle.start(0);
}if(content2.getStyle('height').toInt() 0){
//hide
b2Toggle.start(0);
}else{
//show
b2Toggle.start(c2Height);
}
return false;
});
//set css display:block for the contentElements
content1.setStyle('display','block');
content2.setStyle('display','block');
//get the scrollSize of the contentElements
var c1Height = content1.getSize().scrollSize.y;
var c2Height = content2.getSize().scrollSize.y;
};
/script
script type=text/javascript
$j(document).ready(function() { $j(p#test1 a).fancybox();
$j(p#test2 a).fancybox({ 'hideOnContentClick': true }); $j(p#test3
a).fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow':
true }); });
/script
