Website text and code editor solution [closed] - javascript

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have spent days trying to incorporate different editors within my site. None seem to be up to the job. I have delved in to their code a lot and one thing or another doesn't work.
Here's my requirements:
Basic formatting such as size, bold, italic, strikeout, subscript and superscript
Image upload via ajax, image resize and positioning
Link handling
Code tag or styled div with a drop down in the top right for selecting syntax highlighting. And on leaving the code tag/styled div the text updates via ajax to include line numbering.
Paste but encode users code
The main issues with editors I have tried are:
Carriage Returns/Line breaks don't get the cursor out of the current element and if they do they re-create the current element or re-create the current element within itself.
They use a lot of unnecessary code, such as multiple nested divs. Heck looking at the source of some you get <div><div><div><div><div><div>Hello World</div></div></div></div></div></div>
They don't work in quirks which I need them to.
Here's an image of my idea, it's just a knock up:
So my idea is to use a content Editable div and regex to track the code tags and implement my own functionality. But I need to get selection start and length of a content div in all browsers inc' quirks. How can I do that?
Also replacing text within the content div.
Any suggestions, ideas or help would be great thank you.

It's pretty easy actually. You just need a <div/> with an attribute called contenteditable. From then on, the only browser issues you may have is to reliably insert HTML into that div. But I've seen it work well before, so it shouldn't be a real problem.
Since you mentioned quirks mode, I'm afraid it's not possible without hue hacks, however, there's an easy fix: put your editor (the div) in a separate page and embed it within an iframe.
Regarding the image uploading part, your server needs to handle that. From the editor's aspect, it's just an <img/> tag.

Related

Can you (should you) use "half" of Twitter bootstrap? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking to use something like Twitter's bootstrap to help me ease some of the pains of creating and working with some of the common design issues. However, I still fully intend to do a whole bunch of styling and stuff outside of their prepared stuff.
Would this be a bad idea? Potential conflicts down the road? Should I try to build on top of and use bootstrap as much as possible?
twitter bootstrap is great to get started and its exactly what it intends on helping developers. Instead of creating a lot of stuff from scratch, you got pretty much everything you need for a basic-to-medium frontend so you don't have to worry about it.
As you build your application, there will be times where you would need, for example, to replace the color of the buttons. So instead of having a .btn-primary be blue you want it pink.
you can override the .btn-primary in your own css, or even better, see how it behaves, copy the styles, change what you need and use your .pink-btn-primary.
Little by little your css would stop being twitter bootstrap and become your own variation, with the ability to rely on features being added to bootstrap with time.
Relying on bootstrap has a bit of a shortcoming - if a bug is fix or a new version changes its behavior (rare on css, but very possible on js) you will have to adjust to make sure you get the behavior that you want.
Also, You should be careful, as suggested, not to use their class names, and make sure you load your css files after bootstrap files.
good luck.
Bootstrap is meant to be used to build on top of and overwrite so you get the design you want.
As always, using Bootstrap depends on the project.
It makes starting out very easy but like most frameworks you don't always want to go against them, so you have to take them into consideration in the early stages of your design. Bootstrap relies heavily on wrapper elements and classes so using it for an existing website where the markup can't be changed won't work out for you.
Example: Their grid system works really well for their fluid container layouts but the default is 12 columns and you will want to look at all their customisation options to change this.. or see examples of using the .less pre-processor with Bootstrap and these settings apply a set margin that may not always work out for you, and you have to start thinking differently.. such as how you can nest elements to achieve the design you want, or start testing with new overwritten margin sizes.
You also need to consider any other frameworks you may be building on, e.g. ASP.NET MVC has a lot of built in features such as the client validation, and HTML helpers for form elements.. but they don't always allow you to apply wrapper elements and class names to them unless you first right your own extension of them.
Bootstrap has an Apache v2.0 license which says
irrevocable copyright license to reproduce, prepare Derivative Works
of
so as long as you keep the copyright license they allow you to change bootstrap as you see fit, obviously you shouldn't look to change what they have already extensively tested for you and you would rather just overwrite some things, but the option is always there.
I think most developers do not just use the prepared stuff, they always add some customization on top of it. As for CSS styling, You can keep the bootstrap.min.css file intact and write your custom css on another CSS file. If Bootstrap updates in future you can just replace that original bootstrap.min.css file and maybe have to make some minor adjustments.

WYSIWIG JavaScript HTML editor with API and advanced text processing support (like word detection) [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I`m looking for WYSYWIG JavaScript HTML editor for my app. I`ve already tried some of them, for example from this list but some are too complex and some are missing basic features...
Requirements:
It should work with newest stable release of: Mozilla Firefox, Google Chrome, Opera, Internet Explorer (and also Apple Safari support would be nice).
It should have basic features like bold, italic, color change, headers, paragraphs, no-formatting, aligns - those are basic options that browser may handle (it is how it`s done in most WYSIWIG editors).
I don`t need any UI - so if it comes with UI - I should be able to easily remove it. I mean I don`t need any buttons, color pickers, image insert dialogs etc. - I will build my-own menus
Instead of UI I need complex API where I can for example extract selected/full text/HTML, insert text/HTML, replace text/HTML.
I need advanced text processing support - this is what I`m looking for and cannot find anywhere - I need to detect what word is under cursor. For example we have "This is sample text" and User clicks on "sample" - I need to know it`s position, text and HTML.
I found something like this: Javascript Rich Text Editor with get AND set cursor position support - but it`s not full answer for this problem.
It would be great if it`s easy to embed (not to much files), lightweight and fast.
It should be licensed by opensource/GPL/or some other open/free license.
If I miss any info - please let me know and I`ll update them.
Maybe some of You know some nice libraries? Or maybe there are other nice solutions to achieve my goals?
Thanks in advance
Not a WYSIWYG editor as such, but my Rangy library may help you build a simple editor. In particular, the new TextRange module provides methods that work with words.
you can try nicedit. http://nicedit.com/index.php

Responsive Grid Layout Framework [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width
responsiveness: adapts automatically when resizing the browser window
mobile devices: shows an alternate fitting layout for pads and mobile phones
text size: optionally adjust text sizes dynamically (for example full width headlines)
image size: optionally adjust images sizes dynamically (for example full width image galleries)
breakpoints: optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)
Update
I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:
Foundation
Semantic Grid
Golden Grid System
Here are all the others:
CSS Grid (not fluid)
320 and Up (not fluid)
Columnal (not fluid)
Skeleton (not fluid)
SimpleGrid (not fluid)
Less Framework (not fluid)
Bootstrap (non-semantic classes)
Breakpoints.js (only breakpoints, too similar to media queries)
Adaptive images (only images)
FitText (only text)
Gridset (commercial)
HTML5 Boilerplate (old)
Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.
How are your experiences with these or other similar frameworks?
Do you recommend a specific framework that matches my requirements?
Solution
I ended up using Foundation which is clearly the winner in this race - in my humble opinion.
Update 2
Bootstrap 3 is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.
I have used columnal priorly and it does provide most of the functionality that you want apart from the breakpoints feature.
It is easy to use and is adaptive. In mobile screens the grids degrades to a stack so all the column contents are shown one under the other.
However for the intelligent adaption feature, as you have outlined in the breakpoints feature : I would very strongly recommend you to use the CSS 3 media queries directly because that is exactly what they are meant for and they are not difficult to use. The CSS frameworks which provide these features under the sheets utilize media queries only.
Taking a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive , Bootstrap's fluid grid does provide some convenient shortcuts for setting css properties for specific screen sizes which are not present in columnal.

Are there any tools to transform SVG data to Canvas friendly input? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Are there any tools to transform SVG (XML) data to Canvas friendly input?
Take a look at canvg. It is a JavaScript library that will parse SVG and render into a specified canvas element:
http://code.google.com/p/canvg/
There's also an Ajaxian article (but I can only post one link per post) It's titled "CanVG: Using Canvas to render SVG files"
No I don't think so. SVG is actually rather different to Canvas. SVG is a vector graphics description language, whereas Canvases are programmatically "drawn" by sets of instructions. Also, Canvas isn't actually vector based at all.
Take a look at the Raphael Javascript Library. Its API will draw SVG/Canvas/VML depending on the capabilities of the browser.
Dojo also has support for rendering SVG.
See the dojoX package.
link text
Take a look at this article from the svg open conference. Somewhere in the middle it discusses a method to combine svg and canvas using server side rendering.
I used Canvg as a basis to create this online tool:
www.professorcloud.com/svg-to-canvas
It creates JavaScript Canvas functions from SVG input. Doesn't do the whole SVG spec, but enough to be useful.
Fabric.js has an SVG-to-canvas parser. Here's a demo. Notice how clicking on buttons in SVG section of sidebar fetches SVG documents and parses them onto canvas in real time.
You can even manipulate those canvas-rendered objects (scale, move, rotate, etc.)
Take a look at XSLT.

"Endless scrolling" effect in a HTML table [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am displaying a scrolled data table in a web page. This table has several thousands of dynamic rows, so it is loaded from the server (via AJAX).
The user can scroll up and down, so what I need is to detect when the user reaches the end of the scrollbar (that is, the last row at the bottom of the table) in order to request and show more data.
You can find this effect in google reader, when you scroll down to the last post in a given feed, google requests and shows new posts in a transparent way, but I can't figure out how they achieve it.
By the way, right now I am using a YUI Datatable
Thank you for your answers. That's my final working code (inspired by Greg and ajaxian.com), that uses some jQuery functions and works with the YUI DataTable.
$(".yui-dt-bd").scroll(load_more);
function load_more() {
if ($(this).scrollend()) {
alert("SCROLL END REACHED !");
// TODO load more data
}
}
$.fn.scrollend = function() {
return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}
My next step is to implement my own YUI Paginator to achieve a complete integration with YUI components :)
I'm not familiar with the specific element you are using, but in order
to implement this on a full size window, you can do the following:
$wnd.onscroll = function() {
if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};
Where scrollTop is essentially "how many pixels have been scrolled".
I assume applying this to the table you are working with will do the job.
I've just googled for it and found this article: Implementing Dynamic Scroll with Ajax, JavaScript, and XML. It looks like a thorough explanation.
You can see it working here YUI only. In contrast with one of the solutions suggested above, the scrollbar moves continuously, the position and size reflect the true size and position of the viewable area, it doesn't load the next batch when the scrollbar reaches bottom. The scrollbar reaches bottom only when the last of the whole records is at the bottom of the viewing area. Of course, this only works if you do know how many records there are.
There is a property I noticed while reading through DOM properties in Firebug today called scrollY (in Firebug under the DOM tab go to content > scrollY) which appears to be the amount of pixels left to scroll on the window. Try seeing if this is also created for scrollable elements. Then you can use Yuval's function to load new data.
Ick. Not a big fan of endless scrolling; it breaks some of the key assumptions people make about how the Web works. Please promise you will only implement it under the following conditions:
1) you are not substituting it for a perfectly good page that loads everything in a nice long table and lets the user use Ctrl-F to search inside the page for what time Fringe comes on.
2) you don't plan on inserting an ad at the bottom of each chunk of scrolled data.
3) you are providing a working fallback (hey, there's that nice long table again) for blind people and people browsing the Web with JavaScript disabled.
If you're using the YUI, it has a tableScrollEvent that gets fired when the table scrolls. Couple this with the dataTable's generateRequest function and you could implement endless scrolling by watching the tableScrollEvent and starting a request when you get near the end of your dataset.
The YUI doc's don't have a specific example for this case, but does show you how to handle the data returned by generateRequest

Categories