|
HTML - Automatic Keyword Colouring
I'm making an HTML-based text editor for Windows PCs.
The editor needs to have some special functions, and one of them is the automatic colouring of certain keywords. Here's the situation. (Apologies if little of the following is relevant, but I can't be sure.) The editor is part of a program. When the user wants to write something, the editor is created (an instance of the Windows WebBrowser) and custom HTML is loaded into it. So it's displaying a spontaneously-created HTML page. This page includes a section marked contenteditable=true, and that's where the user types. When the user is finished writing, they press a button, the current HTML in the browser is read and the text is extracted from it and saved, and the browser is destroyed. All that works fine. However, I'm having trouble building in some special functions. Namely keyword colouring. The host program allows the user to set a number of keywords, and a colour for each one. The idea is that when the user is typing in the editor, keywords will be detected and coloured. This colouring process needs to happen in realtime. As an amateur, I naively thought it would suffice to just read the HTML intermittently, scan for the keywords and add tags to each one, like this: Code: <SPAN style=text-colour:#FF00FF>thekeyword</SPAN> But there are several problems with this method. Every time the HTML is revised and reloaded into the browser, the "page" is scrolled back to the top. (As an aside, if anyone knows a method for getting and setting the caret position in an HTML page, I'd be grateful to know it too!) The second problem is that if the user types in the middle of a keyword, the new text inherits the colour. So obviously the tags method isn't going to be sophisticated enough. What I need is a smart way to detect and recolour keywords on the fly. Some form of syntax highlighting, I suppose. Does anybody know any tricks for doing this? JavaScript perhaps? Below is an example of what I want to achieve. As you can see, the caret is in the middle of a keyword. If the user pressed the spacebar, the editor would immediately look like the second image. What do you think? Is it possible? Thanks for reading, Seymour. Similar TutorialsSorry for the dodgy title lol. I didn't know what to call it. My web designer has create my quote form with insert boxes for Name, Phone number etc. which are yellow (so people know to fill them in) however there are a few other boxes which are currently white. I would also like to make these boxes yellow. How would I go about this? Thanks! Hi Guys, I'm pretty new to coding, and up until now I've been using TextMate as my code editor. One of the things I like about TextMate is that it gives me very precise control over the colour of the code. Fro example, I can specify a colour just for hex numbers. Now that's all well and good, but I recently started using Dreamweaver and although there is some control over the colour of individual code elements, it seems very basic (e.g. in CSS it's limited to eight very broad areas - via Prefs > Code Coloring). Am I missing something, surely there must be a way to get more precise control over code colour? si hi all, I'm trying to optimise my key word search, but no matter what I type on google, my site is not listed. I've tried using meta tags, making sure all my alt tags are correctly defined etc. The only thing that i can think of is the keywords are not listed enough in the code. Anyone any advice, or any reccomondations for places to go for good tutorials etc? thanks <meta name="description" content="wonderfull beach - blue bay - rooms- hoiliday fresh air google3a970ace18e26dae.html"> Can anyone tell me what the google html file in the description tag is. Its is probably SEO related. I have not been able to find anything about it. Can it be the sitemap XML file in some disguise? Best regards I am not sure if this is the right place to ask this question, so I apologize in advance. Are there any easy to use (and free) Perl script programs (would it be a program or just script?) that I could use on a website to integrate a keyword search program so that users can search specified text and HTML documents? Thanks in advance for any suggestions and help. Hey all, I'm having a bit of trouble applying the style keyword to get it to work in firefox. It works fine in internet explorer. my code is: <table style="position:absolute;left:220;top:155" > as in it doesnt position the table in absolute, it still puts it UNDER any text rather than applying the position any ideas as to why this isnt working in firefox? is there an equivelent I can use to position a table on the screen? Hi there I use www.webnode.com to build & maintain the website for our children's orchestra. On my website we have a page were every kid's name, photo and age is showed. I was wondering if there was an automatic age changer system code, so I would not have to check every day if there are birthdays and having to change them manually. Something like this; Name, <age>, photo. That age would be calculated by putting in the birth date. Is that possible? Thx in advance! Martino hey all, working on some simple coding that is giving me trouble. here is what i have so far: HTML Code: <div style = 'position:absolute; width:auto; background-color:#DFD2FC;padding:10px;'> <div style = 'position:relative; background-color:#B6FCCC;'> <p>pair</p> <div style = 'position:relative; float:left; background-color:#FCE4B6; margin:5px; padding:5px;'> <p style = 'align-text:left'>1<br>2<br>moo<br>meow</p> </div> <div style = 'position:relative; float:left; background-color:#FCE4B6; margin:5px; padding:5px;'> <p style = 'align-text:left'>3<br>4<br>sdf<br>asdf<br>sdf</p> </div> </div> </div> however, it's not behaving correctly. i'd like the 'green' div to change in size according to the text within the 'yellow' divs. and then the 'purple' div should change size compared to the size of the 'green' div. i hope that's clear... any help? Ok so I am extremely new to coding and am setting up a small website. Everything I use right now is based off of a few excel spreadsheets and the site I'm making I want some of that info in a more public format rather than sharing a bunch of spreadsheets. One spreadsheet I have imports the html tables from another website and puts it into a google docs spreadsheet. So whenever the source code is changed on the original website it is also changed on my spreadsheet. Now, is it possible to reference a specific spreadsheet cell(s) (instead of the specific data in the cells) so that when the data is changed on the spreadsheet it is also changed on my website. The way I have it now it only shows what was on the spreadsheet at the time the code was entered. So if cell A1 said apples and then a day later cell A1 changed to bananas, my website still shows apples since that was what was originally entered even though the spreadsheet changed to bananas. I'm not sure if I'm too clear on what I'm asking...I tried. If you have a vague answer or a starting point where I should start looking that would be good too. Thanks. Hi, this is my first post and I'm pretty new at HTML. Ok, I have been making a script and it works fine, but there's a problem. Most websites I visit (including this one) when you make the window smaller, the stuff you covered up simply goes off screen, but in my script, when you cover it up most stuff shifts down a line and is still visible. This look very messy having things constantly shifting around! : I was wondering if there was some tag or something that causes everything to freeze in place no matter how small the window gets. -Thanks i have created a web page using MS front page and i folder nme midi containing 600 midi files and uploaded both at a free web hosting service no i need to know that is there any way that the names of all files in folder MIDI automatically appears on my web page i dont want to type names of files and then create there hyperlinks it may take lot of time i have to submit nearly 2000 files . I was wondering if it's possible to automatically copy a file to a website from another site. The reason I ask, is the company I work for wishes to show the newsletters from their partner company but doesn't want to update their website after each letter. So, I know I can create a link to their site rather easily, but I'm wondering if it's possible to actually copy the files that are stored in .pdf format. Hi, i am sure you's are all familiar with photobucket, well i was wonderig if anyone knows the code to automatically highlight and copy to the clipboard information in a box when it is just simply clicked like it does with the ht code, image url, etc next to your picture on photobucket. thanks, karl How does one enable automatic re-sizing of a web page based of the viewers resolution and browser? Hi guys I was hoping someone could help. We have a screen in IT at work and would like to setup a simple webpage which cycles through a number of other webpages showing content. What im trying to find is a simple way to do this but also add a fade out fade in effect. Can anyone help? Is there a way to automatically login to a website that requires http authentication? I am especially talking about an image that has a src field that contains a protected image. In some browsers, for example, this works: Code: <img src="http://username:password@website.com/image.jpg"> But, this inclusion of the username/password isn't supported by all browsers I've tested it on, nor is it standard. Is there any way to do this in html or javascript? Thanks so much! Hello. I am quite new to this kind of page work so I am looking for some help. I am trying to have my page show listed items by letter and, with each letter, a number of results per a page. For example. I would like to add "Abacus" to to "A", but "A" has 20 items already. How would I make it so that "Abacus" pushes the list down and a second page is created? I am hoping for a script because I plan to add new items regularly. It would be tedious to manually create a new page and to sort every item down one. Hi! I need help! How can I copy a html table row when updated? The table is not in my site! I know the name and where it is! I prefer not to copy data manualy because it's not updated reguraly and I've not so much time! If I can automaticaly insert it in a mysql database is perfect!!! Can someone help me?!? Thanks! For some reason whenever I have an img tag it causes an automatic line break. I was wondering if anyone else has encountered this problem. Basically i'm trying to add an small icon to the left of an active link. So the code basically looks like this.. <img src="icon.jpg"><a href="link.html">text link</a> The end result is a icon on one line and the link rests below it instead of everything being on one line. This is the first time this has ever happened and i'm wondering if this is normal? I realize this may seem like a noob question but any help would be appreciated. Thanks. |
|||||||