Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    watch for js errors, find the conflict. it's going to be some function or resource named the same and causing a conflict.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    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/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @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!

  • #6
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i hv the same prob!! any1 found the solution?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •