Are there any rich text editor plugins out there for use in jQuery Mobile?
I'm just looking for something simple, that would allow the user to enter text then format it. I need the ability to bold, italicize, and underline at a minimum. Text alignment (right/left/center) would be nice.
Here's my answer to a question that many people seem to have: How to determine the usable visible content area of a jQuery Mobile page.
I'll assume you're starting with a standard jquery mobile 1.1.0, and have your
To start, we need some CSS for a div we'll call "fillme":
#fillme {
background-color: #000;
}
This just sets the background color to black, so you can see the size clearly in this demo.
I'm going to demonstrate on a page with a header, but no footer, so the HTML for the jQuery Mobile page should look something like this:
<div data-role="page" id="home">
<div data-role="header">
<h1>Content Filled</h1>
</div>
<div data-role="content">
<div id="fillme"></div>
</div>
</div>
At this point, we've got a div with no defined width, height, or content, but will have a black background as soon as those are provided.
We'll start by waiting until the window is loaded and ready:
$(window).load(function() {
We're going to want this div to resize when the screen dimensions change, so we start by binding a resize event to the window:
$(window).bind('resize',function(event){
First, make sure we're at the top of the page:
window.scrollTo(0,0);
Next, get the height of the screen, without the browser chrome:
winhigh = $.mobile.getScreenHeight();
That is the total height of the screen, however, including things like the header, so let's get the height of the first page's header (if you used a footer, you'd also take the height of the footer into consideration in a similar manner):
We'll subtract that from the total height of the window (which you'd also do for the footer, if you had one). We also need to compensate for the 15-pixel padding at the top AND the bottom, so we'll subtract another 30 pixels after that:
winhigh = winhigh - headhigh - 30;
Since there's less to worry about concerning the width, we just use the document width, and adjust for the 15-pixel padding on the left and the right:
winwide = $(document).width();
winwide = winwide - 30;
Finally, we set the width of the "fillme" div to be the height and width we've determined for our window, and then close the window resize event listener:
Next, trigger the resize event, so everything gets arranged properly, and make sure the window is scrolled to the top:
$(window).trigger('resize');
window.scrollTo(0,0);
Finally, close the orientationevent listener, trigger the orientationchange event, to help remove the whitespace at the bottom, and close the window load function:
}).trigger('orientationchange');
});
That's it!
Now, whenever you resize your browser window or rotate your mobile device, you should see a big black rectangle adjust itself to the visible and usable section of the content area!
You can now use this div as a starting point to keep things visible. For a simple idea, you might decide to set this div's overflow to "hidden", so anything outside that div isn't placed on the screen.
Alternatively, you could use it as a reference to keep elements sized appropriately in a window.
For example, I used it to create a chessboard that resizes itself. I simply looked at which of the 2 dimensions had a smaller pixel size, the height or the width, and made each square 1/8th that size. By having this re-drawn in the resize event listener, I get an adjustable chessboard!
Below is the resizable div's full jquery mobile/javascript code with comments for cutting and pasting purposes:
$(window).load(function() {
$(window).bind('resize',function(event){
window.scrollTo(0,0);
winhigh = $.mobile.getScreenHeight();//Get available screen height, not including any browser chrome
headhigh = $('[data-role="header"]').first().outerHeight();//Get height of first page's header
winhigh = winhigh - headhigh - 30;//Subtract 30 for the top and bottom 15-pixel margins around the content area
winwide = $(document).width();//Get width of document
winwide = winwide - 30;//Subtract 30 for the right and left 15-pixel margins around the content area
$('div#fillme').css('width',winwide + 'px').css('height',winhigh + 'px');//Change div to maximum visible area
(Nothing built specifically for JQM, and a few that wouldn't work on any of my touch devices. Others would work ONLY on, say, iOS, but not on Android.)
I finally stepped back and said, "What exactly am I looking for?" When I did that, I quickly found the answer.
1) I was looking for simple slides that could contain text, images, and video
HTML, and thus JQM pages could handle that already.
2) A simple horizontal transition between slides
Other than "none", that's JQM's most basic page transition, and you can even choose the direction: