Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with jQuery.noConflict()

D

dalcorn1

macrumors regular
Original poster
Jul 10, 2008
171
23
I'm pulling my hair out with this. I'm trying to get a lightbox working on my website alongside a jQuery tooltip, however when the tooltip is running the lightbox no long works and just links to a new page of one image. If I remove the attached tool.js (the file that controls the tool tip) the lightbox works again but the tool tip obviously doesn't.

I presume this is a jQuery conflict and have been looking up how to resolve it, finding a variety of different solutions, but no proper explanation how to implement them.

<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>
Click to expand...

I just have no idea what to do with that. I've tried putting div ids in place of the "div" and "someid" reference points and all that did was hide the content completely.

This an example of the page I want to implement it on:

http://testing.danielalcorn.com/projects/worldcup.php

The tool tip resides in a php.include on the right hand side, the code of which is this:

<script src="../js/tool.js"></script>

<script type="text/javascript">
//Tab Selected
function show_content(id) {
//Hide Content
hide_content();

//Change Tab
change_tab(id);

//Strip Id
var new_id = id.replace('tab_', "");
document.getElementById(new_id).style.display = "block";

}

function hide_content() {
//Hide Others
var content_div = document.getElementById('content_area');
var content_inner = content_div.getElementsByTagName('DIV');
var other_div = content_inner.length;

for (var i=0;i < other_div; i++) {
content_inner.style.display = "none";
}
}

function change_tab(id) {
//Change Others
var tab_div = document.getElementById('tab_bar');
var tab_inner = tab_div.getElementsByTagName('DIV');
var other_tab = tab_inner.length;

for (var i=0; i < other_tab; i++) {
tab_inner.className = "tab_button";
}

//Last Tab Change
document.getElementById(id).className = "tab_button tab_button_sel";
}

</script>
<body onload="show_content('tab_one');">
<div id="article">
<div class="tab_area">

<div class="content_area" id="content_area">
<div class="tab_content" id="one"><li><a href="http://www.danielalcorn.com/projects/worldcup.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" title="<center>World Cup 2018</center>" /></a></li>
<li><a href="http://www.danielalcorn.com/projects/wildwings.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wwthumb.jpg" title="<center>Wild Wings Chicken</center>" /></a></li>
<li><a href="http://www.danielalcorn.com/projects/inkgarden.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" title="test2" /></a></li>
<li><a href="http://www.danielalcorn.com/projects/corporateid.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" /></a></li></div>
<div class="tab_content" id="two"> <li><a href="http://www.danielalcorn.com/projects/viva.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" /></a></li>
<li><a href="http://www.danielalcorn.com/projects/smallprojects.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" /></a></li>
<li><a href="http://www.danielalcorn.com/projects/photography.php"><img src="http://testing.danielalcorn.com/projects/thumbs/wcthumb.jpg" /></a></li>

</div></div>

<div class="tab_bar" id="tab_bar">
<div class="tab_button" id="tab_one" onclick="show_content(this.id);">1</div>
<div class="tab_button" id="tab_two" onclick="show_content(this.id);">2</div>

</div>
</div>
</div>
<script>



$("#article img[title]").tooltip();
</script>
Click to expand...


Am i looking for the right information or is there a better way to sort the issue than jQuery?

Any help will be greatly appreciated.
 
iphonepiephone said:
As a relative n00b to js and jQuery, may I ask why you use "jQuery" as opposed to "$"?
Click to expand...

It's part of the "noConflict" of jQuery. Other libraries also use $ as a function name (Dojo I believe) so there in lies the conflict. This provides a way of using both libraries on the same page.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back