Search jQuery

jQuery Forum

Screen name:
greymatters

greymatters's Profile

6 Posts

82 Responses

1 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

JQM text editor?
[1Reply]
- 18-May-2012 01:24 PM
- Forum: jQuery Mobile
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.

Does such a thing exist yet?

Filling the visible content area
[3Replies]
- 06-May-2012 07:03 PM
- Forum: jQuery Mobile
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":
1. #fillme {
2. background-color: #000;
3. }
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:
1. <div data-role="page" id="home">
2. <div data-role="header">
3. <h1>Content Filled</h1>
4. </div>
5. <div data-role="content">
6. <div id="fillme"></div>
7. </div>
8. </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:
1. $(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:
1. $(window).bind('resize',function(event){
First, make sure we're at the top of the page:
1. window.scrollTo(0,0);
Next, get the height of the screen, without the browser chrome:
1. 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):
1. headhigh = $('[data-role="header"]').first().outerHeight();
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:
1. 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:
1. winwide = $(document).width();
2. 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:
1. $('div#fillme').css('width',winwide + 'px').css('height',winhigh + 'px');
2. });
Now, this is fine for desktop and laptop browsers, but mobile devices register an orientationchange event, so we'll create an event listener for that:
1. $(window).bind('orientationchange',function(event){
Orientation changes often create that annoying whitespace at the bottom, so we'll deal with that via a tip I learned from:
http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling
1. if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
2. $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
3. }
4. else {
5. $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
6. };
Next, trigger the resize event, so everything gets arranged properly, and make sure the window is scrolled to the top:
1. $(window).trigger('resize');
2. 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:
1. }).trigger('orientationchange');
2. });
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:
1. $(window).load(function() {
2. $(window).bind('resize',function(event){
3. window.scrollTo(0,0);
4. winhigh = $.mobile.getScreenHeight(); //Get available screen height, not including any browser chrome
5. headhigh = $('[data-role="header"]').first().outerHeight(); //Get height of first page's header
6. winhigh = winhigh - headhigh - 30; //Subtract 30 for the top and bottom 15-pixel margins around the content area
7. winwide = $(document).width(); //Get width of document
8. winwide = winwide - 30; //Subtract 30 for the right and left 15-pixel margins around the content area
9. $('div#fillme').css('width',winwide + 'px').css('height',winhigh + 'px'); //Change div to maximum visible area
10. });
12. $(window).bind('orientationchange',function(event){
13. //Eliminate white-space on orientationchange: http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling
14. if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
15. $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
16. } else {
17. $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
18. };
19. $(window).trigger('resize');
20. window.scrollTo(0,0);
21. }).trigger('orientationchange');
22. });

Experiences using AnythingSlider with JQM
[1Reply]
- 22-Sep-2011 07:45 AM
- Forum: jQuery Mobile
I'm working on a project and looked at several slider plug-ins, most of which were stated to be specifically designed for jQuery Mobile, but they seemed to focus on graphics, and I needed to be able to handle anything.

I finally started looking at non-jQuery-Mobile-specific sliders, and naturally had a bit of trouble.

As a last resort, I tried using AnythingSlider (which I'd previously used on non-JQM projects), and it worked like a dream!

I'm using the latest version at this writing (1.7.12) along with jQuery 1.6.4 and JQM 1.0b3 Here's the AnythingSlider link:
http://proloser.github.com/AnythingSlider/

Here are my thoughts:

MOST IMPORTANT: Set the hashTags attribute to false! Due to the way JQM links to pages and uses hash tags, you can save yourself plenty of headaches by not using this feature. Yeah, it would be nice to link to individual slides while using it in JQM, but accept that it's not going to happen.

IT WOULD BE NICE: According to the documentation, you can have JQM's swipeleft and swiperight events activate the scrolling as easily as setting 2 attributes:
1. // Interactivity
2. clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
3. clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
I think they may have been working with an older JQM version, because I couldn't get this to work in this way. However, it was a relatively simple workaround:
1. $('div.mysliderclass').live('swipeleft swiperight',function(event){
2. curpg = 'div#' + $('.ui-page-active').attr('id');
3. if (event.type == 'swipeleft') {
4. $(curpg + ' ul.myulclass').data('AnythingSlider').goForward();
5. };
6. if (event.type == 'swiperight') {
7. $(curpg + ' ul.myulclass').data('AnythingSlider').goBack();
8. };
9. });
(I use classes above because I needed sliders on more than one page. All classes above could be replaced with IDs if desired.)

IMPROVING THE INTERFACE FOR MOBILE: The AnythingSlider natively lets you use arrow keys to scroll from frame to frame (unless, of course, you set the enableKeyboard attribute to false).

Between the arrow keys for the keyboard users and the swipe events for the touch screen users, I found that the left- and right-arrow icons took up valuable screen space, especially on smartphones.

Solution? Set buildArrows to false, and widen the slider itself by adjusting the AnythingSlider's CSS padding accordingly:
https://github.com/ProLoser/AnythingSlider/issues/68

I also changed both the buildNavigation (adds individual frame link stubs at the bottom of the frame) and buildStartStop (adds a Start/Stop button as auto-play-related options) attributes to false. Since the start/stop button is gone, I avoid any autoplay-related features.

Since the width and height can change just by the rotation of a mobile device, we need those to change accordingly. The width is simple - set the expand attribute to true, and the AnythingSlider will adjust the width for you with no further work!

For the height, however, there needs to be some extra work, including orientation detection.

a) Set the resizeContents attribute to false. This will allow the slider's dimension to change to fit the contents.
b) Inside each frame (each pair of <li></li> tags), you'll need to create a div with a class, you could use the name "sizechange" or something like that.

This div's height (height ONLY) must be changed when the page first shows, as well as when an orientation change is detected.

Remember, the expand attribute will take care of the width. However, since you do want the width to keep up, the new width should be queried, and then applied to the interior div, so that the frame's contents can always take up the maximum space.

Here's how that's done:
1. $('div.myhelppageclass').live('pageshow',function(event){
2. window.scrollTo(0,0); //make sure page is at top
3. changeOrientation();
4. $('.jqmslider').anythingSlider(1); //adjust to first frame when page is being shown for 1st time
5. });
7. $('div.myhelppageclass').bind('orientationchange',function(event){
8. window.scrollTo(0,0); //Needed because orietation changes don't always go to top
9. changeOrientation();
10. });
12. function changeOrientation(){
13. curpg = 'div#' + $('.ui-page-active').attr('id');
14. hlpht = (window.innerHeight) - ($(curpg + ' .ui-header').height()) - 30; //Window height - header height - 30 pixels for the JQM's 15px padding on top and bottom = div height
15. $(curpg + ' div.sizechangeclass').css('height', hlpht.toString() + 'px'); //set the div to calculated height
16. $('.jqmslider').anythingSlider(); //reboot slider for changes to take effect
17. hlpwd = $(curpg + ' div.anythingWindow').width(); //Get width of window
18. $(curpg + ' div.sizechangeclass').css('width', hlpwd.toString() + 'px'); //apply width to div
19. };
Now the slider will take up as much room as it can when it first shows, and when the user rotates! Don't forget, whatever content you put in the slide has to be viewable, as well. Text is automatic, but extra care must be taken with in-frame images, UI elements, and so on.

It should be noted that AnythingSlider will slowly animate when going from a larger height to a smaller one. This is less noticeable without the arrow icons (which change their location based on the height of the frame), and completely unnoticeable if you remove the top and bottom borders!

To do that, we change the 3 pixel border in the CSS to 0 pixels, and eliminate the color, of course:
1. div.anythingSlider .anythingWindow {
2. border-top: 0;
3. border-bottom: 0;
4. }
Now you have 6 extra pixels of height to use in your frames! That may not sound like much, but every pixel helps, especially on smaller smartphone screens. Again, watch how each frame responds to orientation changes, especially in the case of graphics, UI elements, etc.

Working properly at this point, you should now have a JQM page with a slider that can contain just about any content (thus the name), will respond to keyboard commands or swipe events to move backward or forward by a single frame, and adjusts to fill as much of the viewable content window as it can (less JQM's 15-pixel padding on all 4 sides for the content area)!

Has anyone else used AnythingSlider on JQM? I'd love to hear your experiences and tips. If you have any questions about what I've written, feel free to ask. I'm here to help.

Homebrew JQM slideshow
[3Replies]
- 14-Sep-2011 06:34 AM
- Forum: jQuery Mobile
I was working on a slideshow for a JQM project today, and couldn't find a proper slideshow plugin for the tutorials in my program.

Among the ones I tried were:
http://imakewebthings.github.com/deck.js/
(Several conflicts with JQM CSS)
http://www.jqm1.com/2011/08/jquery-mobile-pagination-plugin/
(Conflicting with another plugin I was using, so pages weren't pre-loaded properly)
http://www.photoswipe.com/
(Great, but I need a slideshow using text, images, and video, and this is video-focused.

I also checked out just every presentation plugin here:
http://www.webresourcesdepot.com/9-free-javascript-libraries-templates-for-beautiful-web-based-presentations/
(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:
http://jquerymobile.com/demos/1.0b3/docs/pages/page-transitions.html

3) I'd like it to be controlled by arrow keys on a keyboard
With jQuery, binding the keydown function to watch for the arrow keys is simple:
http://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery

4) I'd also like it to know if the device being used offers touchscreen capabilities...
Again, easily tested for with plain ol' Javascript:
http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
(Scroll down to blmstr's "try/catch" approach, based on modernizr's code)

5) ...and transition based on a left/right swipe.
Again, jQM already has built-in support for this. The trick is to learn how to use it:
http://www.coldfusionjedi.com/index.cfm/2011/3/14/Using-swipe-gestures-for-navigation-in-jQuery-Mobile

Looking at all that, I realized I pretty much have everything I need to do to put together a slideshow!

I'm still in the process of working on this, but the results are already better than any of the plugins I tested!

Tips for speeding up jQuery Mobile
[8Replies]
- 07-Sep-2011 02:44 AM
- Forum: jQuery Mobile
Several people ask about how they can speed up jQuery Mobile, so I figured there should be a thread on tips for speeding up your jQuery Mobile projects.

ELIMINATE WASTE:
Decouple jQuery Mobile elements you're not using (BONUS: Less memory!):
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/#features

Compress your Javascript, jQuery, and CSS (but keep a formatted version for editing!):
http://www.refresh-sf.com/yui/
http://yui.2clics.net/

Compress your HTML (but keep a formatted version for editing!):
http://www.textfixer.com/html/compress-html-compression.php

Optimizing the web...start with the images!:
http://www.stoimen.com/blog/2010/01/13/optimizing-the-web-start-with-the-images/

JPEGmini - JPEGs with reduced file size but NOT quality:
http://www.jpegmini.com/main/home

EFFICIENT DESIGN:
Put your Javascript/jQuery script calls at the end of the file:
http://robertnyman.com/2008/04/23/where-to-include-javascript-files-in-a-document/

Learn to design and use CSS Sprites:
http://css-tricks.com/158-css-sprites/

CSS Sprite generators:
http://www.designdim.com/2011/02/8-best-css-sprites-generator-resources/
My favorite: http://spritegen.website-performance.org/

Learn about and design custom CSS buttons using NO images (110 different ways should keep you busy!):
http://www.webdesignshock.com/css-button

Imageless buttons...with icons?!? (The secret? HTML entities!):
http://www.red-team-design.com/just-another-awesome-css3-buttons

The Comprehensive Guide to Saving Images for the Web:
http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/

REDUCE EXTERNAL FILE ACCESS:
Adding Javascript, jQuery, and your plugins inline, while keeping XHTML valid:
http://blog.ryanrampersad.com/2008/07/30/cdata-and-inline-javascript/

Adding CSS inline:
http://www.webdesign.org/html-and-css/tutorials/embedding-css-into-an-html-document.11106.html

Base64 - including image files with the HTML itself:
http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/

GREAT TIP! Encode CSS Sprites as base64:
http://www.stoimen.com/blog/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/

Online image-to-base64 converter:
http://webcodertools.com/imagetobase64converter

What are you favorite links, tips and/or tricks for speeding up jQuery Mobile?

Using jQuery 1.6.x on Blogspot
[2Replies]
- 25-Jun-2011 07:23 AM
- Forum: Using jQuery
I use jQuery for my blog on Blogspot/Blogger, and in the interest of speed, I have the jQuery minified code in the template itself (as opposed to being hosted externally, such as using the CDN code).

When trying to upgrade from 1.5.2 recently, I had trouble getting 1.6.1 to work at all. I narrowed the trouble down to this one part of the minified code:

cl.write("<!doctype><html><body></body></html>");

Because of the way Blogspot interprets code, those < and > tags create trouble. The solution was to change the line to use the HTML codes:

cl.write("<!doctype><html><body></body></html>");

And with that small change, jQuery 1.6.1 worked flawlessly!

I don't know how many people this will help, as it really only occurs when you're on Blogspot and hosting the code within the template itself. However, it is a problem, and it does have a solution, so I thought I would share it.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend