Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: HTML Tags script

  1. #1
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,150
    Thanks
    96
    Thanked 98 Times in 96 Posts

    Default HTML Tags script

    This question/request pertains to this thread 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?

    Code:
    <!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.
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    				if(!window.opera){
    					document.selection.empty();
    				}
    to simply:

    Code:
    				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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,150
    Thanks
    96
    Thanked 98 Times in 96 Posts

    Default

    Opera 10.51 RC1 for Windows can be found here.

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't do RC's.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,150
    Thanks
    96
    Thanked 98 Times in 96 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,150
    Thanks
    96
    Thanked 98 Times in 96 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  8. The Following User Says Thank You to james438 For This Useful Post:

    jscheuer1 (03-16-2010)

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,150
    Thanks
    96
    Thanked 98 Times in 96 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    el.selectionStart = el.selectionEnd = startPos + l;
    to:

    Code:
    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):

    Code:
    <!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.
    Last edited by jscheuer1; 03-17-2010 at 04:39 AM. Reason: avoid Firefox javascript strict warnings
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •