JUNCTION X: AJAX

แสดงบทความที่มีป้ายกำกับ AJAX แสดงบทความทั้งหมด

14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

1. Notepad++</h2>
<div>
<br /></div>
<div>
นับว่าเป็น Free <span style="background-color: white; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;">Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว คอนเฟิร์มเลยครับ ว่า น่าใช้มาก   </span><span style="text-align: left;"> </span></div>
<div style="text-align: left;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
</div>
<h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;">

Notepad++</h2>
<span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br />
<div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<img alt="Notepad++" class="alignnone size-full wp-image-1996" height="170" src="http://rabbitinblack.com/wp-content/uploads/2012/03/notepadplusplus.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Notepad++" width="220" /></div>
<div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;">
Download ที่นี่ : <a href="http://notepad-plus-plus.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Notepad++</a></div>
<br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 22px;">
</div>
<h2 style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

<span style="font-size: 30px;">2 .</span><span style="font-size: x-large;"> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; line-height: 50px;">Sublime Text</span></span></h2>
<div style="font-size: 15px;">
<img height="396" id="il_fi" src="http://burtonator.files.wordpress.com/2008/01/200801181502.jpg" style="color: #333333; padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="640" /> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 50px;"><br />
</span></div>
<br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
</div>
<h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;">

Sublime Text</h2>
<span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br />
<div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<img alt="Sublime Text" class="alignnone size-full wp-image-2003" height="154" src="http://rabbitinblack.com/wp-content/uploads/2012/03/sublimetext.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Sublime Text" width="600" /></div>
<div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
จริง ๆ แล้ว Sublime Text นั้นก็มีในแบบเสียเงิน แต่สำหรับคนเริ่มต้นแล้ว เท่าที่ฟรีของมันก็เพียงพอแล้วครับ</div>
<div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;">
Download ที่นี่ : <a href="http://rabbitinblack.com/2012/03/free-text-editor-web-developer/www.sublimetext.com/" style="color: #ff4f92; text-decoration: none;" target="_blank">Sublime Text</a></div>
<br />
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

3. Programmer's Notepad</h2>
<div>
<br /></div>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Programmer's Notepad is a light weight Notepad replacement that is aimed at programmers and web monkeys.</span><br />
<span style="font-family: Georgia, 'Times New Roman', Times, serif;"><span style="font-size: 15px; line-height: 22px;"><br />
</span></span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" style="color: #2b6690;"><img height="269" src="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
</div>
<h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;">

Programmer’s Notepad</h2>
<span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br />
<div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<img alt="Programmer's Notepad" class="alignnone size-full wp-image-2000" height="94" src="http://rabbitinblack.com/wp-content/uploads/2012/03/programmernotepad.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Programmer's Notepad" width="724" /></div>
<div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;">
Download ที่นี่ : <a href="http://www.pnotepad.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Programmer’s Notepad</a></div>
<br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

4. TotalEdit</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">TotalEdit is a free for commercial and non commercial use text editor for Windows. It supports all features expected out of a programmer's text editor like syntax coloring, code folding and line numbering</span><br />
<img alt="TotalEdit Now Completely Free" height="204" longdesc="http://www.codertools.com/TotalEdit%20Now%20Completely%20Free" src="http://www.codertools.com/web2/images/products/totaledit-case-small.png" width="150" /><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
Some of the features that make it stand apart from the crowd are backup and version comparison - you can compare the currently edited file with its previous version from within TotalEdit, a built-in spell checker and its fully portable mode - you can run it off a USB stick.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.codertools.com/download.aspx" style="color: #2b6690;">Download TotalEdit</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

5. Notepad2</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">If what you want is a blaring fast text editor that starts instantly at the touch of a mouse and that gets things done as fast as possible, then Notepad2 is for you. Notepad2 is aimed at coders who need a little more oomph than the generic Notepad in Windows.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" style="color: #2b6690;"><img height="279" src="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
It supports a number of programming languages. Hit F12, select the scheme and press OK. If you wish to replace the generic Notepad with Notepad2, here are the instructions <a href="http://blogs.msdn.com/omars/archive/2004/04/30/124093.aspx" style="color: #2b6690;">for Windows XP</a> and <a href="http://www.mattberther.com/?p=828" style="color: #2b6690;">for Windows Vista.</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.flos-freeware.ch/notepad2.html" style="color: #2b6690;">Download Notepad2</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

6. XML Notepad 2007</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">It is sadistic to force humans to edit XML files. But still, lot of people are unfortunate enough to do this on a regular basis especially java programmers. XML Notepad to your rescue.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" style="color: #2b6690;"><img height="365" src="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
XML Notepad has a simple interface with a tree view of tags on left and their values displayed on right. Use this one as it reduces the chances of human errors in generating properly validated XML files.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.microsoft.com/downloads/details.aspx?familyid=72d6aa49-787d-4118-ba5f-4f30fe913628&displaylang=en#Overview" style="color: #2b6690;">Download XML Notepad 2007</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

7. ConTEXT</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">ConTEXT is a free and recently made open source programmer's text editor.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_137h4sft2ft_b" style="color: #2b6690;"></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_138hbvvsfg2_b" style="color: #2b6690;"></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" style="color: #2b6690;"><img height="311" src="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
ConTEXT is very light weight, is simple to use and hardly uses any RAM. It supports a large number of programming languages like C/C++, Delphi/Pascal, Java, Java Script, Visual Basic, Perl/CGI, HTML, CSS, SQL, FoxPro, 80x86 assembler, Python, PHP, Tcl/Tk, XML, Fortran, Foxpro and InnoSetup scripts.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.contexteditor.org/downloads.html" style="color: #2b6690;">Download ConTEXT</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

8. jEdit</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">jEdit is written in Java can can run on Windows, Linux and Mac OSX.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
jEdit is highly configurable and customizable using macros and plugins. It carries all standard and advanced features like syntax highlighting, auto indentation, file management and bookmarks. It provides keyboard shortcuts for almost anything. So go for this if you are a keyboard ninja.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.jedit.org/" style="color: #2b6690;">Download jEdit</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

9. Komodo Edit</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Komodo Edit is a text editor from ActiveState - a company famous for its port of Perl, Python and TCL to Windows. Komodo Edit is a free and open source text editor (or should rather be called a mini IDE).</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
It supports many features that one would find in IDEs like code completion and call tips. It supports CSS, HTML, JavaScript, XML, Perl, PHP, Python, Ruby, Tcl, RHTML, Template-Toolkit, HTML-Smarty and Django template styles. If you are coming from a Vim or Emacs background, you can also set Komodo Edit to emulate Vim or Emacs key bindings.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.activestate.com/komodo_edit/" style="color: #2b6690;">Download Komodo Edit</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

10. SourceEdit</h2>
<div>
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" style="color: #2b6690;"><img height="394" src="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
SourceEdit will appeal more to the web developer community because of it built-in FTP manager and support for previewing the HTML code in the web browser directly from within SourceEdit. It supports languages like ASP, PHP, Java, C/C++, C#, Visual Basic, Pascal, Perl, Cold Fusion, SQL, HTML, CSS and XML. Web developers will also find its color mixer quite useful. This software is highly customizable. All keyboard shortcuts can be changed to suite your taste. All color coding for any language can be changed and SourceEdit will remember to use that color coding next time you launch a text file of that programming language.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.brixoft.net/download.asp#ID1" style="color: #2b6690;">Download SourceEdit</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

11. PSPad</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">PSPad is another code editor that would be of interest to web developers because of its built-in FTP client. You can log in to an FTP server, browser files, edit and save them to the server all from within PSPad.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
It highlights the matching closing and starting tag when you place your cursor at the middle of a tag. This one also has integrated TiDy library for formatting and checking HTML code, conversion to CSS, XML, XHTML. It also comes with a HEX editor and a diff tool.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.pspad.com/en/download.php" style="color: #2b6690;">Download PSPad</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

12. Crimson Editor</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Crimson Editor calls itself the professional source code editor for Windows.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" style="color: #2b6690;"><img height="418" src="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
It is lightning fast in loading and can run of a floppy disk. It supports syntax highlighting for HTML, C/C++, Perl, Java, Matlab and LaTeX. Full features of Crimson Editor can be found <a href="http://www.crimsoneditor.com/english/features.html" style="color: #2b6690;">here</a> .</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.crimsoneditor.com/" style="color: #2b6690;">Download Crimson Editor</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

13. VIM</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">When it comes to text editors, there are two holy grails - vim and emacs. Both are really great text editors, but both are complex and hence there is a slightly steep learning curve that you have to climb over before using them.</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" style="color: #2b6690;"><img height="509" src="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
Vim stands for 'vi improved' denoting that it is an improved version of the earlier used vi editor. Vim can run in a wide variety of platforms including Windows, Linux and Mac OSX. The screenshot shown above is of Graphical vim (gvim).<br />
This <a href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" style="color: #2b6690;">Wikipedia page</a> would be a good starting place to know about vim. The <a href="http://www.vim.org/" style="color: #2b6690;">official vim site</a> and the <a href="http://vim.wikia.com/wiki/Main_Page" style="color: #2b6690;">vim tips wiki</a> page are also of great help to anyone starting out with vim.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.vim.org/download.php" style="color: #2b6690;">Download Vim</a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<br /></div>
<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">

14. Emacs</h2>
<span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Emacs like vi has a very long history dating back to the 1970s. Emacs was written by hard core programmers intended to be used by hard core programmers - the type of people who would understand stuff like "emacs is an extensible, customizable, self-documenting, real-time display editor".</span><br />
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" style="color: #2b6690;"><img height="375" src="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" width="490" /></a></div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
The <a href="http://www.gnu.org/software/emacs/emacs.html" style="color: #2b6690;">GNU Emacs home page</a>, the <a href="http://www.gnu.org/software/emacs/tour/" style="color: #2b6690;">emacs tour</a> and <a href="http://xahlee.org/emacs/emacs.html" style="color: #2b6690;">this tutorial</a> are great places to start learning emacs.</div>
<div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">
<a href="http://www.gnu.org/software/emacs/emacs.html#Obtaining" style="color: #2b6690;">Download Emacs</a></div>
<br class="Apple-interchange-newline" />

14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

1. Notepad++ นับว่าเป็น Free Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว ค...

อ่านเพิ่มเติม »

วันอังคาร, มีนาคม 20, 2555

Facebook Style Footer Admin Panel

<span class="Apple-style-span" style="background-color: rgba(0, 0, 0, 0.292969); color: #bbbbbb; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 24px;"></span><br />
<div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The popularity of social media has been booming in the past few years and<a href="http://www.facebook.com/" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;" target="_blank">Facebook</a> definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.<span id="more-2715" style="outline-color: initial; outline-style: none; outline-width: initial;"></span></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.sohtanaka.com/web-design/examples/footer-panel/" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;" target="_blank"><img alt="Final Demo" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/01_finalDemo.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></a></div><div class="highlight" style="background-attachment: initial; background-clip: initial; background-color: #111111; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(34, 34, 34); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(34, 34, 34); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(34, 34, 34); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(34, 34, 34); border-top-style: solid; border-top-width: 1px; font-size: 1.5em; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 40px; padding-left: 0px; padding-right: 0px; padding-top: 40px; text-align: center;"><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a class="view" href="http://www.sohtanaka.com/web-design/examples/footer-panel/tooltip.htm" style="-webkit-box-shadow: rgb(29, 29, 29) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: #99be39; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png); background-origin: initial; background-position: 15px 50%; background-repeat: no-repeat no-repeat; border-top-color: rgb(178, 216, 82); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(29, 29, 29) 0px 1px 2px; color: #333333; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 15px; padding-left: 50px; padding-right: 15px; padding-top: 15px; text-decoration: none; text-transform: uppercase;" target="_blank">PART 1 DEMO</a> | <a class="view" href="http://www.sohtanaka.com/web-design/examples/footer-panel/" style="-webkit-box-shadow: rgb(29, 29, 29) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: #99be39; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png); background-origin: initial; background-position: 15px 50%; background-repeat: no-repeat no-repeat; border-top-color: rgb(178, 216, 82); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(29, 29, 29) 0px 1px 2px; color: #333333; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 15px; padding-left: 50px; padding-right: 15px; padding-top: 15px; text-decoration: none; text-transform: uppercase;" target="_blank">FINAL DEMO</a></div></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 2em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Step 1. Wireframe and Tooltip Bubbles – HTML & CSS</h3><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Lay out the wireframe of the admin panel using an unordered list for the foundation. The last two list items (Alert Panel & Chat Panel) will have sub-panels nested within them. Since these two panels will float to the right, the order in the markup will be reversed.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Tooltip foundation" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/02_foundation_tooltip.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Notice that there is a <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;"><small></code></strong> tag nested within the <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;"><a></code></strong> tag, this is how we will achieve our tooltip bubble on the navigation.</div><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">HTML</h4><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;"><div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#" class="home">Inspiration <small>Design Bombs</small></a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel"><a href="#" class="alerts">Alerts</a></li>
        <li id="chatpanel"><a href="#" class="chat">Friends (<strong>18</strong>)</a></li>
    </ul>
</div></pre><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">CSS</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">First start by fixing the panel to the bottom of the viewport.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 9999; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Keeps the panel on top of all other elements--*/</span>
	background: #e3e2e2;
	border: 1px solid #c3c3c3;
	border-bottom: none;
	width: 94%;
	margin: 0 3%;
}</pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">As you may already know, IE6 does not understand fixed positioning. I stumbled across a <a href="http://www.gunlaug.no/contents/wd_additions_15.html" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;" target="_blank">tutorial</a> that fixed this problem*.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">*html #footpanel { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--IE6 Hack - Fixed Positioning to the Bottom--*/</span>
	margin-top: -1px; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/</span>
	position: absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}</pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">*Note: Due to heavy loading on the browser, an alternative solution would be to either use an <code style="outline-color: initial; outline-style: none; outline-width: initial;">position: absolute;</code> or if the situation/client allows it use <code style="outline-color: initial; outline-style: none; outline-width: initial;">display: none;</code> for those with IE6.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Style the unordered list which will be the foundation of this panel.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel ul {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	list-style: none;
	border-top: 1px solid #fff; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Gives the bevel feel on the panel--*/</span>
	font-size: 1.1em;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
	position: relative;
}
#footpanel ul li a{
	padding: 5px;
	float: left;
	text-indent: -9999px; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--For text replacement - Shove text off of the page--*/</span>
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Active state when sub-panel is open--*/</span>
	background-color: #fff;
	height: 17px;
	margin-top: -2px; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Push it up 2px to attach the active button to sub-panel--*/</span>
	border: 1px solid #555;
	border-top: none;
	z-index: 200; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Keeps the active link on top of the sub-panel--*/</span>
	position: relative;
}</pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Tooltip Demo" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/03_tooltip.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Declare the text replacement for each link.<br style="outline-color: initial; outline-style: none; outline-width: initial;" /><small style="outline-color: initial; outline-style: none; outline-width: initial;">You can download these great icons by <a href="http://pinvoke.com/" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;" target="_blank">Pinvoke here</a>.</small></div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel a.home{
	background: url(home.png) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset text indent since there will be a combination of both text and image--*/</span>
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
	background: url(balloon.png) no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset text indent since there will be a combination of both text and image--*/</span>
}
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Right align the chat and alert panels--*/</span></pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Tooltip Demo" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/04_tooltip.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Style the tooltip bubble, by default the <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;"><small></code></strong> tag will be hidden with a<strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;">display:none;</code></strong>. On hover over, allow the tooltip to appear with a <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;">display:block;</code></strong></div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel a small {
	text-align: center;
	width: 70px;
	background: url(pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Hide by default--*/</span>
	color: #fff;
	font-size: 1em;
	text-indent: 0;
}
#footpanel a:hover small{
	display: block; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Show on hover--*/</span>
	position: absolute;
	top: -35px; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Position tooltip 35px above the list item--*/</span>
	left: 50%;
	margin-left: -40px; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Center the tooltip--*/</span>
	z-index: 9999;
}</pre><div class="highlight" style="background-attachment: initial; background-clip: initial; background-color: #111111; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(34, 34, 34); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(34, 34, 34); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(34, 34, 34); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(34, 34, 34); border-top-style: solid; border-top-width: 1px; font-size: 1.5em; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 40px; padding-left: 0px; padding-right: 0px; padding-top: 40px; text-align: center;"><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a class="view" href="http://www.sohtanaka.com/web-design/examples/footer-panel/tooltip.htm" style="-webkit-box-shadow: rgb(29, 29, 29) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: #99be39; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png); background-origin: initial; background-position: 15px 50%; background-repeat: no-repeat no-repeat; border-top-color: rgb(178, 216, 82); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(29, 29, 29) 0px 1px 2px; color: #333333; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 15px; padding-left: 50px; padding-right: 15px; padding-top: 15px; text-decoration: none; text-transform: uppercase;" target="_blank">PART 1 DEMO</a> | <a class="view" href="http://www.sohtanaka.com/web-design/examples/footer-panel/" style="-webkit-box-shadow: rgb(29, 29, 29) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: #99be39; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png); background-origin: initial; background-position: 15px 50%; background-repeat: no-repeat no-repeat; border-top-color: rgb(178, 216, 82); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(29, 29, 29) 0px 1px 2px; color: #333333; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 15px; padding-left: 50px; padding-right: 15px; padding-top: 15px; text-decoration: none; text-transform: uppercase;" target="_blank">FINAL DEMO</a></div><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div></div><span class="Apple-style-span" style="background-color: rgba(0, 0, 0, 0.292969); color: #bbbbbb; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 24px;"><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out <a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;">Part 1 this is the perfect time to </a><a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/" style="color: #c5e86a; outline-color: initial; outline-style: none; outline-width: initial;">check it out</a>.</div><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.<span id="more-2734" style="outline-color: initial; outline-style: none; outline-width: initial;"></span></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Collapsible Subpanel Demo" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/05_chat_alert_panel.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="outline-color: initial; outline-style: none; outline-width: initial;">HTML</strong></div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;"><li <strong style="outline-color: initial; outline-style: none; outline-width: initial;">id="alertpanel"</strong>>
    <a href="#" class="alerts">Alerts</a>
    <div <strong style="outline-color: initial; outline-style: none; outline-width: initial;">class="subpanel"</strong>>
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;"></span></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;"></span></p>
            </li>
        </ul>
    </div>
</li>
<li <strong style="outline-color: initial; outline-style: none; outline-width: initial;">id="chatpanel"</strong>>
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div <strong style="outline-color: initial; outline-style: none; outline-width: initial;">class="subpanel"</strong>>
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
            <li><span>Family Members</span></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
    </div>
</li></pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="outline-color: initial; outline-style: none; outline-width: initial;">CSS</strong></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Since we declared a list item link style already (with the text replament technique), override the properties so we can use regular links in the sub-panels.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel ul li div a { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset link style for sub-panel links--*/</span>
	text-indent: 0;
	width: auto;
	height: auto;
	padding: 0;
	float: none;
	color: #00629a;
	position: static;
}
#footpanel ul li div a:hover {	text-decoration: underline; } <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset hover style for sub-panel links--*/</span></pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;"><h3></code></strong>.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel .subpanel {
	position: absolute;
	left: 0; bottom: 27px;
	display: none;	<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Hide by default--*/</span>
	width: 198px;
	border: 1px solid #555;
	background: #fff;
	overflow: hidden;
}
#footpanel h3 {
	background: #526ea6;
	padding: 5px 10px;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
}
#footpanel h3 span { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Right aligned "-" icon--*/</span>
	font-size: 1.5em;
	float: right;
	line-height: 0.6em;
	font-weight: normal;
}</pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The following section is the area that will be scrollable. Use an <code style="outline-color: initial; outline-style: none; outline-width: initial;">overflow: auto;</code> to allow the scroll to appear when the content exceeeds the <strong style="outline-color: initial; outline-style: none; outline-width: initial;"><code style="outline-color: initial; outline-style: none; outline-width: initial;"><ul></code></strong> height.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;">#footpanel .subpanel ul{
	padding: 0; margin: 0;
	background: #fff;
	width: 100%;
	overflow: auto;
	padding-bottom: 2px;
}
#footpanel .subpanel li{
	float: none; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset float--*/</span>
	display: block;
	padding: 0; margin: 0;
	overflow: hidden;
	clear: both;
	background: #fff;
	position: static;  <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset relative positioning--*/</span>
	font-size: 0.9em;
}</pre><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Chat Panel</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Chat Panel Details" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/06_chatpanel_details.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; z-index: 50;">#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
	padding: 5px;
	background: #fff;
	color: #777;
	float: left;
}
#chatpanel .subpanel li a img {
	float: left;
	margin: 0 5px;
}
#chatpanel .subpanel li a{
	padding: 3px 0;	margin: 0;
	line-height: 22px;
	height: 22px;
	background: #fff;
	display: block;
}
#chatpanel .subpanel li a:hover {
	background: #3b5998;
	color: #fff;
	text-decoration: none;
}</pre><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Alert Panel</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Alert Panel Details" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/07_alertpanel_details.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; z-index: 50;">#alertpanel .subpanel { right: 0; left: auto; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Reset left positioning and make it right positioned--*/</span> }
#alertpanel .subpanel li {
	border-top: 1px solid #f0f0f0;
	display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
	background: url(delete_x.gif) no-repeat;
	float: right;
	width: 13px; height: 14px;
	margin: 5px;
	text-indent: -9999px;
	visibility: hidden; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">/*--Hides by default but still takes up space (not completely gone like display:none;)--*/</span>
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
	text-align: right;
	padding: 5px 10px 5px 0;
}</pre><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Step 3. Activating the Subpanel – jQuery</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="outline-color: initial; outline-style: none; outline-width: initial;">Adjust the Subpanel Height</strong></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Adjust Panel height" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/08_adjustpanel.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Adjust Panel height" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/09_adjustpanel.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The following script contains comments explaining which jQuery actions are being performed.</div><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">jQuery</h4><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; width: 478px; z-index: 50;"><span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Adjust panel height</span>
$.fn.adjustPanel = function(){
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Reset sub-panel and ul height</span>

var windowHeight = $(window).height(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Get the height of the browser viewport</span>
    var panelsub = $(this).find(".subpanel").height(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Get the height of sub-panel</span>
    var panelAdjust = windowHeight - 100; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Viewport height - 100px (Sets max height of sub-panel)</span>
    var ulAdjust =  panelAdjust - 25; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Calculate ul size after adjusting sub-panel</span>

if ( panelsub > panelAdjust ) {	 <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//If sub-panel is taller than max height...</span>
        $(this).find(".subpanel").css({ 'height' : panelAdjust }); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Adjust sub-panel to max height</span>
        $(this).find("ul").css({ 'height' : panelAdjust}); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">////Adjust subpanel ul to new size</span>
    }
    else if { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//If sub-panel is smaller than max height...</span>
        $(this).find("ul").css({ 'height' : 'auto'}); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Set sub-panel ul to auto (default size)</span>
    }
};

<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Execute function on load</span>
$("#chatpanel").adjustPanel(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Run the adjustPanel function on #chatpanel</span>
$("#alertpanel").adjustPanel(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Run the adjustPanel function on #alertpanel</span>

<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Each time the viewport is adjusted/resized, execute the function</span>
$(window).resize(function () {
    $("#chatpanel").adjustPanel();
    $("#alertpanel").adjustPanel();
});</pre><h4 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/hr.gif); background-origin: initial; background-position: 0% 100%; background-repeat: repeat no-repeat; clear: both; color: white; font-size: 1.5em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 1px;">Add the Toggle Function</h4><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.</div><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The following script contains comments explaining which jQuery actions are being performed.</div><pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/pre_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: black; display: block; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px; margin-bottom: 20px; margin-top: 10px; outline-color: initial; outline-style: none; outline-width: initial; overflow-x: scroll; overflow-y: auto; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 18px; position: relative; z-index: 50;"><span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Click event on Chat Panel and Alert Panel	</span>
$("#chatpanel a:first, #alertpanel a:first").click(function() { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//If clicked on the first link of #chatpanel and #alertpanel...</span>
    if($(this).next(".subpanel").is(':visible')){ <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//If subpanel is already active...</span>
        $(this).next(".subpanel").hide(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Hide active subpanel</span>
        $("#footpanel li a").removeClass('active'); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Remove active class on the subpanel trigger</span>
    }
    else {<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;"> //if subpanel is not active...</span>
        $(".subpanel").hide(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Hide all subpanels</span>
        $(this).next(".subpanel").toggle(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Toggle the subpanel to make active</span>
        $("#footpanel li a").removeClass('active'); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Remove active class on all subpanel trigger</span>
        $(this).toggleClass('active'); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Toggle the active class on the subpanel trigger</span>
    }
    return false; <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Prevent browser jump to link anchor</span>
});

<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Click event outside of subpanel</span>
$(document).click(function() { <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Click anywhere and...</span>
    $(".subpanel").hide(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//hide subpanel</span>
    $("#footpanel li a").removeClass('active'); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//remove active class on subpanel trigger</span>
});
$('.subpanel ul').click(function(e) {
    e.stopPropagation(); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Prevents the subpanel ul from closing on click</span>
});

<span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Show/Hide delete icons on Alert Panel</span>
$("#alertpanel li").hover(function() {
    $(this).find("a.delete").css({'visibility': 'visible'}); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Show delete icon on hover</span>
},function() {
    $(this).find("a.delete").css({'visibility': 'hidden'}); <span style="color: #999999; outline-color: initial; outline-style: none; outline-width: initial;">//Hide delete icon on hover out</span>
});</pre><div style="margin-bottom: 1.9em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.sohtanaka.com/web-design/examples/footer-panel/" style="color: #98b843; outline-color: initial; outline-style: none; outline-width: initial;" target="_blank"><img alt="Final Demo" class="center" src="http://www.sohtanaka.com/web-design/examples/footer-panel/01_finalDemo.gif" style="background-attachment: initial; background-clip: initial; background-color: #333333; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 2px; border-width: initial; display: block; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 496px;" /></a></div><div class="highlight" style="background-attachment: initial; background-clip: initial; background-color: #111111; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(34, 34, 34); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(34, 34, 34); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(34, 34, 34); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(34, 34, 34); border-top-style: solid; border-top-width: 1px; font-size: 1.5em; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 40px; padding-left: 0px; padding-right: 0px; padding-top: 40px; text-align: center;"><div style="outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a class="view" href="http://www.sohtanaka.com/web-design/examples/footer-panel/" style="-webkit-box-shadow: rgb(29, 29, 29) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: #99be39; background-image: url(http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png); background-origin: initial; background-position: 15px 50%; background-repeat: no-repeat no-repeat; border-top-color: rgb(178, 216, 82); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(29, 29, 29) 0px 1px 2px; color: #333333; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 15px; padding-left: 50px; padding-right: 15px; padding-top: 15px; text-decoration: none; text-transform: uppercase;" target="_blank">FINAL DEMO</a></div></div></span>

Facebook Style Footer Admin Panel

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social ne...

อ่านเพิ่มเติม »

วันจันทร์, สิงหาคม 15, 2554

สมัครสมาชิก: บทความ ( Atom )