MyBB Community Forums

Full Version: Using JQuery on Mybb
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I have read over lots of the posts about it and tried it but it keeps removing my editor when I add it into headerinclude. Here is my script

MouseX = 0;
MouseY = 0;

function getPageEventCoords(evt) {
	var coords = {left:0, top:0};
	if (evt.pageX) {
		coords.left = evt.pageX;
		coords.top = evt.pageY;
	} else if (evt.clientX) {
		coords.left =
		evt.clientX + document.body.scrollLeft - document.body.clientLeft;
		coords.top =
		evt.clientY + document.body.scrollTop - document.body.clientTop;
		// include html element space, if applicable
		if (document.body.parentElement && document.body.parentElement.clientLeft) {
			var bodParent = document.body.parentElement;
			coords.left += bodParent.scrollLeft - bodParent.clientLeft;
			coords.top += bodParent.scrollTop - bodParent.clientTop;
		}
	}

	MouseX = coords.left;
	MouseY = coords.top;

	return coords;
}


function CreateFloatingDiv( x, y, id )
{
	var Exists = $( '#'+id );
	if ( Exists[0] )
	{
		Exists[0].style.left = x + 'px';
		Exists[0].style.top = y + 'px';
		Exists[0].style.display = 'none';
		Exists.show( 'fast' );
		return;
	}

	var div = document.createElement( 'div' );
	div.style.left = x + 'px';
	div.style.top = y + 'px';
	div.style.position = "absolute";
	div.style.background = "#FFF";
	div.style.border = "1px solid #777";
	div.style.padding = '5px';
	div.style.color = '#555';
	div.style.fontSize = '11px';
	div.style.display = 'none';
	div.className = "top";
	div.id = id;

	document.body.appendChild( div );

	$( div ).show( 'fast' );

	return div;
}

function OpenEvent( $data, $id )
{
	var div = CreateFloatingDiv( MouseX, MouseY, 'Event_'+$id );
	if (!div) return false;

	div.innerHTML += 'Fetching..';
	$(div).click( function(){ $(div).hide(); } );

	$( div ).show( 'fast' );

	$.get( '/index.php', 'aj=1&' + $data, function( d ) { div.innerHTML = d; }, "html" );
	return false;
}


function CloseThis( pChild, reason )
{
	if ( $( pChild ).hasClass("top") )
	{
		if ( reason )
		{
			pChild.innerHTML = reason;
			$(pChild).fadeOut( 3000 );
		}
		else
		{
			$( pChild ).hide();
		}

		return false;
	}

	return CloseThis( pChild.parentNode, reason );
}

function OpenURLInBox( $name, $url )
{
	var div = CreateFloatingDiv( MouseX, MouseY, $name );
	if (!div) return false;

	div.innerHTML += 'Fetching..';
	//$(div).click( function(){ $(div).hide(); } );

	$( div ).show("normal");

	$.get( $url, '', function( d ) { div.innerHTML = d; }, "html" );
	return false;
}

What do I need to do to it so it wont mess up prototype or do i need to put something less in headerinclude? Please let me now asap.

Thanks
What are you trying to achieve with JQuery on your forum?
<script type="text/javascript">
jQuery.noConflict();
</code>

http://api.jquery.com/jQuery.noConflict/
I have tried that I dont think Im doing it right. I put it at the top of the script. Can you please explain what im missing?

This is my headerinclude:
<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=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript" src="/js/js.js"></script>
<body onmousemove="getPageEventCoords(event)" onload="$onload"></body>
{$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>
<script type="text/javascript" src="jscripts/thx.js"></script>{$newpmmsg}
{$sb_refresh}

Where should I add the script you posted?
I haven't understood it too.
where to put the code?
after...
<script type="text/javascript" src="/js/jquery.js"></script>
Worked well for me.
Try puttingy your code inside this:

jQuery.noConflict();
jQuery(function($) {

});

Always works for me Toungue