Tabbed block information needed?

[GhostRider2110]

Thanks Zar, will try to contact the webmaster.  Will most likely depend on if that code is home grown or part of the dotnetnuke package...   The mini-cp is close, but not quite was I was looking for.  Would like the tabs to be part of the frame and change on hover.... --Mitch

[ZarPrime]

Mitch,

You might have a look on http://www.dynamicdrive.com/ and do a search for tabs.  There are quite a few scripts there for something like this that could be used in an article.  Here's one ...
http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

ZarPrime

[SN]

Hi ZarPrime, I see your site with the Mini Cp and that is similar to what im looking for, but the link you have giving seems to be not working.

so i looked on the other site u gave, and found this: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

But i have no idea how to install on TP. It says thinsg like '' Add this code to the head of your webpage'' im guessing i do not do that with TP

[IchBin]

I don't think it is necessary to add the code to the head. If you just add all the code to your block, it "should" work. Just make sure the link to the javascript file is correct.

[ZarPrime]

Hi ZarPrime, I see your site with the Mini Cp and that is similar to what im looking for, but the link you have giving seems to be not working.

SN,

Yes, that site was for TinyPortalMedia, which is no longer up and running right now.  The only thing I could do is give you the code that I use in the block you are referring to.  Would you like for me to post that code here?

ZarPrime

[SN]

sure could you post it please

[ZarPrime]

SN,

Sure, first off, a "shade.png" and a "shadeactive.png" in the colors of your choice need to be placed in the images folder of your custom theme.  After that, the following code should be placed into a php block.

Code Select Expand


#############Mini User Cp #############################
//////In phpbox within TinyPortal Block using the following code/////////////





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

    $bullet = '<img src="'.$settings['images_url'].'/TPdivider.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$bullet2 = '<img src="'.$settings['images_url'].'/TPdivider2.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$bullet3 = '<img src="'.$settings['images_url'].'/TPdivider3.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$bullet4 = '<img src="'.$settings['images_url'].'/tpgoto.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$bullet5 = '<img src="'.$settings['images_url'].'/tpmodule2.gif" alt="" border="0" style="margin:0 2px 0 0;" />';

echo '
<style type="text/css"><!--
.shadetabs{
padding: 1px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font-size:  11px;
font-weight:600;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
font-weight:600;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
font-weight:600;
padding: 2px 5px;
margin-right: 2px;
border: 0px solid #404040;
background-image: url('.$settings['images_url'].'/shade.png);
background-position: top left;
background-repeat: repeat-x;
}

.shadetabs li a:visited{
font-weight:600;
}

.shadetabs li a:hover{
text-decoration: none;
font-weight:600;
}

.shadetabs li.selected{
position: relative;
top: 1px;
font-weight: bold;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url('.$settings['images_url'].'/shadeactive.png);
background-position: top left;
background-repeat: repeat-x;
font-weight: bold;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
font-weight: bold;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 0px solid gray;

margin-bottom: 0px;
margin-top: 15px;
padding: 0px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}
--></style>
<script language="JavaScript" type="text/javascript">

//** Tab Content script- Ã,© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: Nov 8th, 06

var tabpersistencestorm=1 //enable tab persistence via session only cookies, so selected tab is remembered?

////NO NEED TO EDIT BELOW////////////////////////
var stormtabcontentIDs=new Object()

function stormexpandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i<ullist.length; i++){
ullist[i].className=""  //deselect all tabs
if (typeof stormtabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(stormtabcontentIDs[ulid][i]).style.display="none" //hide all tab contents
}
linkobj.parentNode.className="selected"  //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
svselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}

function stormexpandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel"))
stormexpandcontent(thetab)
}

function svtabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof stormtabcontentIDs[ulid]=="undefined") //if this array doesn\'t exist yet
stormtabcontentIDs[ulid]=new Array()
stormtabcontentIDs[ulid][stormtabcontentIDs[ulid].length]=relattribute
}

function svselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (tabpersistencestorm==1) //if persistence feature turned on
StormsetCookie(ulid, selectedtabid)
}

function stormgetullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i<ullist.length; i++){
if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function storminitializetabcontent(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
if (tabpersistencestorm==0 && StormgetCookie(arguments[i])!="") //clean up cookie if persist=off
StormsetCookie(arguments[i], "")
var clickedontab=StormgetCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
svtabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
stormexpandcontent(this)
return false
}
if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default
stormexpandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=stormgetullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value
stormexpandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
stormexpandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
} //end outer for loop
}


function StormgetCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

function StormsetCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}

// --></script>';

echo '
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">User</a></li>
<li><a href="#" rel="tcontent2">Stats</a></li>';

// do not show if none is availalable
if($context['TPortal']['can_submit_article']==1 || allowedTo(array('tp_dlupload','tp_dlmanager','tp_settings','tp_articles','tp_blocks','tp_linkmanager','tp_teampage','tp_gallery')))
{
echo '<li><a href="#" rel="tcontent3">Tools</a></li>';
        }

echo '
<li><a href="#" rel="tcontent4">Recent</a></li>
<li><a href="#" rel="tcontent5">Search</a></li>
<li><a href="#" rel="tcontent6">Themes</a></li>
</ul>

<div class="tabcontentstyle">

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



echo'
<div class="smalltext">';

if (!empty($context['user']['avatar']) && isset($context['TPortal']['userbox']['avatar']))
echo $context['user']['avatar']['image'] . '<br />';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged']){
echo '<span class="normaltext">', $txt['hello_member'], ' <b>', $context['user']['name'], '</b></span>';
        echo '<br />'.$bullet.'IP: '.$user_info['ip'];
// Only tell them about their messages if they can read their messages!
if ($context['allow_pm']){
echo '<br />'.$bullet.'<a href="', $scripturl, '?action=pm">' .$txt['tp-pm'].' ', $context['user']['messages'], '</a>';
if($context['user']['unread_messages']>0)
echo '<br />'.$bullet.'<a style="font-weight: bold; " href="', $scripturl, '?action=pm">' .$txt['tp-pm2'].' ',$context['user']['unread_messages'] , '</a>';
}
// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '<br />'.$bullet.'<a href="', $scripturl, '?action=viewmembers;sa=browse;type=approve">'.$txt['tp_unapproved_members'].'<b> '. $context['unapproved_members']  . '</b></a>';

if(isset($context['TPortal']['userbox']['unread'])){
echo '<br />'.$bullet.'<a href="', $scripturl, '?action=unread">' .$txt['tp-unread'].'</a>
<br />'.$bullet.'<a href="', $scripturl, '?action=unreadreplies">'.$txt['tp-replies'].'</a>
<br />'.$bullet.'<a href="', $scripturl, '?action=profile;u='.$context['user']['id'].';sa=showPosts">'.$txt['tp-showownposts'].'</a>';
}

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '<br /><b>' .$bullet.$txt['tp_maintenace']. '</b>';
// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']) && isset($context['TPortal']['userbox']['logged'])){
echo '<br />'.$bullet.$txt['tp-loggedintime'] . ' ';

echo '<br />'.$context['user']['total_time_logged_in']['days'] . $txt['tp-acronymdays'];
echo $context['user']['total_time_logged_in']['hours'] . $txt['tp-acronymhours'];
echo $context['user']['total_time_logged_in']['minutes'] .$txt['tp-acronymminutes'];
}
if(isset($context['TPortal']['userbox']['time'])){
echo '<br />'.$bullet. $context['current_time'];
}
}
// Otherwise they're a guest - so politely ask them to register or login.
else{
echo '
', $txt['welcome_guest'], '<br />'.$bullet.'IP LOGGED: '.$user_info['ip'].'<br />
', $context['current_time'], '<br />
<form action="', $scripturl, '?action=login2" method="post" >
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
        <select name="cookielength">
<option value="60">', $txt['smf53'], '</option>
<option value="1440">', $txt['smf47'], '</option>
<option value="10080">', $txt['smf48'], '</option>
<option value="302400">', $txt['smf49'], '</option>
<option value="-1" selected="selected">', $txt['smf50'], '</option>
</select>
        <input type="submit" value="', $txt[34], '" /><br />
        ', $txt['smf52'], '
</form>';
}
echo '</div>

</div>';

echo'<div id="tcontent2" class="tabcontent">

<div class="smalltext" style="font-family: verdana, arial, sans-serif;">';

       if(isset($context['TPortal']['userbox']['stats']))
   // members stats
            echo '
                 <img src="'.$settings['images_url'].'/icons/members.gif" style="margin: 0;" align="bottom" alt="" />
                 <a href="'.$scripturl.'?action=mlist"><b>'.$txt[19].'</b></a>
                 <br />'.$bullet.$txt[488].': ' , isset($modSettings['memberCount']) ? $modSettings['memberCount'] : $modSettings['totalMembers'] , '
                 <br />'.$bullet.$txt['tp-latest']. ': <a href="', $scripturl, '?action=profile;u=', $modSettings['latestMember'], '"><b>', $modSettings['latestRealName'], '</b></a>';
       if(isset($context['TPortal']['userbox']['stats_all']))
   // more stats
            echo '
                  <hr /><img src="'.$settings['images_url'].'/icons/info.gif" style="margin: 0;" align="bottom" alt="" />
                 <a href="'.$scripturl.'?action=stats"><b>'.$txt['tp-stats'].'</b></a>
                 <br />'.$bullet.$txt[489].': '.$modSettings['totalMessages']. '
  <br />'.$bullet. $txt[490].': '.$modSettings['totalTopics']. '
  <br />'.$bullet.$txt['tp-mostonline-today'].': '.$modSettings['mostOnlineToday'].'
  <br />'.$bullet.$txt['tp-mostonline'].': '.$modSettings['mostOnline'].'<br />
  ('.timeformat($modSettings['mostDate']).')
  ';

       if(isset($context['TPortal']['userbox']['online'])){
   // add online users
            echo '<hr /><img src="'.$settings['images_url'].'/icons/online.gif" style="margin: 0;" align="bottom" alt="" />
                 <a href="'.$scripturl.'?action=who"><b>'.$txt[158].'</b></a><br />';

            $online = ssi_whosOnline('array');
   echo $bullet.$txt['tp-users'].': '.$online['num_users'];
   echo '<br />'.$bullet.$txt['tp-guests'].': '.$online['guests'];
   echo '<br />'.$bullet.$txt['tp-total'].': '.$online['total_users'].'<hr />
<div style="width: 100%; ' , $online['num_users']>14 ? 'height: 23ex;overflow: auto;' : '' ,'">';

      foreach($online['users'] as $user){
echo $bullet2 , $user['hidden'] ? '<i>' . $user['link'] . '</i>' : $user['link'];
echo '<br />';
   }
echo '</div>';
         }
echo '</div>

</div>';

echo'<div id="tcontent3" class="tabcontent">
      <div style="padding: 5px;" class="smalltext"><p style="margin: 0; padding: 0 0 .5ex 0;">';


// admin parts etc.
         if(!isset($context['TPortal']['can_submit_article']))
            $context['TPortal']['can_submit_article']=0;
// do not show if none is availalable
if($context['TPortal']['can_submit_article']==1 || allowedTo(array('tp_dlupload','tp_dlmanager','tp_settings','tp_articles','tp_blocks','tp_linkmanager','tp_teampage','tp_gallery')))
{
echo '<img src="'.$settings['images_url'].'/tpoptions.gif" style="margin: 0;" align="absbottom" alt="" />
      <b>'.$txt['tp-tools'].'</b></p>';
              // can we submit an article?
              if($context['TPortal']['can_submit_article']==1 && !allowedTo('tp_articles'))
                       echo $bullet4.'<a href="', $scripturl, '?action=tpmod;sa=submitarticle">' . $txt['tp-submitarticle']. '</a><br />';

// upload a file?
              if(allowedTo('tp_dlupload') || allowedTo('tp_dlmanager'))
                       echo $bullet4.'<a href="', $scripturl, '?action=tpmod;dl=upload">' . $txt['permissionname_tp_dlupload']. '</a><br />';

// tpadmin checks
if (allowedTo('tp_settings'))
echo $bullet4.'<a href="' . $scripturl . '?action=tpadmin;sa=settings">' . $txt['permissionname_tp_settings'] . '</a><br />';
if (allowedTo('tp_blocks'))
echo $bullet4.'<a href="' . $scripturl . '?action=tpadmin;sa=blocks">' . $txt['permissionname_tp_blocks'] . '</a><br />';
if (allowedTo('tp_articles'))
{
echo $bullet4.'<a href="' . $scripturl . '?action=tpadmin;sa=articles">' . $txt['permissionname_tp_articles'] . '</a><br />';
// any submissions?
if($context['TPortal']['submitcheck']['articles']>0)
echo $bullet4.$bullet3.'<a href="' . $scripturl . '?action=tpadmin;sa=submission"><b>' . $context['TPortal']['submitcheck']['articles'] . ' ' .$txt['tp-articlessubmitted'] . '</b></a><br />';
}
if (allowedTo('tp_dlmanager'))
{
echo $bullet4.'<a href="' . $scripturl . '?action=tpmod;dl=admin">' . $txt['permissionname_tp_dlmanager'] . '</a><br />';
// any submissions?
if($context['TPortal']['submitcheck']['uploads']>0)
echo $bullet4.$bullet3.'<a href="' . $scripturl . '?action=tpmod;dl=adminsubmission"><b>' . $context['TPortal']['submitcheck']['uploads'] . ' ' .$txt['tp-dluploaded'] . '</b></a><br />';
}
/*
if (allowedTo('tp_gallery'))
echo $bullet4.'<a href="' . $scripturl . '?action=tpmod;show=admin">' . $txt['permissionname_tp_gallery'] . '</a><br />';
if (allowedTo('tp_teampage'))
echo $bullet4.'<a href="' . $scripturl . '?action=tpmod;team=admin">' . $txt['permissionname_tp_teampage'] . '</a><br />';
if (allowedTo('tp_linkmanager'))
echo $bullet4.'<a href="' . $scripturl . '?action=tpmod;link=admin">' . $txt['permissionname_tp_linkmanager'] . '</a><br />';
*/
}

         echo '</div>

</div>';

echo '<div id="tcontent4" class="tabcontent">';

    // is it a number?
//if(!is_numeric($context['TPortal']['recentboxnum']))
$context['TPortal']['recentboxnum']='15';

// leave out the recycle board, if any
if(isset($modSettings['recycle_board']))
$bb=array($modSettings['recycle_board']);
else
$bb=array();

$what=ssi_recentTopics($num_recent = $context['TPortal']['recentboxnum'], $bb, $output_method = 'array');
// Output the topics
$counter=1; $cmax=count($what);
echo '
<div style="width: 100%; overflow: auto; height: 30ex;">';
foreach($what as $w){
echo '
<div class="smalltext"><a href="'.$w['href'].'">'.$w['short_subject'].'</a></div>
<div class="smalltext">', $txt[525], ' <b>', $w['poster']['link'], '</b></div>
<div class="smalltext">';
if(!$w['new'])
echo '<a href="'.$w['href'].'"><img border="0" src="'.$settings['images_url'].'/'.$context['user']['language'].'/new.gif" alt="new" /></a> ';

echo '['.$w['time'].']
</div>';

if($counter != $cmax)
echo '<hr />';
$counter++;
}
echo '
</div>

</div>';

echo '<div id="tcontent5" class="tabcontent">

<form  accept-charset="', $context['character_set'], '" action="', $scripturl, '?action=search2" method="post" style="padding: 0; text-align: center; margin: 0; margin-bottom: 5px;">
<br /><input type="text" name="search" value="" style="width: 85%;" /><br />
<input type="submit" name="submit" value="', $txt[182], '" style="width: 90%; margin: 4px;" /><br /><span class="smalltext">
<a href="', $scripturl, '?action=search;advanced">', $txt['smf298'], '</a></span>
<input type="hidden" name="advanced" value="0" />
</form>
</div>

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


$temaid=explode(',',$context['TPortal']['temaer']);
$temanavn=explode(',',$context['TPortal']['temanames']);
$temapaths=explode(',',$context['TPortal']['temapaths']);
if(isset($context['TPortal']['querystring']))
$tp_where=$context['TPortal']['querystring'];
else
$tp_where='action=forum;';

if($tp_where!='')
$tp_where .=';';


// remove multiple theme=x in the string.
$tp_where=preg_replace("'theme=[^>]*?;'si", "", $tp_where);

if(sizeof($temaid)>1){
        echo '
<form name="jumpurl1" onsubmit="return jumpit()" action="" style="padding: 0; margin: 0; text-align: center;">
<select style="width: 100%; margin: 5px 0px 5px 0px;" size="1" name="jumpurl2" onchange="check(this.value)">';
         for($a=0 ; $a<(sizeof($temaid)) ; $a++){
                echo '
<option value="'.$temaid[$a].'" ', $settings['theme_id'] == $temaid[$a] ? 'selected="selected"' : '' ,'>'.substr($temanavn[$a],0,20).'</option>';
         }
         echo '
</select><br />
<input type="checkbox" value=";permanent" onfocus="realtheme()" /> ', $txt['tp-permanent'], '<br />
<input style="margin: 5px 0px 5px 10px;" type="button" value="'.$txt['tp-changetheme'].'" onclick="jumpit()" />
<input type="hidden" value="'.htmlspecialchars($scripturl . '?'.$tp_where.'theme='.$settings['theme_id']).'" name="jumpurl3" />
<div style="text-align: center; width: 95%; overflow: hidden;">
<img src="'.$settings['images_url'].'/thumbnail.gif" alt="" id="chosen" name="chosen"  />
</div>
</form>
<script type="text/javascript" language="Javascript">
var extra = \'\';
var themepath=new Array()';
         for($a=0 ; $a<(sizeof($temaid)) ; $a++){
echo '
    themepath['.$temaid[$a].'] = "'.$temapaths[$a].'/thumbnail.gif"
';
}

echo '
function jumpit(){
                          window.location=document.jumpurl1.jumpurl3.value + extra
                          return false
                       }
                   </script>
   <script type="text/javascript">
       function realtheme()
       {
extra = \';permanent\';
       }
        function check(icon)
       {
document.chosen.src= themepath[icon]
document.jumpurl1.jumpurl3.value = \'' . $scripturl . '?'. $tp_where.'theme=\' + icon
       }
</script>';
}
else
echo $txt['tp-nothemeschosen'];
echo '</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
storminitializetabcontent("maintab")
</script>';


I hope this is wht you are looking for.

ZarPrime