Tuesday, December 16, 2014

HTML: Remove extra space at bottom of div

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; }

Friday, December 5, 2014

Titanium: Error Unable to find JDK in my first project

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


Tuesday, December 2, 2014

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 client Yes

Wednesday, July 9, 2014

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

Monday, June 9, 2014

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

  1. Open folder with Eclipse.exe and find eclipse.ini file
  2. 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

Tuesday, May 20, 2014

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;

Friday, May 9, 2014

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>
</div>

3. jQuery Code

(function($){
    $(document).ready(function() {
        var checked = false;

        $('#footer h6').on('click',function() {
            var _self = $(this);
            
            if(checked == true) checked = false;
            
            if(_self.hasClass('active')) {
                _self.next().slideDown( "slow", 'easeOutCirc', function() {
                    _self.removeClass('active');
                    checked = true;
                });
                
            } else {
                _self.next().slideUp( "slow", 'easeOutCirc', function() {
                    _self.addClass('active');
                    checked = true;
                });
            }
        })  
    });
})(jQuery) 
Working Demo

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 screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

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

Tuesday, April 29, 2014

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.

Tuesday, March 11, 2014

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>

Wednesday, March 5, 2014

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. 

Tuesday, March 4, 2014

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_init', 'tcb_remove_menu_elements', 102);
function tcb_remove_menu_elements(){
 remove_submenu_page( 'themes.php', 'theme-editor.php' );
}

Thursday, February 27, 2014

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();
}); 

Friday, February 21, 2014

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-style:none;
        float:left;
    }
    #playlist li {
        cursor:pointer;
        background:#ffffff;
        border-bottom: 1px solid #C9C9C9;
        padding: 13px 8px;
    }
    #playlist li:nth-child(odd) {
        background-color: #F8F8F8;
    }

    #playlist li:hover{
        color:blue;                        
    }
    #videoarea {
        
        float:left;
        width:640px;
        height:480px;
        margin:10px;    
        border:1px solid silver;
    }
  </style>


3. jQuery
<script type='text/javascript'>
$(window).load(function(){
    $(function() {
        $("#playlist li").on("click", function() {
            $("#videoarea").attr({
                "src": $(this).attr("data-url"),
                "poster": "",
                "autoplay": "autoplay"
            })
        })
      
    })
});

</script>

Working Demo

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

Thursday, February 6, 2014

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>
    <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>
  
 </section>

 <aside>
  <h2>About section</h2>
  <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </aside>

 <footer>
  <p>Copyright 2014 Your Company Name</p>
 </footer>

</body>

</html>

Tuesday, February 4, 2014

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_menu_page(‘edit.php?post_type=page’);
Pages remove_submenu_page( ‘edit.php?post_type=page’, ‘edit.php?post_type=page’ );
Add New remove_submenu_page( ‘edit.php?post_type=page’, ‘post-new.php?post_type=page’ );
Comments remove_menu_page(‘edit-comments.php’);

Appearance  remove_menu_page(‘themes.php’);
Themes  remove_submenu_page( ‘themes.php’, ‘themes.php’ );
Widgets remove_submenu_page( ‘themes.php’, ‘widgets.php’ );
Menus remove_submenu_page( ‘themes.php’, ‘nav-menus.php’ );
Editor remove_submenu_page( ‘themes.php’, ‘theme-editor.php’ );
Plugins remove_menu_page(‘plugins.php’);
Plugins remove_submenu_page( ‘plugins.php’, ‘plugins.php’ );
Add New remove_submenu_page( ‘plugins.php’, ‘plugin-install.php’ );
Editor remove_submenu_page( ‘plugins.php’, ‘plugin-editor.php’ );
Users remove_menu_page(‘users.php’);
Users remove_submenu_page( ‘users.php’, ‘users.php’ );
Add New remove_submenu_page( ‘users.php’, ‘user-new.php’ );
Your Profile remove_submenu_page( ‘users.php’, ‘profile.php’ );
Tools remove_menu_page(‘tools.php’);
Tools remove_submenu_page( ‘tools.php’, ‘tools.php’ );
Import remove_submenu_page( ‘tools.php’, ‘import.php’ );
Export remove_submenu_page( ‘tools.php’, ‘export.php’ );
Settings remove_menu_page(‘options-general.php’);
General remove_submenu_page( ‘options-general.php’, ‘options-general.php’ );
Writing remove_submenu_page( ‘options-general.php’, ‘options-writing.php’ );
Reading remove_submenu_page( ‘options-general.php’, ‘options-reading.php’ );
Discussion remove_submenu_page( ‘options-general.php’, ‘options-discussion.php’ );
Media remove_submenu_page( ‘options-general.php’, ‘options-media.php’ );
Privacy remove_submenu_page( ‘options-general.php’, ‘options-privacy.php’ );
Permalinks remove_submenu_page( ‘options-general.php’, ‘options-permalink.php’ );

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_page( 'tools.php' );                  //Tools
  remove_menu_page( 'options-general.php' );        //Settings
  
}
add_action( 'admin_menu', 'remove_menus' );
?> 

2. Removing sub-menu pages

Usage

 remove_submenu_page( $parent_slug, $menu_slug );

Examples

 <?php
function remove_menus(){

 remove_submenu_page( 'themes.php', 'customize.php' );

}

add_action( 'admin_menu', 'remove_menus' );
?>