SunnyRJ
10-14-2008, 01:39 PM
Ok ive written a code but i had someone ask me how to do this and ive never had this question and never thought to add this to my script but here it is im using iframes and dhtml buttons targeting the iframe
the question i had is when you not on the iframe and your on another tab is there anyway to make it blink for activity on the page here is my coding
Not as easy as it looks to code took me 5 days
<html>
<head>
<title>Famous Starz Presents : All Mobster's</title>
<style>
.tab{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 0;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.Offset{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 25;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.Offset2{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 50;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.panel{
position: absolute;
top: 75;
left: 10;
width: 100%;
z-index: 1;
height: 1400;
visibility: hidden;
font: 12pt Verdana,sans-serif;
color: Red;
border: thin solid navy;
padding: 5;
}
</style>
<script language="JavaScript">
var currentPanel = 1;
function showPanel(panelNum){
//hide visible panel, show selected panel, set tab
hidePanel();
document.getElementById('panel'+panelNum).style.visibility = 'visible';
currentPanel = panelNum;
setState(panelNum);
}
function hidePanel(){
//hide visible panel, unhilite tab
document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
document.getElementById('tab'+currentPanel).style.backgroundColor = '#ffffff';
document.getElementById('tab'+currentPanel).style.color = 'navy';
}
function setState(tabNum){
if(tabNum==currentPanel){
document.getElementById('tab'+tabNum).style.backgroundColor = '#ddddff';
document.getElementById('tab'+tabNum).style.color = 'red';
}else{
document.getElementById('tab'+tabNum).style.backgroundColor = '#ffffff';
document.getElementById('tab'+tabNum).style.color = 'navy';
}
}
function hover(tab){
tab.style.backgroundColor = 'ddddff';
}
</script>
</head>
<center>
<body onLoad="showPanel(1)" bgcolor="black">
<div id="loading" class="panel" style="visibility: visible; font: 12pt Verdana,sans-serif; color: navy;">Loading... Please Be Patient... ~Famous Starz~ <br> If this link doesnt load please reload and allow 15 to 20 seconds to load <br> <br> Any Suggestions please Email me djrj@live.com</div>
<div id="tab1" class="tab" style="left: 10;" onClick = "showPanel(1);" onMouseOver="hover(this);" onMouseOut="setState(1)">Beta Ver 1</div>
<div id="tab2" class="tab" style="left: 130;" onClick = "showPanel(2);" onMouseOver="hover(this);" onMouseOut="setState(2)">FS Forum</div>
<div id="tab3" class="tab" style="left: 250;" onClick = "showPanel(3);" onMouseOver="hover(this);" onMouseOut="setState(3)"></div>
<div id="tab4" class="tab" style="left: 370;" onClick = "showPanel(4);" onMouseOver="hover(this);" onMouseOut="setState(4)"></div>
<div id="tab5" class="tab" style="left: 490;" onClick = "showPanel(5);" onMouseOver="hover(this);" onMouseOut="setState(5)">Google</div>
<div id="tab6" class="tab" style="left: 610;" onClick = "showPanel(6);" onMouseOver="hover(this);" onMouseOut="setState(6)">Yahoo Games</div>
<div id="tab7" class="tab" style="left: 730;" onClick = "showPanel(7);" onMouseOver="hover(this);" onMouseOut="setState(7)">YouTube</div>
<div id="tab8" class="tab" style="left: 850;" onClick = "showPanel(8);" onMouseOver="hover(this);" onMouseOut="setState(8)">(CS)Y MAIL</div>
<div id="tab9" class="tab" style="left: 970;" onClick = "showPanel(9);" onMouseOver="hover(this);" onMouseOut="setState(9)">(CS)Hotmail</div>
<div id="tab10" class="Offset" style="left: 10;" onClick = "showPanel(10);" onMouseOver="hover(this);" onMouseOut="setState(10)">AIM</div>
<div id="tab11" class="Offset" style="left: 130;" onClick = "showPanel(11);" onMouseOver="hover(this);" onMouseOut="setState(11)"></div>
<div id="tab12" class="Offset" style="left: 250;" onClick = "showPanel(12);" onMouseOver="hover(this);" onMouseOut="setState(12)">Y Messenger</div>
<div id="tab13" class="Offset" style="left: 370;" onClick = "showPanel(13);" onMouseOver="hover(this);" onMouseOut="setState(13)">Xat.com/FamousStarz</div>
<div id="tab14" class="Offset" style="left: 490;" onClick = "showPanel(14);" onMouseOver="hover(this);" onMouseOut="setState(14)"></div>
<div id="tab15" class="Offset" style="left: 610;" onClick = "showPanel(15);" onMouseOver="hover(this);" onMouseOut="setState(15)">.</div>
<div id="tab16" class="Offset" style="left: 730;" onClick = "showPanel(16);" onMouseOver="hover(this);" onMouseOut="setState(16)">ADMIN CHAT</div>
<div id="tab17" class="Offset" style="left: 850;" onClick = "showPanel(17);" onMouseOver="hover(this);" onMouseOut="setState(17)"></div>
<div id="tab18" class="Offset" style="left: 970;" onClick = "showPanel(18);" onMouseOver="hover(this);" onMouseOut="setState(18)"></div>
<div id="tab19" class="Offset2" style="left: 10;" onClick = "showPanel(19);" onMouseOver="hover(this);" onMouseOut="setState(19)">Myspace</div>
<div id="tab20" class="Offset2" style="left: 130;" onClick = "showPanel(20);" onMouseOver="hover(this);" onMouseOut="setState(20)">Mobster</div>
<div id="tab21" class="Offset2" style="left: 250;" onClick = "showPanel(21);" onMouseOver="hover(this);" onMouseOut="setState(21)">Hero's</div>
<div id="tab22" class="Offset2" style="left: 370;" onClick = "showPanel(22);" onMouseOver="hover(this);" onMouseOut="setState(22)">Mafia Wars</div>
<div id="tab23" class="Offset2" style="left: 490;" onClick = "showPanel(23);" onMouseOver="hover(this);" onMouseOut="setState(23)">Dragon Wars</div>
<div id="tab24" class="Offset2" style="left: 610;" onClick = "showPanel(24);" onMouseOver="hover(this);" onMouseOut="setState(24)">Vampires</div>
<div id="tab25" class="Offset2" style="left: 730;" onClick = "showPanel(25);" onMouseOver="hover(this);" onMouseOut="setState(25)">Space Wars</div>
<div id="tab26" class="Offset2" style="left: 850;" onClick = "showPanel(26);" onMouseOver="hover(this);" onMouseOut="setState(26)"></div>
<div id="tab27" class="Offset2" style="left: 970;" onClick = "showPanel(27);" onMouseOver="hover(this);" onMouseOut="setState(27)"></div>
<iframe id="panel1" class="panel" src="beta-1-1.htm"></iframe>
<iframe id="panel2" class="panel" src="http://mobster.flipsideparty.com"></iframe>
<iframe id="panel3" class="panel" src=""></iframe>
<iframe id="panel4" class="panel" src=""></iframe>
<iframe id="panel5" class="panel" src="http://www.google.com"></iframe>
<iframe id="panel6" class="panel" src="http://games.yahoo.com/"></iframe>
<iframe id="panel7" class="panel" src="http://www.youtube.com"></iframe>
<iframe id="panel8" class="panel" src=""></iframe>
<iframe id="panel9" class="panel" src=""></iframe>
<iframe id="panel10" class="panel" src="http://o.aolcdn.com/aim/gromit/gm/aim_express/080909.3/WidgetMain.html"></iframe>
<iframe id="panel11" class="panel" src=""></iframe>
<iframe id="panel12" class="panel" src="http://webmessenger.yahoo.com/"></iframe>
<iframe id="panel13" class="panel" src="http://xat.com/FamousStarzMob"></iframe>
<iframe id="panel14" class="panel" src=""></iframe>
<iframe id="panel15" class="panel" src="Chat/lilchat.htm"></iframe>
<iframe id="panel16" class="panel" src="Chat/FamousStarzAdmin2.htm"></iframe>
<iframe id="panel17" class="panel" src=""></iframe>
<iframe id="panel18" class="panel" src=""></iframe>
<iframe id="panel19" class="panel" src="http://www.myspace.com"></iframe>
<iframe id="panel20" class="panel" src="http://apps.myspace.com/104283/"></iframe>
<iframe id="panel21" class="panel" src="http://apps.myspace.com/111635/"></iframe>
<iframe id="panel22" class="panel" src="http://apps.myspace.com/110226/"></iframe>
<iframe id="panel23" class="panel" src="http://apps.myspace.com/111540/"></iframe>
<iframe id="panel24" class="panel" src="http://apps.myspace.com/105844/"></iframe>
<iframe id="panel25" class="panel" src="http://apps.myspace.com/116767"></iframe>
<iframe id="panel26" class="panel" src=""></iframe>
<iframe id="panel27" class="panel" src=""></iframe>
</center>
</body>
</html>
the question i had is when you not on the iframe and your on another tab is there anyway to make it blink for activity on the page here is my coding
Not as easy as it looks to code took me 5 days
<html>
<head>
<title>Famous Starz Presents : All Mobster's</title>
<style>
.tab{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 0;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.Offset{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 25;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.Offset2{
color: red;
background-color: black;
border: thin solid navy;
position: absolute;
top: 50;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.panel{
position: absolute;
top: 75;
left: 10;
width: 100%;
z-index: 1;
height: 1400;
visibility: hidden;
font: 12pt Verdana,sans-serif;
color: Red;
border: thin solid navy;
padding: 5;
}
</style>
<script language="JavaScript">
var currentPanel = 1;
function showPanel(panelNum){
//hide visible panel, show selected panel, set tab
hidePanel();
document.getElementById('panel'+panelNum).style.visibility = 'visible';
currentPanel = panelNum;
setState(panelNum);
}
function hidePanel(){
//hide visible panel, unhilite tab
document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
document.getElementById('tab'+currentPanel).style.backgroundColor = '#ffffff';
document.getElementById('tab'+currentPanel).style.color = 'navy';
}
function setState(tabNum){
if(tabNum==currentPanel){
document.getElementById('tab'+tabNum).style.backgroundColor = '#ddddff';
document.getElementById('tab'+tabNum).style.color = 'red';
}else{
document.getElementById('tab'+tabNum).style.backgroundColor = '#ffffff';
document.getElementById('tab'+tabNum).style.color = 'navy';
}
}
function hover(tab){
tab.style.backgroundColor = 'ddddff';
}
</script>
</head>
<center>
<body onLoad="showPanel(1)" bgcolor="black">
<div id="loading" class="panel" style="visibility: visible; font: 12pt Verdana,sans-serif; color: navy;">Loading... Please Be Patient... ~Famous Starz~ <br> If this link doesnt load please reload and allow 15 to 20 seconds to load <br> <br> Any Suggestions please Email me djrj@live.com</div>
<div id="tab1" class="tab" style="left: 10;" onClick = "showPanel(1);" onMouseOver="hover(this);" onMouseOut="setState(1)">Beta Ver 1</div>
<div id="tab2" class="tab" style="left: 130;" onClick = "showPanel(2);" onMouseOver="hover(this);" onMouseOut="setState(2)">FS Forum</div>
<div id="tab3" class="tab" style="left: 250;" onClick = "showPanel(3);" onMouseOver="hover(this);" onMouseOut="setState(3)"></div>
<div id="tab4" class="tab" style="left: 370;" onClick = "showPanel(4);" onMouseOver="hover(this);" onMouseOut="setState(4)"></div>
<div id="tab5" class="tab" style="left: 490;" onClick = "showPanel(5);" onMouseOver="hover(this);" onMouseOut="setState(5)">Google</div>
<div id="tab6" class="tab" style="left: 610;" onClick = "showPanel(6);" onMouseOver="hover(this);" onMouseOut="setState(6)">Yahoo Games</div>
<div id="tab7" class="tab" style="left: 730;" onClick = "showPanel(7);" onMouseOver="hover(this);" onMouseOut="setState(7)">YouTube</div>
<div id="tab8" class="tab" style="left: 850;" onClick = "showPanel(8);" onMouseOver="hover(this);" onMouseOut="setState(8)">(CS)Y MAIL</div>
<div id="tab9" class="tab" style="left: 970;" onClick = "showPanel(9);" onMouseOver="hover(this);" onMouseOut="setState(9)">(CS)Hotmail</div>
<div id="tab10" class="Offset" style="left: 10;" onClick = "showPanel(10);" onMouseOver="hover(this);" onMouseOut="setState(10)">AIM</div>
<div id="tab11" class="Offset" style="left: 130;" onClick = "showPanel(11);" onMouseOver="hover(this);" onMouseOut="setState(11)"></div>
<div id="tab12" class="Offset" style="left: 250;" onClick = "showPanel(12);" onMouseOver="hover(this);" onMouseOut="setState(12)">Y Messenger</div>
<div id="tab13" class="Offset" style="left: 370;" onClick = "showPanel(13);" onMouseOver="hover(this);" onMouseOut="setState(13)">Xat.com/FamousStarz</div>
<div id="tab14" class="Offset" style="left: 490;" onClick = "showPanel(14);" onMouseOver="hover(this);" onMouseOut="setState(14)"></div>
<div id="tab15" class="Offset" style="left: 610;" onClick = "showPanel(15);" onMouseOver="hover(this);" onMouseOut="setState(15)">.</div>
<div id="tab16" class="Offset" style="left: 730;" onClick = "showPanel(16);" onMouseOver="hover(this);" onMouseOut="setState(16)">ADMIN CHAT</div>
<div id="tab17" class="Offset" style="left: 850;" onClick = "showPanel(17);" onMouseOver="hover(this);" onMouseOut="setState(17)"></div>
<div id="tab18" class="Offset" style="left: 970;" onClick = "showPanel(18);" onMouseOver="hover(this);" onMouseOut="setState(18)"></div>
<div id="tab19" class="Offset2" style="left: 10;" onClick = "showPanel(19);" onMouseOver="hover(this);" onMouseOut="setState(19)">Myspace</div>
<div id="tab20" class="Offset2" style="left: 130;" onClick = "showPanel(20);" onMouseOver="hover(this);" onMouseOut="setState(20)">Mobster</div>
<div id="tab21" class="Offset2" style="left: 250;" onClick = "showPanel(21);" onMouseOver="hover(this);" onMouseOut="setState(21)">Hero's</div>
<div id="tab22" class="Offset2" style="left: 370;" onClick = "showPanel(22);" onMouseOver="hover(this);" onMouseOut="setState(22)">Mafia Wars</div>
<div id="tab23" class="Offset2" style="left: 490;" onClick = "showPanel(23);" onMouseOver="hover(this);" onMouseOut="setState(23)">Dragon Wars</div>
<div id="tab24" class="Offset2" style="left: 610;" onClick = "showPanel(24);" onMouseOver="hover(this);" onMouseOut="setState(24)">Vampires</div>
<div id="tab25" class="Offset2" style="left: 730;" onClick = "showPanel(25);" onMouseOver="hover(this);" onMouseOut="setState(25)">Space Wars</div>
<div id="tab26" class="Offset2" style="left: 850;" onClick = "showPanel(26);" onMouseOver="hover(this);" onMouseOut="setState(26)"></div>
<div id="tab27" class="Offset2" style="left: 970;" onClick = "showPanel(27);" onMouseOver="hover(this);" onMouseOut="setState(27)"></div>
<iframe id="panel1" class="panel" src="beta-1-1.htm"></iframe>
<iframe id="panel2" class="panel" src="http://mobster.flipsideparty.com"></iframe>
<iframe id="panel3" class="panel" src=""></iframe>
<iframe id="panel4" class="panel" src=""></iframe>
<iframe id="panel5" class="panel" src="http://www.google.com"></iframe>
<iframe id="panel6" class="panel" src="http://games.yahoo.com/"></iframe>
<iframe id="panel7" class="panel" src="http://www.youtube.com"></iframe>
<iframe id="panel8" class="panel" src=""></iframe>
<iframe id="panel9" class="panel" src=""></iframe>
<iframe id="panel10" class="panel" src="http://o.aolcdn.com/aim/gromit/gm/aim_express/080909.3/WidgetMain.html"></iframe>
<iframe id="panel11" class="panel" src=""></iframe>
<iframe id="panel12" class="panel" src="http://webmessenger.yahoo.com/"></iframe>
<iframe id="panel13" class="panel" src="http://xat.com/FamousStarzMob"></iframe>
<iframe id="panel14" class="panel" src=""></iframe>
<iframe id="panel15" class="panel" src="Chat/lilchat.htm"></iframe>
<iframe id="panel16" class="panel" src="Chat/FamousStarzAdmin2.htm"></iframe>
<iframe id="panel17" class="panel" src=""></iframe>
<iframe id="panel18" class="panel" src=""></iframe>
<iframe id="panel19" class="panel" src="http://www.myspace.com"></iframe>
<iframe id="panel20" class="panel" src="http://apps.myspace.com/104283/"></iframe>
<iframe id="panel21" class="panel" src="http://apps.myspace.com/111635/"></iframe>
<iframe id="panel22" class="panel" src="http://apps.myspace.com/110226/"></iframe>
<iframe id="panel23" class="panel" src="http://apps.myspace.com/111540/"></iframe>
<iframe id="panel24" class="panel" src="http://apps.myspace.com/105844/"></iframe>
<iframe id="panel25" class="panel" src="http://apps.myspace.com/116767"></iframe>
<iframe id="panel26" class="panel" src=""></iframe>
<iframe id="panel27" class="panel" src=""></iframe>
</center>
</body>
</html>