Response title
This is preview!
Move this topic
Complete jQuery Mobile/ PHP / MySQL app with CSS/JS for IE compatibility, Feel free to copy css/js code
in jQuery Mobile
•
9 years ago
Green Smoothies
Here is a full php/mysql jquery mobile app recipe book for Green Smoothies recipes. I also wrote custom CSS for IE compatibility if you want the CSS to make it work in any IE browser so feel free to look at the sourcecode and copy the css (Green Smoothies Styles for IE). If you would like to see the php code I would be happy to post it. The Green Smoothies recipe book acts just like the iphone app and has almost everything from the jqm framework.
If you have any questions feel free to contact me at contractwebsoftware.com
3
Replies(4)
I am just starting trying to integrate codeigniter, jquery mobile and mySQL so seeing a completed project would be GREAT!.
I would like to see the PHP and everything else.
THANKS!!!!
I would like to see the PHP and everything else.
THANKS!!!!
Leave a comment on jongravois's reply
nice work! thanks for sharing!
i just started teaching myself to code. would be awesome if you could share the php and other stuff.
Leave a comment on adabir's reply
The php for the web app is actually the exact same as any web app, nothing special except for a browser detection function I added (which is shown at the bottom of this comment).
For IE support I included the jquery ui library and then add this jquery code to make the lists and buttons work just like the mobile framework:
Feel free login to and check out the Green Smoothies app to see all of the css and js in IE. The trickiest part is css and js to make the regular jqm html look correct. In some instances I had to use php and a browser detect function to see if it's IE and if it is then add extra code. Here's that php function:
Example Usage:
-
<script>$(function() {$("#radio").buttonset().show();$(".ui-buttonset .ui-button").css({'margin-right':'0px!IMPORTANT'});$("li").addClass("ui-corner-all");$('li').click(function(){var url = $(this).find('a').attr('href');if(url!='' && url!='undefined' && url){window.location.href=url;}else $(this).children('li').css({'cursor':'default'});});$('li').find('a:first').append('<span style="float:right;margin-top:10px;"><img style="height:25px;width:15px;" src="images/rarrow.png" style="vertical-align:middle"/></span>')$('li').find('a:first').parent().parent().css({'cursor':'pointer'});$('#content label').prepend('<br />').append('<br />');$('a[data-role=button], input[type=submit]').button();$('div[data-role=header] a').button();$('div[data-role=header]').css({'float':'none','clear':'both','width':'100%'});$('div[data-role=header]').children().css({'float':'left'});$('div[data-role=header]').children('h1').css({'width':'80%'}).wrap('<center />');$('div[data-role=header]').append('<div style="clear:both;float:none;"></div>');
});</script>
I then add this css:
which makes the images in lists look good. Here's some sample list item html:
- <li>
-
<img src="images/60/Apple.png" style="margin-top:10px;margin-left:5px;" />
<h3><a href="index.php?view_page=recipe_description&recipe_id=157">ABC Smoothie</a></h3>
<p>For Children</p>
<span class="ui-li-count" style="margin-right:0px;margin-top:-15px;border:none;background-color:none;"> <img src="images/30/favorite_star.png" /></span>
</li>
- /****************************************
- function find_browser_info( $which_test )
- Desc: return user browser info
- $which_test:
- 'browser' = send back 'ie', 'moz', 'saf'
- 'number' = send back browser version
- 'full' = send back all info
- ****************************************/
- function find_browser_info( $which_test )
- {
- $function_declared = "Y";
- $browser_name = '';
- $browser_number = '';
- $browser_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
- $a_browser_types[] = array('iPhone', true, 'iPhone' );
- $a_browser_types[] = array('opera', true, 'op' );
- $a_browser_types[] = array('msie', true, 'ie' );
- $a_browser_types[] = array('konqueror', true, 'konq' );
- $a_browser_types[] = array('safari', true, 'saf' );
- $a_browser_types[] = array('gecko', true, 'moz' );
- $a_browser_types[] = array('mozilla/4', false, 'ns4' );
- for ($i = 0; $i < count($a_browser_types); $i++)
- {
- $s_browser = $a_browser_types[$i][0];
- $b_dom = $a_browser_types[$i][1];
- $browser_name = $a_browser_types[$i][2];
- // if the string identifier is found in the string
- if (stristr($browser_user_agent, $s_browser))
- {
- if ( $browser_name == 'moz' ){$s_browser = 'rv';}
- $string_length = 8;
- $browser_number = '';
- $start_pos = strpos( $browser_user_agent, $s_browser );
- $start_pos += strlen( $s_browser ) + 1;
- for ( $i = $string_length; $i > 0 ; $i-- )
- {
- if ( is_numeric( substr( $browser_user_agent, $start_pos, $i ) ) )
- {
- $browser_number = substr( $browser_user_agent, $start_pos, $i );
- break;
- }
- }
- break;
- }
- }
- if ( $which_test == 'browser' ){return $browser_name;}
- elseif ( $which_test == 'number' ){return $browser_number;}
- elseif ( $which_test == 'full' ){$a_browser_info = array( $browser_name, $browser_number );return $a_browser_info;}
- }
- $browser = find_browser_info('browser');
- if($browser == 'ie')echo '<link rel="stylesheet" type="text/css" media="screen" href="lib/themes/fallback.css" />';
- ';
Leave a comment on bendavol's reply
I contacted to your email but you never responded.
Regards, Daniele
Leave a comment on softwaregest's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to bendavol's discussion