|
JavaScript - Conflict Between Google Plus Button And Lightbox
There is a serious conflict b/w Google plus button and lightbox script the buttons works fine in all other pages but when lightbox script is added to the page there is some problem.
It has a JavaScript error and the Google plus one button wont show up in the header. the error says uncaught error for the length. the length parameter is used in both lightbox.js and plusone.js here is the link http://www.ornusweb.com/what_we_done.html can some one please give me a code snippet to solve this issue Similar TutorialsHi 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"> </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 I have a web page and on the click of one button I wish to play a video using videobox. On the click of a different button I wish to show an image in lightbox. On the page works Videobox works with just the videobox code or the Lightbox works with just the lightbox code. Neither of them work with both codes. I have all the code elements (including the css) for videobox in a folder called js All the code elements for lightbox in a folder called js2 Does anyone know why this is happening and how I can get to use both from seperate buttons on the same webpage? All help much appreciated This is the code I have used for them on the webpage: (The top code is for the videobox followed by the lightbox code) Code: <link rel="stylesheet" href="../../js/videobox.css" type="text/css" media="screen" /> <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> <link rel="stylesheet" href="../../js2/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="../../js2/prototype.js"></script> <script type="text/javascript" src="../../js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="../../js2/lightbox.js"></script> 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 Hi, I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages. I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer). I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine. Here's the page prior to adding the new scrollbar and with lightbox working: Here's the page with the scrollbar added and lightbox not working: The code that I suspect is conflicting is as follows: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem. Anyone have any idea of how I might fix this? (PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!) Thanks Hello Everbody, I have been at this problem for 10 hours now and am going NUTS!! I am making website to look around an ancient Egyptian Tomb. Feel free to have a look: http://www.campbelltest.co.uk/britishMuseum/online/ I have a flash movie which I have scripted to utilise the browser back button using this script http://www.asual.com/swfaddress/docs/. This works fine until open a lightbox image form within the flash movie using Lokesh Dhakar Light box http://www.lokeshdhakar.com/projects/lightbox2/ and the browsers back button stops working!! The code below is to the JavScript links and the code that lauches the lightbox: Code: <script type="text/javascript" src="js/swfaddress-optimizer.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript" src="js/swfmacmousewheel.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- start | JC -->
<!-- added for flash -->
<!-- added for launch from flash -->
<script language="JavaScript">
function openLightbox(url,group){
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox['+group+']');
objLink.setAttribute('title','caption');
Lightbox.prototype.start(objLink);
}
</script>
<!-- end | JC -->
This code is how I have embeded the flash in the page: Code: <script type="text/javascript">
var so = new SWFObject('container04.swf', 'container04', '760', '450', '8', '#ffffff');
so.useExpressInstall('js/expressinstall.swf');
so.addParam('menu', 'false');
//so.addParam('movie','container04');
so.write('flashcontent');
var macmousewheel = new SWFMacMouseWheel( so );
</script>
I have added a text box to movie that shows the back button function exicuting and what its exicuting. I have never done any work with JavaScript before so I am up the creek without a paddle!! This is my last resort. I do not javascript - I have the code Google sent me on http://www.countyfairgrounds.net - and I have 3600 other pages I would like it on - but for the life of me - I cannot figure out why it does not work. Lately I have tried to make it work on http://www.countyfairgrounds.net/ads.html - I have tried the Google forums. Does anyone here speak Google +1 code? I surely would appreciate it
If you look on the top right corner of the site I'm working on, the +1 button doesn't line up with the other social media icons. Why? http://customwovenlabels.com/ Hello, I'm trying to make it so that when a user clicks a <li> it opens a marker on my map. The map and markers work fine within the map...but I can't seem to get my selector outside of the map to work. Thanks in advanced, this has been bugging me for days now! here is the javascript i have for the map so far... Code: var infowindowLevel = 0;
function initialize() {
var companyLogo = new google.maps.MarkerImage('images/googlemaps/logo23.png',
new google.maps.Size(154,76),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/googlemaps/logo_shadow2.png',
new google.maps.Size(154,60),
new google.maps.Point(0,0),
new google.maps.Point(30, 35)
);
var footSolutionsLogo = new google.maps.MarkerImage('images/googlemaps/fslogo2.png',
new google.maps.Size(154,76),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var footSolutionsShadow = new google.maps.MarkerImage('images/googlemaps/logo_shadow2.png',
new google.maps.Size(154,60),
new google.maps.Point(0,0),
new google.maps.Point(30, 35)
);
var myLatlng = new google.maps.LatLng(38.030034,-121.214445);
var myOptions = {
zoom: 9,
center: myLatlng,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
mapTypeControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var fs1 = new google.maps.LatLng(37.971961, -121.300540);
var fs = new google.maps.Marker({
position: fs1,
map: map,
icon: footSolutionsLogo,
shadow: footSolutionsShadow,
title:"Foot Solutions - Stockton(CLICK ME)"
});
var stf2 = new google.maps.LatLng(37.664285,-120.953553);
var stf2 = new google.maps.Marker({
position: stf2,
map: map,
icon: companyLogo,
shadow: companyShadow,
title:"Shoes That Fit - Modesto(CLICK ME)"
});
var stf3 = new google.maps.LatLng(38.409277, -121.383330);
var stf3 = new google.maps.Marker({
position: stf3,
map: map,
icon: companyLogo,
shadow: companyShadow,
title:"Shoes That Fit - Elk Grove(CLICK ME)"
});
var contentString = '<div id="windowContent">'+
'<div id="bodyContent">'+
'<img src="images/googlemaps/fslogo.jpg" alt="Logo" /> '+
'<h3>Stockton</h3>'+
'<p><img src="images/googlemaps/store1.jpg"/> ' +
'</p> '+
'<p class="link"><a target="_blank" href="http://maps.google.com/maps?f=d&source=s_d&saddr=&daddr=2210+Pacific+Ave,+Stockton,+CA+95204&hl=en&geocode=&mra=ls&sll=37.0625,-95.677068&sspn=51.841773,57.744141&ie=UTF8&z=16">Get Directions! (Google Maps)</a></p> '+
'</div>'+
'</div>';
var contentString2 = '<div id="windowContent">'+
'<div id="bodyContent">'+
'<img src="images/googlemaps/stflogo.jpg" alt="Logo" /> '+
'<h3>Modesto</h3>'+
'<p><img src="images/googlemaps/store2.jpg"/> ' +
'</p> '+
'<p class="link"><a target="_blank" href="http://maps.google.com/maps?f=d&source=s_d&saddr=&daddr=2401+E+Orangeburg+Ave,+Modesto,+CA+95355&hl=en&geocode=&mra=ls&sll=38.409009,-121.383419&sspn=0.012644,0.014098&ie=UTF8&z=16"> Get Directions! (Google Maps) </a></p> '+
'</div>'+
'</div>';
var contentString3 = '<div id="windowContent">'+
'<div id="bodyContent">'+
'<img src="images/googlemaps/stflogo.jpg" alt="Logo" /> '+
'<h3>Elk Grove</h3>'+
'<p><img src="images/googlemaps/store3.jpg"/> ' +
'</p> '+
'<p class="link"><a target="_blank" href="http://maps.google.com/maps?f=d&source=s_d&saddr=&daddr=8649+Elk+Grove+Blvd,+Elk+Grove,+CA+95624&hl=en&geocode=&mra=ls&sll=37.971882,-121.300619&sspn=0.01272,0.014098&ie=UTF8&z=16">Get Directions! (Google Maps)</a></p> '+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
//maxWidth: 300,
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2,
// maxWidth: 300,
});
var infowindow3 = new google.maps.InfoWindow({
content: contentString3,
// maxWidth: 300,
});
google.maps.event.addListener(fs, 'click', function() {
infowindow.open(map,fs)
});
google.maps.event.addListener(stf2, 'click', function() {
infowindow2.open(map,stf2)
});
google.maps.event.addListener(stf3, 'click', function() {
infowindow3.open(map,stf3)
});
}
here is the <li>'s I want to use as the "buttons".. Code: <ul class="locations">
<li>
<strong>Address</strong>
<strong>Phone</strong> :
<strong>Fax</strong> :
</li>
<li>
<strong>Address</strong>
<strong>Phone</strong> :
<strong>Fax</strong> :
</li>
<li>
<strong>Address</strong>
<strong>Phone</strong> :
<strong>Fax</strong> :
</li>
</ul>
I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head>
<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#map_canvas {width:30%; height:250px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng (
<?php
include("dbconnect.php");
$result = mysql_query("SELECT * FROM countries
WHERE Country='{$_SESSION['Country']}'");
while($row = mysql_fetch_array($result)){
echo $row['Map'];
}
mysql_close($con);
?>);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div class="countryright" id="map_canvas">
include("dbconnect.php");
$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];
global $turnsol;
global $violet;
global $wakerobin;
echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';
$result=mysql_query("SELECT * FROM regions
WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
ORDER BY sub ASC");
while($row = mysql_fetch_array($result)){
$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
$tigerlilly=$row['RegionPId'];
echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
}
echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';
echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';
mysql_close($con);
?>
I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. Hi Guys. I wish I could say I was a fellow coder but I'm not. I am a WYSISYGer that promised to help a friend and is lost. I'm making her a site that is based on a js template. I want to add a lightbox effect using jquery. Ive been trying to use a plugin called bumpbox because unlike lightbox it allows static html in the popup. When I implement the plugin in a very basic html doc, it works just fine. However when I use it in my js site, nothing happens. I really really don't understand what I am doing right or wrong, so if someone could take a look at code and help me out (with very basic instructions), I'd really appreciate it! Ive uploaded site to http://www.flashfollow.com/index.html click home>link saying seo it should open a lightbox...currently to developers site. THANKS SO MUCH Heya there, I have been trying to run two Javascripts within the same page. The first is the Drop down menu Javascript, the second is the Picture Viewer (Click an image and it opens) Here is a copy of the webpage (the active version has been modified to reduce confusion for users) http://f1p.co.uk/saved%20pages/picture1.html I have tried a noconflict, but it didn't seem to work. As you can see, the Picture viewer works fine, but the drop down menu seems to be in conflict. Any help please? 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! ***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 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. 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! i was building a website using two jquery codes . first one for the slideshow banner and the other one for the menu but only one of them works, i've search on the web and i fouond something called jquery no conflict() is this good? this is the code inside de <head> tags Code: <!-- JavaScripts-->
<script type="text/javascript">
jQuery.noConflict();
</script>
/*This is the menu's*/
<script type='text/javascript' src="jquery-1.2.6.min.js"></script>
<script type='text/javascript' src="kwicks.js"></script>
<script type='text/javascript' src="custom.js"></script>
/*Here starts the sideshow*/
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
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, 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>
Hi All, I am simply trying to get 2 booking systems working on the 1 page but it seems that they have a conflict, they both access the exact sames files but whatever one is at the top get priority and works and the 2nd one below doesn't. See he http://www.albergodelsenato.it/test2.php How can I fix this? Please help ASAP. Thanks |
|||||||