July 2006


Javascript code snippets28 Jul 2006 02:02 pm

An easy method to create an expanding list using javascript. I've incorporated the code into some server status pages to show or hide tables. Effective and clean looking.

CODE:
  1. <html>
  2. <head>
  3. <title></title>
  4.  
  5. <style>
  6. ul {  margin-top: 0px;  margin-bottom:0px; }
  7.  
  8. ul.expand { display: none; }
  9.  
  10. li { list-style-type: none; display: block; }
  11.  
  12. img {
  13.   border: none;
  14.   vertical-align:
  15.   text-bottom;
  16. }
  17. </style>
  18.  
  19. <script>
  20. function toggle(id)
  21. {
  22.   var L = document.getElementById("L"+id);
  23.   var I = document.getElementById("I"+id);
  24.   if (L.style.display == "" || L.style.display == "none") {
  25.     L.style.display = "block";
  26.     I.src = "opened.gif";
  27.   }
  28.   else {
  29.     L.style.display = "none";
  30.     I.src = "closed.gif";
  31.   }
  32. }
  33. </script>
  34.  
  35. </head>
  36. <body>
  37.  
  38. <h3>An Expanding List</h3>
  39.  
  40. <p>
  41. Click on the red right-arrows to expand the list.
  42. Click on the green down-arrows to contract the list.
  43. </p>
  44.  
  45. <li><img onclick="toggle(1)" id="I1" src="closed.gif"/>Topic A 
  46.    <ul class="expand" id="L1">
  47.      <li><img src="fixed.gif" />Topic A1</li>
  48.      <li><img onclick="toggle(2)" id="I2" src="closed.gif"/>Topic A2
  49.     <ul class="expand" id="L2">
  50.       <li><img src="fixed.gif" />Topic A21</li>
  51.       <li><img src="fixed.gif" />Topic A22</li>
  52.       <li><img src="fixed.gif" />Topic A23</li>
  53.     </ul>
  54.     </li>
  55.   <li><img src="fixed.gif" />Topic A3</li>
  56. </ul>
  57. </li>
  58.  
  59. <li>
  60. <img onclick="toggle(3)" id="I3" src="closed.gif"/>Topic B
  61.   <ul class="expand" id="L3">
  62.     <li><img src="fixed.gif" />Topic B1</li>
  63.     <li><img src="fixed.gif" />Topic B2</li>
  64.     <li><img src="fixed.gif" />Topic B3</li>
  65.   </ul>
  66. </li>
  67. </body>
  68. </html>
  69.  
  70. and here is how it works.
  71. Timer Display
  72.  
  73. Animation, in its broadest sense means changing the content over time, usually withing small time intervals. In JavaScript, the key to animation is the setInterval function which causes a function to be called at periodic intervals.
  74. This is perhaps the most basic example illustrating the usage of the setInterval function. The current time and date can be read into a string using an operation something like this:
  75.  
  76. timedate = new Date();
  77.  
  78. What we want to do is to depict the "running" time in our browser, i.e., we want it updated every second with a new value. Here is the example:
  79.  
  80. <html>
  81. <head>
  82. <title>Timer</title>
  83. <script type="text/javascript">
  84. <!--
  85. function init()
  86. {
  87.   showDate();
  88.   setInterval('showDate()', 1000);
  89. }
  90. function showDate()
  91. {
  92.   var time = document.getElementById("time");
  93.   time.innerHTML = new Date();
  94. }
  95. // -->
  96. </script>
  97. </head>
  98. <body onload="init();">
  99.  
  100. The current time and date on my system is:
  101. <span style="color:red" id="time"></span>
  102.  
  103. </body>
  104. </html>

Borrowed from http://www.cs.wcupa.edu/~rkline/Web/JavaScriptExamples.html

Linux / Unix21 Jul 2006 09:02 am

Having multiple servers to entertain me and for website and application development, I found that entering passwords continually while switching from machine to machine very tiring. This enables cron jobs to run backups, and a mryiad of other automated tasks via an encrypted connection, thus not exposing my passwords over the network, some of which crosses wireless segments using such thigns as FTP, instead scp keeps things nice and garbled for anyone thinking to listen in.

This is not only for Linux, but all Unix type boxes and even Windows! Yes, I said windows! I'll publish another article to explain how to accomplish this one a windows machine.

Here's a quick and dirty tutorial of how to set up shared SSH keyss to authenticate to each server automagically, no more entering passphrases!

Login to the first server (harry in this example) and create your key

CODE:
  1. root@harry:/root# ssh-keygen -t rsa
  2. Generating public/private rsa key pair.
  3. Enter file in which to save the key (/root/.ssh/id_rsa):
  4. Enter passphrase (empty for no passphrase):   [just hit enter]
  5. Enter same passphrase again:   [just hit enter again]
  6. Your identification has been saved in /root/.ssh/id_rsa.
  7. Your public key has been saved in /root/.ssh/id_rsa.pub.
  8. The key fingerprint is:
  9. ac:0b:bf:3f:30:9a:05:29:d8:2b:27:58:cf:d3:08:9d
  10. root@harry:

Now scp the rsa key to the destination server (case):

CODE:
  1. root@harry:/home/dave# scp /root/.ssh/id_rsa.pub case:.ssh/authorized_keys
  2. root@case's password: [enter root's password]
  3. id_rsa.pub                                    100392     0.4KB/s   00:00

and presto.... you are done, now ssh to case

CODE:
  1. root@harry:/home/dave# ssh root@case
  2. Last login: Fri Jul 21 08:45:20 2006 from harry
  3. Linux 2.4.22.
  4. root@case:~#

root is instantly authenticated from harry because of the shared key.

Now continue to replicate the process for each server/workstation/user that you wish. This can make life much easier for you however there is one drawback, see the note below.

NOTE: once setting this up even changing root's password will not resecure they connection or change the 'key' nor will it stop access from any machine with a shared user and key. In simpler terms much the same way giving away a key to your house, the one who posesses the address and key to the hosue may enter at any time, the only way to disallow access is to change the lock or destroy the key (in our world, the authorized_keys file).

Happy hacking.

-------------------------
Test king has proved itself to the students all over the world by conducting practice tests and training sessions through tests like VCP-101V and 1Y0-327 which are based on the real exam patterns. The Microsoft test number 70-350 is also a popular test among the computer students. Test king also offers training programs for Cisco in tests such as 642-873 and 646-588. Another known test is 642-372 which Cisco students take in order to prepare well for their certifications requirements.

Blogging Resources12 Jul 2006 01:47 pm

While optimizing my databases and such I noticed that I had been making a fatal mistake with my WordPress database; marking comments as 'spam' through the comments moderation panel. This only marks the comment_approved feild in the row for that comment in the wp_comments table from '0' to 'spam'.

In over a year I'd accumilated over 12K rows just for spam that needed to be parsed each time a particular post/page was to be displayed, and dragging down the performance of my blog. Instead of marking spam as such, deleting them completely seems to be the route to take.

A quick query to run against your database in a utility such as phpMyAdmin follows to purge the tables of those entries for you;

CODE:
  1. DELETE
  2. FROM `wp_comments`
  3. WHERE `comment_approved` = CONVERT( _utf8 'spam'
  4. USING latin1 ) ;

Some tweaking may be needed far your particular setup, I'll be submitting this as a feature request to the kind folks at WordPress or if time permits creating a quick and dirty plugin.

Linux / Unix12 Jul 2006 01:23 pm

Quick and dirty - How to create a "tarball".

By now everyone has seen the wonderfull myproject.tar.gz, I say wonderful as to extract the 'project' or whatever is contained in the tarball can be accomplished with a single command and viola, all the files are extracted with all of thier subdirectories and files in tact, complete with unix permissions.

So you'd like to backup your website or project for distribution, easy enough

tar everything up
[server]$ tar -cf myproject.tar myprojectdir myotherprojectdir
and gzip it
[server]$ gzip myproject.tar
the result is will net you myproject.tar.gz all ready to do as you will with.

Explaination the -cf switch is simply create file, if you like you can use -vcf to display a verbose listing as tar moves along to ensure you are getting the intended files and directories.
myprojectdir myotherprojectdir are just the directories you which to include, this list can be one, two, or more diectories.

gzip will compress your .tar file and leave you with the resulting .gz, so of you want to retain a copy of the .tar be sure to make a copy before gzip.

As mentioned earlier, to extract your shiny new tarball once you have it in the desired directory, you can do this with one command,
[system]$ tar -xzvf myproject.tar.gz

Easy

Webmaster / SEO07 Jul 2006 03:47 pm

How to create a DHTML expandable lists.

Try the following example:

CODE:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <title></title>
  5. </meta><meta name="description" content="">
  6. </meta><meta name="keywords" content="">
  7.  
  8. <style>
  9. .general {font-family:Verdana;font-size:11;color:white}
  10. .span_general {font-family:Verdana;font-size:9;color:white;border-style:solid;border-color:white;border-width:1px 1px 1px 1px;text-align:center;width:16;height:15;cursor:hand}
  11. </style>
  12.  
  13. <script>
  14.  
  15. function objectOver(x){
  16. x.style.color="#9ff5ff";
  17. }
  18.  
  19. function objectOut(x){
  20. x.style.color="white";
  21. }
  22.  
  23. function collapse(x){
  24. var oTemp=eval("document.all.text_"+x);
  25. var oClick=eval("document.all.click_"+x);
  26.  
  27.       if(oTemp.style.display=="block"){
  28.             oTemp.style.display="none";
  29.             oClick.innerHTML="+";
  30.       }
  31.       else{
  32.             oTemp.style.display="block";
  33.             oClick.innerHTML="-";
  34.       }
  35. }
  36. </script>
  37.  
  38. </meta></head>
  39. <body bgcolor=#224452>
  40.  
  41. <div id=click_1 class=span_general onclick=javascript:collapse('1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:100;position:relative;left:-25;top:14"> - </div>
  42.  
  43. <div style="margin-left:100;display:block" class=general>
  44. Text 1 TITLE
  45. </div><br />
  46. <div id=text_1 style="margin-left:100" class=general>
  47. text that is displayed under Text 1 TITLE<br />
  48. another line of text here<br />
  49. </div>
  50.  
  51. <div id=click_1_1 class=span_general onclick=javascript:collapse('1_1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14"> - </div>
  52. <div style="margin-left:200;display:block" class=general>
  53. Text 1_1 TITLE
  54. </div><br />
  55. <div id=text_1_1 style="margin-left:200" class=general>
  56. Text under Text 1_1 TITLE catagory<br />
  57. </div>
  58.  
  59.  
  60. <div id=click_1_2 class=span_general onclick=javascript:collapse('1_2') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14"> - </div>
  61. <div style="margin-left:200;display:block" class=general>
  62. Text 1_2 TITLE
  63. </div><br />
  64. <div id=text_1_2 style="margin-left:200" class=general>
  65. This is a test of the emergency broadcasting system.<br />
  66. </div>
  67.  
  68. <div id=click_1_2_1 class=span_general onclick=javascript:collapse('1_2_1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:300;position:relative;left:-25;top:14"> - </div>
  69. <div style="margin-left:300;display:block" class=general>
  70. Text 1_2_1 TITLE
  71. </div><br />
  72. <div id=text_1_2_1 style="margin-left:300;display:block" class=general>
  73. If there were a real emergency and you thought someone would care this <br />
  74. information would be classified and you wouldn't know anyhows<br />
  75. </div>
  76. <div id=click_1_3 class=span_general onclick=javascript:collapse('1_3') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14"> - </div>
  77. <div style="margin-left:200;display:block" class=general>
  78. Text 1_3 TITLE
  79. </div><br />
  80. <div id=text_1_3 style="margin-left:200" class=general>
  81. Example for 1_3 text area...<br />
  82. Notice in the code that the breaks all have a trailing slash....thus closing the br tag<br />
  83. I'm trying to remember to use correct syntax before something breaks it.
  84. </div>
  85.  
  86. </body>
  87. </html>

Next Page »


File Sharing - Cheap Hotels Paris - Loans - Arab Girl - Homeowner Loans
X10 Home Security|Dakar's Photos
Listed on BlogShares