Tagjquery

jQuery related posts.

Dynamic Link Tag Injection

Using jquery to inject a style sheet seems to break IE7/8. The scenario was when a user passed in a custom param via the URL the code would inject that particular css. Ideally I should have gone with the native javascript way to create the element since it’s still clean and simple. This may not be an issue, but for my particular scenario it was the case.

jQuery version:


$('head').append($('<link rel="stylesheet" type="text/css" />')
         .attr('href', 'http://www.somedomain.com/css/cool.css'));

Native version:


var link = document.createElement('link');
    link.href = 'http://www.somedomain.com/css/cool.css';
    link.rel = 'stylesheet';
    link.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(link);

Mobile Friendly Clearable Text boxes Using jQuery

This is a quick and dirty example of how to make a mobile friendly text box clearable. This could easily be turned into a jquery plugin.

HTML:


<div class="ui-input">
		<input name="firstname" type="text"  id="firstname" placeholder="First Name">
		<span class="ui-icon-delete"></span>
	</div>
	
	<div class="ui-input">
		<input name="lastname" type="text" id="lastname" placeholder="Last Name">
		<span class="ui-icon-delete"></span>
	</div>

jQuery Code:


$(function(){
	$("input").focus(function(){
		$(this).parent().addClass("ui-focus");
		$(this).parent().find(".ui-icon-delete").show();
	});
	$("input").blur(function(){
		$(this).parent().removeClass("ui-focus");
	});

	$(".ui-icon-delete").click(function(){
		$(this).parent().find("input").val("");
		$(this).hide();
	});
});

CSS:


input{
			width:86%;
			padding: 7px 0 7px 5px;
			line-height: 1.4;
			font-size: 14px;
			border:none;
			outline: 0 !important;
			margin-left:5px;
		}
		#form{
			margin:10px auto;
			padding:10px;
		}
		.ui-input{
			-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			position: relative;
			border: 1px solid #CCC;
			color: #333;
			text-shadow: 0 1px 0 white;
			background: white;
			border-radius:10px;
			background-clip: padding-box;
			margin-bottom:10px;			
		}
		.ui-focus{
			-webkit-box-shadow:  0px 0px 3px 2px rgba(0, 25, 288, 0.3);
			box-shadow:  0px 0px 3px 2px rgba(0, 93, 288, 0.3);
		}
		.ui-icon-delete{
			padding: 0;
			margin: 0;
			background: rgba(0, 0, 0, 0.398438) url(icons-18-white.png) -72px 50%;
			background-position: -72px 50%;
			background-size: 776px 18px;
			display:none;
			float:right;
			border:solid #fff 2px;
			width:18px;
			height:18px;
			position:relative;
			top:8px;
			right:8px;
			border-radius:20px;
			box-shadow:  0px 0px 3px 2px rgba(000, 000, 000, 0.2);
			cursor:pointer;
		}

View Demo

Detect Lost of Internet Connection

I wanted a way to check to see when connection to a network was lost, and if it was lost show a message alerting the user. Lets put in perspective, say you are  out and about and happen to want to enroll to a new service and they happen to have a long sign up form. You fill out all those 20 fields and get to the submit button but the form bombs out because your network connection was lost. This would frustrate you and would turn you away from this service. The idea with this is to show the user a nice message warning them that connection was lost and hopefully they wait and successfully sign up to your service.

Continue reading

© 2017 Aldo Lugo

Theme by Anders NorenUp ↑