HTML

<div id="inputs_wrapper"></div>
<a href="#" id="addNewInput">Add a new input and attach a Datepicker component</a>

PHP

<?php
echo '<input type="text" name="date" class="datepicker">';
?>

jQuery

// listen for click action
$('#addNewInput').click(function(e){
       e.preventDefault(); // blocks default link behavior (if it's a link element)

       // get the HTML with a AJAX request
       $.get("http://point47.com/examples/dynamicdatepicker/inputhtml.php", function(data){
            // adds the content in the #inputs_wrapper container and attaches the datepicker for each input found
            // also removes the class "datepicker" so we don't attach it again on the same inputs
            $('#inputs_wrapper').append(data).find('.datepicker').removeClass('datepicker').datepicker();
       });
   });

Pitfall: your input field must not have an id attribute or it must be unique. Preferable don’t add an id attribute.

HTML

<div id="modal_wrapper">
content for modal here
</div>

CSS

#feedback_modal{
display: none;
position: absolute;
width: 610px;
background: #000000;
color:#FFFFFF;
z-index: 100;}

JavaScript

$('#feedback_modal').customModal({show : true});

jQuery Plugin

$(document).ready(function(){
      (function($){

        $.customModal= {
            options: {
              show              : true,  // set it to false to hide the modal
              centerOnScroll    : true   // center modal when scrolling the page
            },
            elements: []
        };

        $.fn.customModal= function(options){

            options = $.extend($.customModal.options, options);

            return this.each(function(index) {
                if (index == 0) {
                    var $this = $(this);

                    if(options.show === true)
                    {

                        // center on modal activation
                        $this.show().positionCenter();    

                        // center modal on page scroll
                        if(options.centerOnScroll === true)
                        {
                            $(window).bind('scroll', function () {
                               $this.positionCenter();
                            });
                        }

                        /** -----------------------------
                         *  show and create modal background
                        -----------------------------  */
                        $this.before('<div id="modalBackground"></div>');

                        var modalHeight = $(document).height();

                        $('#modalBackground').height( modalHeight ).css({
                            'position'      : 'absolute',
                            'z-index'       : '1100',
                            'width'         : '100%',
                            'top'           : '0',
                            'left'          : '0',
                            'background'    : '#000',
                            'opacity'       : 0.7
                        });
                    }
                    else
                    {
                        // hide modal
                        $this.hide();

                        // remove modal background
                        $('#modalBackground').remove();

                        if(options.centerOnScroll === true)
                        {
                            $(window).unbind('scroll');
                        }
                    }

                }
            });

        };
    })(jQuery);

});

Position center plugin

$(document).ready(function(){

    /**
    * PositionCenter Plugin
    *
    * center an element on the page viewport
    */
    (function($){
        $.fn.positionCenter = function(options){
            var pos = {
              sTop : function() {
                return window.pageYOffset || document.documentElement && document.documentElement.scrollTop ||    document.body.scrollTop;
              },
              wHeight : function() {
                return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight;
              }
            };

            return this.each(function(index) {
                if (index == 0) {

                    var $this = $(this);
                    var elHeight = $this.outerHeight();
                    var elTop = pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2);

                    $this.css({
                      position: 'absolute',
                      margin: '0',
                      top: elTop,
                      left: (($(window).width() - $this.outerWidth()) / 2) + 'px'

                    });

                }
            });

        };
    })(jQuery);

});

You will also notice that the documentation on setting connection charset (or other options) doesn’t exists for the DBAL package. Actually there is some but just to be something there.

So…

Create your connection:

$connectionParams = array(
..
);
$dbh = Doctrine\DBAL\DriverManager::getConnection($connectionParams, null);

And after you create the conexion add this:

$dbh->query('set names "utf8"');
$dbh->query('set character_set_server="utf8"');
$dbh->query('set collation_connection="utf8_general_ci"');

That’s it.

jQuery

$(document).ready(function(){

    $('#navigation li').hover( function()
    {
        $(this).children('ul').not(':animated').slideDown('#navigation li ul');
    }, function()
    {
        $(this).children('ul').slideUp('#navigation li ul');
    });

});

HTML

<ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>

            <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">More info about</a></li>
                <li><a href="#">Even more info</a></li>
            </ul>

        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>

    </ul>

CSS

#navigation {position: relative;float: left;display: inline;}
#navigation li {position: relative;float: left;display: inline;}
#navigation li a {float: left;display: inline;text-decoration: none;color: blue;padding: 4px 10px 4px 10px;}

#navigation li ul {position: absolute;top: 26px;left: 0px;margin: 0;padding: 0;background: #cccccc;display: none;width: 180px;}
#navigation li ul li {float: left;width: 100%;margin: 0;padding: 0;border-bottom: 1px dotted #959595;   }
#navigation li ul li  a {float: left;width: 100%}

Full demo here: jQuery Drop Down Menu

Enjoy!

public class PostToPHP
{
// url to post
private var postToURL:String = “http://www.yourdomain.tld/post_receiver.php”;

public function PostToPHP()
{
// create request
var request:URLRequest = new URLRequest( postToURL );

// set post variables
var requestVars:URLVariables = new URLVariables();
requestVars.emailTo = ‘email.address@mailservice.tld’;
requestVars.subject = ‘This is a test email’;
requestVars.message = ‘An this is the content of the message.’;

// assign variables to the request and set request method type
request.data = requestVars;
request.method = URLRequestMethod.POST;

// load the request and listen for a response from the PHP script
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = “text”;
urlLoader.addEventListener(Event.COMPLETE, urlLoader_handler, false, 0, true);
urlLoader.load(request);
}

private function urlLoader_handler(e:Object):void
{
// the response given from the PHP script will be traced here
trace(e.target.data);
}
[/actionscript]

// PHP code
// post_receiver.php

// assign POST variables and clean them
// filter_var() is available from PHP 5.2.0
$emailTo 	= filter_var($_POST['emailTo'], FILTER_SANITIZE_EMAIL);
$subject 	= filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
$message   = filter_var($_POST['message'], FILTER_SANITIZE_STRING);

// send mail and remember function response
// boolean response
$mailSent = mail($emailTo, $subject, $message);

// the echoed response will be traced in actionscript
if($mailSent == true)
{
    echo 'mail sent';
}
else
{
    echo 'mail NOT sent';
}

Simple.

Hey did you know about this?

What I want to do?
I want to show a message or an image on the first visit on my website.

What I need to do this?
- FancyBox jQuery plugin that you can get from here: http://fancybox.net/.
I use this plugin as a better alternative to the old LightBox plugin because it resizes the loaded image to the current page size.
- jQuery Cookie plugin that you can get from here: http://plugins.jquery.com/project/cookie
This one I will use to remember if the modal box was already shown. I want to show the modal box only on the first visit on the site. No on every page load .
- oh and of course the jQuery library: http://jquery.com/

How I do this?
Put this in the head section of the html code.

// load all the libraries
// i like to put them in a folder called "public" then "js"
<link rel="stylesheet" type="text/css" href="public/js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="public/js/jquery.cookie.js"></script> 

$(document).ready(function(){

/**
      *  MODAL BOX
      */
    // if the requested cookie does not have the value I am looking for show the modal box
    if($.cookie("modal") != 'true')
    {
        var _message_to_show = '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p> <br /><br /><a href="#" id="modal_close">ENTER</a> <a href="http://www.google.com" id="modal_exit">EXIT</a><br /><br />';

        // on page load show the modal box
        // more info about the options you can find on the fancybox site
        $.fancybox(
            _message_to_show,
            {
                'width'             : 350,
                'height'            : 300,
                'transitionIn'      : 'none',
                'transitionOut'     : 'elastic',
                'centerOnScroll'    : 'true',
                'overlayOpacity'    : 0.9,
                'overlayColor'      : '#000',
                'modal'             : 'true'
            }
        );

        // in the message is a link with the id "modal_close"
        // when you click on that link the modal will close and the cookie is set to "true"
        // path "/" means it's active for the entire root site.. if you set it to "/admin" will be active on the "admin" folder
        // expires in 7 days
        // "modal" is the name i gave the cookie.. you can name it anything you want
        $('#modal_close').live('click', function(e) {
            e.preventDefault();
            $.cookie("modal", "true", { path: '/', expires: 7 });
            $.fancybox.close()
        });
    }    

});

Oh the live demo is HERE!

And that’s it! Enjoy!

Hey did you know about this?

1. Reset HTML elements for all browsers.

The first thing I do is reset the default styles that the browsers set on elements. I consider this the most important thing to do before starting writing the actual CSS styles for the layout. For example Internet Explorer sets bigger margin values for elements like “input”, “textarea” and so on, than Firefox or Chrome.
To reset the styles I prefer to use Yahoo Reset or you could try writing your own.

2. Centering elements with CSS

To center elements with CSS first you need to set the elements “width” and then setting their margins.
So.. we want to center the design/layout of our site in the browser.
We have this HTML

and the CSS to center the layoutWrapper div is:

Now the layoutWrapper div is centered with a top margin of 0 and the other margins are set to auto.

3. Quick fix for the double margin bug in Internet Explorer 6

The problem is that if you set margin or padding on a floated element those values are doubled in IE6 and get a f*ucked up layout.
To solve this problem there are a lot of tricks but the most easiest and straight forward is to set also “display:inline” on the floated elements.
This code will get you a margin left of 40px in Internet Explorer 6.

By adding display:inline now margin-left is also 20px in IE6

4. Font size in EM or PX?

For a period of time I used em’s to size the fonts because in IE6 you can’t re-size the font if it’s in pixels.
So if a title was 21px in font size.. in IE6 it will remain in 21px if you select text size to be larger. If it was in em’s for example
that title will get larger.
A trick that I used to easier set sizes in em’s is I was setting the body font size to 62.5%.

So now if you set a font size of 2.1em it will be the same as 21px.

The sizes of the H1 and H2 will be the same 21px.
For some time now I don’t care so much for IE6 users because there are 9 years since it was released and there are 4 years since version 7 was released.
So if it’s not plain stupidity I really believe it’s plain ignorance.

5. ID’s or Classes? When to use?

Simple. Use id’s to target single elements or classes to target elements that are repeating in the page.
More complex would be that elements with and id should be unique or else you cannot validate your HTML document.
By using classes on elements you can use the same class to target multiple elements or also you can use multiple classes to target the same element.

6. The equal columns trick

This is a trick that I use rarely because it’s kind of an hack and hacks are never a good idea .
More info for this trick you can find here.
There are also a lot of variations but I find this one the easiest to implement.

7. Containers and children widths

I usually set width only to container elements and for the children I set margins and padding or width of 100%.
So if I need to change the width of the container the children automatically change their size also.

8. IE6 PNG transparency problem (isn’t really a CSS related but like.. who cares)

Everybody loves PNG’s. And how can you not? Full quality, transparency support, smaller size files on graphics (jpeg’s are still better for big images).
But IE6 doesn’t like them at all. So we must use some tricks.. and there are a lot.
From that “a lot” I prefer one: DD_belatedPNG by Drew Diller
This one is the best I could find out there. And I tested a lot of them bad scripts

http://vus.me

Here is explained how I made my WordPress MU install to work with domain mapping. There are some tutorials out there but they are plain crap and very poorly explained. And the explanations for the domain mapping plugins are even worse. But I managed to make it work in around two days with a lot of testing and trial and error.
These are the steps that I followed. Well.. not really.. but in the end these would have been the steps that I should have followed.

NOTE! This tutorial is based on the fact that you know how to install and configure a simple WordPress version because I will not offer detailed info about database creation and ftp uploading.

What we want to do here?

- We want to have WordPress MU so we can create multiple WordPress blogs but with one main Administration area.
- Create as many sub-domains as we want.
- Map those sub-domains to other domains. (subdomain.master-example.com should be accessible from addon-example.com )

I. Configure domains

• First you need some domains, for this tutorial at least 2. One to be the master domain which we will call here master-example.com and the other domain that we will map to the blog created as a subdomain on master-example.com whitch we will call addon-example.com.
• Next you need hosting witch offers WHM with CPanel. WHM not really needed I think. I added the domains and parked them from WHM but that can be done in CPanel also.
• After you have the main domain configured on a hosting and you have acces to the CPanel you need to go to “Subdomains” and set the subdomains on a wildcard(*). So where it says “Create a Subdomain” enter * , check if your master domain is selected in the next drop down and in Document root is “public_html/” and click Create.
• In the list of sub-domains now should be: “* .master-example.com Home/public_html not redirected” . What this does it lets WordPress MU create any kind of sub-domain without first adding it manually in the CPanel.
• Now we need to add the addon-example.com domain. Go to: “Parked Domains” and enter addon-example.com in the box and press “Add Domain“. This should park addon-example.com on top ofmaster-example.com. Until I used the Park domain option my domain mapping in WordPress didn’t work.
• Now go to “Simple DNS Zone Editor” and here you have to set an A record for addon-example.com. So select the addon domain addon-example.com and where it says Add an A Record in the “Name:” field write *.addon-example.com and on the “Address” field put the master domain IP (you should find it in the left sidebar in CPanel.. for example: “Shared Ip Address: 127.0.0.20″ .). Click “Add A Record”.
• Great. Now you are ready to install WordPress MU!

Note! I made all of this in the WHM administration but I saw those modifications in CPanel also and I checked if they correspond and it seems that it can be done from CPanel too. For WHM just use “Park a Domain” and “Edit DNS Zone” buttons and make the above modifications.

II. Install WordPress MU.

• Create a database and a user in CPanel .. or whatever.
• Download the WordPress MU sources from here
• Copy the files to your main domain. I uploaded them to my domain root but they say it can be installed to a folder or a sub-domain too.
• Now navigate to your domain (master-example.com) and you should see the installation page. There are some errors for sure and the usual error is that you need to make some folder writable by WordPress. That means to give those folders 777 permission and you’ll have to reset those to 755 after successful install.
• Just follow the steps and be careful to specify where it says Blog addresses to use sub-domains and at Server Address your domain without www or http://
• And, this is very important, after install go to Admin menu (upper right corner) in the WordPress admin interface and change your password to something you can remember. And don’t forget to change the folder permissions back to 755
• Now is the time to see if it works. Go to Site Admin -> Blogs and add a new blog. Let’s say subdomain.master-example.com. If the email address is different from the one you used at install a new user will be created when you add a new blog. And this happens every time you use a different email address.
• OK. Now navigate to: subdomain.master-example.com (or whatever you created) and you should see your blog. Congrats! Now you have a working installation of WordPress MU. If it doesn’t work repeat the above steps with more attention or if you just registered your domains wait a few hours for DNS registrations.

III. Install the Domain Mapping plugin and map a domain

• First download the plugin WordPress MU Domain Mapping (http://wordpress.org/extend/plugins/wordpress-mu-domain-mapping/). I used version 0.5. Many many thanks to those guys for creating this awesome plugin.
• Copy sunrise.php into wp-content/
• Copy domain_mapping.php into wp-content/mu-plugins/
• Edit wp-config.php and uncomment the SUNRISE definition line: define( ‘SUNRISE’, ‘on’ );
• Now go to Plugins and activate the mapping plugin for the main domain.
• After you done those login as the MU admin and go to Site Admin->Domain Mapping and set the server IP address. (you should know this from when you added the A record)
• Now this is the tricky part on what I wasted a lot of hours. Go to Site Admin -> Options and scroll down at the bottom. And after where it says “Site Wide Settings” click on the check box for the Plugins and click Update Options. This activates the plugins for the sub-domains. If you don’t do this you can’t map domains to the specific sub-domain because you will not see the plugin on your sub-domains admin area. (First I actually edited this directly in the database until I realized this.)
• Now go to Site admin -> Blogs and when you hover over the added sub-domain some link will appear. Click on “Backend”. This will redirect you to that sub-domain WordPress administration panel.
• While in this panel go to Plugins and you should see the mapping plugin. Activate it.
• And now go to Tools -> Domain mapping. And here is the part that we worked so hard to get to. Under “Add new domain” write the domain that you want to map to this sub-domain.
• After you clicked “Add” go to the domain that you wanted to map (addon-example.com) and you will see the contents of subdomain.master-example.com

Kind of a long tutorial but hopefully I didn’t forgot anything in the process.
Let me know in the comments if it helped you or if you still got problems with the install flow.

Cheers!