coding help needed - suckerfish menu and javascript problem in forum

Started by coryvstheworld, September 10, 2008, 11:20:54 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

coryvstheworld

September 10, 2008, 11:20:54 AM Last Edit: September 10, 2008, 02:01:58 PM by coryvstheworld
Hello, I am stilling learning the inner workings of php & smf and could use some help....

I have a new little site, and I am editing my forum's header so that it has my logo and drop down menu.
The menu works fine in IE7 & FF, hxxp:www.idrathergame.net/irg [nonactive]

The menu works in IE 6 on my front page, but it needs this little superfish script to do so... The problem( I think) has been trying to get this script to run in index.template.php.

I would like to have as much IE6 compatibility as I can... So, I want  to put the script below into my index.template.php file. It has been painful trying to get this script to work...


Code Select

<script type="text/javascript">

jQuery(function(){

jQuery('ul.sf-menu').superfish({});
   
});

</script>



If I put that script directly into the <head> then I obviously get an error. I tried (\'ul.sf-menu\') and (&#39;ul.sf-menu&#39;) to escape the single quotes, but then the script doesn't work (I think).


I think I've included all possible js files it could need.

Code Select
<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/superfish.js"></script>

<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/hoverIntent.js"></script>

<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/jquery-1.2.6.min.js"></script>


Heck, here is the entire main section of the template...

Code Select

// The main sub template above the content.
function template_main_above()

{

global $context, $settings, $options, $scripturl, $txt, $modSettings, $boardurl;





echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
       





      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc2" />

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?rc2" media="print" />

<LINK REL="stylesheet" HREF="http://idrathergame.net/irg/Themes/TheDarkness/newlayout.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://www.idrathergame.net/irg/Themes/TheDarkness/css/superfish.css" media="screen">

<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?rc2p"></script>
<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/superfish.js"></script>
<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/hoverIntent.js"></script>
<script language="JavaScript" type="text/javascript" src="http://www.idrathergame.net/irg/Themes/TheDarkness/jquery-1.2.6.min.js"></script>










               

               





<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[

var smf_theme_url = "', $settings['theme_url'], '";

var smf_images_url = "', $settings['images_url'], '";

var smf_scripturl = "', $scripturl, '";

// ]]></script>


<title>IRG :: Bringing Sexy Back</title>';





echo '



<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?rc2" media="print" />';





if ($context['browser']['needs_size_fix'])

echo '

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />';





echo '

<link rel="help" href="', $scripturl, '?action=help" target="_blank" />

<link rel="search" href="' . $scripturl . '?action=search" />

<link rel="contents" href="', $scripturl, '" />';





if (!empty($modSettings['xmlnews_enable']))

echo '

<link rel="alternate" type="application/rss+xml" title="', $context['forum_name'], ' - RSS" href="', $scripturl, '?type=rss;action=.xml" />';



// If we're viewing a topic, these should be the previous and next topics, respectively.

if (!empty($context['current_topic']))

echo '

<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />

<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';



// If we're in a board, or a topic for that matter, the index will be the board's index.

if (!empty($context['current_board']))

echo '

<link rel="index" href="' . $scripturl . '?board=' . $context['current_board'] . '.0" />';





// We'll have to use the cookie to remember the header...

if ($context['user']['is_guest'])

$options['collapse_header'] = !empty($_COOKIE['upshrink']);



// Output any remaining HTML headers. (from mods, maybe?)

echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[

var current_header = ', empty($options['collapse_header']) ? 'false' : 'true', ';



function shrinkHeader(mode)

{';



// Guests don't have theme options!!

if ($context['user']['is_guest'])

echo '

document.cookie = "upshrink=" + (mode ? 1 : 0);';

else

echo '

smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "', $context['session_id'], '");';



echo '

document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");



document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";



current_header = mode;

}

// ]]></script>';



// the routine for the info center upshrink

echo '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[

var current_header_ic = ', empty($options['collapse_header_ic']) ? 'false' : 'true', ';



function shrinkHeaderIC(mode)

{';



if ($context['user']['is_guest'])

echo '

document.cookie = "upshrinkIC=" + (mode ? 1 : 0);';

else

echo '

smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "', $context['session_id'], '");';



echo '

document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");



document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";



current_header_ic = mode;

}

// ]]></script>';



echo '







</head>




<body>


<div id="irgmenu">
      <ul class="sf-menu">
  <li class="current"><a href="http://www.idrathergame.net">irg home</a>
    <ul>
      <li class="current"><a href="/irg">forum home</a></li>
          </ul>
        </li>
  <li><a href="/irg">irg forums</a>
    <ul>
      <li><a href="/irg/">IRG General</a></li>
            <li><a href="/irg/">Server Support</a></li>
            <li><a href="/irg/">News</a></li>
            <li><a href="/irg/">Members</a></li>
            <li><a href="/irg/">Login</a></li>
            <li><a href="/irg/">Register</a></li>
          </ul>
        </li>
        <li><a href="#">game servers</a>
          <ul>
            <li><a href="/servers.html">Game Servers</a></li>
            <li><a href="#">Ventrillo Server</a></li>
            <li><a href="#">Member E-Mail</a></li>
          </ul>
        </li>
        <li><a href="#">support irg</a>
          <ul>
            <li><a href="#">Donate</a></li>
            <li><a href="#">Link to Us</a></li>
            <li><a href="#">Join</a></li>
          </ul>
        </li>
        <li><a href="#">merchandise</a>
          <ul>
            <li><a href="#">irg Shirts</a></li>
            <li><a href="#">irg Hats</a></li>
            <li><a href="#">irg Stuff</a></li>
          </ul>
        </li>
        <li><a href="#">contact us</a>
          <ul>
            <li><a href="#">coryvstheworld</a></li>
            <li><a href="#">teej</a></li>
          </ul>
        </li>
        <li><a href="#">community</a>
        <ul>
        <li><a href="#">Forum</a>
        <li><a href="#">Support</a>
        <li><a href="#">Merch</a>
        <li><a href="#">Join</a>
          </ul>
        </li>
      </ul>
</div>



<div style="background-color: #000000;position: absolute;height: 123px;width: 100%;left: 0px;top: 0px;background-image: url(/navtopsideleft.jpg);background-repeat:repeat;z-index: 5;">
<div style="width:950px; z-index: 10;"><img src="/irglogo.jpg" width="950" height="90" /></div>
<div class="nav" id="nav" style="background-image: url(navtopsideleft.jpg);background-repeat:repeat-y;"> </div>

</div>
<div style="position:absolute; left:25px; top: 200px; width:900px;>

<li class="first">



';
if ($context['allow_admin'])

echo '<li>
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

if ($context['allow_edit_profile'])

echo ' <li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

if ($context['user']['is_logged'])

echo ' <li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

if ($context['user']['is_guest'])

echo ' <li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>

<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>

<li><a href="', $scripturl, '?action=reminder">' , $txt[315] , '</a></li>

<li><a href="', $scripturl, '?action=help"><span class="left"></span>' , $txt[119] , '<span class="right"></span></a></li>

<li><a href="', $scripturl, '?action=search"><span class="left"></span>' , $txt[182] , '<span class="right"></span></a></li>';

if ($context['allow_calendar'])

echo '  <li><a href="', $scripturl, '?action=calendar"><span class="left"></span>', $txt['calendar24'] ,'<span class="right"></span></a></li>';

if ($context['allow_memberlist'])

echo ' <li><a href="', $scripturl, '?action=mlist"><span class="left"></span>' , $txt[331] , '<span class="right"></span></a></li>';

if ($context['user']['is_logged'] && $context['allow_pm'])

echo ' <li><a href="', $scripturl, '?action=pm"><span class="left"></span>' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '<span class="right"></span></a></li></div>';

echo '

</ul>

</div>
';





echo '<div id="mainarea" style="width:800px; position: absolute; left:195px; top:170px; ">';

}


I am fairly desperate at this point, so any help/solutions/suggestions would be extremely appreciated.

Thank you!

Sarge

#2
September 10, 2008, 09:07:43 PM
You don't have to use jQuery (or whatever) to make a lean and mean dropdown menu, using just CSS (and a little bit of JS for IE). And there are improved variants of Suckerfish and its sons...
http://css-class.com/articles/ursidae/

Note that there's a sticky submenus problem with Suckerfish and IE7, a problem which Sons of Ursidae doesn't have.

I have successfully made a dropdown menu based on SoU for the SMF nav menu in the default theme (which isn't exactly the easiest theme to work with when it comes to dropdowns...)

    Please do not PM me with support requests unless I invite you to.

http://www.zeriyt.com/   ~   http://www.galeriashqiptare.net/

Quote
<H> I had zero posts when I started posting
Print
Go Up Pages1
User actions
Advertisement: