...
PDA

The prototype.js problem

batric
12-01-2008, 02:02 PM
I use fisheye effect for menu on my webpage (http://www.ajaxdaddy.com/demo-interface-fisheye.html). I'd like to add something like lightwindow (http://stickmanlabs.com/lightwindow/) so all the links will be opened in javascript window.

But there's an error.

When I add the prototype.js, it is required for lightwindow, it disables my fisheye effect.

Has anyone had similar problems? Any ideas?

Thanks in any case :)

Batric
ohgod
12-01-2008, 02:25 PM
watch for js errors, find the conflict. it's going to be some function or resource named the same and causing a conflict.
vwphillips
12-01-2008, 04:54 PM
you are using both prototype and jQuery librarys which are not compatable as they both use a function name '$'

I can offer something similar to the fish eye script

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
body {
height:1000px;
}

.zxcDisplayClass {
background-Color:#FFFFCC;border:solid black 1px;padding:20px;
}

#zxcMask {
position:absolute;z-Index:100;visibility:hidden;left:0px;height:0px;width:100%;height:100%;background-Color:#FFCC66;
}

#Caption0 {
display:none;height:20px;padding:10px;border-Top:solid black 1px;
}
#Caption1 {
display:none;height:20px;padding-Left:10px;background-Color:#FFCC66;text-Align:center;
}

.horizontal {
position:relative;overflow:hidden;text-Align:center;visibility:hidden;width:500px;height:150px;background-Color:#FFFFCC;border:solid black 1px;
}
.vertical {
position:relative;overflow:hidden;visibility:visible;width:150px;height:390px;background-Color:#FFFFCC;border:solid black 1px;
}
#tst IMG{
position:relative;top:50px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// ExpandSlide (26-October-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk


//<body onload="zxcExpandSlideInit('tst','H',100,150,100,10,'top','left','right');">
//<body onload="zxcExpandSlideInit('tst1','V',100,150,100,10,'center','leftv','rightv');">
// parameter 0 = the parent DIV unique id name. (string)
// parameter 1 = Horizontal('H') or Vertical('V') application. (string, 'H' or 'V')
// parameter 2 = (optional) the element distance from the mouse where expansion will be applied. (digits, default = 100)
// parameter 3 = (optional) the maximum expansion of the element as a percentage. (digits, default = 100)
// parameter 4 = (optional) the distance from the left or right of the parent to scroll. (digits, default = no scroll)
// parameter 5 = (optional) the maximum scroll increment/speed. (digits, default = 5)
// parameter 6 = (optional) to align the elements
// 'center' or 'top' or 'bottom' for horizontal or 'left' or 'right' for vertical. (string, default = 'center')
// parameter 7 = (optional) the id name of the scroll left indication element. (string, default = no element)
// parameter 8 = (optional) the id name of the scroll right indication element. (string, default = no element)

// Code Size about 5.5K

// Functional Code - NO NEED to Change

function zxcExpandSlideInit(zxcp,zxchv,zxcmde,zxcpitch,zxcexp,zxcs,zxcinc,zxcimgl,zxcimgr){
if (typeof(zxcp)=='string') zxcp=document.getElementById(zxcp);
if (!zxcp.ary){
zxcp.imgs=[document.getElementById(zxcimgl)||false,document.getElementById(zxcimgr)||false];
zxcp.data=zxchv.charAt(0).toUpperCase()=='H'?['left','top','width','height',0,zxcp.offsetWidth]:['top','left','height','width',1,zxcp.offsetHeight];
zxcmde=(zxcmde||'C').charAt(0).toUpperCase();
// 6 = pitch, 7 = ratio, 8 !T&!L, 9 = center, 10 = scroll, 11= increment
zxcp.data=zxcp.data.concat([zxcpitch||100,((zxcexp||200)/100)-1,(zxcmde!='T'&&zxcmde!='L'),zxcmde=='C'?2:1,zxcs||false,zxcinc||5])
zxcp.sobj=zxcp.getElementsByTagName('DIV')[0];
var zxcclds=zxcp.sobj.childNodes;
zxcp.ary=[];
for (var zxcmax=0,zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].nodeType==1){
var zxch=zxcp.data[0]=='left'?zxcclds[zxc0].offsetHeight:zxcclds[zxc0].offsetWidth;
if (zxch+zxch*zxcp.data[7]>zxcmax) zxcmax=zxch+zxch*zxcp.data[7];
zxcp.ary.push([zxcclds[zxc0],zxcp.data[0]=='left'?zxcclds[zxc0].offsetWidth:zxcclds[zxc0].offsetHeight,zxch]);
}
}
zxcmax/=zxcp.data[9];
zxcp.sobj.style[zxcp.data[0]]='0px';
zxcExpandReset(zxcp,zxcmax);
zxcp.sobj.onmousemove=function(){ zxcExpandSlide(zxcp); }
zxcp.sobj.onmouseout=function(){ zxcExpandSlideOut(zxcp); }
zxcp.style.visibility='visible';
}
}

function zxcExpandSlide(zxcp){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcmse=zxcMse(zxcevt)[zxcp.data[4]]-zxcPos(zxcp.sobj)[zxcp.data[4]]+parseInt(zxcp.sobj.style[zxcp.data[0]]);
var zxcx=parseInt(zxcp.sobj.style[zxcp.data[0]]);
for (var zxclft=0,zxc1=0;zxc1<zxcp.ary.length;zxc1++){
var zxcobj=zxcp.ary[zxc1][0];
var zxcc=Math.abs((parseInt(zxcobj.style[zxcp.data[0]])+zxcp.ary[zxc1][1]/2)-(zxcmse-zxcx));
if (zxcc<zxcp.data[6]){
var zxcexp=((zxcp.data[6]-zxcc)/zxcp.data[6])*zxcp.data[7];
if (zxcp.data[8]) zxcobj.style[zxcp.data[1]]=zxcp.ary[zxc1][3]-(zxcp.ary[zxc1][2]+zxcp.ary[zxc1][2]*zxcexp-zxcp.ary[zxc1][2])/zxcp.data[9]+'px';
zxcobj.style[zxcp.data[2]]=zxcp.ary[zxc1][1]*(1+zxcexp)+'px';
zxcobj.style[zxcp.data[3]]=zxcp.ary[zxc1][2]*(1+zxcexp)+'px';
}
else {
zxcobj.style[zxcp.data[1]]=zxcp.ary[zxc1][3]+'px';
zxcobj.style[zxcp.data[2]]=zxcp.ary[zxc1][1]+'px';
zxcobj.style[zxcp.data[3]]=zxcp.ary[zxc1][2]+'px';
}
zxcobj.style[zxcp.data[0]]=zxclft+'px';
zxclft+=parseInt(zxcobj.style[zxcp.data[2]]);
}
// left,top,width,height,0,502,100,0.5,true,2,false,5
zxcp.sobj.style[zxcp.data[2]]=parseInt(zxcp.ary[zxc1-1][0].style[zxcp.data[0]])+parseInt(zxcp.ary[zxc1-1][0].style[zxcp.data[2]])+'px';
clearTimeout(zxcp.to);
if (zxcp.data[10]) zxcExpandScroll(zxcp,zxcmse<zxcp.data[10]?zxcp.data[11]*(1-(zxcmse/zxcp.data[10])):(zxcmse>zxcp.data[5]-zxcp.data[10])?(zxcp.data[11]*((zxcp.data[5]-zxcmse)/zxcp.data[10]))-zxcp.data[11]:0);
}

function zxcExpandReset(zxcp,zxcmax){
//left,top,width,height,0,502,100,0.5,false,1,false,5
if (zxcp.imgs[0]) zxcp.imgs[0].style.visibility='visible';
if (zxcp.imgs[1]) zxcp.imgs[1].style.visibility='visible';
for (var zxclft=0,zxc1=0;zxc1<zxcp.ary.length;zxc1++){
if (zxcmax) zxcp.ary[zxc1][3]=zxcp.data[8]?zxcmax-zxcp.ary[zxc1][2]/zxcp.data[9]:0;
var zxcobj=zxcp.ary[zxc1][0];
zxcobj.style.position='absolute';
zxcobj.style[zxcp.data[0]]=zxclft+'px';
zxcobj.style[zxcp.data[1]]=zxcp.ary[zxc1][3]+'px';
zxcobj.style[zxcp.data[2]]=zxcp.ary[zxc1][1]+'px';
zxcobj.style[zxcp.data[3]]=zxcp.ary[zxc1][2]+'px';
zxclft+=zxcp.ary[zxc1][1];
}
if (zxcp.data[10]) zxcp.sobj.style[zxcp.data[0]]=Math.max(-(zxclft-zxcp.data[5]),parseInt(zxcp.sobj.style[zxcp.data[0]]))+'px';
zxcp.sobj.style[zxcp.data[2]]=zxclft+'px';
return zxclft;
}

function zxcExpandScroll(zxcp,zxcs){
if (zxcp.imgs[0]) zxcp.imgs[0].style.visibility=zxcs>=0?'visible':'hidden';
if (zxcp.imgs[1]) zxcp.imgs[1].style.visibility=zxcs<=0?'visible':'hidden';
zxcp.sobj.style[zxcp.data[0]]=Math.min(Math.max(parseInt(zxcp.sobj.style[zxcp.data[0]])+zxcs,-(parseInt(zxcp.sobj.style[zxcp.data[2]])-zxcp.data[5])),0)+'px'
if (zxcs!=0) zxcp.to=setTimeout( function(){ zxcExpandScroll(zxcp,zxcs); },10)
}

function zxcExpandSlideOut(zxcp){
if (typeof(zxcp)=='string') zxcp=document.getElementById(zxcp);
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (zxcCkEventObj(zxcevt,zxcp.sobj)){
clearTimeout(zxcp.to);
zxcExpandReset(zxcp);
}
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcCkEventObj(zxce,zxcp){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
if (!zxceobj||zxceobj==zxcp) return false;
while (zxceobj.parentNode){
if (zxceobj==zxcp) return false;
zxceobj=zxceobj.parentNode;
}
return true;
}



/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Init(){
zxcExpandSlideInit('H1','h','top',100,150);
}
/*]]>*/
</script></head>

<body onload="Init();">
http://frostdesign.com.au/ <br />
<div id="H1" class="horizontal">
<div style="position:relative;top:0px;height:150px;background-Color:#FFFFCC;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="100" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50" />
</div>
</div>
</form>

</body>

</html>
rangana
12-02-2008, 03:15 AM
you are using both prototype and jQuery librarys which are not compatable as they both use a function name '$'


Well said.

Might be the same fix as to DD's jQuery conflicts to other framework:
http://www.dynamicdrive.com/forums/showpost.php?p=131578&postcount=2

Try to change all instances of $ to $j. (Do a global search and replace on interface.js).

Then, add this code at the very top of interface.js:

var $j = jQuery.noConflict()
batric
12-07-2008, 04:30 PM
@vwphilips: thanks for the link, but that script acts weird when I attach links to the images; instead of enlarging the image on rollover, the script just changes the distance between the images, not their size.

@rangana: I tried renaming all the instances, but still it is not working

Guess I'll just have to find something else to do that job

Thanks a lot to all of you! :thumbsup:
ash777
09-19-2009, 06:26 PM
i hv the same prob!! any1 found the solution?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum