Forum Moderators: open
test.html
<html>
<head>
<script language="Javascript">
var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1)? true : false;
var regexp = new RegExp("[\r]","gi");
function storeCaret(selec)
{
if (isMozilla)
{
// Si on est sur Mozilla
oField = document.forms['news'].elements['newst'];
objectValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
objectValueDeb = objectValue.substring( 0 , oField.selectionStart );
objectValueFin = objectValue.substring( oField.selectionEnd , oField.textLength );
objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );
//alert("Debut:'"+objectValueDeb+"' ("+deb+")\nFin:'"+objectValueFin+"' ("+fin+")\n\nSelectionné:'"+objectSelected+"'("+(fin-deb)+")");
oField.value = objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]" + objectValueFin;
oField.selectionStart = strlen(objectValueDeb);
oField.selectionEnd = strlen(objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]");
oField.focus();
oField.setSelectionRange(
objectValueDeb.length + selec.length + 2,
objectValueDeb.length + selec.length + 2);
}
else
{
// Si on est sur IE
oField = document.forms['news'].elements['newst'];
var str = document.selection.createRange().text;
if (str.length>0)
{
// Si on a selectionné du texte
var sel = document.selection.createRange();
sel.text = "[" + selec + "]" + str + "[/" + selec + "]";
sel.collapse();
sel.select();
}
else
{
oField.focus(oField.caretPos);
//alert(oField.caretPos+"\n"+oField.value.length+"\n")
oField.focus(oField.value.length);
oField.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);
oField.value = orig.substr(0,i) + "[" + selec + "][/" + selec + "]" + orig.substr(i, oField.value.length);
var r = 0;
for(n = 0; n < i; n++)
{if(regexp.test(oField.value.substr(n,2)) == true){r++;}};
pos = i + 2 + selec.length - r;
//placer(document.forms['news'].elements['newst'], pos);
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
</script>
</head>
<body>
<center>
<form name="news">
<input type="button" value="b" style="width:50px;font-weight:bold" onclick="storeCaret('b')">
<input type="button" value="i" style="width:50px;font-style:italic" onclick="storeCaret('i')">
<input type="button" value="u" style="width:50px;text-decoration:underline" onclick="storeCaret('u')">
<input type="button" value="quote"style="width:50px" onclick="storeCaret('quote')">
<input type="button" value="code"style="width:50px" onclick="storeCaret('code')">
<input type="button" value="url"style="width:50px" onclick="storeCaret('url')">
<input type="button" value="img"style="width:50px" onclick="storeCaret('img')"><br>
<textarea name="newst" id="newst" rows="10" wrap="virtual" cols="45"></textarea>
</form>
</center>
</body>
</html>
1. Use a valid document type. One of the most important areas that is affected by a valid document type is how Javascript is applied and executed. Without a valid document type you function in quirks mode, this is important in CSS as well.
2. language= is deprecated, use <script type="text/javascript">
3. <center> is also long gone, use css to center your copy: form style="margin:auto;text-align:center;" is one solution.
4. wrap is no longer a valid attribute of textarea.
If you're going to develop a message application of any kind, 1) your documents really need to validate, and 2) you really do need to do your own field testing, I have a Mac taking up valuable desk space for that purpose. :-) Run your test.html throught the w3c validator and nurse it until it passes.
Additionally, Linux offers some fine development tools, from Quanta Plus for HTML and scripting to Kdevelop and Eclipse for "serious" programming.
And i never say to here, hi, i got a project, please someone do for me, you can check my record. Normally, i just bring my code here to ask, or ask someone give me some idea if something i completly don't known about that.
Give a chance to people that it equal to give a chance to you.
Nobody known everthing, i am sure something i known but you don't known.
If you're going to develop a message application of any kind, 1) your documents really need to validate, and 2) you really do need to do your own field testing, I have a Mac taking up valuable desk space for that purpose. :-) Run your test.html throught the w3c validator and nurse it until it passes.
I'll second that, very, VERY strongly. People think I'm crazy, but EVERY SINGLE PAGE I WRITE VALIDATES GREEN. This goes for CMS systems as well as code I've hand-tweaked. If a CMS won't put out valid code, I'll go under the hood and MAKE it validate (or use a different CMS). Most CMS systems coming out these days produce valid code. I can't say the same for some of the AJAX frameworks I've looked at. I think they like to live on the edge.
I generally run XHTML 1.1, and output application/xhtml+xml if the browser accepts it. This causes great headaches when I have even small syntax issues; which is exactly what I want.
If you set the bar at validating green, then you can use the validator as a "health-o-meter" for your site. If a page fails validation, I fix whatever the issue may be. These are usually things that cause browser incompatibilities.
BTW: I have a Mac taking up valuable space on my lap. It's my principal machine. I have it set up as a full-scale LAMP system, and run Parallels Desktop, so I can run a series of Windows versions in independent VMs, from Win98 to Vista (I can also do Linux, but haven't set up a Linux VM). I can sit on a plane going Tokyo, and spend 14 hours testing and debugging my site as localhost. I can bang it with every browser I can think of, tweak files in realtime and make adjustments.
If you are considering going to Linux, let me offer some additional points (as well as encouragement). I've been using Linux for close to 5 years now and almost exclusively for the last two. I do, however, recommend keeping Windows on a machine for firmware updates, which tend to only be released for that platform. As you may be aware, Windows and Linux can reside on the same system in a dual boot configuration, allowing you to choose which system to boot into.
First, on distros of Linux, Xandros is the easiest to move to from Windows, but gives up some compatibility with standard Linux program packages. Ubuntu and openSUSE offer better package support, though Ubuntu uses the Gnome desktop which, like Apple's OS X, imposes limits on how configurable the system is. OpenSUSE allows you to choose between the Gnome or KDE desktops. My favorite, SimplyMEPIS, is based on Ubuntu, uses the KDE desktop and comes brilliantly configured. About all you need to add is your programming editor and the GIMP, for working photos. Having worked in and around the graphics industry for over 20 years, I can say the GIMP (Gnu Image Manipulation Program) is second to none in the field.
The other thing I'd point out is the IE's can easily be installed to run on Wine (a native recreation of Windows API's on Linux, so a negligible performance loss from running directly on Windows) using the IEs4Linux script to be found here [tatanka.com.br...]
IE 7 isn't supported by Wine yet and that's one of the reasons I find to still boot up Windows. Most of the time things will look the same on IE 7 as on Firefox or Opera, but sometimes there is enough difference to require some adjustment. Thank goodness for IE conditional comments.
If you haven't tried it, check out the Firefox add-on, the Total Validator. It is much more strict than the W3C validator.
And the [validator.w3.org...] is quite good place to go, thanks.
I'd like to ask you some question, please.
For some object or method like selection and createRange, i could find them from the link of the [msdn.microsoft.com ]
, but i could not find them from w3schools.com, do you known how to find them from the w3schools, for example, like the Selection and createRange() for textArea?
Thanks again
If you haven't tried it, check out the Firefox add-on, the Total Validator. It is much more strict than the W3C validator.
Thanks! I just installed the free validator. If I like it, I may get the pro tool, although I hate PayPal.
Sorry to bother you so much time. Finally, i have installed the browsers of the FireFox and NetScape now, and they perform well.
I am sorry that i don't want to go to the linux, i just want to download
the browsers of FireFox and NetScape, because i confuse with the words of"Linux" and "NetScape", i though the Linux is same thing with the NetScape. Sorry again. But it is good to known the knowledge of Linux.
One problem i still have from the Validate my site, it say that it failed for my site, because my document doesn't encode.
Then i add the following sentence to top of my code;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
.....................
.....................
but it still doesn't solve the problem, i will find it out tomorrow, because tonight the site of the validator is very busy, could not do the test now.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
If you haven't tried it, check out the Firefox add-on, the Total Validator. It is much more strict than the W3C validator.Thanks! I just installed the free validator. If I like it, I may get the pro tool, although I hate PayPal.
Actually, TV choked on some of the JavaScript on my page (I fed it my AJAX Threading page). It doesn't like REGEX in JavaScript.
However, it looks good otherwise. I won't get the pro until they deal with the JavaScript issues. iCab browser tends to have similar issues.
You might let them know about it. They seem committed to producing the best validator they can.
[edited by: Rambo_Tribble at 5:28 am (utc) on Jan. 1, 2007]
You might let them know about it. They seem committed to producing the best validator they can.
Will do. I did a lot of work with Gareth Slynn, on the Hermish validator, and he fixed up a lot of stuff on that.
The problem with a validator is that you have to be perfect. It's completely pass/fail.
I added the declaration you tell me on, but it still say i don't encode the document. And also i find it is very hard to use the w3 validator(http://validator.w3.org/), it always say "The connection was reset", today, i just tested for 2 times, then it tell me "The connection was reset".
Do you known where i can free download the w3 validator? i could not find it from the site.
And i find a interesting thing, that i validate with the validator of the "CSE HTML Validator Lite v8.0"( i downloaded it into my computer),
it give me the result different from the w3 validator.
it gave me two green square box with commands.
command 1. the lite edition missing one error and one warning that the standard or professional edition could be found.
command 2. 0 errors 0 warning 0 massage 2 commands
and the command one does not not tell me where the error is and what kind of error i got?
The validator of "CSE HTML Validator Lite v8.0" validate the html and css in one, but it does not tell whether it validate for different browser or not.
Could you recommand a good validator which it can free download and validate for different browser, please.
and my code rechange to the folowing, it still tell me i have not encode the documment, could you tell me why, please.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1)? true : false;
var regexp = new RegExp("[\r]","gi");
function strlen(str)
{
return str.length;
}
function storeCaret(selec)
{
if (isMozilla)
{
// Si on est sur Mozilla
oField = document.forms['news'].elements['newst'];
objectValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
objectValueDeb = objectValue.substring( 0 , oField.selectionStart );
objectValueFin = objectValue.substring( oField.selectionEnd , oField.textLength );
objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );
oField.value = objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]" + objectValueFin;
oField.selectionStart = strlen(objectValueDeb);
oField.selectionEnd = strlen(objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]");
oField.focus();
oField.setSelectionRange(
objectValueDeb.length + selec.length + 2,
objectValueDeb.length + selec.length + 2);
}
else
{
oField = document.forms['news'].elements['newst'];
var str = document.selection.createRange().text;
if (str.length>0)
{
var sel = document.selection.createRange();
sel.text = "[" + selec + "]" + str + "[/" + selec + "]";
sel.collapse();
sel.select();
}
else
{
oField.focus(oField.caretPos);
//alert(oField.caretPos+"\n"+oField.value.length+"\n")
oField.focus(oField.value.length);
oField.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);
oField.value = orig.substr(0,i) + "[" + selec + "][/" + selec + "]" + orig.substr(i, oField.value.length);
var r = 0;
for(n = 0; n < i; n++)
{if(regexp.test(oField.value.substr(n,2)) == true){r++;}};
pos = i + 2 + selec.length - r;
//placer(document.forms['news'].elements['newst'], pos);
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
</script>
<form name="news" action="abc.php" style="margin:auto; text-align:center;" method="post">
<input type="button" value="b" style="width:50px;font-weight:bold" onclick="storeCaret('b')" />
<input type="button" value="i" style="width:50px;font-style:italic" onclick="storeCaret('i')" />
<input type="button" value="u" style="width:50px;text-decoration:underline" onclick="storeCaret('u')" />
<input type="button" value="quote" style="width:50px" onclick="storeCaret('quote')" />
<input type="button" value="code" style="width:50px" onclick="storeCaret('code')" />
<input type="button" value="url" style="width:50px" onclick="storeCaret('url')" />
<input type="button" value="img" style="width:50px" onclick="storeCaret('img')" /><br />
<textarea name="newst" id="newst" rows="10" cols="45"></textarea>
</form>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
or
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
do you known how to find them from the w3schools, for example, like the Selection and createRange() for textArea?
No, I don't, you seem to have a handle on how they work though. Try Google for more diverse applications of these.
I tested your code as given I also got a whole string of errors. First, I'd like to say, is there a reason you felt you needed this to be an XML document type? You could probably work with 4.01 transitional or strict and it would be more forgiving.
That being said, I had troubles getting to the validator too. This validates under 4.01 strict. Some changes were required to get it to validate:
1. In both the XML version and this one, the title tag is required or you get a "head not finished" error.
2. When using a 4.01 doctype, /> is not required because it's not an XML document type.
3. Although you can put it anywhere, Javascript and CSS belong in the head of the document, or better yet external files - but it's good to work all in one file until you get the bugs worked out.
4. In 4.01 strict, raw input tags need a container. I solved this by making a list out of the buttons, which semantically is what you have there, and adding CSS to make it display as a row.
5. Since I started a CSS style, I moved all the css from the form into it. This prompted adding ID's to your input elements, which is good style anyway.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>This is required or you get a head not finished error</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.buttons { margin:0; padding: 0; text-align: center; }
.buttons li { display: inline; list-style: none; }
p { text-align: center; margin:0; padding: 0; }
.n-button { width:50px; }
#news { margin:auto; text-align:center; }
#bld { width:50px;font-weight:bold; }
#ital { width:50px;font-style:italic; }
#uline { width:50px;text-decoration:underline; }
</style>
<script type="text/javascript">
var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1)? true : false;
var regexp = new RegExp("[\r]","gi");
function strlen(str) { return str.length; }
function storeCaret(selec) {
if (isMozilla) {
oField = document.forms['news'].elements['newst'];
objectValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
objectValueDeb = objectValue.substring( 0 , oField.selectionStart );
objectValueFin = objectValue.substring( oField.selectionEnd , oField.textLength );
objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );
oField.value = objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]" + objectValueFin;
oField.selectionStart = strlen(objectValueDeb);
oField.selectionEnd = strlen(objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]");
oField.focus();
oField.setSelectionRange(
objectValueDeb.length + selec.length + 2,
objectValueDeb.length + selec.length + 2);
}
else {
oField = document.forms['news'].elements['newst'];
var str = document.selection.createRange().text;
if (str.length>0) {
var sel = document.selection.createRange();
sel.text = "[" + selec + "]" + str + "[/" + selec + "]";
sel.collapse();
sel.select();
}
else {
oField.focus(oField.caretPos);
//alert(oField.caretPos+"\n"+oField.value.length+"\n")
oField.focus(oField.value.length);
oField.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);
oField.value = orig.substr(0,i) + "[" + selec + "][/" + selec + "]" + orig.substr(i, oField.value.length);
var r = 0;
for(n = 0; n < i; n++) {
if(regexp.test(oField.value.substr(n,2)) == true){r++;}
}
pos = i + 2 + selec.length - r;
//placer(document.forms['news'].elements['newst'], pos);
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
</script>
</head>
<body>
<form name="news" id="news" action="abc.php" method="post">
<ul class="buttons">
<li><input type="button" id="bld" value="b" onclick="storeCaret('b')"></li>
<li><input type="button" id="ital" value="i" onclick="storeCaret('i')"></li>
<li><input type="button" id="uline" value="u" onclick="storeCaret('u')"></li>
<li><input type="button" id="qt" class="n-button" value="quote" onclick="storeCaret('quote')"></li>
<li><input type="button" id="cd" class="n-button" value="code" onclick="storeCaret('code')"></li>
<li><input type="button" id="lnk" class="n-button" value="url" onclick="storeCaret('url')"></li>
<li><input type="button" id="pic" class="n-button" value="img" onclick="storeCaret('img')"></li>
</ul>
<p><textarea name="newst" id="newst" rows="10" cols="45"></textarea></p>
</form>
</body>
</html>
You might let them know about it. They seem committed to producing the best validator they can.
You were right. It's already fixed. Damn, that was quick.
Hi physics;
Please be nice to me. The reason i ask people help here, because i do not familiar with different browser, i just afaid whether they are compatibility together, and affect each other performace or not.
You were right. It's already fixed. Damn, that was quick.
And you gotta admire that.
And you gotta admire that.
Or pity it. The fix was done first thing New Year's Day. I know it's just as big a deal in the UK as it is here.
Nevertheless, I think I probably will spring for the software.
You are right that "Give a man a fish and he can eat for a day, teach a man to fish and he can eat for a lifetime."?
But the problem that you did not give any suggestion word to me.And if i known the browsers do not brother each other, i will do by myself.
You known what i think after you said the words to me last time. I think you may save money from your child, because you will let them stay at home, study by them self, not asking, not go to school, solve everything by them self, and this is the best way to obtain knowledge.
Different level people, different treatment. In fact, some people just come to this area, and have lack knowledge in this area, some times we want to do something, but our mind is very empty, could not pop up any idea to solve the problem. In this time, people will need someone to give help. I never heard about who don't want help in their life.
you see after some members told me that the browsers don't brother each other, then i can go to download them without worry. And i have my own Validator now, before that, i never validate my code, because i do not known there is a Validator can help me to validate my code. So get some idea from people will be good thing, it does not means ask you hand by hand to help.
Last time, i come to here to ask how to implement the BBCode, because i could not find any thing that can help me from W3 tutorial, then someone told me search the key word of Selection and CreateRang from google.Otherwise, i still don't solve the problem.
Anyway, i am very glad you come out to explain about that.
But i got some question to ask you about choosing the Document type.
1) i choise the HTML 4.01 Strict when i practise it, because it is good to known new feature.
2) i choise the HTML 4.01 Transitional when i put my code on website. because it includes the presentational attributes, deprecated elements, and link targets. And it doesn't matter if i make a mistake with the position of the open and close tags. So it is more tolerant.
How do you think about 1) and 2), is it good to do that?
3) I just viewed some source from Google and Ebay home page, i found them do not declare what kind of document type they use. why they miss out the declaration of the DocType, the performance of them are not affected.
Thanks
I just viewed some source from Google and Ebay home page, i found them do not declare what kind of document type they use. why they miss out the declaration of the DocType, the performance of them are not affected.
1) They generally provide code that works in the default rendition of most browsers.
2) Their design tends to be pretty simple, without too much complex mortising of images, etc.
3) They have huge staffs of people that do nothing but test, and they address compatibility issues quickly.
4) Try MSN [msn.com]. I may get all upset at Microsoft for inflicting IE upon the world, but they are the only major active site that validates XHTML 1.0 Strict.
I validate for about a million reasons. Just declare a DOCTYPE and stick with it. You won't regret it.
How do you think about 1) and 2), is it good to do that?
I am not the person to ask about document types and encoding, encyclo appears to be the resident guru on that topic. :-) But here is what I gather from all this:
A few years back it was forecast that XML would be the web standard very soon. By the many articles and discussions I've read on this topic, it appears this has fallen short of the goal. XML appears to be appropriate only for specific usage - that is, it is only required for specific functions that can only be accessed by using an XML doctype and a valid XML document. For everything else, 4.01 strict or transitional is perfectly valid.
4.01 transitional was a document type created to begin the transition from HTML 3.2 into XML and was provided to easily make the transition from HTML to XML. 4.01 strict adheres more to document semantics and acessibility than the more forgiving 4.01 transitional.
It is all a matter of how retentive you want to be with your document type and validation. Coding evangelists would have you program your pages to XML strict and only use tableless layouts. But a well structured page, even in Quirks mode, is still a well structured page - and you can bet your visitors don't give a hoot about your coding expertise or doctype. That is really the bottom line.
So I still work in 4.01 transitional, and in difficult situations revert to table layouts. When I can make it work and stay in budget, I use 4.01 strict and tableless layouts. But my explanation of this is pretty much lost on my clients, they really don't care. :-)
Apologies to encyclo for so badly mangling the doctype explanations here. :-)
But why there are a lot of errors come from them, their performance are not affected, and they don't want to fix it? Are these problem not worth to fix?
So I still work in 4.01 transitional, and in difficult situations revert
to table layouts. When I can make it work and stay in budget, I use 4.01 strict and tableless layouts.
But i got a question from the above.
Do you try to layout several tables in a page in transitional and place them on the position you want is not easy, that's why you use 4.01 strict and tableless layouts?
Are there not good method or function in transational to support we do
better job?
