Hi guys,
I’ve seen javascript conflict issues don’t tend to get much attention on the forum. Probably because they scream Noob 
Well I think my css is coming along but I really don’t have too much of a clue when it comes to jquery plugins etc.
I’ve got 2 installed on my work portfolio page. Here’s the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Work @ Banter Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Banter Media is a one-stop shop for all of your video, photography and digital media needs based in the North West of England.">
<meta name="keywords" content="professional video services, banter media, video editing, photo restoration, event video recording, wedding video services, liam andrew wright, aleksis williams, tameside media company">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<LINK REL="SHORTCUT ICON" HREF="http://www.bantermedia.com/bm.ico">
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=/ie6.html" />
<script type="text/javascript">
/* <![CDATA[ */
window.top.location = '/banterblog';
/* ]]> */
</script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8498234-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="BabelSans_500.font.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* it has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like innitially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:14px;
}
span.reference a{
color:#aaa;
text-decoration:none;
}
#BMicon {
position: absolute;
top: 98px;
left: 55px;
}
#headerimg {
position: absolute;
width: 100%;
overflow: hidden;
height: 190px;
z-index: -9;
}
.header
{
width:600px;
height:56px;
position:absolute;
top:0px;
left:25%;
background:#fff url(title.png) no-repeat top left;
}
a.back{
width:256px;
height:73px;
position:fixed;
bottom:15px;
right:15px;
background:#fff url(codrops_back.png) no-repeat top left;
}
.scroll{
width:150px;
height:150px;
position:fixed;
bottom:15px;
left:50px;
background-color: #fff;
background-image: url(images/banterbutton.png);
background-repeat: no-repeat;
background-position: left top;
}
.info{
text-align:right;
}
</style>
</head>
<body onLoad="MM_preloadImages('/images/ourwork_on.png','images/companies/adini_on.png','images/companies/excat_on.png','images/companies/excatcomic_on.png')">
<ul id="slidingMenu" class="slidingMenu">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="work.html">Our Work</a></li>
<li><a href="agstudios.html">AG Studios</a></li>
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="http://www.bantermedia.com/banterblog" target="_blank">Blog</a></li>
</ul>
<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Find out about our company meet the team behind Banter Media.</span></div>
<div><span>Check out examples of our work and what we can do for you.</span></div>
<div><span>Our partner and resident graphic design company.</span></div>
<div><span>Get in touch with us and see how we can help.</span></div>
<div><span>The Banter Media blog has info about all our current projects and more...</span></div>
</div>
<div id="LOGO"><a href="index.html"><img src="images/BM LOGO.png" width="245" height="129" border="0"></a></div>
</div>
<div id="slogan"> <img src="images/slogan.png" width="295" height="57" alt="slogan"></div>
<div id="CONTENT_wrapper">
<div id="title_headericonwork"><a href="work.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ourwork','','images/ourwork_on.png',1)"><img name="ourwork" border="0" src="images/ourwork_off.png" alt="Our Work"></a></div>
<div id="topbannerimgwork"><br></div>
<div class="workcontainer">
<div class="work1roll"><a href="http://www.youtube.com/user/firefly57575#p/u/5/VIQrfmLmYjs" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work1','','images/companies/adini_on.png',1)"><img src="images/companies/adini.png" alt="Adini" name="work1" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.excathedramovie.co.uk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work2','','images/companies/excat_on.png',1)"><img name="work2" border="0" src="images/companies/excat.png" alt="Ex Cathedra Movie" width="150" height="150" ></a></div>
<div class="work1roll"><a href="http://www.excathedramovie.co.uk/comic.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work3','','images/companies/excatcomic_on.png',1)"><img name="work3" border="0" src="images/companies/excatcomic.png" alt="Ex Cathedra Comic" width="150" height="150" ></a></div>
<div class="work1roll"><a href="http://www.4qmagazine.co.uk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work4','','images/companies/4q_on.png',1)"><img name="work4" border="0" src="images/companies/4q.png" alt="4Q Magazine" width="150" height="150" ></a></div>
<div class="work1roll"><a href="http://www.youtube.com/watch?v=txKtBXo1RGI" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work5','','images/companies/cons_on.png',1)"><img name="work5" border="0" src="images/companies/cons.png" alt="Cons" width="150" height="150" ></a></div>
<div class="work1roll"><a href="http://www.facebook.com/pages/Hyde-United-Kingdom/Evade-Martial-Arts-and-Performance-Centre/25334330562?v=app_4949752878&ref=ts" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work6','','images/companies/evade_on.png',1)"><img name="work6" border="0" src="images/companies/evade.png" alt="Evade Martial Arts" width="150" height="150" ></a></div>
<div class="work1roll"><a href="http://www.foakmusic.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work7','','images/companies/foak_on.png',1)"><img name="work7" src="images/companies/foak.png" alt="Foak" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work8','','images/companies/headshot_on.png',1)"><img name="work8" src="images/companies/headshot.png" alt="Headshot" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.youtube.com/watch?v=33X36Sajov4" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work9','','images/companies/renderscript_on.png',1)"><img name="work9" src="images/companies/renderscript.png" alt="Renderscript" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.takedownmma.co.uk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work10','','images/companies/takedown1_on.png',1)"><img name="work10" src="images/companies/takedown1.png" alt="Takedown 1" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.northwooduk.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work11','','images/companies/northwood_on.png',1)"><img name="work11" src="images/companies/northwood.png" alt="Takedown 1" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.youtube.com/watch?v=txKtBXo1RGI" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work12','','images/companies/tonn_on.png',1)"><img name="work12" src="images/companies/tonn.png" alt="Tonn Piper" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.takedownmma.co.uk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work13','','images/companies/takedown2_on.png',1)"><img name="work13" src="images/companies/takedown2.png" alt="Takedown 2" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://www.streetsabove.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work14','','images/companies/streetsabove_on.png',1)"><img name="work14" src="images/companies/streetsabove.png" alt="Streets Above" width="150" height="150" border="0"></a></div>
<div class="work1roll"><a href="http://maps.google.com/maps/place?um=1&ie=UTF-8&q=hudson+academy+dance+tameside&fb=1&hq=hudson+academy+dance&hnear=Tameside,+UK&cid=2336433827912534336" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work15','','images/companies/hudson_on.png',1)"><img name="work15" border="0" src="images/companies/hudson.png" alt="Hudson" width="150" height="150"></a></div>
<div class="work1roll"><a href="http://www.hitthings.co.uk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work16','','images/companies/hitthings_on.png',1)"><img name="work16" src="images/companies/hitthings.png" alt="Hit Things" width="150" height="150" border="0"></a></div></div></div>
<ul id="navigation">
<li class="livechat"><a href="http://www.bantermedia.com/livehelp.php" title="Chat to Banter Live now" target="_blank"></a></li>
<li class="twitter"><a href="http://www.twitter.com/bantershire" title="Follow Banter on Twitter" target="_blank"></a></li>
<li class="facebook"><a href="http://www.facebook.com/bantershire" title="Banter Media's Facebook Page" target="_blank"></a></li>
<li class="youtube"><a href="http://www.youtube.com/user/bantermedia" title="Youtube Channel" target="_blank"></a></li>
<li class="linkedin"><a href="http://www.linkedin.com/companies/863293/" title="Banter Media on Linked In"></a></li>
<li class="blog"><a href="http://www.bantermedia.com/previewsuite" title="Client preview area" target="_blank"></a></li>
</ul>
</body>
</html>
I want to add this script but it won’t work and stops the other two scripts from working when added to the above page. :injured:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Lightbox Gone Wild Demo
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<div id="container">
<ul>
<li><a href="text.html" class="lbOn">About Lightbox</a></li>
<li><a href="image.html" class="lbOn">Lightbox Gone Wild</a></li>
<li><a href="form.html" class="lbOn">Submit an Inquiry</a></li>
</ul>
<h3>Lightbox Gone Wild Demo</h3>
<p>
This demo illustrates a few of the possibilities of available to a
developer using Particletree's Lightbox Gone Wild Script. Just click
on the links above to see how lightbox can be used to provide
additional info, show an image or present a form for user input.
Inspired by the work done by <a href="http://www.huddletogether.com/projects/lightbox/">
Lokesh Dhakar</a>, our version makes it easy to extend a web application's
interface without having to add clutter.
</p>
<p>
<a href="http://particletree.com/files/lightbox/lightbox.zip"
title="Paging Files">Download Source</a>
·
<a href="http://particletree.com/features/lightbox-gone-wild/"
title="Lightbox Gone Wild">Return to Tutorial</a>
</p>
</div><!--container-->
</body>
</html>
What I’m ultimately trying to achieve is for each of the work1roll div’s to cause a lightbox popup on the screen so I can add video etc form our portfolio.
If anyone can help I’d be really grateful. 
I’ve been amazed by the helpfulness and friendly nature of this site so thanks again guys. I hope someone can help.
p.s. If anyone also knows some script that would allow an iframe to resize depending on the content when links are clicked within the iframe you’d make my year!
anyone please?