Ok so I just figured out all this jquery/javascript shenanigans but now I have a slight issue, when I put this into the template to embed my script...
<script type="text/javascript" src="images/tech/jquery.js"></script>
The collapsing of the tables won't work whenever I embed that script.
Help please ^_^
After that put in another script tag with jQuery.noConflict(); in it.
<script type="text/javascript">
jQuery.noConflict();
</script>
Ok that works but the jquery won't work with it, heres the template status right now:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1400"></script>
<script type="text/javascript" src="images/tech/motionpack.js"></script>
<script type="text/javascript" src="images/tech/bgmod.js"></script>
{$stylesheets}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<script type="text/javascript" src="images/tech/jquery.js"></script>
<script>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).animate({"opacity": "0"}, "");
},
function() {
$(this).animate({"opacity": "1"}, "");
});
$("img.c").hover(
function() {
$(this).animate({"opacity": "0"}, "");
},
function() {
$(this).animate({"opacity": "1"}, "");
});
$("img.e").hover(
function() {
$(this).animate({"opacity": "0"}, "");
},
function() {
$(this).animate({"opacity": "1"}, "");
});
$("img.g").hover(
function() {
$(this).animate({"opacity": "0"}, "");
},
function() {
$(this).animate({"opacity": "1"}, "");
});
$("img.logo").hover(
function() {
$(this).animate({"opacity": "0"}, "");
},
function() {
$(this).animate({"opacity": "1"}, "");
});
});
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
Oh, I thought you were only including a file. Just put the jQuery.nConflict(); right before "$(document).ready(function(){". Also, you have to change the dollar signs in your script tag to jQuery. So it would be
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
}, ...and so on
ok so I did what you said and the collapse still won't work,
Heres the script in the template:
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
$(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
},
function() {
jQuery(this).animate({"opacity": "1"}, "");
});
jQuery("img.c").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
},
function() {
jQuery(this).animate({"opacity": "1"}, "");
});
jQuery("img.e").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
},
function() {
jQuery(this).animate({"opacity": "1"}, "");
});
jQuery("img.g").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
},
function() {
jQuery(this).animate({"opacity": "1"}, "");
});
jQuery("img.logo").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "");
},
function() {
jQuery(this).animate({"opacity": "1"}, "");
});
});
</script>
Take out the "$document.ready(function(){" and one of the "});"
If you want to use your jQuery javascript without modifying all "$" for "jQuery", then you could simply use this before displaying your page :
$headerinclude = '<script type="text/javascript" src="'.$mybb->settings['bburl'].'/images/tech/jquery.js"></script>'."\n".$headerinclude;
Your conflicts are because the "prototype.js" is loaded before your "jQuery.js".
(2010-03-07, 05:59 PM)exdiogene Wrote: [ -> ]If you want to use your jQuery javascript without modifying all "$" for "jQuery", then you could simply use this before displaying your page :
$headerinclude = '<script type="text/javascript" src="'.$mybb->settings['bburl'].'/images/tech/jquery.js"></script>'."\n".$headerinclude;
Your conflicts are because the "prototype.js" is loaded before your "jQuery.js".
So where would I place this piece of code?
If you use PHP to output your own page use the code i have given you.
If you use your own template then put this :
<script type="text/javascript" src="{$mybb->settings['bburl']}/images/tech/jquery.js"></script>
before this if you use the $headerinclude variable :
{$headerinclude}
or before this if you include yourself all your javascript files :
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>