MyBB Community Forums

Full Version: Conflicting jQuery
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I have some conflicting scripts in my headerinclude. It seems to fix one problem, another item/function breaks. Currently with this script I have working collapsable tables, multi quote and a lava lamp menu.

My login button is supposed to bring up a modal login box but it no longer does. Plus the lava lamp menu seems to freeze when the page loads and will slide to forums (the current page) when you mouse over the menu.

Here is my code: (feel free to PM or reply for more info, thanks)

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

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="jscripts/pngfix.js"></script>
<![endif]-->
{$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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
 <script type="text/javascript" src="http://therealsocom.com/revamp/lavalamp/js/jquery.lavalamp.min.js"></script>
 <script type="text/javascript" src="http://therealsocom.com/revamp/lavalamp/js/jquery.easing.min.js"></script>

<script type="text/javascript">
jQuery(function() { 

  jQuery(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })

 }); 

 </script>



<script type="text/javascript">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <[email protected]>
 * @version 1.0.0
 */

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
  

   // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);         
    
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000); 
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script>

<script type="text/javascript">
var expandables = {
	init: function()
	{
		expanders = $$('img.expander');
		if(expanders.length > 0)
		{
			expanders.each(function(expander) {
				if(!expander.id)
				{
					return;
				}

				Event.observe(expander, "click", this.expandCollapse.bindAsEventListener(this));

				if(MyBB.browser == "ie")
				{
					expander.style.cursor = "hand";
				}
				else
				{
					expander.style.cursor = "pointer";
				}

				expander.controls = expander.id.replace("_img", "");
				var row = $(expander.controls);

				if(row)
				{
					Event.observe(row, "dblclick", this.expandCollapse.bindAsEventListener(this));
					row.controls = expander.id.replace("_img", "");
				}
			}.bind(this));
		}
	},

	expandCollapse: function(e)
	{
		element = Event.element(e)
		if(!element || !element.controls)
		{
			return false;
		}
		var expandedItem = $(element.controls+"_e");
		var collapsedItem = $(element.controls+"_c");

		if(expandedItem && collapsedItem)
		{
			if(expandedItem.style.display == "none")
			{
				expandedItem.show();
				collapsedItem.hide();
				this.saveCollapsed(element.controls);
			}
			else
			{
				expandedItem.hide();
				collapsedItem.show();
				this.saveCollapsed(element.controls, 1);
			}
		}
		else if(expandedItem && !collapsedItem)
		{
			if(expandedItem.style.display == "none")
			{
				expandedItem.show();
				element.src = element.src.replace("collapse_collapsed.gif", "collapse.gif");
				element.alt = "[-]";
				element.title = "[-]";
				this.saveCollapsed(element.controls);
			}
			else
			{
				expandedItem.hide();
				element.src = element.src.replace("collapse.gif", "collapse_collapsed.gif");
				element.alt = "[+]";
				element.title = "[+]";
				this.saveCollapsed(element.controls, 1);
			}
		}
		return true;
	},

	saveCollapsed: function(id, add)
	{
		var saved = new Array();
		var newCollapsed = new Array();
		var collapsed = Cookie.get("collapsed");

		if(collapsed)
		{
			saved = collapsed.split("|");
			saved.each(function(item) {
				if(item != id && item != "")
				{
					newCollapsed[newCollapsed.length] = item;
				}
			});
		}

		if(add == 1)
		{
			newCollapsed[newCollapsed.length] = id;
		}
		Cookie.set("collapsed", newCollapsed.join("|"));
	}
};
</script>
<script src="http://therealsocom.com/revamp/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://therealsocom.com/revamp/js/Bebas_Neue_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace ('.lavaLamp', { hover: { color: '#fff', textShadow: '1px 1px #000' }, color: '#eeeeee', textShadow: '1px 1px #000' });
</script>

http://therealsocom.com/retest/forums

I am new to javascript/jQuery... I tried to fix this on my own but figured someone might know a solution. Plus I don't want to break any code right now.
In the above code, find;
<script type="text/javascript">
jQuery(function() { 

  jQuery(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })

 }); 

 </script>
and Change it into;
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() { 

  jQuery(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })

 }); 

 </script>
It didn't work to fix the login and it actually disabled the collapsable boxes. Then when I took out the the noConflict call after the first jQuery script it fixed the collapsable boxes but I still had the weird freezing issue on the menu and the login box doesn't work.