Hi again! I was experimenting codes for the content switcher and I've come up with this. I hope you guys like it.. by the wa this is beta version so i might update this.. sorry.. here's a preview on my test page: [url]http://profiles.friendster.com/jjptestprofile[/url] [b]Requirements[/b] Your friends box must not be hidden Your media box must be hidden Creativity and Knowledge in adjusting boxes using breaking codes: [i]<br>[/i] Knowledge about this topic: [url]http://theftalk.com/t7708-link%28from-sidebar-mainbar-vice-versa%29.html[/url] [b]WARNING[/b] NEVER ADD A BORDER TO THE MAIN TABLES.. ADD THE BORDER TO INDIVIDUAL CELLS FOR IT WIL SHOW THE HIDDEN FRAMEWORK.. Step 1: Paste this code inside the loader (its pretty long and i had a hardtime making this..) [quote]var ftalkers = "<TABLE CLASS=\"deepsea\" BORDER=\"0\"><tr><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 35px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td></tr><tr><td><input style='border: 0px transparent none; background-color: transparent; height: 75px; width: 40px;' onmouseover=\"get_properties('ender')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('draco')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('ducheszv')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('shirow')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 75px; width: 37px;' onmouseover=\"get_properties('ender')\"></td></tr></table><div id=\"ftalk\"></div><TABLE CLASS=\"deepsea\" BORDER=\"0\"><tr><td><input style='border: 0px transparent none; background-color: transparent; height: 75px; width: 40px;' onmouseover=\"get_properties('ender')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('bob')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('ephe')\"></td><td><input type='image' style='border: 1px #000000 none; background-color: transparent;' src='[b]URL OF FRIENDS IMAGE 75x75px[/b]' onmouseover=\"get_properties('xav')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 75px; width: 37px;' onmouseover=\"get_properties('ender')\"></td></tr><tr><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 35px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td><td><input style='border: 0px transparent none; background-color: transparent; height: 12px; width: 75px;' onmouseover=\"get_properties('ender')\"></td></tr></table>"; document.getElementById('content_2').style.height='100%'; document.getElementById('content_2').style.overflowY='hidden'; document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+ftalkers+"</td></tr></table>";[/quote] Step 2: Paste this code inside the loader.. function get_properties(id) { document.getElementById('ftalk').innerHTML=document.getElementById(id).innerHTML } Step 3: Paste this at the lowest part of the your JS (note just break the caption when they too long..) [quote]document.write('<div id="draco"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div id="ducheszv"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div id="shirow"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div id="bob"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div id="ephe"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div id="xav"><a href="http://profiles.friendster.com/[b]USERID[/b]">[b]FRIENDS NAME[/b]</a><br>[b]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[i]<br>[/i]CaptionCaptionCaption[/b]</div>'); document.write('<div align="left" id="ender"> </div>');[/quote] Just Edit the Bold text!!! [b]POINT OF ADVICE:[/b] WITH ENOUGH KNOWLEDGE OF JS, YOU CAN CHANGE THIS INTO A CONTENT SWITCHER.. I am hoping for a positive response from you guys!! GLITCH: the expanded box does not close if the mouse if too fast or it if passes through the midline.. (I'll fix later)

Last edited by dracoknight09 (2008-01-05 00:12:18)