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' );
?>