PDA

View Full Version : HTML Tags script



james438
03-14-2010, 07:21 AM
This question/request pertains to this thread (http://www.dynamicdrive.com/forums/showthread.php?t=50020) and the script written by jscheuer1.

I recently updated my old version of Opera to 10.51 and while the script still works great I notice that when I hit the button to make the text bold or whatnot all of the content after the highlighted content becomes highlighted instead. What needs to be changed in order to keep the highlighted text highlighted after a button is clicked?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/* editText Script 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
var editText = {
init: function(){return;}
};
(function(){
if(!document.getElementById){
return;
}
editText = {
saveCurRng: (function(){return document.selection?
function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}:
function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'?
el.value.substring(el.selectionStart, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection?
function(btag, etag){
this.el.focus();
if(!window.opera){
document.selection.empty();
}
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
}:function(btag, etag){
if (typeof this.el.selectionStart === 'number'){
var el = this.el, startPos = el.selectionStart, endPos = el.selectionEnd,
l = [btag, this.curRng, etag].join('').length; el.focus();
el.value = [el.value.substring(0, startPos), btag, this.curRng, etag,
el.value.substring(endPos, el.value.length)].join('');
el.selectionStart = el.selectionEnd = startPos + l;
}
};
})(),
controlsFront: function(el, cfg, area){
var t = el[cfg.controlInfo].split(cfg.controlDelimit);
if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){
t = el.value.split(cfg.controlDelimit);
}
if(cfg.controlDelimit === '><' && t.length === 2){
t[0] += '>';
t[1] = '<' + t[1];
}
else if(t.length === 1){
t.unshift('');
}
this.saveCurRng(area);
this.insert(t[0], t[1]);
},
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})(),
init: function(cfg){
this.addEvent(window, 'load', function(){
var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
area = document.getElementById(cfg.el);
editText.addEvent(area, 'change', function(){editText.saveCurRng(area);});
for(i; i < ctrls.length; ++i){
(function(el){
editText.addEvent(el, 'click', function(e){
editText.controlsFront(el, cfg, area);
if(e && e.preventDefault){
e.preventDefault();
}
return false;
});
})(ctrls[i]);
}
});
}
};
})();
editText.init({
el: 'myArea',
controls: 'myControls',
controlTag: 'input',
controlInfo: 'title',
controlDelimit: '><'
});
</script>
</head>
<body>
<form action="#">
<div>
<textarea id="myArea" rows=5 cols=40>The Slow Pink Fox Jumped Over the Quick Green Dog.</textarea><br>
<input type="reset" value="Reset">
</div>
</form>
<div id="myControls">
<input type="button" title="<b></b>" value="B">
<input type="button" title="<i></i>" value="I">
<input type="button" title="<br>" value="BR">
<input type="button" title=" :)" value=" :)">
</div>
</body>
</html>

If this post should remain part of the original thread in order to avoid multiple threads on this topic please move it to where it should be. I want to nominate this script be added to the DD scripts library. It really is quite useful.

jscheuer1
03-14-2010, 12:10 PM
I'm running 10.10 and it reports that it's the most recent version. Checking the Opera website shows 10.50 as most recent for Windows. Where did you get 10.51? For what OS?

Anyways, neither of the two behaviors you mention are what's supposed to happen. It's supposed to wrap the tag around the highlighted text, then the highlight is supposed to stop. The insertion point (cursor) is then supposed to be at the outside end of the newly inserted tag.

And that's what happens here with the version of the script in your post, which also happens to be the latest version I have on file.

Since I cannot see where I can get the version of Opera you are talking about, I'll just have to take your word for it as to the behavior, and can only guess at a solution. Make sure you are actually using the version of the script in your post and not some other mod or version. Once you have established that, and if there is still a problem, try changing this:


if(!window.opera){
document.selection.empty();
}

to simply:


document.selection.empty();

There's only one other Opera specific command, and it's only for non wrapping insertions, so should not effect what you are talking about. The only other thing I can think of is that, since Opera can follow both the IE and the all other browsers path, perhaps switching the order of precedence for that would work. However, the version of Opera I developed the script on, though it could follow the 'all others' method, that is it tested true for the availability of the methods, it couldn't execute them as well as it could the IE methods.

james438
03-15-2010, 12:49 AM
Opera 10.51 RC1 for Windows can be found here (http://my.opera.com/desktopteam/blog/2010/03/13/opera-10-51-rc1-for-windows).

Far simplicity sake I used the script I posted. I tested the script I posted just prior to posting it. I tested it on Opera 10.50 as well and the same problem occurred. The fact that you do not have that same problem and that this only occurred after I upgraded to Opera 10.50 and then 10.51 RC1 makes me think that my installation of Opera is corrupted and I need to do a clean install. Corrupted installations are not terribly uncommon and tend to occur in Browsers that are very often upgraded and modified as well. I will try and perform a clean install and get back to you. It might be about a day before I reply because I am running low on sleep at the moment.

jscheuer1
03-15-2010, 01:10 AM
I don't do RC's.

james438
03-15-2010, 02:19 PM
Whether you do or do not do RCs the problem still persists in the official 10.50 release. If this were a beta issue then it would be silly and irresponsible of me to post it here.

I like to do RCs sometimes so that I can be more involved in making sure the new release has as few crashes or glitches as possible. Sometimes a certain bug in an official release will become really annoying and I will try a RC or snapshot build in hopes that the bug is gone.

I did a clean install of Opera 10.50 for windows and still had the same thing happen. I am thinking this is an Opera problem and am posting this issue on their forums. When I find something out I will try and post here. As a control I am making sure to only deal with the original script from the first post in this thread.

jscheuer1
03-15-2010, 05:28 PM
It's just that I have like at least 6 browsers I test in, if I were to include RC's, it would just be ridiculous.

I'm a little curious though why a minor version upgrade (10.10 to 10.50) wouldn't show up when I ask for Opera to check for updates. Is the Opera team unsure of this 10.50 release?

Did you try the modification I suggested?

james438
03-15-2010, 09:15 PM
Ah, that makes sense. I don't think testing against pre-release builds like RCs are a good idea, because it is like testing against a buggy program when the real standard version will be coming out soon.


I'm a little curious though why a minor version upgrade (10.10 to 10.50) wouldn't show up when I ask for Opera to check for updates. Is the Opera team unsure of this 10.50 release?
Good question. It has been like that for a while. I'll see what I can find out.

I did try your modification out first, and then the clean install. I checked the Opera beta forums and asked them to test out the script and they reported the same thing. I noticed similar problems with other pages as well and submitted a bug to the dev team.

jscheuer1
03-16-2010, 01:41 AM
Yes, see what you can find out. Firefox does that for major versions, like from 2.x to 3.x and I'm not even sure why they did it for that. If there is no good reason for such a practice it only encourages legacy version usage, which I believe is a bad thing. If on the other hand there is a good reason - I'd love to know what, so I could decide (based upon facts, rather than feeling) for myself whether to upgrade or not. Such information (if it exists) should be right on the download page.

james438
03-17-2010, 02:54 AM
I don't think I will be able to get much of an answer about why "check for updates" was/is not detecting 10.50 due to the large numbers of people posting. If I do get an answer from a reliable source (at least someone I feel is reliable) I'll try to post the answer here.

I would hold off a bit on updating. There are a number of bug fixes that I have noticed and a few new features, but flash seems worse than before and there is also that javascript problem I mentioned earlier.

The javascript problem I can easily live with. The flash problem is frustrating. If I left click on flash and go to another tab the left click and mouse wheel buttons are disabled until I right click.

jscheuer1
03-17-2010, 04:13 AM
As a developer of sorts, of scripts, I know it can be confusing if and when to issue an update. Are the new features worth it? Are there perhaps new bugs? Is the update path seamless enough for earlier adopters? It's always tempting to not worry about some or any of that. One can always issue a future update. The most comfortable spot to be in as far as all that goes is pre-release. You can play with it, update it whenever you like, and tell folks about it, where it's available, the basics of use, but don't have to worry about bugs (other than on the coding side) or docs.

Getting closer to back on topic though, the Opera team has been pretty consistent over the years.

As far as the script in question goes, Opera was the odd man out. IE often needs its own browser specific methods. Firefox and almost all others can do it to standards. In this particular case, Opera couldn't do it like the "Fox" or IE, but apparently was closer to IE.

So, let's try my other idea. Force Opera to do it like the "Fox". Only let's try it with a twist, changing the order of:


el.selectionStart = el.selectionEnd = startPos + l;

to:


el.selectionEnd = el.selectionStart = startPos + l;

Here's the full code (other things have changed. You cannot simply plug in the above change to the previous version):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/* editText Script 2009 - 2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
var editText = {
init: function(){return;}
};
(function(){
if(!document.getElementById){
return;
}
window.opera = typeof opera !== 'undefined'? opera : null;
editText = {
saveCurRng: (function(){return document.selection && !opera?
function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}:
function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'?
el.value.substring(el.selectionStart, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection && !opera?
function(btag, etag){
this.el.focus();
document.selection.empty();
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
}:function(btag, etag){
if (typeof this.el.selectionStart === 'number'){
var el = this.el, startPos = el.selectionStart, endPos = el.selectionEnd,
l = [btag, this.curRng, etag].join('').length; el.focus();
el.value = [el.value.substring(0, startPos), btag, this.curRng, etag,
el.value.substring(endPos, el.value.length)].join('');
el.selectionEnd = el.selectionStart = startPos + l;
}
};
})(),
controlsFront: function(el, cfg, area){
var t = el[cfg.controlInfo].split(cfg.controlDelimit);
if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){
t = el.value.split(cfg.controlDelimit);
}
if(cfg.controlDelimit === '><' && t.length === 2){
t[0] += '>';
t[1] = '<' + t[1];
}
else if(t.length === 1){
t.unshift('');
}
this.saveCurRng(area);
this.insert(t[0], t[1]);
},
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})(),
init: function(cfg){
this.addEvent(window, 'load', function(){
var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
area = document.getElementById(cfg.el);
editText.addEvent(area, 'change', function(){editText.saveCurRng(area);});
for(i; i < ctrls.length; ++i){
(function(el){
editText.addEvent(el, 'click', function(e){
editText.controlsFront(el, cfg, area);
if(e && e.preventDefault){
e.preventDefault();
}
return false;
});
})(ctrls[i]);
}
});
}
};
})();
editText.init({
el: 'myArea',
controls: 'myControls',
controlTag: 'input',
controlInfo: 'title',
controlDelimit: '><'
});
</script>
</head>
<body>
<form action="#">
<div>
<textarea id="myArea" rows=5 cols=40>The Slow Pink Fox Jumped Over the Quick Green Dog.</textarea><br>
<input type="reset" value="Reset">
</div>
</form>
<div id="myControls">
<input type="button" title="<b></b>" value="B">
<input type="button" title="<i></i>" value="I">
<input type="button" title="<br>" value="BR">
<input type="button" title=" :)" value=" :)">
</div>
</body>
</html>

I dunno if it will fix it for 10.5x, but when I shifted to the standard method in 10.10, it had the exact problem you described for 10.5x, then the change mentioned above (plus shifting to the standard method) fixed it, so it's worth a shot.

james438
03-17-2010, 03:26 PM
That certainly fixed it.

I need to head to work, but when I have more time I'll try and integrate it into my site.

james438
03-19-2010, 04:47 AM
It was very easy to upgrade since about the only change I made was to add more buttons.

I was able to get a partial answer to why check for updates said that you and others had the latest version of Opera when 10.50 was already out:


Snapshot or a Final needs to be on the autoupdate servers first.
The reason that 10.5 wasn't on the autoupdate server immediately (don't know if it still isn't) is to "ease the load on the servers, and prevent/reduce potential problems for people upgrading".

And snapshots rarely get posted on the autoupdate servers, which renders the option opera:config#AutoUpdate|DownloadAllSnapshots pretty useless.
It's a much cleaner way than checking the blog or outdated and broken feeds all the time.

I am not sure as I understand that last sentence though.

jscheuer1
03-19-2010, 06:04 AM
If accurate, it sounds like they need to upgrade their servers. I mean, one of the purposes of the servers is to handle the update traffic. If they cannot do that, they need to be beefed up.

james438
07-20-2012, 03:52 AM
It has been over 2 years since the last post in this thread, but I have a minor update.

In the most recent stable release of Opera (12.00) the Opera bug that I originally asked for help with has been fixed. I kept the bugged version of this script and have been watching the Opera builds and releases for this fix and figured you might be interested if you have not already noticed it yet.

By the way I still use this script all of the time. It is a very useful script :).