Purplepatch Services: June 2013

Many developers face problem with HTML5 attribute "placehoder" on IE. HTML5 Placehoders are not visible on the Internet explorer. Get the placeholder attribute working on IE by just adding the below script.

Add the below code to your common or custom javascript page

jQuery(function() {
if(!jQuery.support.placeholder) {
var active = document.activeElement;
jQuery(':text').focus(function () {
if (jQuery(this).attr('placeholder') != '' && jQuery(this).val() == jQuery(this).attr('placeholder')) {
jQuery(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (jQuery(this).attr('placeholder') != '' && (jQuery(this).val() == '' || jQuery(this).val() == jQuery(this).attr('placeholder'))) {
jQuery(this).val(jQuery(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
jQuery(':text').blur();
jQuery(active).focus();
jQuery('form').submit(function () {
jQuery(this).find('.hasPlaceholder').each(function() { jQuery(this).val(''); });
});
}

});

That's it !

Enjoy !!!

How to get the menus inside the drop down for Responsive?

Here is the script for you. Jquery makes our work very simple and more efficient. The steps below will automatically create a drop down of menus instead of creating drop down manually to mange the menus simply. Thanks Jquery !!!

Step 1 : Add the Jquery latest min.js in the header

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Step 2 : Add the below code in your Main CSS page to hide the navigation on load by default.

nav select { display: none; }

Step 3 : Add the below code in your Media CSS page

@media only screen and (max-width: 1000px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}
@media only screen and (max-width: 750px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}

Step 4 : Add the below code in your Common .js page or custom js page

jQuery(document).ready(function(){
jQuery('<select />').appendTo('#mobile-menu');
jQuery('<option />', {
'selected': 'selected',
'value' : '',
'text' : 'Go to...'
}).appendTo('#mobile-menu select');
jQuery('nav a').each(function() {
var el = jQuery(this);
if(el.parents('.subNav').length) {
jQuery('<option />', {
'value': el.attr('href'),
'text': '— ' + el.text()
}).appendTo('nav select');
} else {
jQuery('<option />', {
'value': el.attr('href'),
'text': el.text()
}).appendTo('nav select');
}
});
jQuery('#mobile-menu select').change(function() {
window.location = jQuery(this).find('option:selected').val();
});

});

Step 5 : Add the below code inside your <body> tag. The drop down will create automatically inside the #mobile-menu identification.

<nav id="mobile-menu" role="navigation"></nav>
<nav class="topNav">
<ul>
<li class="first"><a href="index.html" class="active">Home</a></li>
<li>
<a href="product.html">Product</a>
<ul class="subNav">
<li><a href="#">FaQs</a></li>
<li><a href="#">Customer Testimonials</a></li>
</ul>
</li>
<li><a href="#">Pricing</a></li>
<li class="last"><a href="#">Company</a></li>
</ul>

</nav>

Last step : Save as .html page and run in the browser and set the browser as responsive.

Enjoy !!!

Tuesday, June 25, 2013

Ten ways to become a better Developer

Monday, June 3, 2013

Placeholders on IE

Menu on Drop down for Responsive