Posts

Showing posts from 2014

HTML: Remove extra space at bottom of div

Image
If you using image width 100% and Height auto, Since images are extra space at bottom of div. HTML <div class="images-slide">     <img src="/footer-image.png" alt="Gallery" title="Gallery"> </div> CSS .images-slide img {     max-width: 100%;     height: auto; } To un-do this effect for images, you can specify either of the styles below, img { display : block ; } or img { vertical - align : bottom ; }

Titanium: Error Unable to find JDK in my first project

Image
I have installed titanium studio and installed Android SDK also in Windows. After that I have created one test application (HelloWord). When I run the application in Android Emulator, i get this erreor: [ERROR] : Unable to find JDK (Java Development Kit) programs: javac, jarsigner [ERROR] Application Installer abnormal process termination. Process exit value was 1. Configuring Environment Variables on Windows Configure system variables using the Control Panel Open the Windows Control Panel and search for 'environment'. Click Edit the system environment variables . The System Properties dialog appears displaying the Advanced tab.  Click the Environment Variables button.    Use the New or Edit buttons at the bottom of the dialog to add or change system variables. set path Android SDK and JAVA JDK

Which clients support media queries on mobile version?

If you've built a responsive email design using media queries. The chart below outlines support for media queries across a range of mobile email clients and applications. When troubleshooting responsive designs and media queries, also keep in mind that the media query will be triggered by the viewport size of the device. Viewport sizes can vary drastically based on the physical screen size of the phone, the screen's resolution and the pixel density or device-pixel-ratio of the device. Media Query Support iOS (iPhone/iPad) Yes Android 4.x native client Yes Android Outlook Exchange via native client No Android Outlook.com app Yes Android Gmail app No Android Yahoo! Mail app No Gmail (Android Browser) No Outlook.com (Android Browser) No Yahoo! Mail (Android Browser) No Windows Phone 7 No Windows Phone 7.5 Yes Windows Phone 8 No BlackBerry OS 6 Yes BlackBerry OS 7 Yes BlackBerry Z10 Yes Kindle Fire native c

Fix html5 placeholder attribute for ie7 & ie8

Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user. if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) < 9) { // ie7&ie8 jQuery('input[placeholder], textarea[placeholder]').each(function () { var input = jQuery(this); jQuery(input).val(input.attr('placeholder')); jQuery(input).focus(function () { if (input.val() == input.attr('placeholder')) { input.val(''); } }); jQuery(input).blur(function () { if (input.val() == '' || input.val() == input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } Working Demo

PHP: Add number of days to a date

echo date('Y-m-d', strtotime("+14 days")); See the manual pages for http://www.php.net/manual/en/function.strtotime.php  http://www.php.net/manual/en/function.date.php

Android : Eclipse failed to create the java virtual machine

Open folder with Eclipse.exe and find eclipse.ini file Replace -vmargs with -vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe" -startup plugins/org.eclipse.equinox.launcher_1.3.0.v20120522-1813.jar --launcher.library plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.200.v20120913-144807 -product com.android.ide.eclipse.adt.package.product --launcher.XXMaxPermSize 256M -showsplash com.android.ide.eclipse.adt.package.product --launcher.XXMaxPermSize 256m --launcher.defaultAction openFile -vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe" -Dosgi.requiredJavaVersion=1.6 -Xms40m -Xmx768m -Declipse.buildId=v22.3.0-887826 -XX:MaxPermSize=512M

Force Alpha And Numeric Only jQuery

You could try this extension: jQuery.fn.ForceAlphaNumericOnly = function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, arrows,letters, numbers and keypad numbers ONLY return ( key == 8 || key == 9 || key == 46 || key == 32 || (key >= 37 && key <= 40) || (key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 96 && key <= 105)); }) }) }; Useage: <input type="text" class="span10 requiredfield" value="" id="contact-phone" name="contact-phone"> Working Demo

Galaxy S4 not support CSS3 border-radius

Here code for fixed issue on Galaxy S4 border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;

How to Collapse and Expand text using jQuery?

1. Include jQuery Ease <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> 2.HTML Code <div id="footer"> <h6>Important Information</h6> <div> <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&g

Media Queries For Responsive Site

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only scre

How to allow only numeric inputbox using jQuery?

1. HTML Code <input type="text" value="0" id="phone" name="phone" autocomplete="off"> 2. jQuery Code $(document).ready(function() { $("#phone").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); }); Working Demo

Youtube video to responsive width

Youtube videos can be responsive. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }   The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.

Sample Empty Table Markup

< table > < thead > < tr > < th > </ th > < th > </ th > < th > </ th > < th > </ th > </ tr > </ thead > < tbody > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > </ tbody > </ table >

How to get title from IFrame document

HTML code :   < div id = "main-content" > < iframe name = "cstage" src = "home.html" width = "100%" height = "100%" id = "main-content-iframe" frameborder = "0" > If you 're seeing this message, it means IFrames are not supported; Please enable IFrames or upgrade to a compatible browser that supports IFrames.</iframe> </div> jQuery code:   alert($(' #main-content-iframe').contents().find("title").text());     Note: Make sure home.html come from the same domain as your main page.

How to Disable Theme and Plugin Editors from WordPress Admin Panel

By default WordPress allows users to edit the theme and plugin codes through the admin panel. While it is a handy feature, it can be very dangerous as well. A simple typo can end up locking you out of your site unless ofcourse you have the FTP access. To prevent clients from screwing up the site, it is best to disable the theme and plugin editors from the WordPress admin panel. In this article, we will share with you a one line code that will disable theme and plugin editors functionality from WordPress. All you have to do is open your wp-config.php file and paste the following code: define( 'DISALLOW_FILE_EDIT', true ); 1. Removing theme editor link from menu using remove_action() function tcb_remove_editor_menu() { remove_action('admin_menu', '_add_themes_utility_last', 101); } add_action('admin_menu', 'tcb_remove_editor_menu', 1); 2. Removing theme editor link from menu using remove_submenu_page() add_action('admin_i

Preventing form submission when Enter is pressed

$('input').keydown(function(event){             if(event.keyCode == 13) {                 event.preventDefault();                 return false;             } });

How to detect a click outside an element?

Attach a click event to the document body which closes the window. Attach a separate click event to the window which stops propagation to the document body. $('html').click(function() { //Hide the menus if visible }); $('#menuele').click(function(event){     event.stopPropagation(); });

How to replay a swf movie on jquery button click

1. Embedded flash movie <object data="http://wwwimages.adobe.com/www.adobe.com/multimedia/en_us/get/flash/flash_installed_728x170.swf" type="application/x-shockwave-flash" id="flash_99674493" width="680" height="316">     <param name="movie" value="http://wwwimages.adobe.com/www.adobe.com/multimedia/en_us/get/flash/flash_installed_728x170.swf">     <param name="wmode" value="opaque"> </object> <a href="javascript:restart();">Restart swf</a> 2. jQuery var restart = function() {    var flashObject = jQuery("object");    var flashOriginal = flashObject.html();    var flashSrc = flashObject.attr('data');    flashObject.find('param').remove();    flashObject.attr('data',flashSrc);          flashObject.html(flashOriginal); } Working Demo

How to build a HTML 5 video playlist

1. HTML <video id="videoarea" controls="controls" poster="http://html5videoformatconverter.com/data/images/screen.jpg" src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video> <ul id="playlist">     <li data-url="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-poster="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>     <li data-url="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>              <li data-url="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>          <li data-url="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li> </ul> 2. CSS <style type='text/css'>     #playlist {         margin:0;         padding:0;         list-sty

HTML5 video loop src change on end play function

1. HTML <video id="homevideo" width="100%" autoplay onended="run()">     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video> <ul>     <li>http://www.w3schools.com/html/mov_bbb.mp4</li>     <li>http://www.w3schools.com/html/movie.mp4</li> </ul> 2. CSS <style type='text/css'>     ul {         display:none;     }   </style> 3. jQuery <script type="text/javascript"> video_count = 0; videoPlayer = document.getElementById("homevideo"); function run(){    video_count++;     var countVideo = $('li').length;         if (video_count == countVideo) video_count = 0;        var nextVideo = $('li').eq(video_count).text();         videoPlayer.src = nextVideo;     videoPlayer.play();         }; </script> Working Demo

Sample HTML5 Page Structure

<!DOCTYPE HTML> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> < title > Your Website </ title > </ head > < body > < header > < nav > < ul > < li > Your menu </ li > </ ul > </ nav > </ header > < section > < article > < header > < h2 > Article title </ h2 > < p > Posted on < time datetime = "2009-09-04T16:31:24+02:00" > September 4th 2009 </ time > by < a href = "#" > Writer </ a > - < a href = "#comments" > 6 comments </ a > </ p > </ header > < p > Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </ p > </ article > < article > < header > < h

WordPress admin menu slugs

Dashboard remove_menu_page(‘index.php’); Dashboard        remove_submenu_page( ‘index.php’, ‘index.php’ ); Updates remove_submenu_page( ‘index.php’, ‘update-core.php’ ); Posts remove_menu_page(‘edit.php’); Posts remove_submenu_page( ‘edit.php’, ‘edit.php’ ); Add New remove_submenu_page( ‘edit.php’, ‘post-new.php’ ); Categories remove_submenu_page( ‘edit.php’, ‘edit-tags.php?taxonomy=category’ ); Post Tags remove_submenu_page( ‘edit.php’, ‘edit-tags.php?taxonomy=post_tag’ ); Media remove_menu_page(‘upload.php’); Library remove_submenu_page( ‘upload.php’, ‘upload.php’ ); Add New remove_submenu_page( ‘upload.php’, ‘media-new.php’ ); Links remove_menu_page(‘link-manager.php’); Links remove_submenu_page( ‘link-manager.php’, ‘link-manager.php’ ); Add New remove_submenu_page( ‘link-manager.php’, ‘link-add.php’ ); Link Categories  remove_submenu_page( ‘link-manager.php’, ‘edit-tags.php?taxonomy=link_category’ ); Pages remove_me

Removing menu pages from the WordPress admin

In this tutorial, I’ll cover the remove_menu_page() and remove_submenu_page() functions, which were added in WordPress 3.1. The first thing you need to decide is where you’re putting the code. I’ll assume you’re either dropping this in your theme’s functions.php file or one of your plugin files. 1. Removing top-level menu pages Usage remove_menu_page( $menu_slug ); Examples <?php function remove_menus(){ remove_menu_page( 'index.php' ); //Dashboard remove_menu_page( 'edit.php' ); //Posts remove_menu_page( 'upload.php' ); //Media remove_menu_page( 'edit.php?post_type=page' ); //Pages remove_menu_page( 'edit-comments.php' ); //Comments remove_menu_page( 'themes.php' ); //Appearance remove_menu_page( 'plugins.php' ); //Plugins remove_menu_page( 'users.php' ); //Users remove_menu