Here is a explore with a basic tabbed interface, for all to use.
I commented all the essential CSS, to change colors easily. I only included the most of the links, from an original explore.php, but any links, and tabs should be easy enough to add. By following the simple pattern, if you need help figuring it out, just let me know, I'll be glad to help. Also, thanks to Nyna, for fixing a pesky error.
Firstly, copy this and save it in your main directory as tabs.min.js
/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
(function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
if(typeof s['return']=="function")
s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
return s;}
$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();
And, secondly, replace your explore.php with this:
<?php
/*-----------------------------------------------------
-- Made By BlueDevil23
-- Free Mod for the CE Community - Not to be sold
-- Tabs via a JQuery extension made by Sean Catchpole
-----------------------------------------------------*/
include "globals.php";
?>
<html>
<head>
<script type="text/javascript" src="tabs.min.js"></script>
<style type="text/css">
#explore {
color:#6688DD;
float:left;
font-family:Cambria,Times New Roman,serif;
font-size:1.3em;
font-stretch:normal;
font-style:italic;
font-weight:normal;
line-height:normal;
width:100px;
}
#explore li a {
background:#222222 none repeat scroll 0 0; /* Change this value to change the backgroud of the tabs */
display:block;
font-size:0.8em; /* Change this value to change the font size in the tabs */
font-style:normal;
font-weight:bold;
margin:1px;
padding:2px 6px 4px;
text-align:left;
text-decoration:none;
width:90px; /* Change this value to change the width of the tabs */
}
#explore li a:hover {
background:#0A0A0A none repeat scroll 0 0; /* Change this value to change the color of when the tab is hovered over */
width:90px /* This value should be the same as the width of the tabs above */
}
#explore li a.selected {
background:#FFFFFF none repeat scroll 0 0; /* Change this value to change the color of the tab when it is active */
color:#000000;
cursor:default;
width:90px; /* This should also be the same as the two above widths */
}
.container {
background:#181818 none repeat scroll 0 0; /* Change this value to change the background color of the links container */
border:1px solid #222222;
margin:20px auto;
padding-top:2px;
width:400px; /* Change this value to change the width of links container */
}
.container p {
padding:2px 12px 10px;
text-align:left;
}
</style>
</head>
<body>
<?php
$tresder=(int) rand(100,999);
if($ir['jail'] or $ir['hospital'])
{
die("This page cannot be accessed while in jail or hospital.");
}
$q = $db->query("SELECT u.*,c.* FROM users u LEFT JOIN cities c ON u.location=c.cityid WHERE (u.userid=$userid)");
$r = $db->fetch_row($q);
print <<<EOF2
[b]You begin exploring the area you're in, you see a bit that interests you.[/b]
<ul id="explore" class="idTabs">
[*][url="#markplace"]Market Place[/url]
[*][url="#smm"]Serious Money Makers[/url]
[*][url="#darkside"]Dark Side[/url]
[*][url="#statdept"]Stats Dept.[/url]
[*][url="#mystery"]Mysterious[/url]
[/list]
<div class="container">
<ul id="markplace">
[*][url="shops.php"]Shops[/url]
[*][url="itemmarket.php"]Item Market[/url]
[*][url="cmarket.php"]Crystal Market[/url]
[/list]
<ul id="smm">
[*][url="monorail.php"]Travel Agency[/url]
[*][url="estate.php"]Estate Agent[/url]
[*][url="bank.php"]City Bank[/url]
EOF2;
if($ir['location'] == 5)
print "[*][url='cyberbank.php']Cyber Bank[/url]";
print <<<EOF3
[/list]
<ul id="darkside">
[*][url="gangcentral.php"]Gangs[/url]
[*][url="gangwars.php"]Gang Wars[/url]
[*][url="fedjail.php"]Federal Jail[/url]
[*][url="slotsmachine.php?tresde=$tresder"]Slots Machine[/url]
[*][url="roulette.php?tresde=$tresder"]Roulette[/url]
[*][url="lucky.php"]Lucky Boxes[/url]
[/list]
<ul id="statdept">
[*][url="userlist.php"]User List[/url]
[*][url="stafflist.php"]{$set['game_name']} Staff[/url]
[*][url="halloffame.php"]Hall of Fame[/url]
[*][url="stats.php"]Game Stats[/url]
[*][url="usersonline.php"]Users Online[/url]
[/list]
<ul id="mystery">
[*][url="crystaltemple.php"]Crystal Temple[/url]
[/list]
</div>
This is your referal link: http://{$domain}/register.php?REF=$userid
Every signup from this link earns you two valuable crystals!
</body>
</html>
EOF3;
$h->endpage();
?>
First mod, so leave me some feedback :P
Oh yeah, I don't have a publicly facing game currently, so I could only take a screenshot of it. Doesn't really do it any justice, but at least, you get the look of it.
Screenshot:
