Better text area input - html

When you make a question on Stack Overflow, you get a text area box with options like "bold", "italic", "add hyperlink" and everything. I want to do the same thing... But how would I do this? Is there any examples of this? I'm sure there is something on the internet for this. Any help would be greatly appreciated. Thanks!

At the very coarse high-level view, those fancy online editors are just a div that's had its contentEditable attribute set to true. the button bars, menus, etc... are just fluffy extras.

You can try googling for wysiwyg plugins, like CLEditor jQuery plugin http://premiumsoftware.net/cleditor/

Normally you should use tinymce, etc.
But specifically on Stackoverflow, they use Markdown and a simple textarea. The few buttons here just insert simple ascii-text for the markdown symbols into the textarea

You want to look at W(hat) Y(ou) S(ee) I(s) W(hat) Y(ou) G(et) Editors. Examples: TinyMCE , ckeditor

You can also study the source for this web page. I recommend the Firebug plugin for Firefox. It makes it much easier to navigate the source of a web page.
Simply right-click on an html element, like a text-area, or a button, and click "Inspect element". It goes straight to the source.
I haven't delved my hand in web design for a little while, but there's clearly a lot of CSS and maybe JavaScript going on, both of which (as they are client-side) you can see in the source.

Related

Is there a way to make the cursor in a textbox more prominent?

I'm working on a web app for folks with brain injuries. I'd like to make the cursor in the textbox more noticeable than a think blinking line.
Is there a way to make it larger?
(Searched on Google and SO. No luck)
This isn't naively possible/reliable on all browsers as it's controlled by the OS. I would suggest a help doc of sorts that links your users to modify their system so that not only yours, but all websites, are easier for them to navigate.
see: http://etc.usf.edu/techease/4all/vision/how-do-i-change-the-cursor-options-in-windows-7/#html
Here is a demo of how to do it from another post (Styling text input caret)
Demo: http://shachi.prophp.org/demo.html

adding spelling suggestion on HTML page

I am new to web development and just trying to add spelling suggestion to a textarea. I really don't know what I am going to need for this, need to write the code myself or use a third party library etc. Can someone suggest me how to add this functionality to a simple HTML page containing a textarea. I want when I write a misspelled word in text area, some suggestions matching that word should appear in dropdown.
Well autocorrect in the web page can be achieved by JavaScript for sure.
There are some nice frameworks for this, probably you could see this:
https://github.com/sanisoft/jQuery-auto-correct
For only spellchecking (despite built-in browser checking):
http://www.javascriptspellcheck.com/JQuery_SpellCheck_Plugin

Help with creating a demo website

I have a question of how to develop a small website which is quick and easy which has html support unlike google sites. For one of my course project I have to develop a prototype of the website but just html pages. Want to implement the clicks, text fields, checkboxes etc., I have created a small site of googlesites but that doens't allow me to put the html like text fields radio buttons etc., I just wanted to know if there is any free WYSIWYG capable for doing my stuff.
Thanks in advance
EDIT:
I dont want to use the div tags and arrange the location of HTML. I just want to drag and drop the fields and the site should automatically place the fields appropriately on the webpage something as easy as google sites
I found jsfiddle.net to be really useful. Basically you can put in HTML, CSS, and Javascript, click "Run" and see the result.
It's great for testing or hacking some CSS or Javascript, as it gives you instant feedback, saving you the "edit, save, launch, wait, repeat" cycle you might find using a text or HTML editor.
UPDATE
I'm not sure if I understood your question correctly. Perhaps you are looking for a tool like Google sites but with more capabilities? If so, http://www.weebly.com/ is a good option and it is free.

How to allow font styling in textbox

Hey guys, there's a certain text box that I want to allow users to make text bold, italic, point form, add pictures, ... Anyone know how to do that?
Do you mean something like this: http://nicedit.com/ and http://nicedit.com/demos.php? It's called a WYSIWYG (What You See Is What You Get) editor.
If you want to make one, this tutorial seems pretty good: http://www.webreference.com/programming/javascript/gr/column11/. It show you how to make an old-school editor, but you can extrapolate it a bit more one you get the jist of it.
You can use an editor like CKEditor or TinyMCE to accomplish this.
For more options, see the following site:
List of Free Web Based HTML Editors For Your CMS Project

What is HTML code that causes captions/comments pop up when mouse is rolled over a hyperlink?

What is that peice of the HTML code that allows me to provide comments to links before the user is actually clicking on them?
Do you know what I mean?
I mean, on my web page I have some hyperlinks, and I want to know some information about it - what I will be taken to if I click on this link - so I just roll over my mouse on that link and a certain kind of caption appears providing me with all necessary info about this link.
I know how to make hyperlinks in HTML, but I have no idea how to make these self-popping -up captions. Can anyone, here , please share with me how to do that? Which tags do I need to use for that?
A simple example would be highly appreciated.
Thank you all in advance!
Title.
link
If you are going for a title attribute then one problem is the default timeout for the attribute. ie after a fixed time it will disappear.
If you want a tool tip that appears when the users mouseis over that and that does not disappear, then you can use css and javascript to make a tooltip.
Create a Nice, Lightweight JavaScript Tooltip
I believe you are referring to the abbr tag
The title attribute gives the normal yellowish tooltip.