|
JavaScript - Tinymce - Working Code To Wrap Tags Around Selection.
Hi all,
After over a month of pounding my head against the wall (and getting ZERO help from the TinyMCE "support" forum), I have finally come up with a simple JS function (for the TinyMCE editor) that will wrap a selection with any open and any close tag one wishes, and keeps the selected text selected for further wrapping if desired. Here's the code (commented heavily): Code: /* -------- FOR TINYMCE ONLY --------
* wrap selection with BBCode or other tags
* (c) 2010 r.a.krupski <krupski@roadrunner.com>
* free software - use, modify, distribute freely
** -------- FOR TINYMCE ONLY --------*/
function tinyWrap(open_tag, close_tag)
{
var ed = (tinymce.activeEditor || opener.tinymce.activeEditor); /* get editor instance */
var selection = ed.selection.getContent(); /* get user selection, if any */
var temp_name = new Date().getTime().toString(36).toLowerCase(); /* generate a unique string */
var span_open = '<span id="' + temp_name + '">'; /* generate '<span id="unique">' */
var span_close = '</span>'; /* generate closing '</span>' */
selection = selection.replace(/<p>/g,'').replace(/<\/p>/g,'<br />'); /* convert <p></p> to <br /> */
if (selection.substr(selection.length-6) === '<br />')
{
selection = selection.substr(0, selection.length-6); /* strip last <br /> if present */
}
/* create complete selection replacement: '<span id="unique">OPEN_TAGselectionCLOSE_TAG</span>' */
var content = open_tag + span_open + selection + span_close + close_tag;
ed.execCommand('mceReplaceContent', false, content); /* replace selection with new */
var span_elem = ed.dom.get(temp_name); /* get the element of the temp span */
ed.selection.select(span_elem); /* select (highlight) the selection span */
ed.dom.remove(temp_name, true); /* remove the span, leave it's highlighted text behind(true) */
ed.focus(); /* insure editor has focus */
return; /* taa-daa! all done! */
}
Hope this helps someone - I've got a few more gray hairs because of TinyMCE... hopefully this will spare others my agony...... -- Roger Similar TutorialsHi all, Could someone please tell me how to properly add some text content before and after a user's selection? I am working with the TinyMCE editor, and I can get the following from it: * User's selection as a W3C compatible range * User's selection as a browser selection object * User's selection as a node (element) that encompasses the user's selection I also need the user's selection to remain selected after being wrapped. I've looked all over the web and could find nothing (except running into my OWN previous questions about this). Here's an example of what I'm trying to do: First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected. I will greatly appreciate some help here. I've been asking everywhere and nobody seems to know (or they don't bother to answer). Thanks! -- Roger Hello I'm trying to get the values from the TinyMCE with a javascript in to the url but it's not working, can any one help me? The script has been simplified to better understand mu problem, I can get all the rest of the form fields in to the url but not the textarea, it's a bit stubborn. Code: <script language=JavaScript>
function reload(form)
{
for(var i=0; i < form.adtype.length; i++){
if(form.adtype[i].checked)
var v1=form.adtype[i].value;
var v2=form.title.value ;
var v3=form.price.value ;
var v4=form.subcat.value ;
var v5=form.description.value ; <!-- TinyMCE description Variable-->//
}
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='new_ad.php?cat=' + val + '&adtype=' + v1 + '&title=' + v2 + '&price=' + v3 + '&subcat=' + v4 + '&description=' + v5;
}
</script>
<?php
$Description=$_GET['description'];
echo "<label for=\"cdescription\">Description (required) </label> <textarea id=\"elm1\" class=\"required\" name=\"description\" maxlength=\"1000\" rows=\"\" cols=\"\">$Description</textarea>";
<label>Want <input type=\"radio\" name=\"adtype\" value=\"want\" onclick=\"reload(this.form)\" /></label>
?>
Hi I have a CMS system using Tinymce and after making some alterations noticed the updates weren't showing up. After much messing (sql, set up etc) I started to delete the content bits at a time and came to the conclusion that is was the character ' as in what's any ideas why this is and how to solve it i'm thinking its due to php code! Cheers Hello, I'm pretty sure this is a Javascript issue, despite the subject line of this message. I'm using Javascript to create a popup window on my site. Users click on the link and get a popup with supplemental information about the item they clicked on. Works great. The html link to open the popup looks like this: Code: <a href="javascript:popup(xMoreInfo_popup)" onMouseOut="clearEl();">Click HERE for more information</a> ...where "xMoreInfo_popup" is a variable that tells the "popup" function which information (html code) to display. This then connects to a Javascript function that looks like this: Code: var popupWin
var wholeWin
function popup(term) // write corresponding content to the popup window
{
popupWin = window.open("", "puWin", "width=800,height=620,scrollBars,dependent,resizable");
popupWin.document.write(htmlOpener);
popupWin.document.write(term);
popupWin.document.write(htmlCloser);
popupWin.document.close(); // close layout stream
popupWin.focus(); // bring the popup window to the front
}
As I said, this popup function works great, in both IE and Firefox. I've been using it for years. Recently, though, there has been so much information in the popup window that I decided to break it up into two catagories. Let's call them "MAIN" and "SUPPLEMENT". I first display the MAIN information and directly below that is the SUPPLEMENTAL information. I want my users be be able to directly navigate down to the SUPPLEMENTAL information without scrolling, so I added an "href name tag" into the html code that is displayed. The html looks like this (shortened for brevity): Code: HEADER INFORMATION<br> <a href="#supplemental">GO TO SUPPLEMENTAL</a><br> MAIN INFORMATION IS DISPLAYED HERE AND IT MAY BE QUITE LARGE <a id="supplemental"></a> SUPPLEMENTAL INFORMATION HERE Now to my problem. This works as expected and just perfectly in IE. If the user clicks on the GO TO SUPPLEMENTAL link, it autoscrolls down to the supplemental information. In Firefox, however, it behaves quite oddly. Instead, when the link is clicked, the popup window displays the html from the original parent, rather than the information in the popup window! Now I can click on the original "parent window" link in the popup window, then it shows the popup information again in the same popup window, but autoscrolled to the proper place this time. I'm pretty sure this is a Javascript problem because something about the way I'm opening the popup window is causing the named tag to want to go back to the parent window, rather than the current popup window. Any advise is greatly appreciated. Robert San Antonio, Texas I integrate TinyMCE with a web application. After plugging in TinyMCE, a textarea shows up on a place where no textarea is defined. So far, this problem happens on a web page with multiple textareas. It seems to be caused by either <fieldset> tag or a <TEXTAREA .. readonly>. A non-defined textarea shows on the top of these elements. Does anyone else run into the same problem? Thanks. Greetings, I recently learned that the <option> tags can not use the onclick attribute inside of IE. This works great for firefox, but sadly not a single version of internet explorer supports it (from what I am told via countless Google searches). I have been modifying my attempit at a solution to use the <select> tag with the attribute onchange. Maybe I am casing this wrong, or not seeing a solution as the below code does not operate in any browser, and no errors are reported back through firebug or IE. Excuse my sloopy attempt at {smarty tags} this script is written in a bunch of PHP object->vales and to save space cored the issue down to it's basics. On change of the select box, the value="5-28" is sent to javascript showBox to split the number away from the id_trips and only focus on the locations (the number before the '-' . IF the location matches the switch value then the box should show / hide or value change. The IDs are all correct I just think that there is a ' or a " or something off as I am not a javascript expert. my SQL return values <code class="php"> //PHP VARIABLES from QUERY sample loop 1 trip-number = 200 locations = 5 id_trips = 28 </code> my HTML form loop <code class="html"> {BEGIN LOOP 'trips'} <!--HTML form for {trip-number} --> <form id="trip{trip-number}" method="post" action="#"> <select id="depid{trip-number}" name="depId" class="inputed greybig required" onchange="showBox(this.value, '{trip-number}', 'dep');"> <option value="">Select Time</option> <option value="{locations}|{id_trip}">{trip-time}</option> </select> </form> <!--/HTML form for {trip-number} --> {/END LOOP 'trips'} </code> my javascript at the bottom of the page before the </body> <code class="javascript"> <!-- JAVASCRIPT AT END OF PAGE BEFORE CLOSING </body> I am using the jQuery Tools latest build 1.4.2 pull value, split and process for hide / show options --> <script type="text/javascript"> function showBox(val, trip, arrdep){ var splitVal = val.split("-"); switch (splitVal[0]){ case 1: //Airport $("#"+arrdep+"dep_win_airport"+trip).show(); case 2: //Port of Miami $("#"+arrdep+"_win_cruse"+trip).show(); case 4: //Port Canaveral $("#"+arrdep+"_win_cruse"+trip).show(); case 5: //door drop off $("#"+arrdep+"_win_door"+trip).show(); case 6: //Door Pick Up case 7://Airport NO FLIGHT default: $("#"+arrdep+"_window"+trip).hide(); $("#"+arrdep+"_info_"+trip).hide(); $("#"+arrdep+"_win_door"+trip).hide(); $("#"+arrdep+"_win_cruse"+trip).hide(); $("#"+arrdep+"_win_airport"+trip).hide(); $("#"+arrdep+"info_"+trip).val("Supply Address"); }; //end switch splitVal }; //end function showBox </script> </code> HI I'm new to tinymce. I'm using tinymce with jquery validate with remote Methods. (Remote Methods: http://docs.jquery.com/Plugins/Valid...Methods/remote) I'm using jquery validate to check if email address already has been enter into the database, once it check the email hasn't been entered. It then enter the email with the tinymce textarea. Right now the email address gets enter but tinymce textarea is undefined. I understand I have to uses the var content = tinyMCE.get (editor_id);, but its still enter as undefined, here is my code below: Code: <html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// Location of TinyMCE script
// General options
mode : "textareas",
elements : "editor_id",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
content_css : "css/content.css",
});
<script type="text/javascript">
$(document).ready(function(){
var validator = $("#myform").validate({
rules: {
email: {
required: true,
minlength: 5,
remote: {
url: "test.php",
type: "post",
data: {
dataType: 'json',
email: function() {
return
$("#email").val();
},
content: function() {
return
$("content").val();
}
},
},
}
},
messages: {
sub_name: {
required: "Please enter a email
address",
minlength: "Your email addressmust be
at least 5 characters long",
remote: jQuery.format("Sorry but
'{0}' has already been added. Please try again.")
}
});
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
<input type="text" name="email" id="email" size="15"/>
<textarea id="editor_id" name="editor_id" rows="15" cols="80"
></textarea>
<input type="submit" value="Submit"/>
</form>
Where do I added? Code: var content = tinyMCE.get('editor_id');
content = escape(content.getContent());
content = content.replace("+", "%2B");
content = content.replace("/", "%2F");
thanks Hello all, Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed. Here is the javascript: Code: var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
Here is the HTML, which I have enclosed within a div box positioned absolutely on the page: Code: <ul id="gallery"> <li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li> </ul> And here is the CSS: Code: /* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
#capt
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received. Hey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas? Here is my code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>City and State Lookup</title> <style type="text/css"> h1 { font-family:Arial; color:navy; } p, td { font-family:arial; font-size:11px; } </style> <script type="text/javascript"> /* <![CDATA[ */ var httpRequest = false; function getRequestObject() { try { httpRequest = new XMLHttpRequest(); } catch (requestError) { try { httpRequest = new ActiveXObject ("Msxm12.XMLHTTP"); } catch (requestError) { try { httpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (requestError) { window.alert("Your browser does not support AJAX!"); return false; } } } return httpRequest; } function updateCityState() { if (!httpRequest) httpRequest = getRequestObject(); httpRequest.abort(); httpRequest.open("get","zip.xml"); httpRequest.send(null); httpRequest.onreadystatechange=getZipInfo; } function getZipInfo() { if (httpRequest.readyState==4 && httpRequest.status == 200) { var zips = httpRequest.responseXML; var locations = zips.getElementsByTagName("Row"); var notFound = true; for (var i=0; i<locations.length; ++i) { if (document.forms[0].zip.value == zips.getElementsByTagName( "ZIP_Code")[i].childNodes[o].nodeValue) { document.forms[0].city.value = zips.getElementsByTagname( "City") [i].childNodes[0].nodeValue; document.forms[0].state.value = zips.getElementByTagName( "State_Abbreviation")[i].childNodes[0].nodeValue; notFound = flase; break; } } if (notFound) { window.alert("Invalid ZIP code!"); document.forms[0].city.value = ""; document.forms[0].state.value = ""; } } } /* ]]> */ </script> </head> <body> <h1>City and State Lookup </h1> <form action=""> <p>Zip code <input type="text" size="5" name="zip" id="zip" onblur="updateCityState()" /></p> <p>City <input type="text" name="city" /> State <input type="text" size="2" name="state" /></p> </form> </body> </html> Hey guys, I am not sure why this JavaScript is not working. Can you check it out please? Thanks. --Start-- <html> <head> <title>Guess it up! </title> </head> <body> <center> <b><font size="5" ><u><b>Guess it up!<br></b></u> <br > <font size="3" > This is out of five! <br > Type in your guess: <p> </p> </font> <input name="HisGuess" type="text" size=1 value=1> <p> <input name="StartButton" type="button" value="Guess" onclick="StartGame()"> </p> <p> <script> var TheRightNumber = Math.round(Math.random * 5); function StartGame() { if (TheRightGuess == HisGuess){ alert("You got it! Nice!") else{ alert("Guess again!") } } </script> --END-- Can anyone tell my why this is not working? All answers are appreciated. I wrote a script that should loop through the list of countries, and if the entry's width exceeds 70px, it should cut the extra letters and insert "..." at the end of the entry; My codes produces unexpected results. The script only modifies the entry"United States", by replacing it with "Cook Isla...". I suspect I don't use the while loop properly. Plus the script does not work at all in IE. Could someone have a look and give me a hint what went wrong. Thank you very much!!! Code: <html>
<head>
<title> Ellipse Practice </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
ul {
width: 200px;
margin-left: 100px;
}
span {
white-space: nowrap;
}
</style>
<script type="text/javascript">
function trancateAll() {
var list=document.getElementsByTagName("li");
count=0;
while (count<list.length) {
var text=String(list[count].innerHTML);
list[count].innerHTML='<span id="mySpan">'+text+'</span>';
mySpan=document.getElementById("mySpan");
mySpan.innerHTML='';
var charac=1;
while( (mySpan.offsetWidth<70) && (charac<text.length)) {
mySpan.innerHTML=text.substr(0,charac)+"...";
charac++;
}
count++;
}
}
</script>
</head>
<body >
<ul>
<li> United States</li>
<li> Australia</li>
<li> New Zealand</li>
<li> Democratic Republic of Congo</li>
<li> Russian Federation</li>
<li> Cook Islands</li>
</ul>
<input type="button" value="Truncate" onclick="trancateAll()"/>
</body>
</html>
Hey all, I have a javascript object which I have created and it works fine until I remove the second message box from the program steps. The alert box was only ever meant to be there for error debugging to steop me through the code. Any ideas? Code: function hyper() {
this.test = "";
this.load = function(lib, ver) {
alert("Starting API Library Load");
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src=lib + "/" + ver + "/api.js";
oHead.appendChild( oScript);
alert("Finished Loading Library");
switch(lib) {
case "test":
this.test = new test();
break;
case "ads":
this.ads = new HAds();
break;
case "chat":
this.chat = new HChat();
break;
case "survey":
this.survey = new HSurvey();
break;
default:
alert("No Library");
};
}
}
I am trying to insert a new paragraph with javascript, however my code is not working, even though i pretty much copied my code from the book. Could someone please tell me why i have a problem with a script below? Thank you very much. <script type="text/javascript"> function newtext() { var myPara=document.createElement("p"); var text="We sincerely hope that you are enjoying learning Javascript"; var paratext=document.createTextNode(text); myPara.appendChild(paratext); } </script> <p> <a href="#" onclick="newtext()"; return: true;> Insert new text </a> </p> This code originally worked, but now it doesn't. It's suppose to count the number of characters you type. The form processes fine, but it's not counting, it always says 1,000 in the box. Any ideas? Thanks Code: <script type = "text/javascript">
var maxLen = 1000; // max number of characters allowed // global variable
var max = "You may enter up to " + maxLen + " characters"; // global variable
function OnPaste () {
//return false; // cancels (blocks) the onpaste event. Uncomment this line to block pasting
setTimeout(checkMaxInput,100); // delay is necessary
}
function initCount() {
document.getElementById("limit").innerHTML = max;
document.getElementById("remLen").value = maxLen;
}
function checkMaxInput() {
var form = document.myform; // or document.forms[0] or document.getElementById("myform");
if (form.txtarea.value.length > maxLen) { // if too long.... trim it!
form.txtarea.value = form.txtarea.value.substring(0, maxLen);
document.getElementById("message").innerHTML = "Too many characters were entered!! The excess over " + maxLen + " have been removed.";
}
else {
document.getElementById("message").innerHTML = "";
}
form.remLen.value = maxLen - form.txtarea.value.length;
}
</script>
<body onload = "initCount()">
<form name = "myform" id = "myform">
<span id = "limit" style="font-size: 10pt;color: #FF0000;font-family: arial, helvetica, sans-serif;"></span>
<br>
<textarea name="txtarea" wrap=physical cols=48 rows=10 onkeyup="checkMaxInput()" onblur="checkMaxInput()" onpaste="OnPaste ()" >
</textarea>
<br>
<input readonly type=text name=remLen id = "remLen" size=3 value = ""> characters left</font>
</form>
<span id = "message" style="color:red";></span>
I changed the code and it didn't work, so I tried to put it back to what it was. Now, the whole thing isn't working. I am a lost little child. Can someone help me please. http://www.boothemusic.com/ Here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head xmlns="">
<title>Boothe Brothers Music</title>
<script type="text/javascript">
function loadContent(page) {
switch(page) {
case "home":
document.getElementById("middle").src = "http://boothemusic.com/middle.html";
break;
case "store":
document.getElementById("middle").src = "http://boothemusic.com/catalog";
break;
case "Electric Guitars":
document.getElementById("middle").src = "http://boothemusic.com/catalog/index.php?main_page=index&cPath=1&zenid=9feb6660698a06a51571cc4cef1c3e60";
I left out most of the code because I only edited the line "case "store".....". Simple random pic script that I found on the some other forum (I forget what it was) [CODE]var aryimages = new Array('images/pic/01.jpg', 'images/pic/37.jpg', 'images/pic/02.jpg', 'images/pic/family/08.jpg','images/pic/08.jpg', 'images/pic/food/03.jpg'); randompic.src = aryimages[Math.floor(Math.random() * aryimages.length)]; [CODE] code anchors to HTML markup [CODE]<img name="randompic" id="bg" />[CODE] it is working perfectly for Safari and Chrome. Nothing is showing for FF. Any suggestions appreciated. Code: function addEvent(elem,type,func) {
var obj = document.getElementById(elem);
if(window.addEventListener) {
obj.addEventListener(type,func,false);
}
if(window.attachEvent) {
obj.attachEvent('on'+type,func);
}
}
function $e(obj) {
if(obj) obj = document.getElementById(obj);
if(!obj) return;
return obj;
}
function homeFunc() {
$e('home-wrapper').innerHTML = "<div id=\"choose-container\"><span class=\"choose-buttons\" onclick=\"loginFunc()\">Login Exisiting Account</span><span class=\"choose-buttons\" id=\"createAcct\">Create An New Account</span><span class=\"choose-buttons-highscores\" id=\"createAcct\">Highscores Table</span>";
}
function loginFunc() {
$e('home-wrapper').innerHTML = "<div id=\"login-container\"><div id=\"error-field\"></div><form method=\"post\" onsubmit=\"return validate_login()\" action=\"./index.php\"><label for=\"username\">Username</label><input name=\"username\" id=\"username\" class=\"input\" type=\"text\" /> <label for=\"password\">Password</label><input name=\"password\" id=\"password\" class=\"input\" type=\"password\" /><input name=\"login\" type=\"submit\" value=\"Login\" class=\"loginButtonClass\" /><div id=\"loginQuickLinks\"><span class=\"loginQuickLinks\" onclick=\"homeFunc()\">Register</span> - <span class=\"loginQuickLinks\">Forgot password?</span></form></div></div>";
}
function createAcct() {
alert("Create An Account");
}
function validate_usr() {
var usr = $e('username');
var pwd = $e('password');
if(usr.value.length <= 0 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a username and password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a password.');
return false;
}
if(pwd.value.length >= 5 && usr.value.length <= 0) {
loginErrorMsg('Please supply a username.');
return false;
}
if(pwd.value.length < 5) {
loginErrorMsg('Invalid username or password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length >= 5) {
$e('error-field').style.cssText='display:block;';
$e('error-field').innerHTML = "<img src=\"/images/ajax-loader.gif\" /> <span style=\"color:#ffffff\">Loading...</span>";
var req;
var params = 'user='+encodeURIComponent(usr.value.toLowerCase())+'&pass='+encodeURIComponent(pwd.value.toLowerCase());
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
if(window.ActiveXObject) {
req = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
req.open('POST','server/userChck.php',true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(params);
req.onreadystatechange = req;
if(req.readyState == 4 && req.status == 200) {
if(req.responseText == 0) {
window.scrollTo(0,1);
setTimeout(function(){loginErrorMsg('Invalid username or password');},1000);
return false;
}
}
}
return true;
}
function loginErrorMsg(msg) {
window.scrollTo(0,1);
$e('error-field').innerHTML = msg;
$e('error-field').style.cssText='display:block';
}
function validate_login() {
var isTurn = (!validate_usr()) ? false : true;
return isTurn;
}
window.onload = function() {
setTimeout(function(){window.scrollTo(0,1);},100);
addEvent('loginButton','click',loginFunc);
addEvent('createAcct','click',homeFunc);
}
This code works fine when I set this line to false Code: req.open('POST','server/userChck.php',false);
but as soon as I set this to true. I doesn't work.... What am I doing wrong here? index.html Code: <html> <head> <title>:: wtmp</title> </head> <body> <p>Welcome to my page</p> <script type="text/javascript" src="file.js"></script> </body> </html> file.js Code: function one(p1, p2) {
var j_text=p1+" "+p2;
return j_text;
}
function two() {
var rslt=one("Hi", "there!");
}
document.write(rslt);
var mainscrpt=one("Hello", "world!");
window.alert(mainscrpt);
Can't get this to work...could someone read thru this and see if anything is missing? Thanks Code:
<html>
<head>
Supporting files: lhouse.css, list.js, logo.jpg
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
<script src="list.js" type="text/javascript"></script>
<script type="text/javascript">
function amountTotal() {
total(0);
for (var i=0; i<=amount.length; i++) {
total+=amount[i];
}
return total;
}
</script>
</head>
<body>
<div id=title>
<img src=logo.jpg alt=The Lighthouse />
The Lighthouse<br />
543 Oak Street<br />
Delphi, KY 89011<br/>
(542) 555-7511
</div>
<div id=data_list>
<script type="text/javascript">
document.write("<table border=1' rules=rows cellspacing=0'>");
document.write("<tr><th>Date</th><th>Amount</th><th>First Name</th><th>Last Name</th><th>Address</th></tr>");
for (i=0; i< amount.length; i++) {
if (i%2==0) document.write("<tr>");
else document.write("<tr class='yellowrow'>");
document.write("<td>"+date[i]+"</td>");
document.write("<td class=amt>"+amount[i]+"</td>");
document.write("<td>"+firstName[i]+"</td>");
document.write("<td>"+lastName[i]+"</td>");
document.write("<td>");
document.write("<td>"+street[i]+"<br/>");
document.write("city[i],+" +state[i]+ "+zip[i]"); document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
</script>
</div>
<div id=totals>
<script type="text/javascript">
document.write("<table border=1' cellspacing=1'>");
document.write("<tr><th id=sumTitle colspan=2'>Summary</th></tr>");
document.write("<tr><th>Contributors</th>");
document.write("<td>+amount.length+</td></tr>");
document.write("<tr><th>Amount</th>");
document.write("<td>$+amountTotal()+</td></tr>");
document.write("</table>");</script>
</div>
</body>
</html>
</html>
This is suppose to execute "avalon" and it should move down the page once and "Books" should move with it, hidden behind it. I have read the code over and over and over and do not see any mistakes. HELP! Code: <title>Avalon Books</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="scripts.js" type="text/javascript"></script>
<script type="text/javascript">
function placeObjects() {
placeIt("avalon",175,10);
placeIt("books", 175,10);
placeIt("ab",230,40);
placeIt("fiction",5,5);
placeIt("nfiction",475,5);
hideIt("ab");
hideIt("fiction");
hideIt("nfiction");
moveAvalon();
}
function moveAvalon() {
var y=yCoord("avalon");
if (y <= 260) {
shiftIt("avalon",0,10);
shiftIt("books",0,10);
setTimeout("moveAvalon()",30);
} else {
moveBooks();
}
}
function moveBooks() {
var x=xCoord("books");
if (x <= 320) {
shiftIt("books",10,0);
setTimeout("moveBooks()",50);
} else {
//display the hidden images;
}
}
</script>
</head>
<body onload="placeObjects()">
<div id="avalon">
AVALON
</div>
<div id="books">
BOOKS
</div>
<div id="ab">
<a href="#">
<img src="ab.jpg" alt="Click to enter store" />
</a>
</div>
<div id="fiction">
<img src="fiction.jpg" alt="" /><br />
<b>AB Sales Rank: #1<br />
Fiction</b><br />
<i>Before the Fall</i><br />Jeffrey Unwin
</div>
<div id="nfiction">
<img src="nfiction.jpg" alt="" /><br />
<b>AB Sales Rank: #1<br />
Nonfiction</b><br />
<i>Vietnam Memoirs</i><br />Gen. John Hartford
</div>
</body>
</html>
|
|||||||