MyBB Community Forums

Full Version: Internet Explorer Javascript Issue
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I have a minor issue with my test site that I'm trying to get resolved before launching it. This error only exists in Internet Explorer. The issue can't be replicated in other browsers (or at least not in Firefox, Chrome, or Opera).

The problem involves the edit button. In IE, when I click to edit a post, the dropdown menu shows up (quick edit or full edit), but you're quickly navigated to full edit mode almost instantly without the chance to select quick edit. So the basic javascript is working, but not working properly. This also happens in a couple other areas (such as the dropdown menu for user profile stuff). I would assume there's some kind of conflict in the javascripts (though only in IE), but I'm not sure where the conflict is or how to fix it.

Hopefully someone can catch the problem and provide a solution. I'm using a modified version of the reksio theme. My header include (where I assume the issue will be) is as follows:

<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=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/protoaculous.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/global.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
	document.write(unescape("%3Cscript src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
	var unreadAlerts = {$mybb->user['unreadAlerts']};
</script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/myalerts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

<script type="text/javascript">
	var unreadAlerts = {$mybb->user['unreadAlerts']};
</script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/myalerts.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}
{$highslide_script}
dont use Protaculous, use prototype and scriptaculous.

Additionally, you are loading myalerts.js twice and you have no jQuery no conflict defined (that I can see).
Whoops, didn't notice the double MyAlerts. Thanks for pointing that out.

As for the protaculous, I heard it wasn't a good javascript to use but figured that would be the only way to get the user panel dropdown menu to work. But I removed the file and everything is still working fine. And the problem was completely resolved as a result. So thank you!

Edit: Spoke too soon. The original problem is fixed and the dropdown menu for profile stuff still works. But the login dropdown menu doesn't work now. It just auto-directs to the login page instead of dropping down the username/password box.
Yes, probably because it was using Protaculous code. You are already loading jQuery - why not just use jQuery for the drop down?

This is the first one I found on Google

http://www.red-team-design.com/simple-an...-login-box
Yeah, that's what I'd like to do for the cleanest solution. I'm just not at all good when it comes to the javascript/jquery stuff so unsure how to proceed Blush

This is my current login_welcomeblock_guest code:

<ul>
	<li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="ShowMenu(this, 'menu_dropdown', 'bottom');return false">{$lang->welcome_login} <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/arrow_down.gif" alt="" /></a></li>
	<li><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></li>
</ul>

<div class="panel_links">
	{$lang->welcome_guest}
</div>
<div style="position: absolute; z-index: 500; top: 0px; display: none;" id="menu_dropdown">
<div style="padding: 5px; overflow: hidden; position: relative; top: 10px; background: #CCCCCC url({$mybb->settings['bburl']}/{$theme['imgdir']}/panel.png) top repeat-x; border: 1px solid #A19988;">
	<form action="member.php" method="post">
		<p><span class="title">{$lang->username}</span> <input type="text" class="textbox" name="username" size="25" maxlength="30" style="width: 200px;" value="" /></p>
		<p><span class="title">{$lang->password}</span> <input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="" /></p><p><span class="title">{$lang->remember_me}</span> <input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /></p>
		<p class="float_left"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/password.png" alt="Lost PW" /> {$lang->lost_password}</a></p>
		<p class="float_right"><input type="submit" class="button" name="submit" value="Login" /></p>
			<input type="hidden" name="action" value="do_login" />
			<input type="hidden" id="urlredir" name="url" value="" />
	</form>
</div>
<script type="text/javascript">
document.getElementById("urlredir").value = location.href;
</script>
</div>
Hmm, you could probably just replace that line, lets try this:

<ul>
    <li><a href="{$mybb->settings['bburl']}/member.php?action=login" javascript:; onclick="Effect.toggle('menu_dropdown', 'slide');return false">{$lang->welcome_login} <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/arrow_down.gif" alt="" /></a></li>
    <li><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></li>
</ul>

<div class="panel_links">
    {$lang->welcome_guest}
</div>
<div style="position: absolute; z-index: 500; top: 0px; display: none;" id="menu_dropdown">
<div style="padding: 5px; overflow: hidden; position: relative; top: 10px; background: #CCCCCC url({$mybb->settings['bburl']}/{$theme['imgdir']}/panel.png) top repeat-x; border: 1px solid #A19988;">
    <form action="member.php" method="post">
        <p><span class="title">{$lang->username}</span> <input type="text" class="textbox" name="username" size="25" maxlength="30" style="width: 200px;" value="" /></p>
        <p><span class="title">{$lang->password}</span> <input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="" /></p><p><span class="title">{$lang->remember_me}</span> <input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /></p>
        <p class="float_left"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/password.png" alt="Lost PW" /> {$lang->lost_password}</a></p>
        <p class="float_right"><input type="submit" class="button" name="submit" value="Login" /></p>
            <input type="hidden" name="action" value="do_login" />
            <input type="hidden" id="urlredir" name="url" value="" />
    </form>
</div>
<script type="text/javascript">
document.getElementById("urlredir").value = location.href;
</script>
</div> 
Nope, no luck on that code Sad . Login menu still functions as a redirect.
arg of course - but why? You click the toggle and then you login - right?


<ul>
     <li><a href="javascript:;" onclick="Element.toggle('menu_dropdown');return false;>{$lang->welcome_login} <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/arrow_down.gif" alt="" /></a></li>
     <li><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></li>
 </ul>

Try swapping it with that
No luck there either. It actually made the login link vanish entirely. I swapped it out with this code (just adding the link back in) and it /kinda/ worked. The box dropped down and was functional. It just couldn't be closed without a refresh and it was positioned somewhat badly (hiding the login link to prevent being able to close the box back up). The original protaculous.js allowed the login box to be closed by simply clicking anywhere. Ideally, I'd like to replicate this again, though it's not really a necessity I suppose.

<ul>
     <li><a href="{$mybb->settings['bburl']}/member.php?action=login;" "javascript:;" onclick="Element.toggle('menu_dropdown');return false;">{$lang->welcome_login} <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/arrow_down.gif" alt="" /></a></li>
     <li><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></li>
</ul>

Here's a link to my test site if it helps any: http://ffxiv-roleplayers.com/testsite/index.php
well, I use a very similar code to that on a couple of my sites - Its just a click and opens a hidden div. Its a toggle - so you click it on and then off. What did it use to do?
Pages: 1 2