Solved

Rewrite createElement code to plain HTML

Posted on 2008-10-30
12
352 Views
Last Modified: 2012-05-05
I have the following code :

 var td = document.createElement('td');
        var clearer = document.createElement('span');
            clearer.id = "keyboardInputClear";
            clearer.appendChild(document.createTextNode("Clear"));
            clearer.title = "Clear this input";
            clearer.onmousedown = function() { this.className = "pressed"; };
            clearer.onmouseup = function() { this.className = ""; };
            clearer.onclick = function() {
              self.VKI_target.value = "";
              self.VKI_target.focus();
              return false;
            };

Now i want to hard code the createelement part instead of passing it as an variable...

Can u help me on this?
0
Comment
Question by:manas_sharma86
  • 5
  • 2
  • 2
  • +1
12 Comments
 
LVL 16

Expert Comment

by:Lolly-Ink
ID: 22847920
¿Qué?
0
 

Author Comment

by:manas_sharma86
ID: 22847966
As in i wan't to show all this in the HTML page in a DIV rather then in the JS
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22847982
You mean this?
<td></td>

<span id="keyboardInputClear" title="Clear this input" onmousedown="this.className = 'pressed';" onmouseup = "this.className = '';;" onclick = "self.VKI_target.value = '';self.VKI_target.focus();return false;">Clear</span>

Open in new window

0
 

Author Comment

by:manas_sharma86
ID: 22848098
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"keyboardInputMaster\">
<thead><tr><th>select
 SOmething like this...

The whole code is :

this.VKI_keyboard = document.createElement('table');
  this.VKI_keyboard.id = "keyboardInputMaster";
  this.VKI_keyboard.cellSpacing = this.VKI_keyboard.cellPadding = this.VKI_keyboard.border = "0";

  var layouts = 0;
  for (ktype in this.VKI_layout) if (typeof this.VKI_layout[ktype] == "object") layouts++;

  var thead = document.createElement('thead');
    var tr = document.createElement('tr');
      var th = document.createElement('th');
        if (layouts > 1) {
          var kblist = document.createElement('select');
            for (ktype in this.VKI_layout) {
              if (typeof this.VKI_layout[ktype] == "object") {
                var opt = document.createElement('option');
                    opt.value = ktype;
                    opt.appendChild(document.createTextNode(ktype));
                  kblist.appendChild(opt);
              }
            }
              kblist.value = this.VKI_kt;
              kblist.onchange = function() {
                self.VKI_kt = this.value;
                self.VKI_buildKeys();
                self.VKI_position();
              };
          th.appendChild(kblist);
        }

          var label = document.createElement('label');
            var checkbox = document.createElement('input');
                checkbox.type = "checkbox";
                checkbox.checked = this.VKI_deadkeysOn;
                checkbox.title = "Toggle dead key input";
                checkbox.onclick = function() {
                  self.VKI_deadkeysOn = this.checked;
                  this.nextSibling.nodeValue = " Dead keys: " + ((this.checked) ? "On" : "Off");
                  self.VKI_modify("");
                  return true;
                };
              label.appendChild(checkbox);
              label.appendChild(document.createTextNode(" Dead keys: " + ((checkbox.checked) ? "On" : "Off")))
          th.appendChild(label);
        tr.appendChild(th);

      var td = document.createElement('td');
        var clearer = document.createElement('span');
            clearer.id = "keyboardInputClear";
            clearer.appendChild(document.createTextNode("Clear"));
            clearer.title = "Clear this input";
            clearer.onmousedown = function() { this.className = "pressed"; };
            clearer.onmouseup = function() { this.className = ""; };
            clearer.onclick = function() {
              self.VKI_target.value = "";
              self.VKI_target.focus();
              return false;
            };
          td.appendChild(clearer);

        var closer = document.createElement('span');
            closer.id = "keyboardInputClose";
            closer.appendChild(document.createTextNode('X'));
            closer.title = "Close this window";
            closer.onmousedown = function() { this.className = "pressed"; };
            closer.onmouseup = function() { this.className = ""; };
            closer.onclick = function() { self.VKI_close(); };
          td.appendChild(closer);

        tr.appendChild(td);
      thead.appendChild(tr);
  this.VKI_keyboard.appendChild(thead);

  var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
      var td = document.createElement('td');
          td.colSpan = "2";
        var div = document.createElement('div');
            div.id = "keyboardInputLayout";
          td.appendChild(div);
        var div = document.createElement('div');
          var ver = document.createElement('var');
              ver.appendChild(document.createTextNode("v" + this.VKI_version));
            div.appendChild(ver);
          td.appendChild(div);
        tr.appendChild(td);
      tbody.appendChild(tr);
  this.VKI_keyboard.appendChild(tbody);      

  if (this.VKI_isIE6) {
    this.VKI_iframe = document.createElement('iframe');
    this.VKI_iframe.style.position = "absolute";
    this.VKI_iframe.style.border = "0px none";
    this.VKI_iframe.style.filter = "mask()";
    this.VKI_iframe.style.zIndex = "999999";
  }

And i wan't to display this on HTML page..without using create element
0
 

Author Comment

by:manas_sharma86
ID: 22848448
Yes your title is more understandable :-)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:manas_sharma86
ID: 22848453
Almost same...but i have got what i wanted....just require the plain html thing now
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848495
So
1. download FireFox3
2. add web developer addin
3. click on view source/View generated source
4. cut and paste

If you want, give me a complete html page and I can grab the html for you
0
 

Author Comment

by:manas_sharma86
ID: 22848502
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>IPTV keyboard</title>
  <link rel="stylesheet" type="text/css" href="keyboard.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />
  <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
  <style type="text/css">

#divfixed {
  border:2px solid #808088;
  background-color:#dddddf;
  position:fixed;
  bottom:250px;
  right:100px;
  padding:5px;
}

pre, code {
  background-color:oldlace;
}
  </style>
</head>
<a href="#" id="mylink">Show Keyboard</a>
<body>
<input type="text" value="" id="existing0" class="keyboardInput" />
</body>
</html>

This is the HTML
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848545
It isn't complete

What is the function you call that contains the javascript you pasted?

can you paste the complete keyboard.js?
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22850490
So, you actually did use the solution I gave you in the other thread.  That is no doubt code from GreyWyvern's JS keyboard.  It would be a lot easier if you were just up front about what you were doing.
For anyone that's wondering what I'm talking about:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_23826946.html
http://www.greywyvern.com/code/js/keyboard.html


<style type="text/css">

/*

Copyright (c) 2004-2007, GreyWyvern

All rights reserved.
 

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:
 

Redistributions of source code must retain the above copyright notice,

this list of conditions and the following disclaimer.
 

Redistributions in binary form must reproduce the above copyright

notice, this list of conditions and the following disclaimer in the

documentation and/or other materials provided with the distribution.
 

Neither the name of GreyWyvern.com nor the names of its contributors

may be used to endorse or promote products derived from this software

without specific prior written permission.
 

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS

IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED

TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A

PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

*/

#keyboardInputMaster {

  position:absolute;

  border:2px groove #dddddd;

  color:#000000;

  background-color:#dddddd;

  text-align:left;

  z-index:1000000;

  width:auto;

}
 

#keyboardInputMaster thead tr th {

  text-align:left;

  padding:2px 5px 2px 4px;

  background-color:inherit;

  border:0px none;

}

#keyboardInputMaster thead tr th select,

#keyboardInputMaster thead tr th label {

  color:#000000;

  font:normal 11px Arial,sans-serif;

}

#keyboardInputMaster thead tr td {

  text-align:right;

  padding:2px 4px 2px 5px;

  background-color:inherit;

  border:0px none;

}

#keyboardInputMaster thead tr td span {

  padding:1px 4px;

  font:bold 11px Arial,sans-serif;

  border:1px outset #aaaaaa;

  background-color:#cccccc;

  cursor:pointer;

}

#keyboardInputMaster thead tr td span.pressed {

  border:1px inset #999999;

  background-color:#bbbbbb;

}
 

#keyboardInputMaster tbody tr td {

  text-align:left;

  margin:0px;

  padding:0px 4px 3px 4px;

}

#keyboardInputMaster tbody tr td div {

  text-align:center;

  position:relative;

  height:0px;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout {

  height:auto;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table {

  height:20px;

  white-space:nowrap;

  width:100%;

  border-collapse:separate;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table.keyboardInputCenter {

  width:auto;

  margin:0px auto;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td {

  vertical-align:middle;

  padding:0px 5px 0px 5px;

  white-space:pre;

  font:normal 11px 'Lucida Console',monospace;

  border-top:1px solid #e5e5e5;

  border-right:1px solid #5d5d5d;

  border-bottom:1px solid #5d5d5d;

  border-left:1px solid #e5e5e5;

  background-color:#eeeeee;

  cursor:default;

  min-width:0.75em;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.last {

  width:99%;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.alive {

  background-color:#ccccdd;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.target {

  background-color:#ddddcc;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.hover {

  border-top:1px solid #d5d5d5;

  border-right:1px solid #555555;

  border-bottom:1px solid #555555;

  border-left:1px solid #d5d5d5;

  background-color:#cccccc;

}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.pressed,

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.dead {

  border-top:1px solid #555555;

  border-right:1px solid #d5d5d5;

  border-bottom:1px solid #d5d5d5;

  border-left:1px solid #555555;

  background-color:#cccccc;

}
 

#keyboardInputMaster tbody tr td div var {

  position:absolute;

  bottom:0px;

  right:0px;

  font:bold italic 11px Arial,sans-serif;

  color:#444444;

}
 

.keyboardInputInitiator {

  margin-left:3px;

  vertical-align:middle;

  cursor:pointer;

}

</style>
 

<table style="-moz-user-select: none; cursor: default; left: 941px; bottom: auto; right: auto; top: 348px; position: fixed;" id="keyboardInputMaster" border="0" cellpadding="0" cellspacing="0"><thead><tr><th><select><option value="Arabic">Arabic</option><option value="Belgian">Belgian</option><option value="Burmese">Burmese</option><option value="Dutch">Dutch</option><option value="Dvorak">Dvorak</option><option value="French">French</option><option value="German">German</option><option value="Greek">Greek</option><option value="Hebrew">Hebrew</option><option value="Hungarian">Hungarian</option><option value="Italian">Italian</option><option value="Lithuanian">Lithuanian</option><option value="Norwegian">Norwegian</option><option value="Numpad">Numpad</option><option value="Polish Prog">Polish Prog</option><option value="Portuguese">Portuguese</option><option value="Russian">Russian</option><option value="Slovenian">Slovenian</option><option value="Spanish-SP">Spanish-SP</option><option value="Turkish-F">Turkish-F</option><option value="Turkish-Q">Turkish-Q</option><option value="UK">UK</option><option value="US">US</option><option value="US Int'l">US Int'l</option></select><label style="display: inline;"><input title="Toggle dead key input" type="checkbox"> Dead keys: Off</label></th><td><span title="Clear this input" id="keyboardInputClear">Clear</span><span title="Close this window" id="keyboardInputClose">X</span></td></tr></thead><tbody><tr><td colspan="2"><div id="keyboardInputLayout"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="">`</td><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td><td class="">7</td><td class="">8</td><td class="">9</td><td class="">0</td><td class="">-</td><td class="">=</td><td class="last">Bksp</td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="">Tab</td><td class="">q</td><td class="">w</td><td class="">e</td><td class="">r</td><td class="">t</td><td class="">y</td><td class="">u</td><td class="">i</td><td class="">o</td><td class="">p</td><td class="">[</td><td class="">]</td><td class="last">\</td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="">Caps</td><td class="">a</td><td class="">s</td><td class="">d</td><td class="">f</td><td class="">g</td><td class="">h</td><td class="">j</td><td class="">k</td><td class="">l</td><td class="">;</td><td class="">'</td><td class="last">Enter</td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="">Shift</td><td class="">z</td><td class="">x</td><td class="">c</td><td class="">v</td><td class="">b</td><td class="">n</td><td class="">m</td><td class="">,</td><td class="">.</td><td class="">/</td><td class="last">Shift</td></tr></tbody></table><table class="keyboardInputCenter" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding-right: 50px; padding-left: 50px;" class=""> </td></tr></tbody></table></div><div><var>v1.11</var></div></td></tr></tbody></table></body></html>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hyper V cluster 2 31
Javascript create file issue 4 45
Set email body to html using vbscript 6 24
HTML Relative path 9 29
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now