JavaScript - Javascript/jquery Possible Conflict. Starting Acting Funny :-(

Hi all

I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product.

Here are the links to the java files I am using:

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/sandstone.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

Here is the actual lightbox link:

<a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" >

And finally the calculator:

<form method="post" action="">
<table width="220" border="0" cellpadding="2" cellspacing="0">
<tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td>
<td width="117" height="30" align="left">
<input name="width" type="text" id="calc-width" size="6" /></td>
</tr>
<tr align="left"><td height="30" class="meter-calc-text">Length (m)</td>
<td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td>
</tr>
<tr align="left"><td height="40" colspan="2">
<select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;">
<option value="0" selected class="meter-calc-text">Product Select</option>
<option value="1" selected class="meter-calc-text">1</option>
<option value="2" selected class="meter-calc-text">2</option>
</select>
<input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" />
</td>
</tr>
<tr>
</tr>
</table>
<table width="220" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="83" height="30" class="meter-calc-text">You Requi </td>
<td width="121" height="30" align="left" class="product-cell-info-table-text">
<input name="meters" type="text" class="small" id="calc-meters" value="" size="5" />
<span class="meter-calc-text">m2</span>
</td>
</tr>
<tr>
<td height="30" class="meter-calc-text">&nbsp;</td>
<td height="30" align="left" class="product-cell-info-table-text">
<input name="packs" type="text" class="small" id="calc-packs" value="" size="5" />
<span class="meter-calc-text">Packs</span>
</td>
</tr>
</table>
<input type="hidden" name="productid" id="productid" value="">
<div id="addit" style="display:none">
<a name="addit" class="meter-calc-text" onclick="location.href='basket.php?action=add&id='+$('#productid').val()+'&quantity='+$('#calc-packs').val()+'&return=http://www.cq-designs.co.uk/clientarea/sandstonecentre/clientarea/sandstonecentre/product.php?category=2&type=&colour=1'">Add To Cart</a>
</div>
</form>

The problem I am having is that they both don't work together. If I comment out the lightbox javascript the calcukator works but not the lightbox and Vice Versa!

Please help

Thanks
Pete

Hey guys

I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out.

This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa

http://dev.segolondon.com/wp292/media/ <- Flash content loads

versus:

http://dev.segolondon.com/wp292/#wp292/media/

If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page.

The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this.

I read somewhere about using a script block like this:

Code:

<script>
$(document).ready(
	function() {
		// Make the swfObject call
	}
);
</script>

But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods.

Any help would be very gratefully received!

Hi,

I am trying to make the below jquery code to work, and the second click event does nothing. I understand this probably relates to the document ready section, that I am calling my form in the first click, but I am not sure the way around this. I have seen mention of using unbind, but I am not sure if it would apply in my case?

My code is:
Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitmessage').click(function(){
$('#messageboard').load('getloadCompose.php', function (){
$.ajax{(url:'getloadMessageBoard.php', sucess:function (result){
		$("txtHint").html(result){
$('#submitFirst, #submitSecond').click(function(){

	var btn = $(this).attr('id');
	if(btn == 'submitFirst){
		file = 'insertFirst.php';
		Msg = 'Your comment has been registered;
	} else if(btn == 'submitSecond'){
		file = 'insertSecond.php';
		Msg = 'Your report has been registered;
	} 
		var data = $('#messageboard').serialize();
		$.post (file,data, function(){
				alert(Msg);
			$('#messageboard').each (function(){
				this.reset();
				});
			});	
				return false;
		});
	});
});
});
});
});
</script>
<body>
<input type="button" name="submitmessage" id="sumitmessage" value="Add Message">
<div id="txtHint"></div>

And then message board is:
Code:

<form action="" name="messageboard" id="messageboard" method="post">
<input type="text" name="subject" id="subject" value="Subject" />
<br />
<br />
<textarea rows="5" cols="40" name="message" id="message"></textarea>
<br />
<br />
<input type="button" name="submitFirst" id="submitSecond" value="Send">
<input type="button" name="subitSecond" id="submitSecond" value="Report">
<br />
</form>

This isn't the final form I shall be using, hence some of the names, I stripped back the form to basics to try and get it working in principle (and failed).

So what I want to happen is the visitor clicks on the Add Message button (this will be from a list of choices) and then the messageboard form is called - it works up until here - then the visitor fills out the form and decides whether the want to send or report it. It is here that nothing happens, e.g. if the visitor clicks on either the report or send button there is nothing. If I have the form directly in the first page then this all works fine, it is just when I want to have an event calling the form that it doesn't work.

As a very small aside, I took this bit of code $("txtHint").html(result){
from a tutorial which originally had the code phrased as $("div").html(result){
. The problem I have is that I have a number of divs with different names, so I tried to identify my div by using it's id "txtHint", the correct page is still being called but it is not being posted inside my div txtHint, the correct way of doing this would be appreciated.

Please see URL:

http://www.freedommd.com/Freedom10/index.shtml

1. On the navbar, click on "Demos > EMR Features" (using jQuery for the navbar)

2. On the "FreeDOM EMR" page, in addition to the jQuery navbar, I am using Lightbox to display images (click on the "dashboard" thumbnail). There is a conflict of some sort here between scripts.

Code:

<!--jquery menu code directly below-->
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/navmenus.js"></script>
<!--end jquery nav-->

<!--Lightbox code directly below-->
<script type="text/javascript" src="js-lightbox/prototype.js"></script>
<script type="text/javascript" src="js-lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js-lightbox/lightbox.js"></script>
<!--end Lightbox -->

As is, on this page, my Lightbox code works fine, but my navbar will not expand the sub menus. If I remove the Lightbox code, then the navbar works fine. I'd really like for them both to work. : )

I tried putting the .js in different directories, separating the Lightbox code from the jQuery code but that didn't help.

All .js files are attached. Much appreciated if someone can tell me what I need to do.

Thanks,

John

Hello all

I have been trying in vain for many days to resolve a conflict between javascript libraries.

I have read far and wide and still have failed to fix this problem, most likely because my programming skills are just about copy and pasting.

My homepage uses

jquery horizontal css menubar + a combined mootool and prototype accordian type sliding information box in the middle of the webpage.

I find that the highlighter of the css menubar does not work when prototype.js is also loaded on the same page.

I have read somewhere that $ should be replaced however I have tried every possible option and none works.

I have jquery loading first as it is on my template, with this

<script type='text/javascript' src='../Web/Templates/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/example.js'></script>

And my mootool and prototype loades further below like this

<script type="text/javascript" src="scripts/intro/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>


Could someone please offer me further assistance and enlighten me what other information you require to assist me further.

I have attached the example.js inside example.zip file if someone could kindly edit it for myself.

Looking forward to your assistance.

Sincerely,

Lex

hi guys

i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/u...ons-of-jquery/ but still having trouble with multiple versions of jquery not working. either the jquery slideshow doesnt work or the jquery ie select width fix doesnt work! rrghhh

Code:

<head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ie6pngfix/iepngfix_tilebg.js"></script><!-- ie6 png fix -->
<script type="text/javascript" src="/js/ddlevelsmenu.js"></script><!-- drop down menu js -->

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script><!-- slideshow jquery file 1 -->
<script type="text/javascript" src="/js/slides.min.jquery.js"></script><!-- slideshow jquery file 2 -->
<!-- slideshow jquery controls -->
<script type="text/javascript">
jQuery(function () {
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#', '');
}
// Initialize Slides
jQuery('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
slideSpeed: 1200,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function (current) {
// Set the slide number as a hash
// window.location.hash = '#' + current;
}
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_4 = $.noConflict(true);
</script>


<script type="text/javascript" src="/js/prototype.js"></script><!-- lightbox aka image viewer js file 1 -->
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script><!-- lightbox aka image viewer js file 2 -->
<script type="text/javascript" src="/js/lightbox.js"></script><!-- lightbox aka image viewer js file 3 -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
</script>

<script type="text/javascript" src="/js/test/jquery.1-4-2.min.js"></script>
<script type="text/javascript" src="/js/test/jquery.ie-select-width.js"></script>
<!--[if lte ie 6]>
<script type="text/javascript" src="/js/test/jquery.bgiframe.js"></script>
<![endif]-->   
<script type="text/javascript">
$(function ()
{
    // Set the width via the plugin.
    $('select#fixed-select-no-css').ieSelectWidth
    ({
        width : 200,
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
   
    // Set the width via CSS.
    $('select#fixed-select-css').ieSelectWidth
    ({
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
   
    // Borders and padding etc for Internet Explorer 6/7.
    $('select#select-styleable').ieSelectWidth
    ({
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
});
</script>
<script type="text/javascript">
var jQuery_1_4_2 = $.noConflict(true);
</script>

<!-- Share this button script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'c0b04a1e-f627-42e8-b040-cbfb63bd9b1c'});</script>
<script type="text/javascript" src="/js/showtab.js"></script>
</head>

I've tried re ordering the scripts around but still no joy? either the slideshow works or the ie select width fix doesnt but not both at the same time?

please advise
Omar.

Hi,

I wonder if any one has any ideas in what is causing this bug in I.E

The main slide show is the javascript in question.

I think the javascript conflicting or causing this issue is the show hide with the plus minus at the top left of the page just above the navigation.

I think there is some Javascript conflict but it works sometimes and sometimes it doesnt.

http://tinyurl.com/6ee5yk2

thanking you in advance.

***RESOLVED***

Ok folks on my form i use javascript on a dropdown box (months of the year) to show/hide following dropdown boxes using css

i.e

box1 = 1-28 days default hide this dropdown
box2 = 1-30 days default hide this dropdown
box3 = 1-31 days default show this dropdown

the correct dropdown box will be shown and the others hidden according to the month selected

this works fine.

JavaScript

Code:

<script type="text/javascript">
<!--

// var small = 1-28 days
// var medium = 1-30 days
// var large = 1-31 days

function ToggleDays(id)
{
  var small = document.getElementById('short');
  var medium = document.getElementById('medium');
  var large = document.getElementById('long');
  var value = id.options[id.selectedIndex].value;
  if(value == 2)
  {
    small.style.display = "inline";
    medium.style.display = "none";
    large.style.display = "none";
  }
  if( value==2 || value==4 || value==6 || value==9 || value==11 )
      {
          if(value == 2)
            {
                small.style.display = "inline";
                medium.style.display = "none";
                large.style.display = "none";
            }
            else
                {
                    small.style.display = "none";
                    medium.style.display = "inline";
                    large.style.display = "none";
                }

      }
  else
  {
    small.style.display = "none";
    medium.style.display = "none";
    large.style.display = "inline";
  }
}

//-->
</script>

HTML form (part of)
Code:

<form name="feedback" action="newformverify.php" method="POST" onsubmit='return formValidator()'>

                   <fieldset>
                   <legend>Feedback</legend>

                   <p><label>Name</label>
                   <input id="name" type="text" name="name"/></p>

                   <p><label>Centre</label>
                   <input id="centre" type="text" name="centre"/></p>

                   <p><label>Date of meeting</label>

                   <select id="month" name="month" size="1" onchange="ToggleDays(this);">

                        <option value=0><?php echo date("F")?></option>
                        <option value=1>January</option>
                        <option value=2>February</option>
                        <option value=3>March</option>
                        <option value=4>April</option>
                        <option value=5>May</option>
                        <option value=6>June</option>
                        <option value=7>July</option>
                        <option value=8>August</option>
                        <option value=9>September</option>
                        <option value=10>October</option>
                        <option value=11>November</option>
                        <option value=12>December</option>
                   </select>

I want to use php to gather all info from form together and send in an email using the mail function.

however when i post from the select it posts the option value and not the text is there any way to stop this?

Code:

<?php
session_start();

$month=$_POST['month'];

echo ("$month");

?>

Hi!

I'm having problems with a thumbnail viewer. I have the Nivo slider installed in my website and now I added a thumbnail viewer called SmoothGallery and my Nivo Slider stopped working. They both are javascript. Once I added the source for the SmoothGallery in the header my Nivo Slider stopped working.

Here is the code I entered for the SmoothGalery plugin:

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>

Once that is entered, my Nivo slider stops working.

My nivo slider requires these libraries:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Can anyone help me solve this issue? I am no expert on javascript and any help is appreciated!

Hi, I am a beginner at web design and I have a conflict with a videobox javascript that is effecting the font javascript.

I have narrowed it down that the
<script type="text/javascript" src="js/mootools.js"></script>
is causing the problem.

Any help I would be grateful.

Thanks.


Code:

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

<head>

	<!-- Title -->
	<title>Portfolio</title>
	
	<!-- Meta tags -->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<!-- Stylesheets -->
	<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
	<link rel="stylesheet" type="text/css" media="screen, projection" href="css/facybox.css" />
	<link rel="stylesheet" type="text/css" media="screen, projection" href="css/galleria.css" /> 
	<link rel="stylesheet" type="text/css" media="screen, projection" href="css/color2.css" />
    <link rel="stylesheet" type="text/css" media="screen, projection" href="css/master.css" />
       <link rel="stylesheet" type="text/css" href="css/shadowbox.css">
       <link href="css/slimbox2.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />


	<!-- Scripts -->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

	<script type="text/javascript" src="js/cufon.js"></script>
    	<script type="text/javascript" src="js/Aller_400.font.js"></script>
	<script type="text/javascript" src="js/facybox.js"></script>
	<script type="text/javascript" src="js/jquery.galleria.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	    <script type="text/javascript" src="js/slimbox2.js"></script>

<script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

I cannot get these two scripts to run seamlessly in one .html file. Here is my 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" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">

<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>

<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript" src="jquery-.js"></script>


<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000
};
$('#supersize').supersized();
});

</script>

<style type="text/css">

/* A few IE bug fixes */
* { margin: 0; padding: 0; }
* html ul ul li a { height: 100%; }
* html ul li a { height: 100%; }
* html ul ul li { margin-bottom: -1px; }

body {
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #0C3;
}
#theMenu { width: 200px; height: 350px; margin: 0px 0; padding: 0; }

/* Some list and link styling */
ul li { width: 200px; }
ul ul li { width: 200px; margin-bottom: 0; }
ul ul li a { display:block; color: #fff; background: none; font-size: small; }
ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; }
/* For the xtra menu */
ul ul ul li { width: 200px; margin-bottom: 0; }
ul ul ul li a { display:block; color: #fff; background: none; font-size: small; }
ul ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; }


li { list-style-type: none; }
h2 { margin-top: 1.5em; }

/* Header links styling */
h3.head a {
color: #fff;
display:block;
border-top: 0px solid #36a;
border-right: 0px solid #36a;
background: none;
background-position: 98% 50%;
padding: 0px 0px;
}
h3.head a:hover {
color: #fff;
background: none;
background-position: 98% 50%;
}
h3.selected a {
background: none;
background-position:98% 50%;
color: #fff;
padding: 0px 0px;
}
h3.selected a:hover {
background: none;
background-position:98% 50%;
color: #fff;
}

/* Xtra Header links styling */
h4.head a {
color: #fff;
display:block;
background: none;
background-position: 98% 50%;
padding: 0px 0px;
}
h4.head a:hover {
color: #fff;
background: none;
background-position: 98% 50%;
}
h4.selected a {
background: #000 url(up.gif) no-repeat;
background-position:98% 50%;
color: #fff;
padding: 0px 0px;
}
h4.selected a:hover {
background: none;
background-position:98% 50%;
color: #fff;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
bottom:5%;
z-index: 3;
background:#262626 no-repeat 90%;
border-top:1px solid #000;
border-bottom:1px solid #4F4F4F;
position:absolute;
}
#contentframe{
overflow: hidden;
border-top:solid 1px #4F4F4F;
border-bottom:1px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
#slidecounter{
float:left;
color:#4F4F4F;
font:50px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:18px 20px;
}
#slidecaption{
overflow: hidden;
float:left;
color:#FFF;
font:26px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:33px 0;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#navigation{
background: url('images/navbg.gif') no-repeat;
float: right;
margin:22px 20px 0 0;
}
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 3;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(images/progress.gif);
}
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}


</style>
</head>

<body>



<div style=" position: absolute; left:150px; top:80px; z-index:3">

<ul id="theMenu">
<li>
<h3 class="head"><a href="javascript:;">Competitions</a></h3>
<ul>
<li><a href="index-multi.php">Content 1 1</a></li>
<li><a href="index-multi.php">Content 1 2</a></li>
<li><a href="index-multi.php">Content 1 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Residential</a></h3>
<ul>
<li><a href="index-multi.php">Content 3 1</a></li>
<li><a href="index-multi.php">Content 3 2</a></li>
<li><a href="index-multi.php">Content 3 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Institutional</a></h3>
<ul>
<li><a href="index-multi.php">Content 3 1</a></li>
<li><a href="index-multi.php">Content 3 2</a></li>
<li><a href="index-multi.php">Content 3 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">HealthCare</a></h3>
<ul>
<li><a href="index-multi.php">Content 4 1</a></li>
<li><a href="index-multi.php">Content 4 2</a></li>
<li><a href="index-multi.php">Content 4 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Photography</a></h3>
<ul>
<li><a href="index-multi.php">Content 5 1</a></li>
<li><a href="index-multi.php">Content 5 2</a></li>
<li><a href="index-multi.php">Content 5 3</a></li>
</ul>
</li>
</ul>


</div>

<!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersize">
<a href="http://interfacelift.com/wallpaper_beta/details/1819/bird_on_a_branch.html"><img src="images/bird.jpg" title="Bird On A Branch"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/988/paradise_lost.html"><img src="images/paradise.jpg" title="Paradise Lost"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/1864/morelia_viridis.html"><img src="images/snake.jpg" title="Morelia Viridis"/></a>
</div>

<!--Content area that hovers on top-->
<div id="content">
<div id="contentframe">

<div id="slidecounter"><!--Slide counter-->
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"><!--Slide captions displayed here--></div>
<!--Logo-->
<a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a>
<!--Navigation-->
<div id="navigation">
<a href="#" id="prevslide"><img src="images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
</div>

</div>
</div>

</body>
</html>

If I delete the following line:

src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

...the menu works perfectly, and if i delete the other jquery line:

<script type="text/javascript" src="jquery-.js"></script>

...the background images work perfectly. I cant get it to work. I feel like an f-ing idiot - Help!

Hi all,

I'm sure this issue/question has been raised many times but need some help.

I am trying to use two javascripts on one page but it doesnt seem to work, I can get one or the other but never both - believe this is whats know as a script conflict...
Now Im lost when it comes to javascript so have no idea how to solve the issue:
trying to use a vertical scroller on my images (this works) & would like to use a lightbox feature (that works when the above is removed)...

This is my test page that is using the troublesome scripts - http://www.liam-sheridan.co.uk/portfolio_lightbox.html

How can I solve this and use both features?

thanks LiamS

Howdy all,

I have changed same function names, and have incorporated both maps in bodyOnload, but they are still conflicting. Map 1 works fine. Map 2 shows up, but doesn't change it's images at all onmouseover. You won't be able to test it, but I'm hoping someone can spot a conflict in the code structure.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </script>

<SCRIPT type=text/javascript>
	// map # 1
  var isLoad = false;
	var pic0 = null; 
	var pic6 = null;
	var pic7 = null;
	var pic8 = null;
	var pic9 = null;
	var pic10 = null;
	var pic11 = null; 
	var pic12 = null;
	var pic13 = null;
	
	
	function preLoad() {
		// state maps  
		pic0 = new Image()
		pic0.src="mapsv2/00_state_00.gif"
    /*pic1 = new Image() 
		pic1.src="mapsv2/00_metro_01.gif" 
		pic2 = new Image()
		pic2.src="mapsv2/00_metro_02.gif" 
		pic3 = new Image() 
		pic3.src="mapsv2/00_metro_03.gif" 
		pic4 = new Image() 
		pic4.src="mapsv2/00_metro_04.gif" 
		pic5 = new Image() 
		pic5.src="mapsv2/00_metro_05.gif"*/ 
		pic6 = new Image() 
		pic6.src="mapsv2/00_metro.gif"  
		pic7 = new Image() 
		pic7.src="mapsv2/00_state_07.gif" 
		pic8 = new Image() 
		pic8.src="mapsv2/00_state_08.gif" 
		pic9 = new Image()
		pic9.src="mapsv2/00_state_09.gif" 
		pic10 = new Image() 
		pic10.src="mapsv2/00_state_10.gif" 
		pic11 = new Image() 
		pic11.src="mapsv2/00_state_11.gif" 
		pic12 = new Image() 
		pic12.src="mapsv2/00_state_12.gif" 
		pic13 = new Image() 
		pic13.src="mapsv2/00_state.gif" 
		pic14 = new Image() 
		pic14.src="mapsv2/00_state_06.gif"
		isLoad = true;
	}
	
	
	function changeImage(mFileName) {
		if(isLoad) document.statemap.src = mFileName.src;
	}
		
</SCRIPT>



<script type =text/javascript>

//map #2		
  var isLoaded = false;
	var pic1 = null; 
	var pic2 = null;
	var pic3 = null;
	var pic4 = null;
	var pic5 = null;
	var pic6 = null;
	
	
	function preLoadOne() {
		// state maps
		pic1 = new Image() 
		pic1.src="mapsv2/00_metro_01.gif" 
		pic2 = new Image()
		pic2.src="mapsv2/00_metro_02.gif" 
		pic3 = new Image() 
		pic3.src="mapsv2/00_metro_03.gif" 
		pic4 = new Image() 
		pic4.src="mapsv2/00_metro_04.gif" 
		pic5 = new Image() 
		pic5.src="mapsv2/00_metro_05.gif" 
		pic6 = new Image() 
		pic6.src="mapsv2/00_metro.gif" 
		
		isLoaded = true;
	}
	
	
	function changeImg(pFileName) {
		if(isLoaded) document.metromap.src = pFileName.src;
	}
	
</script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <meta name="robots" content="noindex,nofollow">
</head>
 <body onload="preLoad();preLoadOne()">
<h1> "  "</h1>
<img src="banner_crest.gif" alt="crest logo"><br>
<!-- Map # 1 -->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=pageDesc colSpan=2>
      
      <P><IMG height=400 src="mapsv2/00_state.gif" 
      width=355 useMap=#mainmap border=0 name=statemap>   
</P></TD></TR></TBODY></TABLE>
 <div id="page">
<div id="map_section"><MAP name=mainmap>
<!--state_im_Map -->
<AREA 
  onmouseover=changeImage(pic0); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Metro & Hills" 
COORDS="279,281, 275,294, 264,294, 268,276"
  href="metro.html">

<AREA 
  onmouseover=changeImage(pic14); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Barossa"
COORDS="282,268, 278,283, 264,279, 259,267, 275,263"
  href="section.asp?regionID=06">

<AREA 
  onmouseover=changeImage(pic7); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Fleurieu and Kangaroo Island" 
COORDS="245,310, 255,314, 242,318, 214,315, 217,310, 242,307"
  href="section.asp?regionID=07">

<AREA 
  onmouseover=changeImage(pic7); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Fleurieu and Kangaroo Island" 
COORDS="281,296, 278,301, 275,306, 267,307, 255,305, 279,292"
  href="section.asp?regionID=07">

<AREA 
  onmouseover=changeImage(pic8); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Eyre and Western" 
COORDS="145,76, 139,117, 122,120, 131,149, 142,153, 146,157, 167,162, 160,190, 161,196, 173,206, 198,219, 218,226, 234,235, 243,221, 249,221, 247,225, 239,236, 229,248, 209,264, 199,275, 201,278, 199,285, 194,284, 185,274, 187,271, 173,245, 166,229, 155,226, 154,216, 157,211, 147,207,
144,202, 136,197, 127,199, 110,192, 101,195, 72,180, 57,183, 16,183, 15,77"
  onclick="Populate('list1',EYRE_AND_WESTERN_JUNIOR_PRIMARY)">

<AREA 
  onmouseover=changeImage(pic9) ; onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Far North" 
COORDS="344,13, 330,225, 312,229, 309,233, 293,230, 289,229, 287,215, 278,211, 272,200, 267,203, 258,212, 253,214, 251,216, 248,213, 245,222, 236,229, 232,235, 223,231, 215,224, 208,221, 198,222, 184,218, 181,214, 172,203, 157,197, 161,190, 166,187, 162,159, 141,154, 137,150, 122,146,
126,116, 144,114, 140,73, 10,74, 10,12, 264,9"  
onclick="Populate('list1',FAR_NORTH_PRIMARY)">
  

<AREA 
  onmouseover=changeImage(pic10); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Limestone Coast" 
COORDS="326,317, 320,385, 307,377, 292,349, 296,339, 296,328, 302,324, 314,314"
  href="section.asp?regionID=10">

<AREA 
  onmouseover=changeImage(pic11); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Murray and Mallee" 
COORDS="332,227, 322,314, 314,319, 309,322, 303,326, 292,325, 282,305, 285,301, 277,284, 280,277, 286,267, 294,225, 311,226, 332,224"
  href="section.asp?regionID=11">

<AREA 
  onmouseover=changeImage(pic12); onmouseout=changeImage(pic13); shape=POLY 
  rel="nofollow" target=_self alt="Yorke and Mid North" 
COORDS="276,203, 284,214, 289,217, 285,267, 274,267, 257,265, 254,263, 241,291, 222,293, 229,284, 238,280, 245,249, 250,236, 253,230, 253,210, 266,201"
  href="section.asp?regionID=12">

</MAP>
</div>



<!--Map #2-->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=pageDesc colSpan=2>
      </TD></TR>
  <TR>
    <TD class=section colSpan=2><BR>
      
  <TR> 
    <TD class=section><BR>
      
      <P><IMG height=400 src="mapsv2/00_metro.gif" 
      width=301 useMap=#state_im_Map border=0 name=metromap> 
</P></TD></TR></TBODY></TABLE><MAP name=metromap>

<AREA 
  onmouseover=changeImage(pic1); onmouseout=changeImage(pic6); shape=POLY 
  rel="nofollow" target=_self alt="Eastern Adelaide" 
COORDS="151,142, 136,158, 139,168, 139,175, 134,177, 129,186, 130,198, 123,194, 118,193, 84,187, 88,169, 90,144, 92,141, 98,143, 118,149, 125,139, 139,138, 152,138"
  href="section.asp?regionID=01">

<AREA 
  onmouseover=changeImage(pic2); onmouseout=changeImage(pic6); shape=POLY 
  rel="nofollow" target=_self alt="Northern Adelaide" 
COORDS="138,8, 141,21, 159,31, 177,9, 180,15, 188,25, 185,30, 208,47, 193,92, 174,95, 168,98, 167,108, 167,117, 164,137, 164,142, 150,138, 118,148, 111,150, 107,149, 88,132, 88,121, 79,110, 87,100, 84,88, 45,45, 40,39, 50,27, 62,18, 70,17, 124,12"
  href="section.asp?regionID=02">

<AREA 
  onmouseover=changeImage(pic3); onmouseout=changeImage(pic6); shape=POLY 
  rel="nofollow" target=_self alt="Southern Adelaide" 
COORDS="105,191, 118,193, 128,196, 128,204, 129,218, 129,226, 131,227, 136,274, 136,305, 132,323, 111,322, 90,355, 65,376, 41,389, 34,392, 21,389, 29,346, 33,324, 42,256, 57,219, 57,189, 74,192, 84,190"
  href="section.asp?regionID=03">

<AREA 
  onmouseover=changeImage(pic4); onmouseout=changeImage(pic6); shape=POLY 
  rel="nofollow" target=_self alt="Western Adelaide" 
COORDS="62,87, 64,88, 66,85, 70,97, 72,101, 67,101, 71,108, 70,110, 91,124, 87,182, 67,195, 52,180, 44,120, 49,102, 48,87, 59,82"
  href="section.asp?regionID=04">

<AREA 
  onmouseover=changeImage(pic5); onmouseout=changeImage(pic6); shape=POLY 
  rel="nofollow" target=_self alt="Adelaide Hills" 
COORDS="224,55, 238,63, 253,91, 256,94, 271,97, 286,115, 292,121, 277,133, 278,143, 264,161, 286,182, 283,192, 287,213, 285,260, 284,284, 276,289, 246,281, 237,292, 228,290, 221,296, 209,312, 204,316, 179,323, 173,327, 165,341, 141,332, 135,318, 139,299, 139,292, 129,256, 129,227, 127,221,
129,210, 130,198, 132,195, 131,178, 139,168, 134,158, 144,150, 158,137, 164,141, 166,119, 167,107, 169,99, 172,94, 183,89, 193,90, 198,69, 212,48, 222,56"
  href="section.asp?regionID=05">

<!--<area shape="poly" href="default.asp" rel="nofollow" target="_self" alt="State Map" 
COORDS="300,0, 300,400, 0,400, 24,392, 42,388, 87,357, 120,320, 137,327, 165,341, 172,329, 174,326, 187,319, 193,318, 197,316, 204,314, 217,303, 225,290, 235,291, 246,279, 251,276, 272,285, 280,287, 286,270, 284,230, 283,197, 284,183, 283,175, 263,155, 266,150, 275,139, 278,126, 289,117, 275,106,
270,97, 264,95, 252,91, 242,82, 242,79, 241,74, 231,59, 220,56, 214,53, 197,37, 184,29, 184,20, 177,13, 173,10, 153,32, 137,14, 135,6, 111,14, 85,16, 53,25, 36,33, 32,33, 29,15, 10,0">
-->							

</MAP>

  </body>
</html>

Cheers,

Tom

Hi guys,

Opening this up to the experts (of which I am not...yet)

Have multiple scripts, some external, some on-page. Of all, there are 2 conflicting aand I need some assistance in finding a solution.

Script 1 is at:

http://upgrademycv.co.uk/wp-content/.../simpleCart.js



It is this 2nd one which causes the conflict and I was hoping that someone could help me pinpoint how to correct please:

http://www.upgrademycv.co.uk/fancydropdown.js


Many thanks in advance.

Phil

Hi there, If someone could help with a jscript issue I'd be very grateful! I have two scripts for different sections on a page which I'm placing in the head, but are in conflict and I just can't seem to get them to work together.

Both are as follows and any help would be appreciated (possibly highlighting in bold where a change could be made):

Code:

<script type="text/javascript">
jQuery.noConflict();
 function updatesubcat() {
  $category = $('topcat').options[$('topcat').selectedIndex].value;
  if ($category.match(' redir')) {
   jQuery('#subcategory').html('');
   window.location.href='/<%=server.HTMLEncode(Session("PublicFranchiseName"))%>/' + $category.replace(' redir','') + '.html';
  } {
   PagetoDiv("/ajax/home_subcategory.asp?c="+$category,"subcategory");
  }
 }
</script>


**AND:**


<script type="text/javascript">
$(document).ready(function() {  

 //Execute the slideShow, set 4 seconds for each images
 slideShow(4000);

});

function slideShow(speed) {


 //append a LI item to the UL list for displaying caption
 $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

 //Set the opacity of all images to 0
 $('ul.slideshow li').css({opacity: 0.0});

 //Get the first image and display it (set it to full opacity)
 $('ul.slideshow li:first').css({opacity: 1.0});

 //Get the caption of the first image from REL attribute and display it
 $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
 $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

 //Display the caption
 $('#slideshow-caption').css({opacity: 0.7, bottom:0});

 //Call the gallery function to run the slideshow 
 var timer = setInterval('gallery()',speed);

 //pause the slideshow on mouse over
 $('ul.slideshow').hover(
  function () {
   clearInterval(timer); 
  },  
  function () {
   timer = setInterval('gallery()',speed);   
  }
 );

}

function gallery() {


 //if no IMGs have the show class, grab the first image
 var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

 //Get next image, if it reached the end of the slideshow, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

 //Get next image caption
 var title = next.find('img').attr('title'); 
 var desc = next.find('img').attr('alt'); 

 //Set the fade in effect for the next image, show class has higher z-index
 next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

 //Hide the caption first, and then set and display the caption
 $('#slideshow-caption').slideToggle(300, function () { 
  $('#slideshow-caption h3').html(title); 
  $('#slideshow-caption p').html(desc); 
  $('#slideshow-caption').slideToggle(500); 
 }); 

 //Hide the current image
 current.animate({opacity: 0.0}, 1000).removeClass('show');

}
</script>