Learn VBA & Macros in 1 Week!

JavaScript - Javascript Conflict

Full Excel VBA Course - Beginner to Expert

Javascript Conflict	View Content

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!

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Javascript And Php Conflict?

Javascript Conflict

Javascript Conflict

Javascript Conflict

Javascript Conflict - Please Help

Javascript Conflict Help Please

Javascript Conflict In I.e

Javascript Onload Conflict

Help With Javascript Conflict Error

Javascript Conflict With 2 Scripts - Help Please...!

Urgent! Conflict In Javascript

Javascript/php Conflict On Timer Function

Javascript Conflict In Internet Explorer

Please Help. Javascript Conflict On One Page Of Web Site

Javascript Conflict W/ Internet Explorer

Browser Specific Javascript Conflict

Javascript Conflict, Scrollbar And Lightbox

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

Having A Javascript Conflict Of Some Sort On A Website...not Working Properly (help)

Js Conflict. Please Help.

Learn VBA & Macros for Excel in 1 Week!

Javascript And Php Conflict?

Similar Tutorials

***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");

?>

Javascript Conflict

Similar Tutorials

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>


<div id="loading"> </div>


<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>


<div id="content">
<div id="contentframe">

<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"></div>

<a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a>

<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!

Javascript Conflict

Similar Tutorials

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

Javascript Conflict

Similar Tutorials

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

Javascript Conflict - Please Help

Similar Tutorials

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

Javascript Conflict Help Please

Similar Tutorials

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>

Javascript Conflict In I.e

Similar Tutorials

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.

Javascript Onload Conflict

Similar Tutorials

Hi,

I need to use more than one javascripts that use onload event. Every time I try this only one from these scripts work correctly. How can I make these scripts work together?

1)

Code:

var kmrSimpleTabs = {

	sbContainerClass: "simpleTabs",
	sbNavClass: "simpleTabsNavigation",
	sbContentClass: "simpleTabsContent",
	sbCurrentNavClass: "current",
	sbCurrentTabClass: "currentTab",
	sbIdPrefix: "tabber",	

	init: function(){
		if(!document.getElementsByTagName) return false;
		if(!document.getElementById) return false;
		
		var containerDiv = document.getElementsByTagName("div");
	
		for(var i=0; i<containerDiv.length; i++){
			if (containerDiv[i].className == kmrSimpleTabs.sbContainerClass) {
				
				// assign a unique ID for this tab block and then grab it
				containerDiv[i].setAttribute("id",kmrSimpleTabs.sbIdPrefix+[i]);		
				var containerDivId = containerDiv[i].getAttribute("id");
	
				// Navigation
				var ul = containerDiv[i].getElementsByTagName("ul");
				
				for(var j=0; j<ul.length; j++){
					if (ul[j].className == kmrSimpleTabs.sbNavClass) {
	
						var a = ul[j].getElementsByTagName("a");
						for(var k=0; k<a.length; k++){
							a[k].setAttribute("id",containerDivId+"_a_"+k);
							// get current
							if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
								var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
								var curTabCont = cookieElements[1];
								var curAnchor = cookieElements[2];
								if(a[k].parentNode.parentNode.parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
									if(a[k].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_a_"+curAnchor){
										a[k].className = kmrSimpleTabs.sbCurrentNavClass;
									} else {
										a[k].className = "";
									}
								} else {
									a[0].className = kmrSimpleTabs.sbCurrentNavClass;
								}
							} else {
								a[0].className = kmrSimpleTabs.sbCurrentNavClass;
							}
							
							a[k].onclick = function(){
								kmrSimpleTabs.setCurrent(this,'simpleTabsCookie');
								return false;
							}
						}
					}
				}
	
				// Tab Content
				var div = containerDiv[i].getElementsByTagName("div");
				var countDivs = 0;
				for(var l=0; l<div.length; l++){
					if (div[l].className == kmrSimpleTabs.sbContentClass) {
						div[l].setAttribute("id",containerDivId+"_div_"+[countDivs]);	
						if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
							var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
							var curTabCont = cookieElements[1];
							var curAnchor = cookieElements[2];		
							if(div[l].parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
								if(div[l].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_div_"+curAnchor){
									div[l].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
								} else {
									div[l].className = kmrSimpleTabs.sbContentClass;
								}
							} else {
								div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
							}
						} else {
							div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
						}
						countDivs++;
					}
				}	
	
				// End navigation and content block handling	
			}
		}
	},
	
	// Function to set the current tab
	setCurrent: function(elm,cookie){
		
		this.eraseCookie(cookie);
		
		//get container ID
		var thisContainerID = elm.parentNode.parentNode.parentNode.getAttribute("id");
	
		// get current anchor position
		var regExpAnchor = thisContainerID+"_a_";
		var thisLinkPosition = elm.getAttribute("id").replace(regExpAnchor,"");
	
		// change to clicked anchor
		var otherLinks = elm.parentNode.parentNode.getElementsByTagName("a");
		for(var n=0; n<otherLinks.length; n++){
			otherLinks[n].className = "";
		}
		elm.className = kmrSimpleTabs.sbCurrentNavClass;
		
		// change to associated div
		var otherDivs = document.getElementById(thisContainerID).getElementsByTagName("div");
		var RegExpForContentClass = new RegExp(kmrSimpleTabs.sbContentClass);
		for(var i=0; i<otherDivs.length; i++){
			if ( RegExpForContentClass.test(otherDivs[i].className) ) {
				otherDivs[i].className = kmrSimpleTabs.sbContentClass;
			}
		}
		document.getElementById(thisContainerID+"_div_"+thisLinkPosition).className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
	
		// get Tabs container ID
		var RegExpForPrefix = new RegExp(kmrSimpleTabs.sbIdPrefix);
		var thisContainerPosition = thisContainerID.replace(RegExpForPrefix,"");
		
		// set cookie
		this.createCookie(cookie,'simpleTabsCookie_'+thisContainerPosition+'_'+thisLinkPosition,1);
	},
	
	// Cookies
	createCookie: function(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	},
	
	readCookie: function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	
	eraseCookie: function(name) {
		this.createCookie(name,"",-1);
	},

	// Loader
	addLoadEvent: function(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
	
	// END
};

// Load SimpleTabs
kmrSimpleTabs.addLoadEvent(kmrSimpleTabs.init);

2)

Code:

function hideMessage() {
document.getElementById("thanks").style.display="none"; 
}

function startTimer() {
var tim = window.setTimeout("hideMessage()", 5000);  // 5000 milliseconds = 5 seconds
}

3)

Code:

var ids=new Array();

function QAinit(){
if(document.getElementById){
var tids=document.getElementsByTagName('div');
for(i=0;i<tids.length;i++)if(tids[i].className=="question")ids[ids.length]=tids[i];
for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;
}}

function setstate(){
for(i=0;i<ids.length;i++){
if(ids[i]==this){
var d=this.parentNode.getElementsByTagName('div')[1];
if(d.style.display=="block")d.style.display="none";
else d.style.display="block";
}}}

function expandall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="block";
}}

function collapseall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="none";
}}

window.onload=QAinit;

Can anyone please help?

Help With Javascript Conflict Error

Similar Tutorials

Hi all,

I am working on a page that is using an image slider and a scrolling set of images and there seems to be some sort of conflict with the two because they both work on there own but as soon as they are both on the page one stops working.

I have posted the javascript below in the hope that someone can point me in the right direction. I am anovice at best with javascript. I hope someone can help as I have looked everywhere

Code:

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

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


<script type="text/javascript">
	$(document).ready(function(){
		//$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
</script>
<!--<script type="text/javascript" src="/js/common.js"></script>-->
<script type="text/javascript" src="http://simplyscroll.googlecode.com/files/jquery.simplyscroll-1.0.4.min.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll-1.0.4.css" media="all" type="text/css">
<script type="text/javascript"> 
(function($) {
	$(function() {
		$("#scroller").simplyScroll({
			autoMode: 'loop'
		});
		
	});
})(jQuery);
</script>

Javascript Conflict With 2 Scripts - Help Please...!

Similar Tutorials

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>

Urgent! Conflict In Javascript

Similar Tutorials

Hello everyone,

I'm using both Lightbox 2 and PrettyPhoto in Wordpress. Is there any way I can run both simultanously? They second Lightbox is on PrettyPhoto stops working.

This is for 313Coupons.com . If anyone can help me I can recreate the problem. Right now all the Javascripts are enabled so the Homepage isn't displaying the Javascript elements that are done through PrettyPhoto. However, if you go to http://313coupons.com/as/ for example and press the coupon on the bottom, it'll open up in Lightbox 2. I need this because of the Print Button feature of Lightbox 2 which I can't find in any other Lightbox plugin.

Any ideas? Please this is urgent.

Javascript/php Conflict On Timer Function

Similar Tutorials

Hi,

I am new to javascript. I have isolated a problem and I am trying to fix it. I am hoping someone could lend assistance to my problem. I'm sure it's minor, but I can't seem to figure out WTF is going on.
Thanks in advance for any help you may provide.
Rodg

This script is saved as timer.php. I downloaded it from this site. It is a live server timer that displays the server time in your browser. This code works fine.

My problem lies here.
I am calling this script from 'showusers.php' as:
Code:

 
<?PHP
echo "<p><b>Current Server Time: </b><span id="servertime"></span></p>";
?>

The timer as written below, saved as 'timer.php' works fine. When I use my original page 'showusers.php' it doesn't want to work.
'showusers.php' loads java in the header and has a src file= .js. I tried making this file a .php to see if there was a problem, but it did not help.

My timer outputs the following:
Current Server Time: undefined NaN, NaN NaN:NaN:NaN
Also, a previous call to the same 'src=java.js' stopped working in 'showusers.php'.

I assume the problem lies in the 'var currenttime=' line 12 in timer.php
If I comment the 'var currenttime=' line in my .js file, the call to 'id=AccessInfo' in 'showusers.php' works fine.

Is this a javascript error or a PHP error?

http://173.34.134.4/showusers.php // View source ---> not working
http://173.34.134.4/timer.php //View source ---> Working ok

Good code: timer.php
Code:

<body>
<script type="text/javascript">

// Current Server Time script (SSI or PHP)- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use.

//Depending on whether your page supports SSI (.shtml) or PHP (.php), UNCOMMENT the line below your page supports and COMMENT the one it does not:
//Default is that SSI method is uncommented, and PHP is commented:

//var currenttime = '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' //SSI method of getting server date
var currenttime = '<?PHP print date("F d, Y H:i:s", time())?>' //PHP method of getting server date

///////////Stop editting here/////////////////////////////////

var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var serverdate=new Date(currenttime)

function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}

function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" "+timestring
}

window.onload=function(){
setInterval("displaytime()", 1000)
}

</script>

<p><b>Current Server Time:</b> <span id="servertime"></span></p>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
</body>

Javascript Conflict In Internet Explorer

Similar Tutorials

Hello, im new and hope you can help me out.

I am running some javascript on my vbulletin forum.

One is for some ad network to display ads, I noticed this working in firefox and chrome but not IE.

After some investigation I realised my analytics javascript snippet is conflicting, if i remove the javascript for my analytics then the ads show in all web browsers.

The two pieces of code a

Analytics;

Code:

<script src="/mint/?js" type="text/javascript"></script>

Ad network;

Code:

<script type="text/javascript">
var EB_campid='5336510241';
</script>
<script src="http://www.zintext.com/showads.js" type="text/javascript"></script>

Any help appreciated.

Dave.

Please Help. Javascript Conflict On One Page Of Web Site

Similar Tutorials

I have two main components running on this page below.

http://vtpr.net/asociacion-relacioni...d=54&Itemid=23

Sobi directory and gavick photoslide. The problem is that the photoslideshow is not loading only on the page witht he directory. I did a little investaged and got a error console for firefox and it showing this error:

Code:

    Error: Fx.Opacity is not a constructor
    Source File: http://vtpr.net/asociacion-relacionistas/modules/mod_gk_news_image_1/js/engine_compress.js
    Line: 1

I have VERY VERY limited knowledge of javascript. Any and all help is super appreciated. Thanks in advance

Javascript Conflict W/ Internet Explorer

Similar Tutorials

Hey everyone, this problem has been bothering me for awhile, so I decided to finally stop banging my head against a wall over it and seek out some help.

I'm fairly new to web development, but through W3Schools and the almighty Google, I managed to make my way through developing a site for the company that I intern for. The site is designed to query a Microsoft Access database and display the results, so employees can see the results of tests run on another machine in a different area. I did not design the database or queries for this project, but assume that they function as they are supposed to.

The way the website works is by displaying a form to the user with a number of check boxes (it varies by page) that each add another parameter to the query. When the query button is clicked, I used the "onclick" action of an HTML button to send the form data to a JavaScript function to be processed.

The JavaScript function filters out what I need to send to a php page that runs the query. I send the information from the JavaScript function using an XMLHttpRequest, and replace a line of text in the HTML document with the returned results from the php script.

I have tested the completed website in several browsers. It works flawlessly in Chrome, Firefox, and IE9. The problem is, it doesn't work with IE7 or IE8, and even though the company I work for is making a widespread upgrade to Windows 7 from XP within the year, they don't plan on moving beyond IE8.

When I load the page in IE8 (I'm running WAMP as my server), I can see that my php scripts work just fine, because some of the fields used to configure the query are generated using php, and they appear as they should. However, when I click the form button that triggers the JavaScript function, nothing happens (IE7 and 8 both report "Error on Page"). I've gone through nearly every Internet Options settings, as far as I know, and I'm fairly certain that every setting related to scripting is enabled, though I've only tried testing the site on IE7 and 8 at work and not at home (where I have unlimited security access).

Below is the HTML for the button that triggers the JavaScript function, "displayTable":

Code:

<input type="button" name="button" value="Show Results" onclick="displayTable(this.form)" />

I'm not sure how easily this problem can be fixed, so if anyone needs to see any other bits of code, I can provide those. But my main question is, does this sound like just some setting in IE7/8 that I don't know about (keeping in mind that, with all the settings the same, the site works fine in IE9), or does IE7/8 simply have some inherent flaw in interpreting JavaScript, and will it be necessary for me to rewrite my code taking some other approach, and if so, what language would be recommended in place of JavaScript in IE7/8?

Thanks!

Browser Specific Javascript Conflict

Similar Tutorials

Hello All,

I'm working on a image slider, which will slide left to right and vice versa on mouser over event. the images are dynamically loaded from the database using ASP script. I use mootools.svn.js for the sliding implementation. and Ajax to pass the id of the image to another page as a query string. this is implemented in a Code:

onclick="getValue('<%= id %>')"

event.

This works fine in IE8, but when I test in Firefox 3.6 and Chrome the onclick event doesn't work. when I comment the mootools.svn.js, the onclick event get fired. what causes this. is their any solution?

now my development has come to a grinding halt because of this. Please help

<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient"%>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.Security" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
<%@ Import Namespace="System.Web.UI.HtmlControls" %>
<%@ Import Namespace="System.Text" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="slider" %>

<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//GETS THE IMAGE ID FROM
function getValue(val)
{
alert(val);
showHint(val);
//document.form1.newval1.value=val;
}

var xmlhttp=null; //xmlhttp variable

//Ajax
function make_httpRequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
return;
}
}

//Bind the query string as a URL
function request_url(url){

url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,false);

xmlhttp.send(null);

}

//BIND THE IMAGE ID TO THE QUERY STRING VARIABLE TO THE url variable
function showHint(val)
{

make_httpRequest();

var url = "Test.aspx?prodid="+ val;

request_url(url);

}
</script>
<style type="text/css">

</style>
<style type="text/css">

</style>
</head>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll2 = new Scroller('maiin_container', {area: 100, velocity: .12});
// container
$('maiin_container').addEvent('mouseover', scroll2.start.bind(scroll2));
$('maiin_container').addEvent('mouseout', scroll2.stop.bind(scroll2));
});
</script>
<body>
<form id="form1" runat="server">
<div class="slider_con">
<div class="image_con section">
  
</div>
<div id="maiin_container">
<div class="main-content" id="Div1">
<%
string connectionString = @"Data Source=174.37.88.148;Initial Catalog=lalith_db;uid=lalitha_jew;pwd=lalitha1234";
string query = "SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'yes' UNION SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'no'";

SqlConnection conn = new SqlConnection(connectionString);
try
{
conn.Open();
}
catch(Exception ex)
{
conn.Close();
}
SqlDataReader reader;
using (reader = new SqlCommand(query, conn).ExecuteReader())
{
if (reader.HasRows)
{
while (reader.Read())
{
int id = reader.GetInt32(reader.GetOrdinal("prod_id"));
string prod_itemcode = reader.GetString(reader.GetOrdinal("prod_itemcode"));
string prod_title = reader.GetString(reader.GetOrdinal("prod_title"));
string prod_thumbnailimage = reader.GetString(reader.GetOrdinal("prod_thumbnailimage"));

int i = prod_thumbnailimage.IndexOf('b');
string url = prod_thumbnailimage.Substring(i);

%>
<div class="section">
<a href="#" id='<%= id %>' onclick='getValue(<%= id %>)'><img id="img" src='<%= url %>' alt='<%= prod_title %>' /></a>
</div>
<% }
}
} %>
</div>
</div>
</div>
</form>
</body>
</html>

Javascript Conflict, Scrollbar And Lightbox

Similar Tutorials

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

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

Similar Tutorials

I had this filterable thing working perfectly but seem to have done something that just makes all the items flash constantly when you try and filter (click the blue section All | Illustration | Animation). Can someone take a look and help at all?

http://bit.ly/4yWiDZ

Having A Javascript Conflict Of Some Sort On A Website...not Working Properly (help)

Similar Tutorials

Hello,

I am building a shopping cart website that is using a mega javascript dropdown menu.

Everything was working fine until you get to the checkout page on the website. The checkout page has this accordian / spry deal where customers can checkout on one page. You can view it he

http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp

If I take the menu code out of the header.asp file, then the checkout page works just fine. But if I put the menu code back in, then the checkout page stops working.

Here is the menu code (simplified it a bit for this thread):

Quote:
<head>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
Quote:
<body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {

function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}

var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);

});

</script>
</body>
And there are two things of script on the onepagecheckout.asp page as well. Here they a

Quote:
<script type="text/javascript">
$(document).ready(function() { $('#chkPayment').click(); });
</script>
Quote:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("acc1", { useFixedPanelHeights: false, enableAnimation: false });
var currentPanel = 0;

<% if session("idCustomer")>"0" then
session("OPCstep")=2
else
session("OPCstep")=0
end if %>

//* Find Current Panel
<% if len(Session("CurrentPanel"))=0 AND pcv_strPayPanel="" then %>

<% if session("idCustomer")>"0" then %>
acc1.openPanel('opcLogin');
GoToAnchor('opcLoginAnchor');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% else %>
$('#LoginOptions').show();
$('#acc1').hide();
<% end if %>

<% else %>

<% If pcv_strPayPanel = "1" Then %>
$(document).ready(function() {
$('#LoginOptions').hide();
pcf_LoadPaymentPanel();
});
<% Else %>
acc1.openPanel('opcLogin');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% End If %>

<% end if %>

GoToAnchor('opcLoginAnchor');

function openme(pNumber) {
acc1.openPanel(pNumber);
}
function toggle(pNumber) {
var ele = acc1.getCurrentPanel();
var panelNumber = acc1.getPanelIndex(ele);
if (panelNumber == pNumber) {
acc1.closePanel(pNumber);
} else {
acc1.openPanel(pNumber);
}
}
function togglediv(id) {
var div = document.getElementById(id);
if(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = 'block';
}

function win(fileName)
{
myFloater=window.open('','myWindow','scrollbars=yes,status=no,width=300,height=250')
myFloater.location.href=fileName;
}

</script>
Any help would be GREATLY appreciated,

Thank you

Js Conflict. Please Help.

Similar Tutorials

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