Posts

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...

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...