[Discussion] Tabbed Block by Mouse Over

[Freddy]

Hmm, you could attach your load.php and I can take a look at it.

[IchBin]

Load.php is likely not the error. Disabling eval will probably show you the true error.
If you're using SMF1.x you'll need to run this query on your database.

REPLACE INTO smf_settings VALUES ('disableTemplateEval', 1);

When you are done just change the 1 to a 0 and run the query again. After you've run the query the first time the error filename and number should change.

[Freddy]

Ah thanks IchBin, yes like he said 

[shuban]

Load.php is likely not the error. Disabling eval will probably show you the true error.
If you're using SMF1.x you'll need to run this query on your database.

REPLACE INTO smf_settings VALUES ('disableTemplateEval', 1);

When you are done just change the 1 to a 0 and run the query again. After you've run the query the first time the error filename and number should change.

Don't mean to sound like a newbie, but how do I run this query? What do I do? I'm confused.

[Freddy]

How to Enable/Disable eval()

[shuban]

Is it possible to use the tab block mod without using the mouseoverTabContent.php file?

For instance, I want to use the block, but I want to create my own tabs. How would I do this?

Here is the code

Code Select Expand

// Set which categories you want to pull recent articles from.  Comma separated ! 

$categories = '1,2,3,4';

/* ######### CSS for top level tabs ######### */

echo '
<style type="text/css"><!--
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0px 0px -1px 0px;
padding: 0;
list-style-type: none;
}

.tabsmenuclass li{
float: left;
}

.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #ddd;
color: #888888;
margin-right: 5px;
text-decoration: none;
font: bold 13px Arial;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #e8e8e8;
color: black;
text-decoration:none !important;
border-top: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 0px;
border-left: 1px solid silver;
}';

/* ######### CSS for sub menu container below ######### */
/* height 224px could also be 'auto' or whatever you like size-wise */

echo '
.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 99%;
height:auto;
overflow:auto;
padding: 0px;
border: 1px solid silver;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
--></style>

<script src="tabbed_block/mouseovertabs.js" type="text/javascript">
/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="#" rel="gotsubmenu[selected]">Recently Updated Topics</a></li>
<li><a href="#" rel="gotsubmenu">Unanswered Questions</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent.php?categories=' , $categories , '" style="visibility:hidden">Sub Menu contents</a>
</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
</script>
';

[Freddy]

There's an example in this thread on how to make your own tabs :

http://www.tinyportal.net/index.php?topic=30787.msg247669#msg247669

[shuban]

I don't understand why I can't incorportate ssi_functions in this code:

Code Select Expand

// Set which categories you want to pull recent articles from.  Comma separated ! 

$categories = '1,2,3,4';

/* ######### CSS for top level tabs ######### */

echo '
<style type="text/css"><!--
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0px 0px -1px 0px;
padding: 0;
list-style-type: none;
}

.tabsmenuclass li{
float: left;
}

.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #ddd;
color: #888888;
margin-right: 5px;
text-decoration: none;
font: bold 13px Arial;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #e8e8e8;
color: black;
text-decoration:none !important;
border-top: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 0px;
border-left: 1px solid silver;
}';

/* ######### CSS for sub menu container below ######### */
/* height 224px could also be 'auto' or whatever you like size-wise */

echo '
.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 99%;
height: 224px;
overflow:auto;
padding: 0px;
border: 1px solid silver;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
--></style>

<script src="tabbed_block/mouseovertabs.js" type="text/javascript">
/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="#" rel="gotsubmenu[selected]">Unanswered Questions/Topics</a></li>
<li><a href="#" rel="gotsubmenu">Latest Topics</a></li>
<li><a href="#" rel="gotsubmenu">News Articles</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent.php?categories=' , $categories , '" style="visibility:hidden">Sub Menu contents</a>
</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
</script>
';

Without calling the file mouseoverTabContent.php. In other words, I just want to put my ssi functions inside this code which you put in the tiny portal thing.

[Freddy]

Because that was the way it was designed to work.  It was something to do with the javascript code I adapted - it required an external file.

If you want to rewrite it then this is the original javascript :

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

[shuban]

Hi again,

I worked on this really hard and I finally got to where I want it. Check it out:

http://biology-forums.com/index.php?topic=3100

However, I have some issues with the tables. I would really like to have a column for the icon, replies, views, and date posted, like I have it on here:

http://biology-forums.com/index.php

Here is the code I'm using, any help would be kindly appreciated.

Code Select Expand

echo'
<ul id="countrytabs" class="shadetabs">
<li>
<a href="#" rel="country1" class="selected">Unanswered Questions - Be The First To Respond!</a></li>
<li><a href="#" rel="country2">
Latest Articles</a></li>

<li><a href="#" rel="country3">
Recently Updated Topics</a></li>

</ul>


<div style="border:1px solid gray; width:auto; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">';

{
global $scripturl, $settings, $context, $txt; $exclude_boards;

$what = ssi_unansweredTopics('5', $exclude_boards = array(2, 15, 16, 17, 21, 22, 29), 'array');

echo '
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="catbg3">
<td valign="middle"><b>Topic</b></td>
<td valign="middle"><b>Board</b></td>
<td valign="middle"><b>Author</b></td>
<td valign="middle"></td>
</tr>';

foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg2" valign="middle">', $topic['link'];

// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

echo '
</td>
<td class="windowbg2" valign="middle">', $topic['board']['link'], '</td>
<td class="windowbg2" valign="middle">', $topic['poster']['link'], '</td>
<td class="windowbg" valign="middle">';

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" border="0" style="float: right;" /></a>';
}

echo '
</td>
</tr>
</table>';
}

echo '

</div>

<div id="country2" class="tabcontent">';

{
global $scripturl, $settings, $context, $txt; $exclude_boards;

$what = ssi_unansweredTopics('5', $exclude_boards = array(3, 4, 5, 6, 7, 8, 9, 10, 11, 33, 34, 35, 12, 13, 14, 24, 25, 23, 21, 22, 29, 15, 16, 17, 20), 'array');

echo '
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="catbg3">
<td valign="middle"><b>Topic</b></td>
<td valign="middle"><b>Board</b></td>
<td valign="middle"><b>Author</b></td>
<td valign="middle"></td>
</tr>';

foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg2" valign="middle">', $topic['link'];

// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

echo '
</td>
<td class="windowbg2" valign="middle">', $topic['board']['link'], '</td>
<td class="windowbg2" valign="middle">', $topic['poster']['link'], '</td>
<td class="windowbg" valign="middle">';

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" border="0" style="float: right;" /></a>';
}

echo '
</td>
</tr>
</table>';
}

echo '
</div>';

echo '

<div id="country3" class="tabcontent">';

{
global $scripturl, $settings, $context, $txt; $exclude_boards;

$what = ssi_recentTopics('5', NULL, 'array');

echo '
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="catbg3">
<td valign="middle"><b>Topic</b></td>
<td valign="middle"><b>Board</b></td>
<td valign="middle"><b>Author</b></td>
<td valign="middle"></td>
</tr>';

foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg2" valign="middle">', $topic['link'];

// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

echo '
</td>
<td class="windowbg2" valign="middle">', $topic['board']['link'], '</td>
<td class="windowbg2" valign="middle">', $topic['poster']['link'], '</td>
<td class="windowbg" valign="middle">';

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" border="0" style="float: right;" /></a>';
}

echo '
</td>
</tr>
</table>';
}

echo '
</div>';

echo ' <div>

                                                 <script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
</div>';