Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page The prototype.js problem

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-01-2008, 02:02 PM   PM User | #1
batric
New Coder

 
Join Date: Oct 2008
Posts: 18
Thanks: 3
Thanked 0 Times in 0 Posts
batric is an unknown quantity at this point
The prototype.js problem
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
batric is offline   Reply With Quote
Old 12-01-2008, 02:25 PM   PM User | #2
ohgod
Regular Coder

 
ohgod's Avatar
 
Join Date: Jun 2008
Location: Ohio
Posts: 579
Thanks: 6
Thanked 69 Times in 69 Posts
ohgod is on a distinguished road
watch for js errors, find the conflict. it's going to be some function or resource named the same and causing a conflict.
ohgod is offline   Reply With Quote
Old 12-01-2008, 04:54 PM   PM User | #3
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,353
Thanks: 3
Thanked 456 Times in 443 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
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

Code:
<!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.fromElement;
 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>
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Old 12-02-2008, 03:15 AM   PM User | #4
rangana
Senior Coder

 
rangana's Avatar
 
Join Date: Feb 2008
Location: Cebu City, Philippines
Posts: 1,752
Thanks: 65
Thanked 372 Times in 365 Posts
rangana will become famous soon enoughrangana will become famous soon enough
Quote:
Originally Posted by vwphillips View Post
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/s...78&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:
Code:
var $j = jQuery.noConflict()
__________________
Learn how to javascript at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph
rangana is offline   Reply With Quote
Old 12-07-2008, 04:30 PM   PM User | #5
batric
New Coder

 
Join Date: Oct 2008
Posts: 18
Thanks: 3
Thanked 0 Times in 0 Posts
batric is an unknown quantity at this point
@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!
batric is offline   Reply With Quote
Old 09-19-2009, 06:26 PM   PM User | #6
ash777
New to the CF scene

 
Join Date: Sep 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
ash777 is an unknown quantity at this point
i hv the same prob!! any1 found the solution?
ash777 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 01:22 PM.
Advertisement
Log in to turn off these ads.