Saturday, March 22, 2008

Copy HTML contents as Text to Clipboard

Periodically it is necessary to copy the contents of an HTML control to another location in text format.  Selecting elements of an HTML page and using the "context" copy will place the contents on the clipboard in two formats; HTML and plain text.

Copy the following to your clipboard and then paste it into two different editors to see how this works:

The quick brown cat jumped over the

lazy dogs back 1234567890 times

while the sly fox


First paste this into notepad.  Notice no formatting of course.  Now paste into an HTML editor like an Outlook mail message set for HTML format or paste into MS Word.  The formatting is maintained.

Now do the same with the following:

Sub test

Dim myint
myint = 1
End Sub 

In some browsers just selecting this code is a bit of a problem especially if it goes off the visible page.

The following shows how to add a piece of embedded script that will copy the code to the clipboard as plain text.  It will retain it's line spacing and line ending correctly.  This will greatly simplify delivery of code content to users.

The method:

Include the following in the page scripts in any convenient place:

<script language="jscript" type="text/jscript">
function divout(ctl){
var code=ctl.innerText;
Copied = holdtext.createTextRange();
return false;

Include a button or hyperlink like the following:

<input type="button" value="Copy To Clipboard" language="jscript"

Wrap your code display in a DIV and give it an id.  Set the argument to "divout" to the id of your codes DIV.

Include a dummy <textarea></textarea> that is hidden anywhere on teh page.  This is used to store the interim text while formatting and to allow the contents to be easily extracted to teh clipboard.

<textarea id="holdtext" style="display: none">Empty</textarea>

Press here to see it work:


This is a patch for the input button issue.

Sunday, March 16, 2008

Dynamically Load Images from a Database to an HTML Page

Copy Code

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ADODB Stream Writer Image Test</title>

<script language="vbscript" type="text/vbscript">
Dim Source 'as String
Dim Connect 'as ADODB.Connection
Dim f   'As Scripting.File
Dim s   'As New ADODB.Stream
Dim rs  'As ADODB.Recordset
Connect = "Provider=SQLOLEDB.1;Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=AdventureWorks;Data Source=.\SQLExpress"
Source = "SELECT * FROM Production.ProductPhoto"

Sub window_onload

Set s = CreateObject("ADODB.Stream")
Set rs = CreateObject("ADODB.Recordset")
rs.Open Source, Connect, adOpenForwardOnly

End Sub

Sub ShowButton = "visible"
End Sub

Sub nextimage() = "hidden"

If Not rs.eof Then
MsgBox "No more images - resetting to BOF"
End If
window.setTimeout "ShowButton",400,"vbscript"

End Sub

Sub GetImage()
fName = rs.Fields("LargePhotoFIleName")
photo = rs.Fields("LargePhoto")
s.Type = 1 'adTypeBinary
    s.Write photo
s.SaveToFile fName, 2 'adSaveCreateOverWrite
img1.src = fName
txt1.Value = fName
End Sub

<input id="btn1" type="button" value="click" onclick="nextimage"/>
input id="txt1" type="input"/>
br />
br />
img id="img1" />
Technorati tags: