New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » HTML » Taskbar (sml[Default]A toolbar I made for my website.)
Taskbar
looneyheadDate: Sunday, 2011 February 20, 0:04 AM | Message # 1
Font size: A | A |
Lieutenant
Group: uCozer
Message: 54
[ ]
Offline
Here is a video:

*UPDATE*
There are now tabs in the menu. There is a "User" tab and a "Forum" tab. Here is a screenshot:

Attachments: 9596785.png (33.3 Kb)




Edited Bylooneyhead - Monday, 2011 February 21, 0:38 AM
 
J-SecretDate: Tuesday, 2011 February 22, 6:58 AM | Message # 2
Font size: A | A |
Private
Group: User
Message: 6
[ ]
Offline
Would you mind sharing this code? or variation of it?
 
jackassDate: Tuesday, 2011 February 22, 6:29 PM | Message # 3
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Ha Ha, I made a better one, like 3 months ago smile

 
J-SecretDate: Wednesday, 2011 February 23, 5:54 AM | Message # 4
Font size: A | A |
Private
Group: User
Message: 6
[ ]
Offline
Is anyone willing perhaps to share a code? That looks like it would be very useful.
 
looneyheadDate: Friday, 2011 February 25, 5:51 AM | Message # 5
Font size: A | A |
Lieutenant
Group: uCozer
Message: 54
[ ]
Offline
Here, I will give you my coe, but I will give you it exactly the way it is, so you will have to edit it.

CSS:

Code
#taskbar {
   position: fixed;
   bottom:0;
   width:100%;
   height:24px;
   background: url('/design/taskbar/bg.png');
   font: 11px Tahoma, 'ms sans serif', Arial !important;
   color:#000000 !important;
   z-index:96;
}

#taskbar a {
   text-decoration:none;
   color: #000000;
}

#taskbarTime {
}

#taskbarOrb {
   position: fixed;
   bottom: -15px;
   left: -13px;
   width: 54px;
   height: 54px;
   background: url('/design/taskbar/orb/orb1.png');
   z-index:99;
}

#startMenu {
   position: fixed;
   bottom: 23px;
   left: 6px;
   width: 275px;
   height: 325px;
   background: url('/design/taskbar/menu/bg.png');
   font: 11px Tahoma, 'ms sans serif', Arial !important;
   color:#000000 !important;
   z-index:97;
}

#startMenuTabs {
   position: fixed;
   bottom: 341px;
   left: 15px;
   font: 11px Tahoma, 'ms sans serif', Arial !important;
}

#startMenu a {
   color: #000000;
   text-decoration:none;
}

#startMenu td {
   width:100%;
   height:24px;
   vertical-align: middle;
   font: 11px Tahoma, 'ms sans serif', Arial !important;
}

#startAvatar {
   position: fixed;
   bottom: 298px;
   left: 180px;
   width: 83px;
   height: 83px;
   background: url('/design/taskbar/menu/avatarbg.png');
   spacing: 8px;
   z-index:97;
}

HTML (in $GLOBAL_AHEADER$):

Code
<?if($USER_AGENT$='firefox' || $USER_AGENT$='chrome' || $USER_AGENT$='opera')?>
<div id="taskbarOrb">

<a href="javascript:;" style="text-decoration:none;color:#FFFFFF;" title="Start" onclick="if(document.getElementById('startMenu').style.display=='none') {document.getElementById('startMenu').style.display='block';} else {document.getElementById('startMenu').style.display='none';}">
<img id="startorb" border="0" src="/design/taskbar/orb/orb3.png" onmouseover="fade(this, 'in',100,2,6);" onmouseout="fade(this, 'out',0,2,3);">
</a>
     
</div>

<div id="taskbar">

   <table cellpadding="0" cellspacing="0" border="0">
   <td width="41px">
   </td>
   <td>
   <table cellpadding="0" cellspacing="0" border="0" width="100%" height="24px"><td height="24px" width="35px" style="font: 8pt Tahoma, 'ms sans serif', Arial !important;text-shadow: 0 0 0.2em #FFFFFF, 0 0 0.2em #FFFFFF;"><center><font color="#98C600">NEWS:</font></center></td><td height="24px" style="background: url('') repeat;font: 8pt Tahoma, 'ms sans serif', Arial !important;"><marquee scrollamount="2.5"><b>Newest Messages:</b> The clan tag might possibly be changed to [»A«] on FTB3. Clan tag for the CoD series is [ARMY]. <img src="/design/newsbar/space.png" width="150px"> . . . <img src="/design/newsbar/space.png" width="150px"><b>Older Messages:</b> Please sign up and START POSTING in the forums.</marquee></td></table>
   </td>
   <td align="center" width="60px" style="font: 9pt Tahoma, 'ms sans serif', Arial !important;">
   <div id="taskbarTime"><a title="$WDAY$, $MONTH$/$DAY$/$YEAR$">$TIME$</a></div>
   </td>
   </table>
     
</div>

<div id="startMenu" style="DISPLAY: none">
     
   <div id="startMenuTabs">
<style>
.tab_ul {list-style: none; margin:0px 0px 4px 0px;padding:0;}
.tab_ul li {margin-right:1px;}
   .on {display:inline; font-weight:bold;border:1px solid #c2c2c2; border-bottom:0px; spacing-left:11px; padding-left:16px;padding-right:5px;padding-top:5px;padding-bottom:5px;color:#000000; background:#D7D7D7 url('/design/taskbar/menu/tabs/icon.png') left no-repeat;}
   .off { display:inline; cursor:pointer; border:1px solid #c2c2c2; border-bottom:0px; padding:1px 5px 4px 5px; background-color:#D7D7D7; color:#000000;}
.content_box_on {}
.content_box_off {display:none;}
   #cont2 a {color:#A6D803;}
</style>

<ul class="tab_ul">
<li id="tab_1" class="on" onClick="tab_1()">User</li>
<li id="tab_2" class="off" onClick="tab_2()">Forum</li>
</ul>

<script type="text/javascript">
function tab_1(){
document.getElementById('cont1').className='content_box_on';
document.getElementById('cont2').className='content_box_off';
document.getElementById('tab_1').className='on';
document.getElementById('tab_2').className='off';
}
function tab_2(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_on';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='on';
}
</script>
</div>
     
   <div id="startAvatar"><table cellpadding="0" cellspacing="8" border="0"><td valign="center"><?if($USER_LOGGED_IN$)?><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" border="0" title="Avatar" width="67px" height="67px"><?else?><img src="/design/taskbar/menu/guest.png" title="You have not added an avatar yet." border="0"width="67px" height="67px"><?endif?><?else?><img src="/design/taskbar/menu/guest.png" title="You are signed in as a guest." border="0" height="67px" width="67px"><?endif?></td></table></div>
   <div class="content_box_on" id="cont1">
   <?if($USER_LOGGED_IN$)?>
   <table width="259px" cellpadding="0" cellspacing="6px" border="0" style="font: 11px Tahoma, 'ms sans serif', Arial !important;text-decoration:none;"><td align="left">
   <table><tr><td><b>$USERNAME$:</b>
   <img src="/design/taskbar/menu/hr.png"><br></td></tr><tr><td>
    <a href="$PERSONAL_PAGE_LINK$">My Profile</a><br></td></tr><tr><td>
    <a href="$USERS_LIST_URL$">Memberlist</a><br></td></tr><tr><td>
    <a href="/index/11">Edit My Info</a><br></td></tr><tr><td>
    <a href="javascript://" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">Private Messages</a> ($UNREAD_PM$ Unread)<br></td></tr><tr><td>
   <b>My Info:</b>
   <img src="/design/taskbar/menu/hr.png"><br></td></tr><tr><td>
   <i>Logged in as <b>$USERNAME$</b>.</i><br></td></tr><tr><td valign="center">
   <div style="padding bottom:8px;">Group: </div><?if($GROUP_ID$='1')?><img src="/users/group_icons/user.png"><?endif?><?if($GROUP_ID$='3')?><img src="/users/group_icons/moder.png"><?endif?><?if($GROUP_ID$='4')?><img src="/users/group_icons/admin.png"><?endif?><?if($GROUP_ID$='5')?><img src="/users/group_icons/cmember.png"><?endif?><?if($GROUP_ID$='6')?><img src="/users/group_icons/tcmember.png"><?endif?><?if($GROUP_ID$='7')?><img src="/users/group_icons/amin.png"><?endif?><?if($GROUP_ID$='255')?><img src="/users/group_icons/blocked.png"><?endif?><div style="padding bottom:8px;">$USER_GROUP$</div></td></tr><tr><td>
   IP Address: $IP_ADDRESS$</td></tr><tr><td>
   User ID: $USER_ID$</td></tr><tr><td>
   Registered for: $USER_REG_DAYS$ days<br><br></td></tr></table><div style="position:fixed;bottom:30px;left:166px;width:101px;height:22px;background: url('/design/taskbar/menu/logout.png');">
   <b><a href="$LOGOUT_LINK$"><img id="logout" src="/design/taskbar/menu/logouthover.png" border="0" onmouseover="fade(this, 'in',100,2,2);" onmouseout="fade(this, 'out',0,2,1);"></a></b>
   </td></table><?else?>
     
   <table width="100%" height="100%" cellspacing="8px"><td align="center" valign="center" width="100%" height="100%" style="">
   $LOG_FORM$
   </td></table><?endif?>
   </div>
     
<div class="content_box_off" id="cont2" align="left" style="padding:9px;">
   <b>Top Posters:</b>
   <img src="/design/taskbar/menu/hr.png">
   <ol>$MYINF_7$</ol>
   <b>Recent Posts:</b>
   <img src="/design/taskbar/menu/hr.png">
   <div style="width:257px;height:223px;overflow:scroll;">$MYINF_6$</div>
   </div>
     
</div>
<?endif?>

JavaScript:

Code
<?if($USER_AGENT$='firefox' || $USER_AGENT$='chrome' || $USER_AGENT$='opera')?>
<script type="text/javascript">

/* Cross Browser Image Fader © 2007 John Davenport Scheuer
   This comment must remain for Legal Use */

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['logout', 0];
faders[1]=['startorb', 0];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<?endif?>

Some info you might need:

-It doesn't work onIE.
-The coding is a little sloppy because I was in a hurry, so don't slam me on that.

I look forward to seeing this on your site. smile




Edited Bylooneyhead - Friday, 2011 February 25, 5:56 AM
 
rys3rDate: Friday, 2011 February 25, 7:45 PM | Message # 6
Font size: A | A |
Private
Group: User
Message: 4
[ ]
Offline
Quote (jackass)
Ha Ha, I made a better one, like 3 months ago

can you share with us?


image is everything
 
jackassDate: Saturday, 2011 February 26, 3:47 AM | Message # 7
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
I didn't finish it, I have a desktop, where you can move icons around like in unet biggrin
It saves order in cookies.


 
looneyheadDate: Sunday, 2011 February 27, 8:51 PM | Message # 8
Font size: A | A |
Lieutenant
Group: uCozer
Message: 54
[ ]
Offline
I never wanted a desktop appeal. I have been making toolbars for a while now, so I decided to make one that looks like the Windows 7 taskbar. If only I could find out how uCoz gets their ad/admin bar to be "position:fixed;" on IE. Damn you Microsoft. lol

 
uCoz Support Forum by uCozers » Coding » HTML » Taskbar (sml[Default]A toolbar I made for my website.)
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2024 To TOP
Refresh Smileys Manager