Siamnet.org RSS Headlines http://www.siamnet.org These are the official Siamnet.org headlines. en-us 2010 Mon, 24 Jan 2011 10:30:00 EST wjsams@gmail.com 30 Insert text at caret (cursor) in a textarea with jQuery

Insert text at caret (cursor) in a textarea with jQuery

Here is a plain JavaScript version.

In the example below, jQuery has been extended with the insertAtCaret function.

I've created a basic function insert(str) to actually perform the task. I was hoping <input type="button" name="push" value="Insert at Caret" onclick="$(this).insertAtCaret('InsertMe')" /> would work, but haven't had any luck.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
    insertAtCaret: function(valueToInsertAtCaret){
        return this.each( function(i) {
            if ( document.selection ) {
                this.focus();
                selection = document.selection.createRange();
                selection.text = valueToInsertAtCaret;
                this.focus();
            } else if ( this.selectionStart || this.selectionStart == "0" ) {
                var startPosition = this.selectionStart;
                var endPosition = this.selectionEnd;
                var scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPosition) + valueToInsertAtCaret + this.value.substring(endPosition, this.value.length);
                this.focus();
                this.selectionStart = startPosition + valueToInsertAtCaret.length;
                this.selectionEnd = startPosition + valueToInsertAtCaret.length;
                this.scrollTop = scrollTop;
            } else {
                this.value += valueToInsertAtCaret;
                this.focus();
            }
        })
    }
});

function insert(str) {
    $("textarea#output").insertAtCaret(str);
    return true;
}
</script>
</head>
<body>
<input type="button" name="push" value="Insert at Caret" onclick="insert('InsertMe')" /><br />
<textarea id="output" rows="15" style="width:95%;">This is a sentence.
And here is another sentence.
No, this is the best sentence.
What about me?
Don't think so.
Sorry.</textarea><br /><br />
</body>
</html>
[Get Code]

References

Posted on 2011-01-24 by asiam [See Javascript-jQuery-PlaceTextAtCursorPointInTextarea]

]]> Mon, 24 Jan 2011 10:30:00 EST How to auto refresh CSS with jQuery

How to auto refresh CSS with jQuery

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
[Get Code]

I use the Timer plugin » as so,

$(document).everyTime(30000, "reloadCss", function(i) {
        reloadStylesheets();
}, 0);
[Get Code]
$(document).ready(function(){
        $(document).everyTime(30000, "reloadCss", function(i) {
                reloadStylesheets();
        }, 0);
}
[Get Code]

Just put this in the ready function and as soon as your page loads, css will auto-reload every 30(000 milli)seconds.

References

Posted on 2010-11-23 by asiam [See Javascript-Jquery-HowToAutoRefreshCss]

]]> Tue, 23 Nov 2010 22:37:00 EST Open a dialog window (<code class="escaped"><div /></code>) near your cursor on double click or whatever event using jQuery / JavaScript

Open a dialog window (<div />) near your cursor on double click or whatever event using jQuery / JavaScript

This is the div that contains whatever you want to popup.

<div id="bliptools">
    Some content in here.
</div><!--bliptools-->
[Get Code]

This function will will open a div with id=bliptools.

function blipDoubleClick(e, bid) {
    var x = mouseX - 32;
    var y = mouseY;
    hideBlipTools();
    $("div#someId").css({"top":y, "left":x, "position":"absolute", "display":"block", "visibility":"visible"});
    isbliptoolson = true;
}
[Get Code]

This function will hide the bliptools div using jQuery.

function hideBlipTools() {
    if (isbliptoolson) {
        $('div#bliptools').hide('slow');
        isbliptoolson = false;
    }
    return true;
}
[Get Code]

Notes

You can also bind the event with jQuery so that if you double click on any div that has the class bliptext it will pop up the bliptools div.

$('div.bliptext').dblclick(function(e){
    var x = mouseX - 32;
    var y = mouseY;
    hideBlipTools();
    $("div#bliptools").css({"top":y, "left":x, "position":"absolute", "display":"block", "visibility":"visible"});
    isbliptoolson = true;
}
[Get Code]

Posted on 2010-11-16 by asiam [See Javascript-Jquery-PopupDialogNearMousePointer]

]]> Mon, 16 Nov 2010 10:36:00 EST Windows 7 inbound versus outbound firewall rules

Windows 7 inbound versus outbound firewall rules

Inbound rules: These are to do with other things accessing your computer. If you are running a Web Server on your computer then you will have to tell the Firewall that outsiders are allowed to connect to it.

Outbound rules: These are so that you can let some programs use the Internet, and Block others. You will want to let your Web Browser (Internet Explorer, Firefox, Safari, Chrome, Opera...) have access to the Internet, so you will tell Windows Firewall that it's allowed.

References

Posted on 2010-11-04 by asiam [See Windows7-InboundVersusOutboundFirewallRules]

]]> Thu, 04 Nov 2010 14:09:00 EST How to setup SSL on sbnc (ShroudBNC)

How to setup SSL on sbnc (ShroudBNC)

Create certificate

To create the certificate, go to directory where the sBNC binary is (not the source directory) and create the certificate. sBNC expects to find the files sbnc.crt and sbnc.key there:

$ cd ~/sbnc
$ openssl genrsa -des3 -out sbnc.key 1024
$ openssl req -new -x509 -days $[365 * 5] -key sbnc.key -out sbnc.crt
[Get Code]

You will be asked to create a passphrase and to answer some details.

Enable sslport

Turn the bouncer listen port to SSL by editing sbnc.conf in your favorite text editor and then changing:

Open /etc/sbnc/sbnc.conf, decide on a SSL port and change 

system.port=88888

to 

system.sslport=99999

where 99999 is your SSL port.

With this the listen port will use SSL, and no unencrypted port will be available anymore. You could have both encrypted and unencrypted listen ports by having both lines in the configuration, but we only have two ports available here in Shellium.org and it's kinda not logical to use an unencrypted connection if we want an encrypted one. Your choice. Now you can run sbnc with SSL, no special command line options needed.

Remove passphrase

Because sBNC asks for the passphrase of the SSL certificate when it starts, we must run it in foreground (with --foreground command line option) - that's not desirable here. This can be avoided by removing the passphrase from the SSL certificate. If there is no passphrase asked, the sbnc process can go to background as usual. To remove the passphrase execute:

$ cp sbnc.key sbnc.key.org
$ openssl rsa -in sbnc.key.org -out sbnc.key
[Get Code]

References

Posted on 2010-11-01 by asiam [See Ubuntu-Sbnc-HowToSetupSsl]

]]> Mon, 01 Nov 2010 17:02:00 EST Top 4 compact digital cameras of 2010

Top 4 compact digital cameras of 2010

Model Canon PowerShot S95
 Samsung WB2000
 Panasonic DMC-LX5K
 Nikon Coolpix P7000
MegaPixels 10 10 10 10
Sensor 1/1.7in CCD 1/2.4in CMOS 1/1.63 CCD 1/1.7in CCD
Focal Length 6.0 (W)-22.5mm (T) f/2.0-4.9 (35mm equivalent: 28-105mm) Schneider-KREUZNACH f = 4.3 ~ 21.5mm (35mm film equivalent : 24~120 mm) f=5.1-19.2mm (24-90mm in 35mm equiv.)
(25-95mm in 35mm equiv. in movie recording) 		7.1x zoom NIKKOR; 6.0-42.6mm (35mm [135] format picture angle: 28-200mm); f/2.8-5.6; Digital zoom: up to 4x (35mm [135] format picture angle: Approx. 800mm)
Focusing Range Auto: 2.0 in./5cm - infinity (W), 12 in./30cm-infinity (T);
Normal: 2.0 in./5cm - infinity, 12 in /30cm. - infinity (T);
Macro: 2.0 in. - 1.6 ft./5 - 50cm (W) 12 in. - 1.6 ft./ 30 - 50cm (T) ;
Manual Focus: 2.0 in. - infinity/5cm - infinity (W), 1.6 ft. - infinity/50cm - infinity (T) 		Normal : 50cm ~ Infinity (Wide), 80cm ~ Infinity (Tele) Macro : 5cm~50cm (Wide), 50cm ~ 80cm (Tele)
Auto Macro : 5cm~Infinity (Wide), 50cm~ Infinity (Tele)Manual : 5cm ~ Infinity (Wide), 50cm ~ Infinity (Tele) 		Normal: Wide/Tele 50 cm - infinity
Macro / Intelligent AUTO / Wide 1 cm - infinity / Tele 30cm - infinity 		50 cm (1 ft. 8in.) to infinity (∞), Macro close-up mode: 2 cm (0.8 in.) to infinity (∞)
Screen LCD Monitor
3.0-inch TFT color with wide viewing angle
LCD Pixels
Approx. 461,000 pixels 		AMOLED
Feature 3.0" (7.62cm), VGA 		3.0" TFT Screen LCD Display (460K dots), AR Coating
Field of View : approx. 100% Wide Viewing Angle
AUTO Power LCD mode, Power LCD mode
High CRI (Color Rendering Index) LED backlight 		7.5cm(3-in.), approx. 921k-dot, wide-viewing angle TFT LCD with anti-reflection coating
Shutter Speed 1 - 1/1600 sec 1/8 - 1/2000 sec 60 - 1/4000 sec ???
ISO Auto, ISO 80/100/125/160/200/250/320/400/500/640/800/1000/1250/1600/2000/2500/3200 equivalent in P Mode Auto, 80, 100, 200, 400, 800, 1600, 3200 Auto / i.ISO / 80 / 100 / 200 / 400 / 800 / 1600 / 3200 / 6400* / 12800* (* by pixel mixed readout) High Sensitivity (ISO 1600-12800) ISO 100, 200, 400, 800, 1600, 3200, Hi1 (equivalent to 6400), Auto (auto gain ISO 100-800), Fixed range auto (ISO 100-200, 100-400)
Remote control No ? - don't think so ? - don't think so Yes
Still formats JPEG Compression Mode
Still Image: Exif 2.3 (JPEG)
RAW (CR2 (Canon Original));
Video: MOV (Image: H.264; Audio: Linear PCM (Stereo)) 		JPEG, DCF, EXIF 2.21, DPOF 1.1, PictBridge 1.0 SRW (Samsung Raw File format) JPEG, RAW, RAW+Fine, RAW+Standard, Fine, Standard JPEG, RAW
Video format HD: 1280 x 720 1920x1080 High/Standard Quality 1280x720 pixels 720p
Power 1. Rechargeable Battery Pack NB-6L 1000mAh
2. Compact Power Adapter CA-DC10 (optional) Still Image: approx. 200 shots* Approx. 5 hours 		Rechargeable battery : SLB-11A (1130mAh)
Connector Type : 20pin
Adaptor : SAC-48, USB/Charging Cable : CB34U05, AV Cable : SCC-AV34 		ID-Security Li-ion Battery Pack (3.6V, Minimum: 1250mAh) (Included)
AC Adaptor (Input: 110-240V AC) (Optional) 		Rechargeable Li-ion Battery EN-EL14 1030mAh (supplied), Battery Charger MH-24 (supplied), AC Adapter EH-5a with power connecter EP-5A (optional)
Weight Approx. 6.00 oz. / 170g (camera body only) 153.3g Approx. 276.7g with Battery and SD Memory Card
Approx. 231.3 without Battery and SD Memory Card 		Approx. 360 g (12.7 oz.) with battery and SD memory card*3
]]> Fri, 29 Oct 2010 21:05:00 EST Easy way to scroll page to top and bottom

Easy way to scroll page to top and bottom

Install the jQuery Timer Plugin ».

Add the following function to your page.

function goToTop() {
    offset = window.pageYOffset;
    $(document).everyTime(3, "goToTop", function(i){
        window.scrollTo(0, offset);
        offset = (offset - 1 - Math.floor(offset/9));
        if (offset < 0) {
            $(document).stopTime("goToTop");
        }
    });
    return 0;
}

function goToBottom() {
    offset = window.pageYOffset;
    $(document).everyTime(3, "goToBottom", function(i){
        window.scrollTo(0, offset);
        offset = (offset + 1 + Math.floor(offset/9));
        if (offset > $(document).height()) {
            $(document).stopTime("goToBottom");
        }
    });
    return 0;
}
[Get Code]

Then attach the goToTop() function to an element like an up arrow. <img src="up_arrow.png" alt="up arrow" onclick="goToTop()" />

Add a little spring to the button

Change everyTime(3 to everyTime(10. Starts out slow, then several order faster.

Posted on 2010-10-28 by asiam [See Jquery-VerySimpleScrollPageToTop]

]]> Fri, 29 Oct 2010 21:05:00 EST

Basic example of converting a dita topic to xhtml with Java using dost.jar from the Dita Open Toolkit

First download the dita open toolkit ».

Extract to a location that has no spaces in the path and go into the extracted directory.

Create an output directory out and a directory test.

In the test directory, create a basic dita topic named groc.dita. The contents are,

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "http://docs.oasis-open.org/dita/v1.1/OS/dtd/topic.dtd">
<topic id="groceryshopping" xml:lang="en-us">
    <title>Shopping for groceries</title>
    <shortdesc>Tips on buying groceries.</shortdesc>
    <prolog>
        <author type="creator">Tom McIntyre</author>
        <copyright>
            <copyryear year="2007"/>
            <copyrholder>Acme Company</copyrholder>
        </copyright>
        <critdates>
            <created date="2006-August-07"/>
            <revised modified="2007-March-18"/>
        </critdates>
        <metadata>
            <keywords>
                <keyword>grocery shopping</keyword>
            </keywords>
        </metadata>
    </prolog>
    <body>
        <p>This is my awesome groceries document.</p>
    </body>
</topic>
[Get Code]

Now, to build and output xhtml, run the following command from the root of your dita installation.

$ java -jar lib/dost.jar /i:test/groc.dita /outdir:out /transtype:xhtml
[Get Code]

This should output a few files in the out directory including groc.html

References

Posted on 2010-10-26 by asiam [See Dita-TopicExampleWithDotJar]

]]> Tue, 26 Oct 2010 17:23:00 EST Weldon's Framework style from PHP in JSP

Weldon's Framework style from PHP in JSP

<%@ page import="org.kuali.sage.webapp.WsJspLibrary"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ page session="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%
/**
 * Setup
 */
String pageTitle = "Test";
String pageContent = "";
String pageCss = "";
String pageJs = "";
String jspSelf = request.getContextPath() + request.getServletPath();

/**
 * Actions
 */
if (request.getParameter("action") != null && request.getParameter("action").equalsIgnoreCase("test") && request.getParameter("name") != null && !request.getParameter("name").equalsIgnoreCase("")) {
        pageContent += "Hello " + request.getParameter("name");
}
pageContent += "<form action=\"" + jspSelf + "?action=test\" method=\"post\">";
pageContent += "Name <input type=\"text\" name=\"name\" size=\"20\" value=\"default guy\" /><br />";
pageContent += "<input type=\"submit\" value=\"submit\" />";
pageContent += "</form>";

/**
 * Page Output
 */
String html = "";
html += "<!DOCTYPE html>";
html += "<html>";
html += "<head>";
html += "<title>WsFramework - " + pageTitle + "</title>";
html += "<style type='text/css'>";
html += pageCss;
html += "</style>";
html += "<script type='text/javascript'>";
html += pageJs;
html += "</script>";
html += "</head>";
html += "<body>";
html += pageContent;
html += "</body>";
html += "</html>";
out.println(html);
%>
[Get Code]

Posted on 2010-10-18 by asiam [See Java-Jsp-WeldonsFrameworkStyle]

]]> Mon, 18 Oct 2010 16:33:00 EST Turn off string, parenthese, brackets, ... etc auto completion

Turn off string, parenthese, brackets, ... etc auto completion

 Window > Preferences > Java > Editor > Typing

Posted on 2010-10-15 by asiam [See Java-Eclipse-TurnOffAutoStringCompletionEtc]

]]> Fri, 15 Oct 2010 14:32:00 EST Bring Misplaced Off-Screen Windows Back to Your Desktop

Bring Misplaced Off-Screen Windows Back to Your Desktop

If you’ve ever hooked up your laptop to a secondary monitor and then disconnected without remembering to move the windows back to the primary desktop, you’ve probably encounted this problem:

The application is running. You can see it in the taskbar, but you can’t see it on the screen, because it still thinks it’s running on the secondary monitor. You try and use right-click, Move, but that doesn’t do anything, and the window doesn’t move anywhere. You end up rebooting and cursing Microsoft.

There’s a simple trick to get around this. First make sure you’ve alt-tabbed to the window, or clicked on it once to bring it into focus. Then right-click on the taskbar and choose Move

At this point, you should notice that your cursor changes to the “Move” cursor, but you still can’t move anything.

Just hit any one of the arrow keys (Left, Right, Down, Up), move your mouse, and the window should magically “pop” back onto the screen.

Note: For keyboard savvy people, you can just alt-tab to the window, use Alt+Space, then M, then Arrow key, and then move your mouse.

This should work on any version of Windows. It’s really amazing how many people are not aware of this little trick.

References

Posted on 2010-10-14 by asiam [See BringMisplacedOffScreenWindowsBackToYourDesktop]

]]> Thu, 14 Oct 2010 17:41:00 EST How to uninstall software or plugins in Eclipse

How to uninstall software or plugins in Eclipse

This was tested on Helios.

Go to Help > About Eclipse, then on that dialog window, click the button Installation Details. Then on that window, go to the Installed Software tab, click the plugin you want to uninstall and click the Uninstall button.

Posted on 2010-10-11 by asiam [See ]

]]> Thu, 09 Apr 2010 01:12:00 EST Ascii Love

(¯`v´¯)
`·.¸.·´
¸.·´¸.·´¨) ¸.·¨)
(¸.·´ (¸.·´ .·´`. ¸¸.·¨¯`·.x

Posted on 2010-09-29 by asiam [See ]

]]> Wed, 29 Sep 2010 23:56:00 EST Monitor bandwidth usage from the command line (Linux/Ubuntu)

Monitor bandwidth usage from the command line with ifstat

Install

$ sudo apt-get install ifstat
[Get Code]

Run with

$ ifstat
[Get Code]

Output looks like the following - it just keeps appending an entry to the console every second or so. Just like running ping with no limit.

# ifstat
       eth1
 KB/s in  KB/s out
    7.03    310.91
    8.45    381.37
    8.23    372.32
    5.65    277.50
    5.92    291.04
    6.02    296.70
   11.13    274.80
    9.59    271.01
    7.06    285.33
   14.90    241.35
   11.99    278.45
   11.89    271.65
[Get Code]

Another option is Color Bandwidth Meter cbm

Install

$ sudo apt-get install cbm
[Get Code]

Run

$ cbm
[Get Code]

This runs on one screen similarly to that of top, but just displays the amount of bandwidth used per device (nic).

To stop just type the letter q.

Another solution with iftop

This one displays incoming IP addresses (or hostnames) of machines accessing your machine or that your machine is accessing and the amount of bandwidth.

Install

$ sudo apt-get install iftop
[Get Code]

Run

$ iftop
[Get Code]

Stop by hitting the letter q.

References

Posted on 2010-09-29 by asiam [See ]

]]> Wed, 29 Sep 2010 13:15:00 EST Create an anti-aliased effect in CSS3

Create an anti-aliased effect in CSS3

body {
    text-shadow:1px 1px 0 white,1px 1px 0 gray;
}
[Get Code]

Posted on 2010-09-29 by asiam ]

]]> Wed, 29 Sep 2010 00:17:00 EST Run a command at a specific time just from the command line

Run a command at a specific time just from the command line

This will download a jpg file at 1 am. It runs programs with /bin/sh by default - maybe only.

$ url="http://www.example.com/file.jpg"
$ echo "wget $url" | at 01:00
[Get Code]

References

Posted on 2010-09-26 by asiam Linux-ExecuteAtCommandAtASpecificTime]

]]> Thu, 26 Sep 2010 19:43:00 EST