|
JavaScript - Multiple Jquery Script Conflict?
hi guys
i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/u...ons-of-jquery/ but still having trouble with multiple versions of jquery not working. either the jquery slideshow doesnt work or the jquery ie select width fix doesnt work! rrghhh Code: <head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ie6pngfix/iepngfix_tilebg.js"></script><!-- ie6 png fix -->
<script type="text/javascript" src="/js/ddlevelsmenu.js"></script><!-- drop down menu js -->
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script><!-- slideshow jquery file 1 -->
<script type="text/javascript" src="/js/slides.min.jquery.js"></script><!-- slideshow jquery file 2 -->
<!-- slideshow jquery controls -->
<script type="text/javascript">
jQuery(function () {
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#', '');
}
// Initialize Slides
jQuery('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
slideSpeed: 1200,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function (current) {
// Set the slide number as a hash
// window.location.hash = '#' + current;
}
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_4 = $.noConflict(true);
</script>
<script type="text/javascript" src="/js/prototype.js"></script><!-- lightbox aka image viewer js file 1 -->
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script><!-- lightbox aka image viewer js file 2 -->
<script type="text/javascript" src="/js/lightbox.js"></script><!-- lightbox aka image viewer js file 3 -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
</script>
<script type="text/javascript" src="/js/test/jquery.1-4-2.min.js"></script>
<script type="text/javascript" src="/js/test/jquery.ie-select-width.js"></script>
<!--[if lte ie 6]>
<script type="text/javascript" src="/js/test/jquery.bgiframe.js"></script>
<![endif]-->
<script type="text/javascript">
$(function ()
{
// Set the width via the plugin.
$('select#fixed-select-no-css').ieSelectWidth
({
width : 200,
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Set the width via CSS.
$('select#fixed-select-css').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Borders and padding etc for Internet Explorer 6/7.
$('select#select-styleable').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_2 = $.noConflict(true);
</script>
<!-- Share this button script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'c0b04a1e-f627-42e8-b040-cbfb63bd9b1c'});</script>
<script type="text/javascript" src="/js/showtab.js"></script>
</head>
I've tried re ordering the scripts around but still no joy? either the slideshow works or the ie select width fix doesnt but not both at the same time? please advise Omar. Similar TutorialsHi 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 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>
I currently have to run jQuery.noConflict(); so my other scripts work correctly, examples: Code: prototype.js validation.js And i have this Code: $( document ).ready( function() {
$( window ).scroll( function( e ) {
if( $( window ).scrollTop() > 160 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
} );
} );
witch works when i take jQuery.noConflict(); out, but with it in it dont work and thats my main feature is there anyway round it, thanks. I have read that if i have to use jquery with other libraries then i have to use jquery in no conflict mode. I understand that and and it works. i use Code: $j = jquery.noconflict() so that $ of jquery does not mix with $ of other libraries Now my question is that i use any jquery plugin , and i include that JS file Code: e,g plugin.jquery.js I am not sure whether i am correct or not i think that plugin is coded by using $ sign not the $j and i think it will conflict with other libraries. So it means i have to chnage the plugin code as well or there is no need to change plugin Can someone correct me if i am wrong Hi all I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product. Here are the links to the java files I am using: <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.lightbox.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/sandstone.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> Here is the actual lightbox link: <a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" > And finally the calculator: <form method="post" action=""> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td> <td width="117" height="30" align="left"> <input name="width" type="text" id="calc-width" size="6" /></td> </tr> <tr align="left"><td height="30" class="meter-calc-text">Length (m)</td> <td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td> </tr> <tr align="left"><td height="40" colspan="2"> <select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;"> <option value="0" selected class="meter-calc-text">Product Select</option> <option value="1" selected class="meter-calc-text">1</option> <option value="2" selected class="meter-calc-text">2</option> </select> <input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" /> </td> </tr> <tr> </tr> </table> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="83" height="30" class="meter-calc-text">You Requi </td> <td width="121" height="30" align="left" class="product-cell-info-table-text"> <input name="meters" type="text" class="small" id="calc-meters" value="" size="5" /> <span class="meter-calc-text">m2</span> </td> </tr> <tr> <td height="30" class="meter-calc-text"> </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 The following code is needed for the prettyphoto javascript popup. It works fine in Firefox and Safari, but not in any version of IE. Can anyone suggest why? <script> jQuery.noConflict(); $(document).ready(function(){ jQuery("a[rel^='prettyPhoto']").prettyPhoto(); }); </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 am trying to make the below jquery code to work, and the second click event does nothing. I understand this probably relates to the document ready section, that I am calling my form in the first click, but I am not sure the way around this. I have seen mention of using unbind, but I am not sure if it would apply in my case? My code is: Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitmessage').click(function(){
$('#messageboard').load('getloadCompose.php', function (){
$.ajax{(url:'getloadMessageBoard.php', sucess:function (result){
$("txtHint").html(result){
$('#submitFirst, #submitSecond').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitFirst){
file = 'insertFirst.php';
Msg = 'Your comment has been registered;
} else if(btn == 'submitSecond'){
file = 'insertSecond.php';
Msg = 'Your report has been registered;
}
var data = $('#messageboard').serialize();
$.post (file,data, function(){
alert(Msg);
$('#messageboard').each (function(){
this.reset();
});
});
return false;
});
});
});
});
});
});
</script>
<body>
<input type="button" name="submitmessage" id="sumitmessage" value="Add Message">
<div id="txtHint"></div>
And then message board is: Code: <form action="" name="messageboard" id="messageboard" method="post"> <input type="text" name="subject" id="subject" value="Subject" /> <br /> <br /> <textarea rows="5" cols="40" name="message" id="message"></textarea> <br /> <br /> <input type="button" name="submitFirst" id="submitSecond" value="Send"> <input type="button" name="subitSecond" id="submitSecond" value="Report"> <br /> </form> This isn't the final form I shall be using, hence some of the names, I stripped back the form to basics to try and get it working in principle (and failed). So what I want to happen is the visitor clicks on the Add Message button (this will be from a list of choices) and then the messageboard form is called - it works up until here - then the visitor fills out the form and decides whether the want to send or report it. It is here that nothing happens, e.g. if the visitor clicks on either the report or send button there is nothing. If I have the form directly in the first page then this all works fine, it is just when I want to have an event calling the form that it doesn't work. As a very small aside, I took this bit of code $("txtHint").html(result){ from a tutorial which originally had the code phrased as $("div").html(result){ . The problem I have is that I have a number of divs with different names, so I tried to identify my div by using it's id "txtHint", the correct page is still being called but it is not being posted inside my div txtHint, the correct way of doing this would be appreciated. Hey guys I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out. This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa http://dev.segolondon.com/wp292/media/ <- Flash content loads versus: http://dev.segolondon.com/wp292/#wp292/media/ If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page. The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this. I read somewhere about using a script block like this: Code: <script>
$(document).ready(
function() {
// Make the swfObject call
}
);
</script>
But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods. Any help would be very gratefully received! Hello all I have been trying in vain for many days to resolve a conflict between javascript libraries. I have read far and wide and still have failed to fix this problem, most likely because my programming skills are just about copy and pasting. My homepage uses jquery horizontal css menubar + a combined mootool and prototype accordian type sliding information box in the middle of the webpage. I find that the highlighter of the css menubar does not work when prototype.js is also loaded on the same page. I have read somewhere that $ should be replaced however I have tried every possible option and none works. I have jquery loading first as it is on my template, with this <script type='text/javascript' src='../Web/Templates/jquery-1.3.2.js'></script> <script type='text/javascript' src='js/example.js'></script> And my mootool and prototype loades further below like this <script type="text/javascript" src="scripts/intro/prototype.lite.js"></script> <script type="text/javascript" src="scripts/intro/moo.fx.js"></script> <script type="text/javascript" src="scripts/intro/moo.fx.pack.js"></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('box'); var toggles = document.getElementsByClassName('tab'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: false, height: true, duration: 600} ); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } </script> Could someone please offer me further assistance and enlighten me what other information you require to assist me further. I have attached the example.js inside example.zip file if someone could kindly edit it for myself. Looking forward to your assistance. Sincerely, Lex 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 Good day all: I'm wondering if the cancellation of one of my onclick js function in the below code is as a result of having multiple onclick function. here is the code: Code: <FORM NAME="SubCategory" method=post action='accountingsearch2.php' rel="nofollow" target='_top'> <p align="left"> <div id="presetlabel">Or use Preset Periods-->></div> <div id="SubCategory"> <SELECT NAME="specifiedperiod" style="display:inline";> <OPTION>Select a Time Period <OPTION>Today <OPTION>Current Week <OPTION>Current Month <OPTION>Current Quarter <OPTION>Past Quarter <OPTION>Current Year <OPTION>Previous Year </SELECT> </div> <div id="proceed2"><input type='submit' value='Proceed!' onclick='return ValidateSubCategory();'></div><!--the validation does not work with onsubmit--> </FORM> <form name="SubCategory2" method=post action='accountingsearch.php' rel="nofollow" target='_top'> <div id="callabel"><label for="theDate">From today thru</label></div> <div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"></div> <div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";></div> <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";--> <!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>--> <div id="proceed"><input type='submit' value='Proceed!'><!--onclick='return ValidateSubCategory();'--> </div> </p> </FORM> If such is the case, how can I address this problem? Currently, the first onclick function Code: onclick='return ValidateSubCategory();' works fine. The problem is with the second Code: onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline"; Any assistance is greatly appreciated! Mossa I am having trouble with a plugin not working, so I contacted the creator, and they said the below. I have no idea how to do what they want. Can anyone help me out? "Hi The Billboard Family, We just took a look at your output. It looks like you have jquery loading 3 times, which is not good. This will cause most all jQuery plugins/code to break if you load the jquery library more than once. It looks like you have it loading with your "Enhanced Search Box" and then again at the end of your head just before your "Cycle.All" script. Please be sure that the PHP method wp_head() is that LAST piece of code running before your close head tag in your header.php file as well as wp_footer() being the LAST piece of code running before your close body tag in your footer.php file. I would also recommend running WordPress' wp_enqueu_scripts() method, detailed here by Jamie: http://getsatisfaction.com/slidedeck/... Once you get those changes made and jQuery running only once please let us know if you are still having problems. Cheers! " MY SITE: http://billboardfamily.com/?page_id=4 Currently, this is my code: PHP Code: function createRow(){ $.post("php/qaRowEntry.php", { }, function(data){ $("#qaresultrowentry").text(data); test(); }); } It grabs visible data and $_SESSION data, that I know of it. However, I need to be able to retrieve or create variables based on the response. It would look like this: I run a code similar to the one above, and when I get the php script's response, javascript now has 3 filled variables that I can use. Is it possible? I saw one suggestion of setting async to false, but that it can cause the browser to hang. That's not an acceptable reaction. Thanks for your suggestions! You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road. The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box. Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated. form page Code: $('#countryid').change(function() {
var countryid = $("select#countryid").val();
var dataString = 'countryid='+ countryid;
$.ajax({
type: "POST",
url: "processes/booking.php",
data: dataString,
success: function() {
}
});
});
<div class="field required">
<label for="countryid">Country</label>
<select class="dropdown" name="countryid" id="countryid" title="Country">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, countryname FROM countries';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) )
{
print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="arena">Arenas</label>
<select class="dropdown" name="arenas" id="arenas" title="Arenas">
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
php process page PHP Code: $countryid = (int)$_GET['countryid']; $query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'"; $result = mysqli_query ($dbc, $query); while ($row = mysqli_fetch_array($dbc, $result)) { echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n'; } I've got this script for string replacement that searches for a string, decides if it is inside of an "a" or "img" tag, and then replaces it with a new string. Unfortunately, I need it to read multiple inputs and outputs and then replace them. Here's the code: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var newString='<a href="#">New String</a>';
var oldString="Old String";
var rex= new RegExp(oldString,"gim");
function replaceString(elem){
$(elem).contents().filter(function() {
if($(this).get(0).tagName!="A" && $(this).get(0).tagName!="IMG"){
if(this.nodeType==3){
this.nodeValue=this.nodeValue.replace(rex,'##temp##');
}else{
replaceString(this);
}
}
});
}
$(document).ready(function(e) {
replaceString('div#textarea');
$('div#textarea').html($('div#textarea').html().replace(/##temp##/gim,newString));
});
</script>
The script currently replaces "Old String" with "New String". Can we make it replace "Old String #1" with "New String #1" as well as "Old String #2" with "New String #2"? Thank you all for any assistance you can give! I currently have this on my companies website and it's having a bit of trouble sometimes where it will only work after a refresh. Is it possible to do a refresh of this div and script as soon as the site loads, instead of using the auto refresh. I tried using auto refresh and it works but whatever time interval I put for the auto refresh is the time that the script pops up, so it kind of just makes it worst. Code: <script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "lubellrosen",
numTweets: 4,
loaderText: "Loading Events...",
slideIn: true,
slideDuration: 750,
showHeading: false,
headingText: "Latest Tweets",
showProfileLink: false,
showTimestamp: false
});
});
</script>
Friends, i have a problem... I hope all pf you can solve my problem... It's all about Mega Menu JQuery. I already download the script in this javascriptkit.com And the problem is... I can't set the alignment of mega menu drop down because in this script to set the left alignment is using var menu left where this script is using calculation of windows width and mega menu size. in the example on javacriptkit.com using only one menu, how if in this case there is more than one menu? for example i already upload the picture to describe the problem. Picture 1 is i have put mega menu script and it's look good and fine. And then in the second menu where is the porblem begin. Picture 2 mega menu sliding on the left If i put the script in the third and more menu, the mega menu drop down sliding more left. It should be center. I' already found the problem script in .js but i'm still find the solutions... Pleas help me... my project is www.restomart.com ( already online ) and i want make a mega menu like www.surlatable.com ( online ) Pleas once again.HELP me .... Thanks so much... nevermind i figured it out myself
Hello guys, I need some help. I am very noob in Jquery and Mootools .. and they were getting conflicted on one page. I tried every tutorial available online but I couldn't get my jquery slideshow and mootools menu to work together. Not even by the jquery no conflict command. Code: window.addEvent('domready', function(){
//-vertical
var mySlide = new Fx.Slide('v.menu-4');
mySlide.hide();
$('toggle-4').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
This script is for vertical menus and written for mootools 1.11 Can anybody help me out? |
|||||||