|
JavaScript - Posting Html In Wysiwyg - Need Ideas/advice
Hi all,
I have a small message board with TinyMCE (WYSIWYG) editor integrated into it. It works fine for everything except when someone tries to post code... especially content with the < or > characters. For example, a person may try to post an example of how to make red text in HTML. But when he does this: <span style="color:#ff0000;">Hello</span> Of course it comes out like this: Hello Or C code... #include <stdio.h> gets stripped off as INVALID HTML! So, I ended up making a Javascript filter that pre-processes pasted data and turns all < characters into "‹" and all > into "›" characters. BTW, those two characters look very similar to < and >. They look like this: ‹ and › so that, for example: ‹span style="color:#ff0000;"›Hello‹/span› is NOT interpreted as HTML. Similarly, I pre-convert <br /> to "↵" which is a little "down/left/arrow" symbol that is on most ENTER keys on a keyboard. After converting all the < and > characters, I then restore the ↵ back to <br /> (I do this to preserve the < and > in the br!). The resulting text is posted verbatim as a message, but if it's placed in a CODEBOX, then the codebox does an "onfocus="fix-it-back" meaning that the codebox innerHTML is converted back to < and > characters so it can be selected and copied as real code. All this seems to me to be complicated and convoluted. My gut tells me there is a simpler, better way to do it. Any suggestions or ideas please? Will be appreciated! Thanks! -- Roger Similar TutorialsHey, as i'm nearly finished writing my own wysiwyg editor, i need help to get it working in IE. So here is the Editor i hope you want to help me. Morri i have this code Code: function blockformat(tag) {
if(document.selection){
var Editor = document.getElementById('iView').contentWindow.document;
var range = Editor.selection.createRange();
if (range.pasteHTML) {
var content=Editor.selection.createRange().htmlText;
content1="<"+tag+">"+content+"</"+tag+">";
range.pasteHTML(content1);
}
} else if (window.getSelection) {
var Editor = document.getElementById('iView').contentWindow;
var range = Editor.getSelection().getRangeAt(0);
content1="<"+tag+">"+range+"</"+tag+">";
getIFrameDocument('iView').execCommand('insertHTML',false, content1);
}
}
the code get tag like "div" and insert into my wysiwyg the text that marked between the got tags. to example blockformat('div'); not in my wysiwyg iframe there is " <div>blabla</div>" now i want that if i clicked again the tags are remove like a execcommand if i click bold one time its make the text bold and second time its remove the bold tnx ... I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead. What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags. My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code: Code: //iFrame is the object handling the frame var text = iframe.document.selection.createRange().text; var obj = iframe.document.selection.createRange(); obj.text = '<i>' + text + '</i>'; Except the resulting text would actually have the <i> tags appear, and the source would be: Code: <i>Some Text</i> Pretty retarded if you ask me since in no way did I want it to convert the tags into entities. Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show, I would be very grateful ^_^. I use http://www.openwebware.com/ wysiwyg editor. It is necessary to change something in it, but I do not know how? When the inserted image in the editor, and then changes the image size, stretches the image in an editor, I want to record a change image size, without editor in <input type='text'> field. Is there any idea how to bring? Thanks! I've downloaded a simple wysiwyg script from the internet, however I want to add a wordcounter to it. The main idea is that the amount of words is refreshed every time a new character is entered. However I haven't got a clue on how to implement this, I've used javascript a lot a few years ago.. but this is out of my league. So I'm hoping someone can help me with this. The html file: Quote: <html> <head> <style type="text/css">@import url('SimpleTextEditor.css');</style> <script src="SimpleTextEditor.js"></script> <script type="text/javascript"> function countWords(){ document.form1.wordcount.value = document.form1.inputString.value.split(' ').length + '/300 words'; if (document.form1.inputString.value.split(' ').length >= 50){ document.getElementById("wordcount").style.color = "red"; }else{ document.getElementById("wordcount").style.color = "black"; } } </script> </head> <body> <form name="form1" method="post"> <div style="height:34px;width:750px;margin-bottom:5px;background-image:url('mainbar.png');background-repeat:no-repeat; "><input style="margin-top:6px;margin-left:25px;" name="wordcount" type="text" value="" size="6"></div> <textarea name="inputString" id="inputString" cols="70" rows="4" onkeyup='countWords();'></textarea> <br> <script> var ste = new SimpleTextEditor("inputString", "ste"); ste.cssFile = 'test.css'; ste.charset = 'iso-8859-1'; ste.init(); </script> <input type="submit" value="submit" onclick="ste.submit();"> </form> </body> </html> The javascript file: Quote: function SimpleTextEditor(id, objectId) { if (!id || !objectId) { alert("SimpleTextEditor.constructor(id, objectId) failed, two arguments are required"); } var self = this; this.id = id; this.objectId = objectId; this.frame; this.viewSource = false; this.path = ""; // with slash at the end this.cssFile = ""; this.charset = "iso-8859-1"; this.editorHtml = ""; this.frameHtml = ""; this.textareaValue = ""; this.browser = { "ie": Boolean(document.body.currentStyle), "gecko" : (navigator.userAgent.toLowerCase().indexOf("gecko") != -1) }; this.init = function() { if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) { // EDITOR if (!document.getElementById(this.id)) { alert("SimpleTextEditor "+this.objectId+".init() failed, element '"+this.id+"' does not exist"); return; } this.textareaValue = document.getElementById(this.id).value; var ste = document.createElement("div"); document.getElementById(this.id).parentNode.replaceChild(ste, document.getElementById(this.id)); ste.id = this.id+"-ste"; ste.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml(); // BUTTONS var buttons = ste.getElementsByTagName("td"); for (var i = 0; i < buttons.length; ++i) { if (buttons[i].className == "button") { buttons[i].id = this.id+'-button-'+i; buttons[i].onmouseover = function() { this.className = "button-hover"; } buttons[i].onmouseout = function() { this.className = this.className.replace(/button-hover(\s)?/, "button"); } buttons[i].onclick = function(id) { return function() { this.className = "button-hover button-click"; setTimeout(function(){ document.getElementById(id).className = document.getElementById(id).className.replace(/(\s)?button-click/, ""); }, 100); } }(buttons[i].id); } } // FRAME if (this.browser.ie) { this.frame = frames[this.id+"-frame"]; } else if (this.browser.gecko) { this.frame = document.getElementById(this.id+"-frame").contentWindow; } this.frame.document.designMode = "on"; this.frame.document.open(); this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml()); this.frame.document.close(); insertHtmlFromTextarea(); } }; function lockUrls(s) { if (self.browser.gecko) { return s; } return s.replace(/href=["']([^"']*)["']/g, 'href="simpletexteditor://simpletexteditor/$1"'); } function unlockUrls(s) { if (self.browser.gecko) { return s; } return s.replace(/href=["']simpletexteditor:\/\/simpletexteditor\/([^"']*)["']/g, 'href="$1"'); } function insertHtmlFromTextarea() { try { self.frame.document.body.innerHTML = lockUrls(self.textareaValue); } catch (e) { setTimeout(insertHtmlFromTextarea, 10); } } this.getEditorHtml = function() { var html = ""; html += '<input type="hidden" id="'+this.id+'" name="'+this.id+'" value="">'; html += '<table class="ste" cellspacing="0" cellpadding="0">'; html += '<tr><td class="bar"><table id="'+this.id+'-buttons" cellspacing="0" cellpadding="0"><tr>'; //html += '<td><select onchange="'+this.objectId+'.execCommand(\'formatblock\', this.value);this.selectedIndex=0;"><option value=""></option><option value="<h1>">Heading 1</option><option value="<h2>">Heading 2</option><option value="<h3>">Heading 3</option><option value="<p>">Paragraph</option><option value="<pre>">Preformatted</option></select></td>'; //html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/bold.gif" width="20" height="20" alt="Bold" title="Bold" onclick="'+this.objectId+'.execCommand(\'bold\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/italic.gif" width="20" height="20" alt="Italic" title="Italic" onclick="'+this.objectId+'.execCommand(\'italic\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/underline.gif" width="20" height="20" alt="Underline" title="Underline" onclick="'+this.objectId+'.execCommand(\'underline\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/left.gif" width="20" height="20" alt="Align Left" title="Align Left" onclick="'+this.objectId+'.execCommand(\'justifyleft\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/center.gif" width="20" height="20" alt="Center" title="Center" onclick="'+this.objectId+'.execCommand(\'justifycenter\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/right.gif" width="20" height="20" alt="Align Right" title="Align Right" onclick="'+this.objectId+'.execCommand(\'justifyright\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/ol.gif" width="20" height="20" alt="Ordered List" title="Ordered List" onclick="'+this.objectId+'.execCommand(\'insertorderedlist\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/ul.gif" width="20" height="20" alt="Unordered List" title="Unordered List" onclick="'+this.objectId+'.execCommand(\'insertunorderedlist\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/outdent.gif" width="20" height="20" alt="Outdent" title="Outdent" onclick="'+this.objectId+'.execCommand(\'outdent\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/indent.gif" width="20" height="20" alt="Indent" title="Indent" onclick="'+this.objectId+'.execCommand(\'indent\')"></td>'; //html += '<td><div class="separator"></div></td>'; //html += '<td class="button"><img src="'+this.path+'images/link.gif" width="20" height="20" alt="Insert Link" title="Insert Link" onclick="'+this.objectId+'.execCommand(\'createlink\')"></td>'; //html += '<td class="button"><img src="'+this.path+'images/image.gif" width="20" height="20" alt="Insert Image" title="Insert Image" onclick="'+this.objectId+'.execCommand(\'insertimage\')"></td>'; //html += '<td><div class="separator"></div></td>'; //html += '<td class="button"><img src="'+this.path+'images/help.gif" width="20" height="20" alt="Help" title="Help" onclick="'+this.objectId+'.openWindow(\''+this.path+'help.html\', \'300\', \'300\')"></td>'; html += '</tr></table></td></tr>'; html += '<tr><td class="frame"><iframe id="'+this.id+'-frame" frameborder="0"></iframe></td></tr>'; html += '<tr><td class="source"><input id="'+this.id+'-viewSource" type="checkbox" onclick="'+this.objectId+'.toggleSource()"> View Source</td></tr>'; html += '</table>'; return html; }; this.getFrameHtml = function() { var html = ""; html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'; html += '<html><head>'; html += '<meta http-equiv="Content-Type" content="text/html; charset='+this.charset+'">'; html += '<title>SimpleTextEditor frame</title>'; html += '<style type="text/css">pre { background-color: #eeeeee; padding: 0.75em 1.5em; border: 1px solid #dddddd; }</style>'; if (this.cssFile) { html += '<link rel="stylesheet" type="text/css" href="'+this.cssFile+'">'; } html += '<style type="text/css">html,body { cursor: text; } body { margin: 0.5em; padding: 0; }</style>'; html += '</head><body></body></html>'; return html; }; this.openWindow = function(url, width, height) { var x = (screen.width/2-width/2); var y = (screen.height/2-height/2); window.open(url, "", "scrollbars=yes,width="+width+",height="+height+",screenX="+(x)+",screenY="+y+",left="+x+",top=" +y); }; this.toggleSource = function() { var html, text; if (this.browser.ie) { if (!this.viewSource) { html = this.frame.document.body.innerHTML; this.frame.document.body.innerText = unlockUrls(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true; } else { text = this.frame.document.body.innerText; this.frame.document.body.innerHTML = lockUrls(text); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false; } } else if (this.browser.gecko) { if (!this.viewSource) { html = document.createTextNode(this.frame.document.body.innerHTML); this.frame.document.body.innerHTML = ""; this.frame.document.body.appendChild(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true; } else { html = this.frame.document.body.ownerDocument.createRange(); html.selectNodeContents(this.frame.document.body); this.frame.document.body.innerHTML = html.toString(); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false; } } document.getElementById(this.id+"-viewSource").checked = this.viewSource ? "checked" : ""; document.getElementById(this.id+"-viewSource").blur(); }; this.execCommand = function(cmd, value) { if (cmd == "createlink" && !value) { var url = prompt("Enter URL:", ""); if (url) { this.frame.focus(); this.frame.document.execCommand("unlink", false, null); if (this.browser.ie) this.frame.document.execCommand(cmd, false, "simpletexteditor://simpletexteditor/"+url); else if (this.browser.gecko) this.frame.document.execCommand(cmd, false, url); this.frame.focus(); } } else if (cmd == "insertimage" && !value) { var imageUrl = prompt("Enter Image URL:", ""); if (imageUrl) { this.frame.focus(); this.frame.document.execCommand(cmd, false, imageUrl); this.frame.focus(); } } else { this.frame.focus(); this.frame.document.execCommand(cmd, false, value); this.frame.focus(); } }; this.isOn = function() { return Boolean(this.frame); }; this.getContent = function() { try { return unlockUrls(this.frame.document.body.innerHTML); } catch(e) { alert("SimpleTextEditor "+this.objectId+".getContent() failed"); } }; this.submit = function() { if (this.isOn()) { if (this.viewSource) { this.toggleSource(); } document.getElementById(this.id).value = this.getContent(); } }; } As you can see there are a few lines I wrote myself in the HTML file, but they didn't do the trick. Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) {
if(wysiwyg.getMode(i) == 'source') return;
curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document;
sel = curr.selection;
if(sel == undefined) return;
if (sel.type=="Control") {
// control selection
range = sel.createRange();
if (range.length==1) {
elem = range.item(0);
}
else {
// multiple control selection
return;
}
} else {
range = sel.createRange();
elem = range.parentElement();
}
p = elem.tagName;
while(elem == elem.parentNode && elem.tagName != 'BODY'){
p = elem + ' > ' + p;
}
document.getElementById('wysiwg_path_' + i).innerHTML = p;
}
unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri Hi All, Having a real problem with IE losing focus when clicking outside the wysiwyg iframe. This works fine in Firefox, Chrome, Safari, Opera. Code: <html>
<head></head>
<body>
<script type="text/javascript">
function initializeEditor() {
contentEditor.document.designMode='on';
}
function insertHTML1() {
var html = "<em><u>Some Text</u></em><p>2. Select this text<p><strong></u>Some text</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
function insertHTML2() {
var html = "<strong>INSERTED TEXT</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
</script>
<iframe name="contentEditor" id="contentEditor" onLoad="initializeEditor();"></iframe>
<p><input type="button" value="1. Click Here" onClick="insertHTML1()">
<p><input type="text" value="3. Click Here">
<p><input type="button" value="4. Click Here" onClick="insertHTML2()">
</body>
</html>
To demonstrate, first follow steps 1, 2 and 4. This works fine! Introduce step 3, clicking in a field outside the iframe and focus is lost. Appreciate any help!! Thanks WYSIWYG editor for PHPBB3. As far as I'm aware only unofficial MODS exist, and one has the impression they are fraught with bugs. I need a polished free opensource solution. I was really hopeful there was an official WYSIWYG, but I haven't found it yet if there is one. Can anyone confirm? Hi! I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
</script>
</head>
<body onLoad="Init();">
<input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();">
<input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();">
<input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();">
<input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();">
<br>
<form action="process.php" method="post">
<iframe name="rte" id="rte"><textarea name="areal"></textarea>
</iframe>
<br>
<input type="submit" value="Submit"></form>
</body>
</html>
Most editors seem use this iframe-thing, without telling how to send the information by a form. Ok, so I'm working on a What-You-See-Is-What-You-Get editor, and it works flawlessly - with standards. I'm trying to work out bugs it has with IE, this one is particularly tricky: When the page loads, the editor should be inialized, and the inner HTML of the body of the iframe should set to specified text. This seems to work fine in standards-compliant browsers - Webkit, Firefox. But nothing is written to the body when when the page loads in IE, here's the gist of the code for reference: Code: function loadText(){
document.getElementById("edit").contentWindow.document.body.innerHTML = "predefined text";
}
window.onload = loadText;
The oddest part, is if I come from a new page to the editor in IE, the text doesn't appear. But when I refresh in IE, the text appears for a split second and disappears. Any help on this matter is greatly appreciated! Ok, so the code below will open a DIV under the iframe when right-clicking inside the iframe. The DIV will display the mouse coords where it was clicked. This works in IE, but I can't get it to work in Mozilla (FF, Saf, Op, Chr). Any help appreciated! Code: <html>
<body>
<script language="JavaScript">
function initialise() {
if (navigator.appName == "Microsoft Internet Explorer") {
editorContent.document.designMode='on';
editorContent.document.attachEvent("oncontextmenu", showContextMenu);
editorContent.document.attachEvent("onclick", hideContextMenu);
} else {
document.getElementById("editorContent").contentDocument.designMode='on';
editorContent.document.addEventListener("contextmenu", showContextMenu, true);
editorContent.document.addEventListener("click", hideContextMenu, true);
}
}
function showContextMenu() {
if (navigator.appName == "Microsoft Internet Explorer") {
var editorContentWin = document.getElementById('editorContent').contentWindow;
var mousex = editorContentWin.event.clientX;
var mousey = window.screenTop + editorContentWin.event.clientY;
} else {
/***************************************/
/* WHAT TO DO HERE TO WORK IN MOZILLA? */
/***************************************/
}
document.getElementById("contextMenu").style.visibility = 'visible';
document.getElementById("contextMenu").style.display = '';
document.getElementById("contextMenu").innerHTML = 'X: '+mousex+' Y: '+mousey;
if (navigator.appName != "Microsoft Internet Explorer") {
document.stopPropagation();
document.preventDefault();
}
return false;
}
function hideContextMenu() {
document.getElementById("contextMenu").style.visibility = 'hidden';
document.getElementById("contextMenu").style.display = 'none';
}
</script>
<iframe id="editorContent" name="editorContent" width="400" height="400" frameborder="1" onLoad="initialise();"></iframe>
<div id="contextMenu" style="width: 100px; height: 20px; border: 1px solid black; background-color: yellow; visibility: hidden; display: none"></div>
</body>
</html>
I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension? Thank for your input in advance. I have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was. More information: I am a C programmer who morphed to a Java programmer who knows some javascript. The JSP page looks like this: -------------------------------------------------------------------- Some text and text fields for some basic information -------------------------------------------------------------------- The javascript wysiwyg editor -------------------------------------------------------------------- The properties box (changes depending on the type of item being inserted) -------------------------------------------------------------------- Submit button, etc. for the page (so the information can be persisted) I have tried: 1. Seven days of searching the web for helpful hints. 2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.) 3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.) I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple. Does anyone have any ideas? Thanks in advance. Carl Does anyone have any ideas for what i should work on next. I've made a music player where you can select the song you want. I've made a calculator. I'm relatively new to javascript so.
Does any one have any ideas for javascript homepage apps
Hello all..New to the board and javascript. Link to the page in question:http://cgi.ebay.com/test-page-only-D...item27ae5e0654 I have a problem here..Confused maybe someone can spot it I can't. I am using Firefox 3.5-6 and IE 7 and Chrome 4.1......Just CSS and Javascript. I am using "Tiny Slider" JS. for my image gallery, most of the content was deleted from the code for security purposes. Head and body tags are not necessary for Ebay. The problem is the gallery I think. This page works great (Image gallery) outside of Ebay..but when I insert in Ebay the gallery will not position the images properly except the first one. After the first image 2, 3, and 4 pass by without centering and some not at all?? Layout problem? I need this to work for Ebay..So any help would be appreciated. A quick background into what Im trying to acheive. I have a link which is setup to redirect a phone to another number, this is something set up on our PBX. The link is something simple like Http://phones.company.com/forward?=4332 This aspect is fine, but authentication is required to get to this page, so I get redirected to a login screen. What I want to be able to do is bypass this screen, by somehow hardcoding the username and password, so that the form is submitted automatically and no user intervention is required. The code for the login screen is below. Is this possible?? Ive had a quick look for the obvious, but my javascript skills are poor. Maybe Im looking at this all wrong and there is a much easier way. Any suggestions would be appreciated. Code:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Login</title>
<!-------------------------------------------------------------------------->
<!-- NLS area
<!-------------------------------------------------------------------------->
<link rel="stylesheet" type="text/css" href="req1_files/req.css">
<style type="text/css">
.getPos
{
position:relative; left:0; top:0; visibility:hide; visibility:hidden;
}
.setPos
{
position:absolute; left:0; top:0; visibility:hide; visibility:hidden; zIndex:1;
font-family:"arial","helvetica"; font-size:10pt;
}
.userfield { width:180px; }
.domain { width:120px; }
#loginBtn
{
width:65px;height:25px;
padding-top:4px;
text-align:center;
background-repeat:no-repeat;
cursor:pointer;cursor:hand;
}
.loginBtnReleased { background-image:URL('../images/loginReleased.gif'); }
.loginBtnPressed { background-image:URL('../images/loginPressed.gif'); }
</style>
<!---------------------------------------------------------------->
<!-- Script area -->
<!---------------------------------------------------------------->
<script>
/* layer.js - Accessing layers in a browser independent way */
var oldX;
function show_layer(x)
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
document.getElementById(x).style.visibility="visible";
}
else
if(document.layers)
{
if( document.layers[x] != null )
document.layers[x].visibility="show";
}
else
if(document.all)
{
if( document.all[x] != null )
document.all[x].style.visibility="visible";
}
}
function hide_layer(x)
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
document.getElementById(x).style.visibility="hidden";
}
else
if(document.layers)
{
if( document.layers[x] != null )
document.layers[x].visibility="hide";
}
else
if(document.all)
{
if( document.all[x] != null )
document.all[x].style.visibility="hidden";
}
}
function checkLayerExists( x )
{
if(document.getElementById)
{
if(document.getElementById(x) != null)
return true;
}
else
if(document.layers)
{
if( document.layers[x] != null )
return true;
}
else
if(document.all)
{
if( document.all[x] != null )
return true;
}
return false;
}
function checkLayer( x )
{
if(oldX && oldX!=x)
{
hide_layer(oldX);
show_layer(x);
oldX=x;
}
else if (!oldX && oldX!=x)
{
show_layer(x);
oldX=x;
}
}
function closeLayer(x)
{
hide_layer(x);
oldX=null;
}
function getForm( layer, form )
{
var myForm = null;
if(document.getElementById)
{
myForm = document.forms[form];
}
else
if(document.layers)
{
var myLayer = document.layers[layer];
if( myLayer != null )
myForm = myLayer.document.forms[form];
}
else
if(document.all)
{
myForm = document.forms[form];
}
return myForm;
}
function getFormElement( layer, form, element )
{
var myForm = getForm( layer, form );
if( myForm != null )
return myForm[element];
else
return null;
}
</script>
<script>
/* focushandler.js - handling of focus in input forms */
/*
This focus handler sets the focus to the first empty input text
field at the beginning and to the next empty text field by entering
CR or invoking submit. If all fields are set and CR was entered in
one of the text fields, the submit function will be called automatically.
*/
var myFocusHandlerForm = null; /* only one form for focus handling is supported */
var myAutoSubmit = true; /* invoking submit by CR if all fields are set */
var myAutoSubmitHandler = null; /* invoking this handler */
function initFocusHandler(formName)
{
initFocusHandlerExt(formName, (document.layers != null));
}
function initFocusHandlerExt(formName, chkCR)
{
var form = document.forms[formName];
var setDone = false;
myFocusHandlerForm = form;
for( var i=0, len = form.elements.length; i < len; i++ )
{
var e = form.elements[i];
if( (e.type == "text" || e.type == "password") )
{
if( !setDone && e.value == "" )
{
e.focus( ); /* set focus to first field */
setDone = true;
}
if( chkCR )
e.onkeydown = checkCR; /* establish CR recognizer */
}
}
}
function setAutoSubmit( enabled )
{
myAutoSubmit = enabled;
}
function setAutoSubmitHandler( handler )
{
myAutoSubmitHandler = handler;
}
function checkCR(e)
{
var key = (document.layers) ? e.which :
(document.all) ? window.event.keyCode : e.keyCode;
if( key == 13 )
{
var form = myFocusHandlerForm;
if( verifyInput(form) && myAutoSubmit )
{
if( myAutoSubmitHandler != null )
myAutoSubmitHandler(form);
else
form.submit();
}
}
return true;
}
function verifyInput(form)
{
for( var i=0, len=form.elements.length; i < len; i++ )
{
var e = form.elements[i];
if( (e.type == "text" || e.type == "password") &&
(e.value == null || e.value == "") )
{
form.elements[i].focus(); /* set focus to empty field */
return false;
}
}
return true; /* all are set */
}
</script>
<script>
/* popuphandler.js - handling of popup menus by layers */
var myPopupLayer = new Array();
var myPopupWidth = new Array();
var myPopupByEvent = "";
var myPosByEvent = false;
var myPosY = 0;
if( document.all )
document.onmousedown = setPosY;
function initPopupHandler( popupLayer, popupWidth )
{
document.onmouseup = hidePopupAll;
var newIndex = myPopupLayer.length;
myPopupLayer[newIndex] = popupLayer;
myPopupWidth[newIndex] = popupWidth;
}
function updatePopupWidth( popupLayer, popupWidth )
{
var index = getPopupIndex( popupLayer );
myPopupWidth[index] = popupWidth;
}
function showPopup( posLayer )
{
var index = 0; /* suppose only one layer to popup was defined */
var popupLayer = myPopupLayer[index];
var popupWidth = Math.abs(myPopupWidth[index]);
showPopupLayer( popupLayer, posLayer, (-popupWidth) + 6, 4 );
}
function showPopupLeftAt( popupLayer, posLayer, offsetX, offsetY )
{
var index = getPopupIndex( popupLayer );
var popupWidth = Math.abs(myPopupWidth[index]);
showPopupLayer( popupLayer, posLayer, (-popupWidth) + offsetX, offsetY );
}
function showPopupLayer( popupLayer, posLayer, offsetX, offsetY )
{
if(document.getElementById)
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
document.getElementById(popupLayer).style.visibility="visible";
}
else
if( document.layers)
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
document.layers[popupLayer].visibility = "show";
}
else
if(document.all)
{
if( !myPosByEvent )
{
var posX = getPopupPositionX( posLayer );
var posY = getPopupPositionY( posLayer );
setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
}
document.all[popupLayer].style.visibility = "visible";
}
}
function isPopupVisible( popupLayer )
{
if(document.getElementById)
return (document.getElementById(popupLayer).style.visibility == "visible");
else
if(document.layers)
return (document.layers[popupLayer].visibility == "show");
else
if(document.all)
return (document.all[popupLayer].style.visibility == "visible");
}
function setPopupVisible( popupLayer, visible )
{
if(document.getElementById)
{
if( visible )
document.getElementById(popupLayer).style.visibility = "visible";
else
document.getElementById(popupLayer).style.visibility = "hidden";
}
else
if(document.layers)
{
if( visible )
document.layers[popupLayer].visibility = "show";
else
document.layers[popupLayer].visibility = "hide";
}
else
if(document.all)
{
if( visible )
document.all[popupLayer].style.visibility = "visible";
else
document.all[popupLayer].style.visibility = "hidden";
}
}
function getPopupIndex( popupLayer )
{
for( var i = 0; i < myPopupLayer; i++ )
if( myPopupLayer[i] == popupLayer )
return i;
return 0;
}
function setPopupPosition( popupLayer, posX, posY )
{
if(document.getElementById)
{
document.getElementById(popupLayer).style.left = posX;
document.getElementById(popupLayer).style.top = posY;
}
else
if(document.layers)
{
document.layers[popupLayer].pageX = posX;
document.layers[popupLayer].pageY = posY;
}
else
if(document.all)
{
document.all[popupLayer].style.left = posX;
document.all[popupLayer].style.top = posY;
}
}
function getPopupPositionX( posLayer )
{
if(document.getElementById)
{
var elm = document.getElementById(posLayer);
var pos = document.getElementById(posLayer).offsetLeft;
if( pos <= 15 )
{
while ( elm != null )
{
pos += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return pos;
}
else
if(document.layers)
return (document.layers[posLayer].pageX);
else
if(document.all)
{
var elm = document.all[posLayer];
var pos = document.all[posLayer].offsetLeft;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
while ( elm != null )
{
pos += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return pos;
}
}
function getPopupPositionY( posLayer )
{
if(document.getElementById)
{
var elm = document.getElementById(posLayer);
var pos = document.getElementById(posLayer).offsetTop;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
pos = -6;
while ( elm != null )
{
pos += elm.offsetTop;
elm = elm.offsetParent;
}
}
else
if(document.all)
{
var posDiff = (pos > myPosY) ? pos - myPosY : myPosY - pos;
if( posDiff < 20 ) /* IE.6.0 bug: cumulative patch */
pos -= 15;
else
pos = (pos/2);
var tableOffset = 2;
var a = window.document.all;
for( var i=0; i < a.length; i++)
{
if( a[i].name == "maintable" )
{
tableOffset = (a[i].offsetTop / 2) - 1;
break;
}
}
pos += tableOffset;
}
return pos;
}
else
if(document.layers)
return (document.layers[posLayer].pageY);
else
if(document.all)
{
var elm = document.all[posLayer];
var pos = document.all[posLayer].offsetTop;
if( pos <= 15 ) /* IE.5.0 bug: adding padding to offset */
{
pos = -6;
while ( elm != null )
{
pos += elm.offsetTop;
elm = elm.offsetParent;
}
}
else
{
pos = (pos/2);
var tableOffset = 2;
var a = window.document.all;
for( var i=0; i < a.length; i++)
{
if( a[i].name == "maintable" )
{
tableOffset = (a[i].offsetTop / 2) - 1;
break;
}
}
pos += tableOffset;
}
return pos;
}
}
function enablePopupByEvent( popupLayer, enable )
{
myPopupByEvent = popupLayer;
myPosByEvent = enable;
}
function setPopupPosByEvent(e)
{
if( myPosByEvent && document.layers == null && document.all )
{
if( document.all[myPopupByEvent] != null )
{
var ev = window.event;
var posX = ev.clientX - ev.offsetX - 2 - myPopupWidth;
var posY = ev.clientY - ev.offsetY + 6;
setPopupPosition( myPopupByEvent, posX, posY );
}
}
return true;
}
function setPosY(e)
{
myPosY = window.event.clientY + document.body.scrollTop;
return false;
}
function hidePopupAll(e)
{
hidePopup();
}
function hidePopup()
{
for( var i = 0; i < myPopupLayer.length; i++ )
hidePopupLayer( myPopupLayer[i] );
}
function hidePopupLayer( popupLayer )
{
if(document.getElementById)
{
if(document.getElementById(popupLayer) != null)
document.getElementById(popupLayer).style.visibility = "hidden";
}
else
if(document.layers)
{
document.layers[popupLayer].visibility = "hide";
}
else
if(document.all)
{
if( document.all[popupLayer] != null )
document.all[popupLayer].style.visibility = "hidden";
}
}
</script>
<script>
/* utilscript.js - extended string functions, etc. */
function checkChars( chkStr )
{
chkStr = escape(chkStr);
/* special handling for phone numbers */
for( ; (i = chkStr.indexOf('+')) >= 0; )
{
var s = (i > 0) ? chkStr.substring( 0, i ) + "%2B" : "%2B";
chkStr = s + chkStr.substring( i+1, chkStr.length );
}
return chkStr;
}
function trimString( str )
{
return removeTrailingBlanks( removeLeadingBlanks( str ) );
}
function removeLeadingBlanks( str )
{
while( str.length > 0 && str.charAt( 0 ) == ' ' )
str = str.substr( 1, str.length - 1 );
return str;
}
function removeTrailingBlanks( str )
{
while( str.length > 0 && str.charAt( str.length - 1 ) == ' ' )
str = str.substr( 0, str.length - 1 );
return str;
}
</script>
<script language="JavaScript">
function init()
{
initFocusHandlerExt("doLogin",false);
setAutoSubmitHandler( sendFormHandler );
setLastUser( "", "" );
}
function doSendForm()
{
var form = document.doLogin;
var check = false;
var pwdforgotten = false;
if (pwdforgotten)
{
if (verifyUser())
check = true;
}
else
{
if( verifyInput( form ) )
check = true;
}
if (check)
sendFormHandler( form, pwdforgotten );
return true;
}
function verifyUser ()
{
var user = document.forms.doLogin.j_username.value
if (user == "" || user.length == 0)
{
document.forms.doLogin.j_username.focus();
return false;
}
return true;
}
function sendFormHandler( form, pwdforgotten)
{
var sendForm = document.forms.sendLogin;
var user = document.forms.doLogin.j_username.value;
var passwd = document.forms.doLogin.j_password.value;
var domainList = document.forms.doLogin.j_domain;
var index = domainList.selectedIndex;
var authMode = (index >= 0) ? domainList.options[index].value :
"TELAS";
if( authMode == "" )
{
alert( "Please enter the name of your windows domain" );
return;
}
if( index >= 0 )
{
var domain = domainList.options[index].value;
if (domain != "TELAS")
user = domain + "\\" + user;
sendForm.authMode.value = authMode;
}
else
{
sendForm.authMode.value = "TELAS";
}
// fill hidden form to send request
sendForm.j_username.value = user;
sendForm.j_password.value = passwd;
if (pwdforgotten)
sendForm.j_pwdforgotten.value = "forgotten";
sendForm.submit();
}
function setLastUser( user, wrongpwd )
{
if( user != "" )
{
var i = user.indexOf( '\\' );
if( i > 0 )
{
var domainList = document.forms.doLogin.j_domain;
var domainIndex = -1;
var domain;
domain = user.substring( 0, i );
user = user.substring( i + 1, user.length );
for( i = 0; i < domainList.options.length; i++ )
{
var value = domainList.options[i].value;
if( value == domain )
{
domainIndex = i;
break;
}
}
if( domainIndex >= 0 )
domainList.selectedIndex = domainIndex;
}
document.forms.doLogin.j_username.value = user;
if( wrongpwd )
document.forms.doLogin.j_password.focus();
}
}
function doSendPassword()
{
var request = "/tweb/login/req?pwdForgotten=";
var user = document.doLogin.j_username.value;
request = request + "&authuser=" + user;
window.location.href = request;
}
</script>
</head><body class="common" onload="init();">
<p> </p>
<div align="center"><center>
<form name="doLogin" action="javascript:(void 0);" onsubmit="verifyInput(this); return false;">
<!---------------- login dialog for an user session -------------------->
<noscript>
<font color=red>To use ComAssistant CTI<br>you must activate JavaScript at first.</font><p>
</noscript>
<table class="frame" border="1" cellpadding="4" cellspacing="0">
<tbody><tr><td class="caption" align="center"><b>ComAssistant CTI</b></td></tr>
<tr><td class="light" valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="8">
<!------------------------------------ user ------------------------>
<tbody><tr>
<td> </td>
<td class="dialog" align="left">User name:</td>
<td class="dialog"><input value="5255" class="userfield" size="18" maxlength="64" name="j_username" width="180px"></td>
<td> </td>
</tr>
<!------------------------------------ domain ------------------------>
<tr>
<td> </td>
<td class="dialog" align="left">Password:</td>
<td class="light"><input class="userfield" size="18" maxlength="32" name="j_password" width="180px" type="password"></td>
<td> </td>
</tr>
<tr>
</tr><tr>
<td> </td>
<td class="dialog" align="left">Domain:</td>
<td class="light" align="right">
<select class="light" width="180" name="j_domain">
<option selected="selected" value="CAPLogin\XXXXX">XXXX</option>
<option value="CAPLogin\">CTI Authentication</option>
</select>
</td>
<td valign="top"><div id="editDomainPos" class="getPos"> </div></td>
</tr>
<tr><td> </td>
<!------------------------------------ password forgotten ------------------------>
<td> </td>
<!------------------------------------ OK ---------------------------------------->
<td class="title-light" align="right">
<input value="OK" onclick="return doSendForm();" width="100" type="submit">
</td>
<td> </td>
</tr>
</tbody></table>
</td></tr>
</tbody></table>
</form>
<!------------------ form sended to servlet ------------------------>
<form name="sendLogin" method="GET" action="https://xxxxx.xxx.xx:xxx/tweb/j_security_check;jsessionid=B9CB670DB13E02625B197D382750FC38">
<input name="j_username" value="" type="hidden">
<input name="j_password" value="" type="hidden">
<input name="j_pwdforgotten" value="" type="hidden">
<input name="authMode" value="" type="hidden">
<input name="origReq" value="/tweb/portal/req?getPage=/userindex.html" type="hidden">
</form>
<!------------------------------------------------------------------>
</center></div>
</body></html>
Hi all, I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies Thanks in advance!! Kyle Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with. Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it. The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK. The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible. I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction". I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish") Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function? Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL? I think option 1 sounds better..... Again, I need help on making this form pop up on each table row. Any help or direction would be greatly appreciated. Sample code follows: Code: <table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Email</th>
<th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
<td onclick="javascriptfunction(this)">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table title="myTable" style="margin: auto; display:hidden">
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
</tr>
<tr>
<td class="header">Some Field: </td>
<td class="selector"><select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
<tr>
<input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>
Any help would be greatly appreciated =) |
|||||||