How to Setting VirtualHosts in XAMPP on Mac

Posted on by
Reply

1. Enable VirtualHosts

Open the file “httpd.conf” which locate at:
/Applications/XAMPP/xamppfile/etc/httpd.conf by Textwrangler or other text editor.
Look for the following lines:

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

2. Add Your Custom VirtualHosts

Open the file /Applications/XAMPP/xamppfile/etc/extra/httpd-vhosts.conf.
At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

# localhost
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Applications/XAMPP/htdocs"
    <Directory "/Applications/XAMPP/htdocs">
        Options Indexes FollowSymLinks Includes execCGI
        AllowOverride All
        Order Allow,Deny
        Allow From All
    </Directory>
</VirtualHost>

After you add the default localhost. Now you can add your own virtualhosts

# mysite.local
<VirtualHost *:80>
    ServerName mysite.local
    DocumentRoot "/Users/phichamon/Public/mysite/"
    <Directory "/Users/phichamon/Public/mysite/">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order Allow,Deny
        Allow From All
    </Directory>
    ErrorLog "logs/mysite.local-error_log"
</VirtualHost>

In the example you can replace “mysite.local” with your own hostname.

3. Edit hosts file

Once you’ve saved your httpd.conf and httpd-vhosts.conf files, the next step is to edit your OSX hosts file by open the Terminal instance, and at the prompt type the following command:

sudo nano /etc/hosts

Enter your OSX password when prompted, and the hosts file will be opened in the nano text editor. You’ll see that the hosts file already contains some default hostname mappings (e.g. “127.0.0.1 localhost”). Use your keyboard’s arrow keys to navigate to the bottom of the file and add your own mapping:

# XAMPP VirtualHost mappings
127.0.0.1 mysite.local

4. Restart Apache

So that your changes take effect, restart Apache. This can be done using XAMPP Control, which is found at /Applications/XAMPP/XAMPP Control.app.

Point your browser at http://mysite.local (or whatever ServerName you chose) and you should see your website.

if you have error about server error you can fix by change the file permission by add the following command on terminal.

chmod 755 /Users/phichamon/Public/mysite/
or
sudo chmod -R 755 /Users/phichamon/Public/mysite/

list post with category by wp_list_categories

Posted on by
Reply 

wp_list_categories( array(
    'walker' => new Walker_Category_Posts()
) );

class Walker_Category_Posts extends Walker_Category {

    function start_el(&$output, $category, $depth, $args) {

        $this->category = $category;

        parent::start_el($output, $category, $depth, $args);
    }

    function end_el(&$output, $page, $depth, $args) {
        if ( 'list' != $args['style'] )
            return;

        $posts = get_posts( array(
            'cat' => $this->category->term_id,
            'numberposts' => 3,
        ) );

        if( !empty( $posts ) ) {

            $posts_list = '<ul>';

            foreach( $posts as $post )
                $posts_list .= '<li><a href="' . get_permalink( $post->ID ) . '">'.get_the_title( $post->ID ).'</a></li>';

            $posts_list .= '</ul>';
        }
        else {
            $posts_list = '';
        }

        $output .= "{$posts_list}</li>\n";
    }
}

Force charset to utf-8

Posted on by
Reply

I’ve a problem with some wp plugin that force one of my client site alway run as “ISO-885901″ instead of “utf8″.

I also tried to remove the header and replace to exact command.

<!-- removed -->
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<!-- added -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

but the result show the same:

2013-03-19_1146

Finally, I fixed this issue by use .htaccess to force the document run as utf8

<!-- add to .htaccess file -->
AddDefaultCharset utf-8
AddCharset utf-8 .css .js

Although, the result of code still show as “ISO-885901″ but it can fix the strange character such as
weird-characters

Jquery Scroll to Top of Page

Posted on by
Reply

Simple HTML

<div id="totop">
     <a href="#totop" class="totop">Go to Top</a>
</div>

Add this css

   #totop {position: absolute;top:-98px; right:0;}

   #totop a { display:block; width: 60px; height:32px;overflow: hidden; text-indent: -9999px; background: url(img/totop.jpg) 0 12px  no-repeat;-webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; }

   #totop a:hover {background-position: 0 0;}

Jquery code

	$('a.totop').click( function() {
		$("html, body").animate({ scrollTop: '0px' });
	});

WordPress Excerpt Box Missing

Posted on by
Reply

add by the following command.

     add_post_type_support( 'page', 'excerpt' );

for complete function hook on function.php file.

add_action( 'after_setup_theme', 'bpds_setup' );

function bpds_setup() {

	/**
	 * Add default posts and comments RSS feed links to head
	 */
	add_theme_support( 'automatic-feed-links' );

	/**
	 * Enable support for Post Thumbnails
	 */
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'new-thumb',460,250 ,true );
        /* Here we added */
	add_post_type_support( 'page', 'excerpt' );
	
}

how to delay hover effect with css3

Posted on by
Reply 
div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

Add button to start/stop YouTube multiple iframe players

Posted on by
Reply 
<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube.com/player_api');

loadYouTubePlayer = function(playerID) {
  the_player = new YT.Player(playerID, {
    events: { 'onReady': playYouTubeVideo }
  });
};  

unloadYouTubePlayer = function(playerID) {
  // This is the part that's broken
  $(playerID).stopVideo();
}; 

function playYouTubeVideo(event) {
  event.target.playVideo();
}

$('.show_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
            loadYouTubePlayer('the_player'+id);
            $('.stop_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            unloadYouTubePlayer('the_player'+id);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

});
</script>

<div class="hidden_player hidden1" data-video-id="0" style="display:none">
    <iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>

    <br/><br/>    

<div class="hidden_player hidden2" data-video-id="1" style="display:none">
    <iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>

</body>
</html>

I’ve just tested this code on my website and found the stop button doesn’t work.
I tried to find and tested many code but don’t found the any work one. Finally I use the copy and remove method to replace this.

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            // unloadYouTubePlayer('the_player'+id);
		var temp = $('.hidden'+id ).html();
		$('#the_player'+id).remove();
		$('.hidden'+id).html(temp);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

reference:

http://jsfiddle.net/iwasrobbed/9Dj8c/3/

http://stackoverflow.com/questions/7522997/using-jquery-to-play-stop-youtube-multiple-iframe-players

http://stackoverflow.com/questions/6671232/youtube-api-stop-video