Pass Javascript timer to HTML, form and PHP

 Below is the example to pass Javascript  timer to HTML, form and PHP
 Using document.getElementById("quiz-time-left").innerHTML=
to pass value to HTML
 <div style="font-weight: bold" id="quiz-time-left"></div>
We can use
 document.quiz.time_spent.value = total_seconds;
to pass value to  form
<input type="text" name="time_spent">
or
<input type="hidden" name="time_spent">
then can be transferred to php via $_POST['timne_spent']
Example code:
<div style="font-weight: bold" id="quiz-time-left"></div>
<form method="post" name="quiz" id="quiz_form" action="take_test1.php">
<input type="text" name="time_spent">
<input type="submit" class="input-button" name="submit1" value="Submit Test" />
</form>
<script type="text/javascript">
//var ts = Math.round((new Date()).getTime() / 1000);
//var ts = <?php echo time() ?>;
var max_time = <?php echo $row_2['num_timer'] ?>;
//var t0=<?php echo $_SESSION['t_start'] ?>;
var c_seconds  = 0;
//var total_seconds =60*max_time+t0-ts;
var total_seconds =60*max_time;
max_time = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds';
document.quiz.time_spent.value = total_seconds;
function init(){
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds';
document.quiz.time_spent.value = total_seconds;
setTimeout("CheckTime()",999);
}
function CheckTime(){
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds' ;
document.quiz.time_spent.value = total_seconds;
if(total_seconds <=0){
setTimeout('document.quiz.submit()',1);
   
    } else
    {
total_seconds = total_seconds -1;
max_time = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("CheckTime()",999);
}

}
init();
function finishpage()
{
alert("unload event detected!");
document.quiz.submit();
}
//window.onunload =document.quiz.submit();
window.onbeforeunload= function() {
setTimeout('document.quiz.submit()',1);
}
</script>

Record computer sound without using microphone

I tried to record computer sound without using microphone, such as online music.
1) One possibility is to use audacity, which can be downloaded from:
http://audacity.sourceforge.net/download/
First we need to set the record device as  "Stereo Mix" in Windows 7
Start->Control Panel->Hardware and Sound ->Sound->Recording
Right-click anywhere inside the Recording tab and choose "Show disabled devices" then right-click again and check "Show Disconnected Devices"
"Stereo Mix" show up, right click it and enable and set as default Go to  audacity, and select microphone as "Stereo Mix" 
Reference:
http://audacity.sourceforge.net/download/
http://audacity.sourceforge.net/help/faq_i18n?s=recording&i=streaming 
For some reason, I failed.
2)   use a cable to connect your computer's “Line Out” (speaker) port to its “Line In” port, and use Audacity to record from Line In. But I do not have a cable yet.
3) Freecorder 3.0 is a browser plug-in. It records to lossless WAV or lossy MP3 format direct from the program producing the sound. But it failed for Firefox 17.0.
4) Using virtual audio recorder, which can be downloaded from:
 http://www.virtualaudiorecorder.com/
It works well and the output audio can be .mps and .wav format. Sometimes it sets streams 4 as playback. We may need to set it as earphone or speaker to hear the recording.
5） Finally I found a simple solution. Connect microphone and earphone with jack and use sound recorder built-in in Windows.

Design horizontal and vertical dropdown menu using superfish

Designing  a drop down menu may take a few hours. Using Superfish library, you can save a lot of time in drop down menu design.
Superfish library can be downloaded from:
http://users.tpg.com.au/j_birch/plugins/superfish/
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down men. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behavior for the mouseovers
To use Superfish is quite simple:

<script type="text/javascript" src="superfish.js"></script>

 <script> 

 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 
 
</script>

Demo for Superfish horizontal drop down menu:
Demo for Superfish vertical drop down menu:
You only need to change the following from horizontal menu:
<link rel="stylesheet" media="screen" href="css/superfish-vertical.css" />
At the beginning of menu list in HTML code, change
<ul class="sf-menu ">
to
<ul class="sf-menu  sf-vertical">
 

Insert video in Powerpoint

If you have .mp4 video to insert to PowerPoint, it may not work. You need to convert it to other formats, such as .wmv.

Free download Bigasoft Total Video Converter (for Windows, for Mac), install and run it.
reference:
http://www.bigasoft.com/articles/how-to-play-mp4-in-powerpoint.html

To make the video run automatically, click the video, the playback ta will be shown at the top menu,
Click playback tab and select start: automatically.

Firefox plugin update check

Sometimes, you may find your flash is not working properly. You  may need to check if your flash  player is update. You can go to:
https://www.mozilla.org/en-US/plugincheck/
to check and update your firefox plugin.

Another is about Java add on. When I downloaded Java, I found it is not automatically enabled. I need to got Firefox menu, click add and enable Java added-on.

Montastic - free website monitoring service

You may need to know if any problem in your web server. There are several online service about this.
Montastic offers free website monitoring service and can send your email warning if the site is down, the website of  Montastic:
http://www.montastic.com/
You can login with your Google account. More detail, check this video.

Text To Speech converter in Window 7

Text To Speech converter in Window 7 can be download from:
 http://download.cnet.com/Text-To-Wav/3000-7239_4-10788300.html

The output file formate can be wav format. The voice is quite clear.
Below is the video I recorded with voice from text to speech converter, the quality is  quite good.

Some tips about exporting PowerPoint into Video

You can export PowerPoint to video without external software such as Camtasia.
1) Before exporting to the video, you can do some tuneup. You may want different timing for each slide.  Click the slide you want to set the timing. Click transition tab at the top menu and enter the time in "after" row under  Advance slide.
2) You may need to add voice. If  you add narration, your slide timings is automatically recorded.
To record your voice in each slide,  select the slide you want record, click slide show tab at the top menu, select record slideshow->record current slide. click "start recording". To end your slide show recording, right click the slide, and then click End Show.
3) Go to File tab, click "save & send" and click "Create a video",  select "Computer & HD Displays".
Select "Use Recorded Timings and Narrations".  If there is no timings and narration, the default duration after "Second to spend on each slide" will be used.

MySQL Date and Time Type

 MySQL Date and Time Type: YEAR, TIME, DATE, DATETIME, TIMESTAMP

1.YEAR type
Both string and  number are fine.
As a 4-digit string in the range '1901' to '2155'.
As a 4-digit number in the range 1901 to 2155.
Note: Out of the range 1901 to 2155 converted to 0000

2. MySQL Time Type
HH:MM:SS
or
D HH:MM:SS
Here D is day converted  to hour  D+24*HH
Where HH hours, MM minutes, SS seconds

3.MySQL DATE Type
YYYY-MM-DD
Where YYYY years, MM  Months, DD days.

4. MySQL DATETIME Type
YYYY-MM-DD HH:MM:SS
Where YYYY years, MM  Months, DD days,
HH hours, MM minutes, SS seconds

5.MySQL DATESTAMP Type
YYYY-MM-DD HH:MM:SS
Where YYYY years, MM  Months, DD days,
HH hours, MM minutes, SS seconds

Similar to DATETIME,
 small difference, NULL and CURRENT_TIMESTAMP are current time

Write on slides with the PowerPoint pen

In slideshow tab, click setup slideshow. Choose the pen color. During PowerPoint slideshow, ctrl+P to using the pen. Use mouse to draw any shape during slideshow.
Video: Write on slides with the PowerPoint pen tutorial

Embed youtube video in high quality (HD)

If you upload high Quality (HD) video yo YouTube, Youtube  will  have an option HD for your video. But when you embed your video, the default is not HD. You need to  add ?hd=1 on the end of the youtube url.
Example, default embed code:
 <object style="height: 500px; width: 100%"><param name="movie" value="http://www.youtube.com/v/_qJJPgz_aZ4"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/_qJJPgz_aZ4" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="100%" height="500"></object>

After adding ?hd=1 on the end of the youtube url
 <object style="height: 500px; width: 100%"><param name="movie" value="http://www.youtube.com/v/_qJJPgz_aZ4?hd=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/_qJJPgz_aZ4?hd=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="100%" height="500"></object>

You can see the video quality is quite difference.

Difference between .html and .htm files

The .html and .htm files are the same, only small difference
.htm files are from old DOS operating system to save disk space.
Most browsers accpt .html and .htm file extentions.
The standard format should be .html format.

Wireless Markup Language (WML)

Wireless Markup Language (WML), based on XML, is a markup language intended for devices that implement the Wireless Application Protocol (WAP) specification, such as mobile phones.
Example of WML Code:

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
   "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
  <card id="main" title="First Card">
    <p mode="wrap">This is a sample WML page.</p>
  </card>
</wml>

Opera supports WML natively. Mozilla based browsers (Mozilla Firefox, SeaMonkey, MicroB) can interpret WML by WMLBrowser add on.

Remove www.claro-search.com in Firefox new tab

After I downloaded and Installed rar knife, www.claro-search.com is always open in FireFox new tab and McAfee giving a warning that it is a dangerous site.

To remove www.claro-search.com:
1) type  about:config in the address bar and press Enter, there is a warning message about `promising careful`` and click it
2) The list is quite long. In the search bar, type browser.newtab.url to narrow down the items only containing ``browser.newtab.url``.
3)  You can find only one item appear:
browser.newtab.url;http://www.claro-search.com/?affID=114508&tt=4512_3&babsrc=NT_clro&mntrId=34eec0ba000000000000f80f413d93be

4) Double click browser.newtab.url, and modify
http://www.claro-search.com/?affID=114508&tt=4512_3&babsrc=NT_clro&mntrId=34eec0ba000000000000f80f413d93be

to new address, such as
http://www.google.com

another options:
(i) Page thumbnails (default)

browser.newtab.url = about:newtab

(ii) Blank tab

browser.newtab.url = about:blank

(iii) Built-in Firefox home page

browser.newtab.url = about:home 

5) You do not need to restart the Firefox. Open new tab, now the default 

website for new tab is:  http://www.google.com

Reference:

http://support.mozilla.org/en-US/questions/934390 

Refresh the website using HTML meta

In chat room, we may need to refresh the url, for example in every 10 seconds.
We can use Meta="refresh" in HTML,
for example in show.php
<meta http-equiv="refresh" content="10;show.php"> 

This causes show.php url refresh in every ten seconds.

Responsive Web Design And CSS3 media queries

Responsive Web Design is an approach to design a website easily read from desktop to mobile phones.When you resize your web browser, the website content is change accordingly. The example of websites using Responsive Web Design:
US President Obama website:
http://www.barackobama.com/
The Boston Globe  and Simple Bits

To test your website for   Responsive Web Design, you just need to resize the website to the mobile phone size or using the following mobile emulators:
Opera Mobile Emulator   and Mobilizer.

There are also some tools to test  Responsive Web Design:
mattkersley.com/responsive , quirktools.com/screenfly, responsinator.com

Some websites have two versions, one for desktop, and another for mobiles. They are difficult to be updated. Using  Responsive Web Design can save a lot of work.

Responsive Web Design uses CSS3 media queries, which is an extension CSS3 to different media devices. Examples of CSS3 media queries:

@import url(/style.css) screen and (min-width:800px)
    and (max-width:1280px);

i.e.load style.css if the width of the output device is between 800px and 1280px.

@media screen and (max-width:300px) {
    .sidebar { display: none }
  }

 i.e.do not display sidebar if the width of the output device is less than 300px

 @media screen and (min-width:1280px) {
    body { font-size: 16px }
  }

 i.e.the font size is set to 16px in body if the width of the output device is greater than 1280px

Record your screen and publish on youtube using screenr

You can record your screen and publish it on youtube or facebook using screenr:
http://www.screenr.com/
It is an online application based on Java. So you need to install Java first.
You may need to bring your microphone if you want to add your voice.
Video: How-to Use Screenr (tutorial for elearning) :

JW player for flash, vedio streaming and HTML5 video

JW player is a wonderful vedio and HTML5  player. JW player can be downloaded from:
http://www.longtailvideo.com/players

JW player supports HTML5 video format:
Video Formats*: H.264 / MP4 (.mp4), VP8 / WebM (.webm), Ogg Theora (.ogv)
Sound Formats*: AAC (.aac, .m4a), MP3 (.mp3), Ogg Vorbis (.ogg)

Example script for HTML5 video:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<video height="270" width="480" id="myVideo">
  <source src="/static/bunny.mp4" type="video/mp4">
  <source src="/static/bunny.webm" type="video/webm">
</video>

<script type="text/javascript">
  jwplayer("myVideo").setup({
    modes: [
        { type: 'html5' },
        { type: 'flash', src: '/jwplayer/player.swf' }
    ]
  });
</script>

JW player supports ordinary video formats:
Video Formats: H.264 (.mp4, .mov, .f4v), FLV (.flv), 3GPP (.3gp, .3g2), YouTube
Sound Formats: AAC (.aac, .m4a), MP3 (.mp3)
Image Formats: JPEG (.jpg), PNG (.png), GIF (.gif) 

Example for JW embedder:
<div id="container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "/jwplayer/player.swf",
        file: "/uploads/video.mp4",
        height: 270,
        width: 480
    });
</script>

Example JW player combining with swfobject-2.2, here image is the first page of the video
<script type='text/javascript' src='swfobject-2.2.js'></script>

<div id='mediaplayer'></div>

<script type="text/javascript">

   var flashvars = {
      'file':   '/videos/bunny.mp4',
      'image':  '/thumbs/bunny.jpg'
   };
   
   var params = {
      'allowfullscreen':        'true',
      'allowscriptaccess':      'always'
   };

   var attributes = {
      'id':                     'playerID',
      'name':                   'playerID'
   };

   swfobject.embedSWF('player.swf', 'mediaplayer', '480', '270', '9', 'false',
       flashvars, params, attributes);
   
</script>

JW player also support RTMP Streaming from Flash Media Server:
Example
<div id='container'>The player will be placed here</div>

<script type="text/javascript">
  var flashvars = {

    file:'library/clip.mp4',
    streamer:'rtmp://www.myserver.com/ondemand/',
   image: '/thumbs/bunny.jpg'
  };

  swfobject.embedSWF('player.swf','container','480','270','9.0.115','false', flashvars,

   {allowfullscreen:'true',allowscriptaccess:'always'},
   {id:'jwplayer',name:'jwplayer'}

  );
</script>

Wrap long word in html table cell

In HTML table, different words can be  wrapped, but a long word will not be broken down. This will cause the cell width more than the width defined in CSS.

We can use  CSS

 word-wrap: break-word;

to break down a word  and  keep the  cell width fixed.

Example code:

<style type="text/css">
    table td
    {
        word-wrap: break-word;
    }
    </style>

  <table style="width: 100%; table-layout: fixed;"  cellpadding="0" cellspacing="0">
                <col width="13%" />
                <col width="18%" />
                <col width="30%" />
                <col width="21%" />
                <col width="18%" />
                    <tr>
                        <td>&nbsp;
                        </td>
                         <td>&nbsp;
                        </td>
                         <td>&nbsp;
                        </td>
                         <td>&nbsp;
                        </td>
                        < <td>&nbsp;
                        </td>
                    </tr>
            </table>