Posts tagged with “jQuery”

jQuery Mobile Filterable Collapsible Listview with Smart Expansion

Wednesday, 12 February, 2014

Wow, that’s a mouthful. Basically, I wanted to make use of the data-filter option to search a listview, but instead of a listview, I wanted it to be a collection of collapsible elements. Do accomplish this I needed some custom CSS to make it look right. Here is the example code with the ID iamalist. The page’s content section ID is iama, which is used in the CSS.
Read the rest of this entry »

jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

Friday, 1 February, 2013

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>

Read the rest of this entry »

HTML5 and jQuery Mobile Shortcut and Tip Sheet

Saturday, 19 January, 2013

jQuery MobileI’ve been exploring jQuery Mobile lately and consequently, HTML5 and mobile HTML design. What I’ve come to realize is that the framework is incredibly powerful and looks fantastic! I first looked at it almost 2 years ago and was overwhelmed, so either it has gotten that much better, or I have. Either way, I’m incredibly satisfied.
Read the rest of this entry »

Automatic Form Detection and Post with jQuery

Friday, 9 September, 2011

After building custom jQuery on multiple websites to POST form data to a secondary PHP file for processing, I decided there has to be another way. I wanted to build a JavaScript (jQuery) chunk of code that executes when the document is ready and automatically performs the following functions:

  • Put the cursor (focus) in the form’s first input field (if multiple forms on the page, be smart enough to use only the first form).
  • Detect all forms and automatically generate the code to POST all of the form elements, via AJAX, to the script defined in the form’s action. Furthermore, use the name of each form field as the key in the POST data.
  • Load the results into a div with the id of ‘output’.
  • Work for forms that are generated and returned as part of the output (not originally part of the page)

Read the rest of this entry »