|
JavaScript - Safari Mobile: Clicking The Body Doesn't Work
I manage a private website that has a normal desktop version and also an iPhone version. Both versions use jQuery. I'm wondering if I could get some help with the iPhone version.
Right now, I have one of the navigation items set up so that when it's tapped on, a submenu with more navigation items appear. This is much like the "more" menu at the iPhone version of http://www.google.com/. The problem I'm having is that once that submenu is shown, the only way to make it disappear again is to tap on one of its items. I'd like to be able to tap anywhere outside of the submenu to make it disappear. This is how the iPhone version of http://www.google.com/ behaves, so I know it's possible. The only way I can think of accomplishing this is to add a click event to the body that calls a function that removes the submenu. However, I can't get it to work. At the bottom of this post you will find code that illustrates this problem. I would really appreciate any help. Thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Safari Mobile Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Safari Mobile Test</h1>
<p><a href="#">This link doesn't go anywhere. If you click it, you will get an alert indicating that the link was clicked and a separate alert indicating that the body was clicked.</a></p>
<p>In a normal web browser, clicking anywhere within the body of this page (which is surrounded by a red border) will trigger an alert indicating that the body was clicked. However, the only way to see the alert using Safari Mobile is to click on the above link.</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').click(function() {
alert('The body was clicked!');
});
$('a').click(function() {
alert('The link was clicked!');
});
});
</script>
</body>
</html>
Similar TutorialsMost of the Javascript I see has some sort of time limit on page reload and is not really what I am trying to accomplish: Code: <meta http-equiv="Refresh" content="10; URL=http://coffeeandtealtd.com/buynow.html" /> I am trying to make our buy page reload after clicking the Paypal "continue shopping" button in Paypal Website Standards. The pop up Paypal shopping cart window closes after clicking the button but our buy page doesn't reload. It doesn't reload in Safari although it seems to be fine in FF and IE. I am new to javascript coding and am not quite sure how to make the page reload in this specific instance only. Any sug's?? Hi everyone, I have a javascript which used to delete object(s) when the "delete' button is clicked. The script is working fine on IE, but on Safari it do not wwork at all (when I click delete button the webpage stays the same). I think the reason is Safari is using a different javascript interpreter which cannot parse javascript developed in IE properly, such as "fireEvent". Please help me to fix the script for it to work on Safari. Here is the script: Code: function DeleteClick()
{
var frmSWO = document.getElementById("form");
var answer = confirm("Do you really want to delete?")
if (answer != 0)
{
frmSWO.action = "/domsWeb/mtd/doms/web/operation/controller/manageWorkOrder/DeleteJobOrImage.do";
frmSWO.method = "post";
this.form.fireEvent('onsubmit');
frmSWO.submit();
}
}
I do appreciate any help. Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. Hello, I am trying to get the HTML 5 database that is supposed to work with safari up and running... I am following the instructions here, http://developer.apple.com/safari/li...tDatabase.html. I copied and pasted the first three code examples (to build the db, add a table to the db, and request from the db's table.) It is creating a database in my database folder (on my mac, and my iphone) but it does not create a table, and when I try to retrieve from the table, I get the message that the table doesn't exist.... Any ideas? I am lost. So I have made a website that you need a password to get into. The following javascript code works in Internet Explorer but, I need it to work in Safari also. Can anyone please rewrite this code, as simple as possible, to work in both Safari and Internet Explorer ? [CODE ]<!--// function mainpass() { if (pass.value=="password") {location="correct.HTML"}; else{location="wrong.HTML"}; } //--> [/CODE] Thanks in advance... This is a script which has a window slide down on the page and a user can choose yes/no to continue. It works in all browsers other than IE...any help please? If you need more info, please let me know. Thanks. <script language="JavaScript" type="text/javascript"> <!-- var allowpop=1; function popWin(){ var ppl="popLayer";var objppl=findObj(ppl); if (objppl==null){return;}// if the layer does not exist, do nothing. var args=arguments,movetoX=parseInt(args[0]),movetoY=parseInt(args[1]),movespeed=parseInt(args[2]); var cycle=10,pxl=""; if(!document.layers){objppl=objppl.style;} if(objppl.tmofn!=null){clearTimeout(objppl.tmofn);} var pplcoordX=parseInt(objppl.left),pplcoordY=parseInt(objppl.top); var xX=movetoX,yY=movetoY;if((pplcoordX!=movetoX)||(pplcoordY!=movetoY)){ var moveX=((movetoX-pplcoordX)/movespeed),moveY=((movetoY-pplcoordY)/movespeed); moveX=(moveX>0)?Math.ceil(moveX):Math.floor(moveX);movetoX=pplcoordX+moveX; moveY=(moveY>0)?Math.ceil(moveY):Math.floor(moveY);movetoY=pplcoordY+moveY; if((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1) && (!window.opera)) {pxl="px";} if (moveX!=0){eval("objppl.left='" + movetoX + pxl + "'");} if (moveY != 0) {eval("objppl.top = '" + movetoY + pxl + "'");} var sFunction = "popWin(" + xX + "," + yY + "," + movespeed+ ")"; objppl.tmofn = setTimeout(sFunction,cycle); } } function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if((p = theObj.indexOf("?")) > 0 && parent.frames.length) {theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p);} if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } function hideLayer(layername){ layer=findObj(layername); if(layer.style){layer=layer.style;} layer.visibility='hidden'; } // --> </script> I have a few tabs on my website. They're each set to the corresponding id in the JS file. It's supposed to add #tab-1 to the end of the URL in the users browser when it's clicked. For example, when a user is at mypage.com and they click on the tab, it ads mypage.com/#tab-1 to the end. How come it doesn't do what I want when I click it though? Here's an example of how it's setup. HTML: <a href="#tab-1" id="tab1">Text</a> JavaScript: document.getElementById("tab1").onclick = function(){ this.href += "#tab-1"; } Code: <html>
<head>
<script>
function color() {
var newColor=new Array('#00f','#f00','#ff0');
var i=0;
for (i=0;i<=3;i++)
{
document.getElementByTagName(span).style.display=newColor[i];
}
}
color();
</script>
<div>
<span>make this text blue</span>
<span>make this text red</span>
<span>make this text yellow</span>
</div>
</body>
</html>
It should make the first blue, second red, and third yellow yes? Hi! What am doing wrong? The script works -- identifies blank fields -- but the second function (change_subject) is ignored. This is the script: Code: <HEAD>
<script>
function is_filled()
{
if (form_1.realname.value=="")
{
alert("Please enter your name")
form_1.realname.focus()
return false
}
if (form_1.subject.value=="")
{
alert("Please enter a subject")
form_1.message.focus()
return false
}
else
return true
};
function change_subject
{
form_1.subject.value="form_1.realname.value + '_' + form_1.subject.value"
};
</script>
</HEAD>
This is the FORM (used for MSA FormMail): Code: <form name="form_1"; onSubmit="return is_filled()"; on Submit="change_subject()"; method="post"; action="http://gb2gf.org/cgi-sys/FormMail.cgi">
<input type="hidden" name="recipient" value="drt@gb2gf.org">
<input type="hidden" name="required" value="greeting,realname,city_state,email_1,email_2,message">
<input type="hidden" name="sort" value="order:greeting,realname,city_state,email_1,email_2,message">
<input type="hidden" name="redirect" value="http://www.gb2gf.org/thanks.htm">
<!-- Input fields here -->
</form>
Thanks! Dr. T. Below is code using the onmouseover event, but it doesn't work. The only thing that appears in the status bar is the URL. What am I doing wrong? Code: <a href="http://codingforums.com" onmouseover="window.status='This is an OnMouseOver event'; return true" onmouseout="window.status=' '; return true">Put your mouse here to see status info change at bottom.</a> hello... script doesn't work.. it does work in IE but not in another browser like mozilla,opera & safari? what should I do?.. Code: //Current HTML of page
var html="";
//View of the page, Normal (Design), HTML, Preview
var currentview=0;
//Hold window objects for the color, table and properties dialogs
var table_dialog, color_dialog, properties_dialog;
//Current color action, ForeColor, or BackColor,
//used for communication between PageCreate window and Color dialog window
var pp;
//Is used to disable use of design tools in HTML or Preview mode
var enabletoolbar=false;
//Variable counter used to index the search in the document
var n=0;
function InitEditor(){
//Init editor in design mode,
maineditor.document.designMode=docmode;
//Write a blank page
WriteDefaultPage();
//Disable context menu
maineditor.document.oncontextmenu=new Function("return false;");
//Set focus to the editor
maineditor.focus();
}
function EditorView(view){
//Changes editor view to Normal, HTML, and Preview
if(currentview==1){
//If the last view was HTML then get the HTML edited by user in HTML mode
html=maineditor.document.body.innerText;
}
//If the last mode was Normal then get the whole HTML content of the page
else html=maineditor.document.all.tags("HTML")[0].outerHTML;
if(view==0){
//Normal Mode
EnableToolbar(true);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
maineditor.document.oncontextmenu=new Function("return false;");
maineditor.focus();
}
if(view==1){
//HTML Mode
EnableToolbar(false);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
WriteDefaultPage();
HTMLView();
maineditor.document.oncontextmenu=new Function("return false;");
}
if(view==2){
//Preview Mode
EnableToolbar(false);
maineditor.location="about:blank";
//Disable page editing
maineditor.document.designMode="Inherit";
//Write the HTML of the page
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
//Enable context menu
maineditor.document.oncontextmenu=new Function("return true;");
}
//Set current view
currentview=view;
}
function EnableToolbar(enable){
//Enable or disable toolbar
enabletoolbar=enable;
}
function OpenFile(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
fileopen_dialog.style.visibility="visible";
}
function OpenSelectedFile(){
//Check if the file is an HTML page
if(document.fileselect.thefile.value.indexOf(".htm")==-1){
window.alert("The selected file is not an HTML page, please select a valid HTML file");
return;
}
//Hide the open file dialog
fileopen_dialog.style.visibility="hidden";
//Create the FSO object
var fso=new ActiveXObject("Scripting.FileSystemObject");
//Open the selected file
var f=fso.OpenTextFile(document.fileselect.thefile.value);
//Get the content of the file
var thehtml=f.ReadAll();
//Close the file
f.close();
//Write a blank page
maineditor.window.location="about:blank";
//Write the HTML content
maineditor.document.open("text/html");
maineditor.document.write(thehtml);
maineditor.document.close();
//Set focus to editor
maineditor.focus();
}
function WriteDefaultPage(){
//Writes a blank HTML page in the editor
var pagehtml="<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; " +
"charset=windows-1252\">\n<meta name=\"GENERATOR\" content=\"PageCreate\">\n" +
"<title>New Page</title>\n</head>\n<body>\n</body>\n</html>";
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}
function NewPage(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
//Write a blank page
maineditor.window.location="about:blank";
WriteDefaultPage();
//Set focus to editor
maineditor.focus();
}
function HTMLView(){
//Switch to HTML view
maineditor.document.body.innerHTML="";
maineditor.document.body.innerText=html;
}
function TableOn(table, on){
//Highlights the table on which the mouse is over
if(on) table.style.backgroundColor="#95AFFF";
else table.style.backgroundColor="#82DF82";
}
function ToolbarOn(toolon){
//Highlights on or off the current toolbar
//Get the toolbar button on which the mouse is over
var tool=event.srcElement;
//Change background color
if(toolon){
tool.style.backgroundColor="#B4A0FE";
tool.style.borderColor="#000000";
}
else{
tool.style.backgroundColor="#D1D1D1";
tool.style.borderColor="#D1D1D1";
}
}
function FindInPage(showdialog){
//Shows the Find and Replace Dialog
var display="visible";
if(showdialog==false) display="hidden";
find_dialog.style.visibility=display;
if(showdialog!=false) document.find.findwhat.focus();
}
function FindIt(str, replacestr, newstr){
//This functions searchs for a string in the document
//and if specified then replaces it with a new string
if(str==""){
//If no string to search entered
alert("Enter a string to search");
document.find.findwhat.focus();
return;
}
//Creates a range in the document
txt = maineditor.document.body.createTextRange();
//Loop to find the string in the document
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if(found) {
//If founded select it and scroll into view
txt.moveStart("character", -1);
txt.findText(str);
//If replace is specified then replace the match with the new string
if(replacestr) txt.text=newstr;
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
window.alert("There are no more matches");
n=0;
}
// Not found anywhere, give message.
else
window.alert("\"" + str + "\" was not founded in document");
}
}
function InsertHTML(newhtml){
//Inserts HTML in the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
selpoint.pasteHTML(newhtml);
}
function GetSelectedText(){
//Get the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
var seltext=selpoint.text;
return seltext;
}
function InsertNewImage(){
if(enabletoolbar==false) return;
maineditor.focus();
//Open Insert Image Dialog
maineditor.document.execCommand("insertimage", true, null);
}
function InsertForm(){
//Creates a new form
var formmethod=window.prompt("Choose form method: GET | POST", "POST");
var formaction=window.prompt("Choose form action:", "http://");
InsertHTML("<div style=\"background-Color:#C0C0C0\"><form method=\"" + formmethod + "\" action=\"" + formaction + "\">\n<p> </p></form></div>");
}
function InsertFormControl(control){
maineditor.focus();
//Inserts a form control
maineditor.document.execCommand(control, true, null);
}
function CreateNewLink(){
//Inserts a link in the selected text
if(enabletoolbar==false) return;
var linktext=GetSelectedText();
if(linktext=="") return;
var url=window.prompt("Enter a URL for the new link:", "http://");
if(url!=null){
InsertHTML("<a href=\"" + url + "\">" + linktext + "</a>");
}
maineditor.focus();
}
function InsertTable(){
//Open Table Dialog
table_dialog=window.open("table.htm", "newtable", "top=100,left=100,height=300,width=400,scrollbars=no");
}
function CreateTable(tr, tc, ta, tb, tp, ts, tw, tt){
//Creates a new table
var tablewidth="";
if(tw!=""){
tablewidth=" width=\"" + tw + tt + "\"";
}
var thtml="<table border=\"" + tb + "\" cellpadding=\"" + tp + "\" cellspacing=\"" + ts + "\"" + tablewidth + ">";
tr=parseInt(tr);
tc=parseInt(tc);
for(r=0;r<tr;r++){
thtml+="<tr>";
for(c=0;c<tc;c++){
thtml+="<td></td>";
}
thtml+="</tr>";
}
thtml+="</table>";
InsertHTML(thtml);
table_dialog.close();
}
function EditPage(){
properties_dialog=window.open("properties.htm", "editpage", "top=100,left=100,height=275,width=387,scrollbars=no");
}
function EditPageProperties(pt, pfc, pbgc, pbgi, usewatermark, pbgs){
maineditor.document.title=pt;
maineditor.document.body.text=pfc;
maineditor.document.body.bgColor=pbgc;
maineditor.document.body.background=pbgi;
if(usewatermark) maineditor.document.body.bgProperties="fixed";
else maineditor.document.body.bgProperties="";
if(pbgs!=""){
var pagehtml=maineditor.document.all.tags("HTML")[0].outerHTML;
var bodytag= pagehtml.toLowerCase().indexOf("<body");
if(bodytag==-1) return;
var beforebodytag= pagehtml.substring(0, bodytag);
var afterbodytag= pagehtml.substring(bodytag, pagehtml.length);
var pagehtml=beforebodytag + "<bgsound src=\"" + pbgs + "\">" + afterbodytag;
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}
properties_dialog.close();
maineditor.focus();
}
function ChangeForeColor(){
//Show the Color dialog to edit Fore Color of text selected
if(GetSelectedText()!=""){
pp="EditForeColor";
color_dialog=window.open("color.htm", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
}
function EditForeColor(thecolor){
maineditor.focus();
//Change fore color of text selected
maineditor.document.execCommand("forecolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}
function ChangeBackColor(){
//Show the Color dialog to edit Back Color of text selected
if(GetSelectedText()!=""){
pp="EditBackColor";
color_dialog=window.open("color.htm?p=EditBackColor", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
}
function EditBackColor(thecolor){
maineditor.focus();
//Change back color of text selected
maineditor.document.execCommand("backcolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}
function ChangeFont(font){
//Changes the font of the selected text
maineditor.focus();
maineditor.document.execCommand("fontname", false, font);
}
function ChangeFontSize(size){
//Changes the font size of the selected text
maineditor.focus();
maineditor.document.execCommand("fontsize", false, size);
}
function DesignTools(tool){
//Activates design tool
if(enabletoolbar==false){
window.alert("You must switch into normal view to do this");
return;
}
maineditor.focus();
maineditor.document.execCommand(tool, true, null);
}
Heya, I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it. I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox. The page in question could be found [link has been removed]. It's all there is to it. So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated. Hi! I'm new to JavaScript and I've done some small adjustments to my clients site, but it won't show properly in IE (the shadowbox js at least.). I thought js was accepted in all newer browsers. Do you have a quick fix or idea on why it doesn't work? You can view source on my site, I use mootools, and shadowbox/corners and rightclick blocker. Is it generally a 'bad thing' to use js in webpages I want everyone to view in the same way? I tried the same effects with CSS but it's not supported in the same way corss-browser, unfortunately. The 'no selection' CSS class I have on the site is also not accepted in IE. It's very annoying! http://santinacrolla.ihaarr.com/p thank you in advance! I've got a form textarea on my site, which after being submitted is stripped by my php file. Then my javascript kicks in and does some analysis of the entered text. However everytime the user entered a hard return within the textarea my javascript gives me an error 'tekenreeks niet afgesloten' which means something like 'string is not closed'. Therefore I decided to replace all occurences of chr(10) and chr(13) with ok2 (just some random characters), I did this with php which worked fine, and I didn't get the javascript error. However I need to reshow the entered text (original) to the user, so I need to restore the old values. I tried Code: result.waarde.replace('ok2', 'chr(13)');
but it doesn't work, as it still displays ok2. I'm no expert in javascript, but how can I replace those characters by the hard returns? Oh yeah I'll show some more coding, perhaps the error can be found the Code: result.waarde.replace('mdw', 'chr(13)');container.innerHTML = result.waarde;
and in my html: Code: <div id='waarde' style="width:500px;"></div> I have the following script in the head; Code: <script type="text/javascript">
<![CDATA[
<!--This function validates the data from the three input boxes on the MAILTO form-->
function validate()
{
Check="Valid";
Name=document.contact.name.value;
Mail=document.contact.mail.value;
Comment=document.contact.comment.value;
if (Name=="your name" || Name.length<1)
{
alert("Please enter your name");
Check="Invalid";
}
else if (Mail.indexOf("@")<1 || Mail.indexOf(".")<1)
{
alert("Please enter a valid email address");
Check="Invalid";
}
else if (Comment=="your comment" || Comment.length<1)
{
alert("Please enter your comment");
Check="Invalid";
}
if (Check=="Invalid")
{
return false;
}
else
{
alert("Thank you for your comment");
}
}
]]>
</script>
and the following form in the body; Code: <div>
<form name="contact" onsubmit="return validate()" action="email.asp" method="post">
<div class="input_title">Name:</div><input type="text" name="name" size="25" class="input_box" />
<br />
<div class="input_title">Your Email:</div><input type="text" name="sender" size="25" class="input_box" />
<br />
<div class="input_title">Phone Number:</div><input type="text" name="tel" size="25" class="input_box" />(Optional)
<br />
Message:
<br />
<textarea name="enquiry" cols="50" rows="6" class="input_box"></textarea>
<br />
<input type="submit" value="Submit" name="submit" /><input type="reset" value="Reset" name="reset" />
<br />
</form>
<br /><br />
</div>
It is a aspx file and validates fine as XHTML Trans. Why won't it work? I am hoping that someone can figure out why this simple javascript works fine in Firefox, but not in IE8. I appreciate any help. PS: I see it DOES work in IE9... but I can't use it if I cannot make it work in IE8 as well. Sincerely, Buffmin Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
</script>
<style type="text/css">
#switches .active { font-weight: bold; }
#slides div { display: none; }
#slides div.active { display: block; }
</style>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul> <div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div> </div>
</body>
</html>
Ive searched on this board but cant find out why this doesn't work. Code: <script type="text/javascript">
function showSelected(val)
if (val == "Nil")
{
document.getElementById('JustText').innerHTML='hi'
}
else
{
document.getElementById('selectedResult').innerHTML="<a href='mailto:" + val + "'>" + val + "</a><p>"
}
</script>
i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> Hi, doing form validation at college just now. The lecturer gave all of us this following example. But it doesn't seem to work in firefox. I have tried my own scripts and they seem to work so have no idea whats happening! Code: <html>
<head>
<title>Javascript validation program - limits field length and content</title>
<script type="text/javascript">
function ValidateForm()
{
var msg='';
if(document.getElementById('CC').value=='')
{
msg+='- Please enter CC\n\n';
}
else
// Now test if CC is purely 2 capital letters...
{
var CC=RTrim(document.getElementById('CC').value);
// alert(CC);
if (CC.length==2)
{
if (isCHAR(CC)==false)
{
msg+=' - CC not solely 2 capital letters \n\n';
}
}
else
msg+=' - CC not 2 letters in length \n\n';
}
if(document.getElementById('NNNNNN').value=='')
{
msg+='- Please enter NNNNNN \n\n';
}
else
{
// Now test if NNNNNN is purely 6 digits...
var NIdigits=RTrim(document.getElementById('NNNNNN').value);
if (NIdigits.length==6)
{
if (isInteger(NIdigits)==false)
{
msg+=' - NNNNNN not solely digits \n\n';
}
}
else
msg+=' - NNNNNN not 6 digits in length\n\n';
}
// Lastly check if the last field contains only 1 char
if(document.getElementById('C').value=='')
{
msg+='- Please enter C \n\n';
}
else
// Now test if C is a single letter...
{
var C=RTrim(document.getElementById('C').value);
if (C.length==1)
{
if (isCHAR(C)==false)
{
msg+=' - C not a capital letter \n\n';
}
}
else
msg+=' C not 1 character in length';
}
// alert(msg);
if(msg!='')
{
//alert('Here...');
alert('The following fields are empty and/or invalid:\n\n'+msg);
return false
}
else
{
return true
}
}
function RTrim(str){
if (str==null){return null;}
for(var i=str.length-1;str.charAt(i)==" ";i--);
return str.substring(0,i+1);
}
//-------------------------------------------------------------------
// isBlank(value)
// Returns true if value only contains spaces
//-------------------------------------------------------------------
function isBlank(val){
if(val==null){return true;}
for(var i=0;i<val.length;i++) {
if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isInteger(value)
// Returns true if value contains all digits
//-------------------------------------------------------------------
function isInteger(val){
if (isBlank(val)){return false;}
for(var i=0;i<val.length;i++){
if(!isDigit(val.charAt(i))){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isCHAR(value)
// Returns true if value contains all CHARS
//-------------------------------------------------------------------
function isCHAR(val){
if (isBlank(val)){return false;}
for(var i=0;i<val.length;i++){
if(!isCAPlet(val.charAt(i))){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isDigit(value)
// Returns true if value is a 1-character digit
//-------------------------------------------------------------------
function isDigit(num) {
if (num.length>1){return false;}
var string="1234567890";
if (string.indexOf(num)!=-1){return true;}
return false;
}
//-------------------------------------------------------------------
// isCAPlet(value)
// Returns true if value is a 1-character letter
//-------------------------------------------------------------------
function isCAPlet(num) {
if (num.length>1){return false;}
var string="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (string.indexOf(num)!=-1){return true;}
return false;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form action='http://10.205.3.202/Valid.php' method='POST' onsubmit='return ValidateForm();'>
<H1>Validate NI No</H1>
<p>
NI-No :
<INPUT TYPE="text" id='CC' NAME="CC" SIZE='2' maxlength='2' >
-
<INPUT TYPE="text" id='"NNNNNN"' NAME="NNNNNN" SIZE='6' maxlength='6' >
<INPUT TYPE="text" id='C' NAME="C" SIZE='1' maxlength='1'>
<p>
<INPUT TYPE="submit" id='Process' value="Process" name="submit">
</form>
</body>
</html>
Any help would be great. It can be found right he http://arkdesigns.ca/AttilaKomaromiJavaCalculator.htm I have javascript enabled on my browsers but it still doesn't work. I see the calculator but pushing the buttons does nothing Any help is appreciated My code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Calculator</title>
<style>
<!-- CSS STYLES GO HERE -->
.container {
width:500px;
height:500px;
}
.equ {
width:99%;
height:20px;
font-size:20px;
text-align:right;
margin-bottom:15px;
}
table {
border:1px solid black;
padding:5px;
width:100%;
}
table td {
margin:3px;
text-align:center;
width:20%;
}
.buttons {
width:100%;
height:50px;
font-size:15px;
}
</style>
<script type="text/javascript" src="javascript.js">
</script>
</head>
<body>
<div class="container">
<table cellspacing="0">
<tr>
<td colspan="5"><input class="equ" type="input" disabled="disabled" id="equation" value="0"/><input type="hidden" id="previousType" value="-1"/></td>
</tr>
<tr>
<td><input class="buttons" type="button" name="sin" value="sin" onclick="solve ('sin')" /></td>
<td><input class="buttons" type="button" name="cos" value="cos" onclick="solve ('cos')" /></td>
<td><input class="buttons" type="button" name="tan" value="tan" onclick="solve('tan')" /></td>
<td><input class="buttons" type="button" name="sqrt" value="√" onclick="solve('sqrt')" /></td>
</tr>
<tr>
<td><input class="buttons" type="button" name="back" value="←" onclick="remove ();"/></td>
<td colspan="2"><input class="buttons" type="button" name="erase" value="C" onclick="clear_equation ();" /></td>
<td><input class="buttons" type="button" name="divide" value="/" onclick="equation (this.value, 1)"/></td>
</tr>
<tr>
<td><input class="buttons" type="button" name="seven" value="7" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="eight" value="8" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="nine" value="9" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="multiple" value="*" onclick="equation (this.value, 1)"/></td>
</tr>
<tr>
<td><input class="buttons" type="button" name="four" value="4" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="five" value="5" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="six" value="6" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="subtract" value="-" onclick="equation (this.value, 1)"/></td>
</tr>
<tr>
<td><input class="buttons" type="button" name="one" value="1" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="two" value="2" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="three" value="3" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="plus" value="+" onclick="equation (this.value, 1)"/></td>
</tr>
<tr>
<td colspan="2"><input class="buttons" type="button" name="zero" value="0" onclick="equation (this.value, 2)"/></td>
<td><input class="buttons" type="button" name="decimal" value="." onclick="equation (this.value, 3)"/></td>
<td><input class="buttons" type="button" name="equal" value="=" onclick="solve ('');"/></td>
</tr>
</table>
</div>
</body>
</html>
|
|||||||