can anybody help me how to deal this 2 javascript conflict

Question

The First Script that allows me to create a moving clouds and loop after if reaches the end

---

// dvdp - volll - iphone alert

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);


//  TJP - volll

var stispace=new Array();
var jumpspace=new Array();
var skyspace=new Array; skyspace['dir']=-1; skyspace['place']=0;
var smokespace=0;
var shipspace=0;
var cloudspace=new Array();
var stagespace=2000;

cloudspace[1]=new Array(); cloudspace[1]['w']=219; cloudspace[1]['p']=2000;
cloudspace[2]=new Array(); cloudspace[2]['w']=128; cloudspace[2]['p']=1050;
cloudspace[3]=new Array(); cloudspace[3]['w']=51; cloudspace[3]['p']=1200;
cloudspace[4]=new Array(); cloudspace[4]['w']=112; cloudspace[4]['p']=120;
cloudspace[5]=new Array(); cloudspace[5]['w']=219; cloudspace[5]['p']=130;
cloudspace[6]=new Array(); cloudspace[6]['w']=219; cloudspace[6]['p']=1020;
cloudspace[7]=new Array(); cloudspace[7]['w']=219; cloudspace[7]['p']=1400;

var movespace='';
var scrollspace=0;

function $(id) {
 return document.getElementById(id);
}

function smoothto(whereto) {
wheretoreal=whereto;
 if(scrollspace == 1) {return false;}
 if(whereto == 'section_about_who') { whereto='section_about';}
 if(whereto == 'section_about_contact') { whereto='section_about';}
 scrollspace=1;
 wheretoscroll=0;
 wherefromscroll=topget();
 for(smt=0;smt<pag_sections_name.length;smt++) {
  if(smt>0) {wheretoscroll+=pag_sections_height[smt-1]}
  if(pag_sections_name[smt] == whereto) {smt=pag_sections_name.length;}
 }
 if(wherefromscroll==wheretoscroll) {
  scrollspace=0;
  window.location='#'+wheretoreal;
  return false;
 }else{
     window.paused=1;
    clearInterval(int_TJPfloat);
    clearInterval(int_TJProllsky);
 }

 $('vollltv').style.height='0';
 tmp=new Array();
 steps=20;
 for(smt=1;smt<=steps;smt++) {
  pt=smt/steps;
  if(pt == .5) {
   multi=1.5
  } else {
   multi=(Math.sqrt(Math.abs(2*pt-1))*(2*pt-1)/Math.abs(2*pt-1)+1)/2;
  }
  multi=Math.sqrt(smt/steps);
  tmp[smt]='window.scroll(0,'+(wherefromscroll+(wheretoscroll-wherefromscroll)*multi)+');';
 }
 tmp[steps]+="window.location='#"+wheretoreal+"';$('vollltv').style.height='278px'; scrollspace=0;";
  tmp[steps]+=" window.int_TJProllsky=undefined; window.int_TJProllsky=setInterval('TJProllsky();',200);";
tmp[steps]+="window.int_TJPfloat=undefined; window.int_TJPfloat=setInterval('TJPfloat();',50);";
tmp[steps]+="window.paused=0; ";
 //alert(tmp.join("\n"));
 ttt=Math.random();
 stispace[ttt]=tmp;
 setTI(ttt,10);
 return false;
}


function volllresize() {
  d=document.body.clientWidth;
  if(d && d>1000) {
    stagespace=d;
  }
  if($('inter4')) {
   if (self.innerHeight) {
    ch = self.innerHeight;
   }
   else if (document.documentElement && document.documentElement.clientHeight) {
    ch = document.documentElement.clientHeight;
   }
   else if (document.body) {
    ch = document.body.clientHeight;
   }
   if(ch>600) {
    $('inter4').style.height=(ch-534)+'px';
   }
  }
}

function volllinit(section) {
 if(section == 'inter0' && !is_iphone) {

  volllresize();
  window.onresize=volllresize;
  for(i=1;i<cloudspace.length;i++) {
   cloudspace[i]['p']*=d/1000;
  }
  //if(tmp.split('#')[1] == '' || tmp.split('#')[1] == 'section_main') {
  // setTimeout('scroll(0,200);',100);
  //}
 }
 else if(section == 'about') {
  window.int_TJPfloat=setInterval("TJPfloat();",50);
  tmp=location.href+'#'; 
 }
}
window.paused=0;

     function TJPmovecloud(cid,pos) {
      if(pos > stagespace && window.paused>0 ) {
       return;
      }
      if(pos+cloudspace[cid]['w']>stagespace) {
       $('s_cloud'+cid).style.width=stagespace-pos+'px';
      } else {
       $('s_cloud'+cid).style.width=cloudspace[cid]['w']+'px';
      }
      $('s_cloud'+cid).style.left=pos+'px';

}


function TJPfloat() {
 sy=Math.floor(Math.sin(smokespace)*20+20);
 sy2=Math.floor(Math.sin(smokespace)*10+10);
 sx=Math.floor(Math.cos(smokespace)*3+3);
 //if(smokespace==0) {alert('about.css-be belerakni:'+sy+'px 0 0 '+sx+'px');}
 $('g_wave1').style.margin=sy+'px 0 0 '+sy+'px';
 $('g_wave2').style.margin=sy2+'px 0 0 '+sy2+'px';
 smokespace+=.05; if(smokespace>2*Math.PI) {smokespace-=2*Math.PI;}
 if($('inter1')) {
  for(i=1;i<cloudspace.length;i++) {
   if(cloudspace[i]['p'] >= stagespace) {cloudspace[i]['p']=-cloudspace[i]['w'];}
   else if(cloudspace[i]['p'] <= -cloudspace[i]['w']) {cloudspace[i]['p']=stagespace;}
   cloudspace[i]['p']-=1+cloudspace[i]['w']/200;
   TJPmovecloud(i,cloudspace[i]['p']);
  }
 }
}

---

The Second script is the one that creates the bouncing effect like the one on tim van damme

---

<script type="text/javascript" charset="utf-8">

  $('.navigation').each(function () {
    var $links = $(this).find('a'),
      panelIds = $links.map(function() { return this.hash; }).get().join(","),
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper

    $panels.hide();

    $links.click(function () {
      var link = this, 
        $link = $(this);

      // ignore if already visible
      if ($link.is('.selected')) {
        return false;
      }

      $links.removeClass('selected');
      $link.addClass('selected');

      document.title = 'jQuery look: Tim Van Damme - ' + $link.text();

      if ($.support.opacity) {
        $panels.stop().animate({opacity: 0 }, delay);
      }

      $panelwrapper.stop().animate({
        height: 0
      }, delay, function () {
        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;

        $panelwrapper.animate({
          height: height
        }, delay);
      });
    });

    $links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
  });
</script>

---

This is the error I received

TypeError: Result of expression '$('.navigation')' [null] is not an object. Can anybody please explain to me why this error occur?

Answer 1

Do you have html elements with the class name "navigation" in your code?

Answer 2

You receive this error because if the following function in the first code:

function $(id) {
 return document.getElementById(id);
}

This overlaps with jQuery's $ function which is required by the second piece of code. rewrite the first piece of code to use jQuery's $() function or rename $() in the first piece of code and find/replace.