Loading...
May 7, 2012#

Use A JavaScript Confirm Dialog To Give Users Option Between Mobile or Desktop View

The idea was to use the native look of the confirm box to give the user an option between viewing the site in a mobile view or stay on current view. I used a setTimeout method so i can have it fire 3 seconds after the pages has rendered in all its glory. The code below is pretty simple and straight forward. 


window.onload = function(){
		setTimeout(confirmMobile, 3000);
	}

	function confirmMobile(){
		var toView = window.confirm("View Mobile Version?");
		if (toView){
			window.location.replace("http://m.yahoo.com");
		}
	}

Tested on iOS 4+ and Android 2.3.4+

May 4, 2012#

Mobile Portfolio Built with Sencha Touch


I wanted to play with Sencha Touch the other night and built out a simple portfolio. This app can be downloaded from my github account.

I will only display the JS code that makes the entire Sencha app, you can view the css, and html from the download.

Sencha Touch Code


Ext.application({
	name: 'Aldo',
	launch: function(){
		Ext.create("Ext.TabPanel",{
			fullscreen: true,
			tabBarPosition: 'top',
			ui: 'dark',
			items:[{
					title: "Home",
					xtype: "panel",
					scrollable: true,
					iconCls: 'home',
					cls: 'home',
					html: [
                        '<div id="header">',
							'<div id="logo"></div>',
							'<p class="tagline">Hi, I\'m Aldo Lugo a Front-End Developer<br /> and Designer from Dallas, Texas</p>',
						'</div>',
						'<div id="content">',
							'<p style="padding-bottom:5px;"><strong style="font-weight:bold;margin-bottom:5px;">About Me</strong><br />',
							'<p>I work at OneTechnologies. I strive to design beautiful, accessible, interfaces which enable users to accomplish their goals as effortlessly as possible.</p> <br />',
							'<p>I specialize in standards-based HTML, CSS and JavaScript web development. Each website I develop is built to be search engine friendly, using the latest development principles and techniques.</p><br /><br />',
							'<p style="padding-bottom:5px;"><strong style="font-weight:bold;margin-bottom:5px;">The Skills</strong><br />',
							'<ul class="checklist"><li><span>User Interface Design</span></li><li><span>Usability</span></li><li><span>Mobile Design &amp; Development</span></li><li><span>jQuery / jQuery Mobile / Javascript</span></li><li><span>Progressive Enhancement</span></li><li><span>HTML5 & CSS3</span></li><li><span>Sencha Touch</span></li><li><span>Cross Browser Support</span></li></ul>',
							'<p style="padding-bottom:5px;"><strong style="font-weight:bold;">Contact Me</strong><br />',
							'<p><strong>Email:</strong> <a href="mailto:aldo@aldomatic.com" class="ui-link" style="color:#3E7791;font-weight:bold;position:relative;z-index:100;">aldo@aldomatic.com</a><br />',
							'<strong>Phone:</strong> <a href="callto:214.475.6999" style="color:#3E7791;font-weight:bold;z-index:101;position:relative;">214.475.6999</a><p>',
							'</p>',
						'</div>'
                   ].join("")
				},{
					title: "Portfolio",
					xtype: "dataview",
					iconCls: 'star',
					cls: 'port',
					loadingText:'Loading...',
					scrollable: true,
						store: {
							autoLoad: true,
							fields: ['title','description', 'img', 'status'],
							proxy: {
								type: 'jsonp',
								url: 'portfolio.json',
								reader: {
									type: 'json',
									root: 'portfolio'
									}
								}
							},
					 itemTpl: '<div class="portfolio"><h3>{title}</h3><img src="{img}" /><br /><p class="status">Status: {status}</p><p class="des">{description}</p></div>'
			},{
					title: "@aldomatic",
					xtype: "dataview",
					cls: 'port',
					iconCls: 'star',
					loadingText:'Loading...',
					scrollable: true,
						store: {
							autoLoad: true,
							fields: ['created_at','text', 'profile_image_url'],
							proxy: {
								type: 'jsonp',
								url: 'http://search.twitter.com/search.json?q=aldomatic',
								reader: {
									type: 'json',
									root: 'results'
									}
								}
							},
					 itemTpl: '<div class="tweet"><img src="{profile_image_url}" style="float:left;margin-right:10px;" /><p>{text}<br /></p><div style="clear: both"></div><span style="font-size:11px;color:#999;">Tweeted: {created_at}</span></div>'
				}
			]
		});
	}
});

View App Note: The app is built to be used on mobile device.
Github Download

May 4, 2012#

Facebook Style Slide Out Menu in jQuery Mobile


I wanted to recreate the slide out menu in the Facebook iPhone app. I also wanted implement it in a jQuery mobile layout. This is what I came up with.

HTML


<!DOCTYPE html>
<html>
	<head>
	<title>FB Style Menu</title>
	<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />
	<link rel="stylesheet" href="css/main.css?v=31" />
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
</head> 

<body>
<div id="menu">
<h3>Menu</h3>
	<ul>
		<li class="active"><a href="#home" class="contentLink">Home </a></li>
		<li><a href="#home" class="contentLink">About </a></li>
		<li><a href="#home" class="contentLink">Portfolio </a></li>
		<li><a href="#home" class="contentLink">Contact </a></li>
	</ul>
</div>
<div data-role="page" class="pages" id="home">
	<div data-role="header">
	<a href="#"class="showMenu">Menu</a>
		<h1>FB Style Menu</h1>
	</div><!-- /header -->
	<div data-role="content">
		<p><strong>Note: You can swipe right/left to show/close menu.</strong></p>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

jQuery


$(function(){
	var menuStatus;

	$("a.showMenu").click(function(){
		if(menuStatus != true){
		$(".ui-page-active").animate({
			marginLeft: "165px",
		  }, 300, function(){menuStatus = true});
		  return false;
		  } else {
			$(".ui-page-active").animate({
			marginLeft: "0px",
		  }, 300, function(){menuStatus = false});
			return false;
		  }
	});

	$('.pages').live("swipeleft", function(){
		if (menuStatus){
		$(".ui-page-active").animate({
			marginLeft: "0px",
		  }, 300, function(){menuStatus = false});
		  }
	});

	$('.pages').live("swiperight", function(){
		if (!menuStatus){
		$(".ui-page-active").animate({
			marginLeft: "165px",
		  }, 300, function(){menuStatus = true});
		  }
	});

	$("#menu li a").click(function(){
		var p = $(this).parent();
		if($(p).hasClass('active')){
			$("#menu li").removeClass('active');
		} else {
			$("#menu li").removeClass('active');
			$(p).addClass('active');
		}
	});

});
Demo
← Older Entries