jQuery Archives - Michael Sunarlim

MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0)

Michael — Mon, 09 Jan 2017 06:48:18 +0000

By popular demand, I updated my code and posted it as new GitHub repository that utilizes newer MailChimp API 3.0. Please read the tutorial below to create AJAX based MailChimp subscribe form on your PHP website with a little jQuery knowledge.

Original post using (older and no longer supported) MailChimp API 1.0 can be found here.

What this code does

Validate field contents
Pass the form submission to MailChimp and add the record to your list
Basic fallback method for very, very old browser or does not have JavaScript activated
Very customizable and easily expandable, depending on your requirements
jQuery and jQuery Validation plugin called from CDNJS to keep number of files to maintain at minimal

Tools/Credits

MailChimp API Key and List ID

Below we start, we need to generate public API key from your MailChimp account and also identify your list ID. If you are not sure how to retrieve those, follow these links from MailChimp Knowledge Base to retrieve your account’s API key and find your list ID.

The Form Page (index.php)

jQuery will handle the AJAX using $.post method and jQuery Validation plugin will validate the field values including email address format.

For this example, I am including first name and last name as part of the form fields. Feel free to make adjustments as required. Although keep in mind after changing the form fields, you may also need to adjust the subscribe.php file too.



  MailChimp (API v3) Sign-Up Form
  
  
  



  
    
      
        Sign Up
        
          First Name * 
        
        
          Last Name * 
        
        
          Email Address *

Form Processor (subscribe.php)

I try to include as much comment as possible to make the code self explanatory.

post("lists/$list_id/members", [
              'email_address' => $_POST["email"],
              'merge_fields'  => ['FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"]],
              'status'        => 'subscribed',
            ]);

  if ($MailChimp->success()) {
    // Success message
    echo "Thank you, you have been added to our mailing list.";
  } else {
    // Display error
    echo $MailChimp->getLastError();
    // Alternatively you can use a generic error message like:
    // echo "Please try again.";
  }
?>

Download

Click here to download the basic files to create MailChimp subscribe form on your website. Alternatively, you can also visit the GitHub repository.

Coming Soon Templates

The MailChimp subscribe form example only includes basic HTML page. If you are thinking of using it for your upcoming site, and you have limited resources to create the page design, check out my list of 5 Clean and Free Coming Soon Page Templates and Coming Soon & Under Construction Templates on ThemeForest.

The post MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) appeared first on Michael Sunarlim.

Front End Frameworks Based on Google’s Material Design

Michael — Tue, 11 Nov 2014 10:18:33 +0000

In recent years we’ve seen Google has taken design very seriously. I personally think their competition with Apple in the tablet/smartphone war (Android vs iOS) forced them to take their design/visual up a few levels.

Google is not only polishing the interface on their mobile OS platform, but streamlining most of their wonderful and indispensable web applications with a unified look and style. Material Design is the latest design/visual language developed by Google and announced at the Google I/O conference in June 2014. As with latest UI design philosophy, Google went with flat look and focused on the details. While the direction is open for personal’s opinions, in overall I think Google has done a remarkable job.

If you love Material Design, there is no reason why you should not try to use it as the DNA of your next project. Luckily a bunch of talented people took very little time to make things easier for their fellow designers and developers to be able to take make use the framework to their site’s design.

Materialize

This one goes on the top of my list because it feels like most polished and actively developed. The framework homepage shows a clear example how you can create nice look on your websites using their components.

Bootstrap Material

If you are already in love with Bootstrap and do not want to fool around with another framework, there is a solution for that too through this project by applying Material Design as a Bootstrap theme. Note that as the time of writing, this theme is not ready for production.

Material UI

Last but not least, if you use React for your JavaScript library, this framework is definitely for you.

There you go. Hopefully the list is useful for you. If you know other front-end frameworks that are based on Material Design, please share them by replying to this post. I would love to check and possibly add them here.

The post Front End Frameworks Based on Google’s Material Design appeared first on Michael Sunarlim.

MailChimp Subscribe Form with PHP, jQuery and AJAX

Michael — Mon, 28 Apr 2014 10:18:26 +0000

I am pretty sure I have mentioned somewhere in this blog or tweets of how I love MailChimp or and would recommend it for any business wanting to untap their email marketing potential. You can start with zero investment and only start paying when you are completely confident it is very worthy.

MailChimp provides a good tool to generate your custom sign up form which will serve most requirements well. Some customers however, want a fully custom form or integrate it with existing template they already own. Today I am going to share a quick tutorial in how to integrate HTML form with MailChimp API using PHP and jQuery.

MailChimp Subscribe Form Features

What will it do?

Validate field contents
Pass the form submission to MailChimp and add the record to your list
Basic fallback method for very, very old browser that does not have JavaScript activated
Five minutes setup

Tools/Credits

The Form Page (index.php)

jQuery will handle the AJAX using $.post method and jQuery Validation plugin will validate the field values including email address format.



  MailChimp Sign-Up Form
  
  
  



  
    
      
        Sign Up
        
          First Name * 
        
        
          Last Name * 
        
        
          Email Address *

Form Processor (subscribe.php)

Our form will connect to MailChimp with the help of MCAPI.class.php. Please make sure you have generated the API key of your account and copied your list ID. MailChimp’s excellent knowledge base provides the instructions in how to retrieve your account’s API key and find your list ID.

$_POST["fname"], 'LNAME'=>$_POST["lname"]);

  // Submit subscriber data to MailChimp
  // For parameters doc, refer to: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php
  $retval = $api->listSubscribe( 'ENTER_YOUR_LIST_ID_HERE', $_POST["email"], $merge_vars, 'html', false, true );

  if ($api->errorCode){
    echo "Please try again.";
  } else {
    echo "Thank you, you have been added to our mailing list.";
  }
?>

That’s it! You can now check on your web server with a few tests and see if they are captured in your MailChimp list.

Download

Sample files and structure of this tutorial can be downloaded here. Please share this post if you find it useful using social media buttons below.

Coming Soon Templates

My files only include a basic HTML page. If you are thinking of using it for your upcoming site, and you have limited resources to create the page design, check out my list of 5 Clean and Free Coming Soon Page Templates and Coming Soon & Under Construction Templates on ThemeForest.

UPDATE (January 9, 2017)

I have published updated version of this tutorial to make use of MailChimp’s newer API 3.0. Please follow the link to read how to create MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0).

The post MailChimp Subscribe Form with PHP, jQuery and AJAX appeared first on Michael Sunarlim.

Make Vimeo Lightbox Auto-Closes on Finish Using FancyBox

Michael — Sun, 13 Apr 2014 11:49:15 +0000

FancyBox has been my number one preference when I need to implement a jQuery-based lightbox on any web page I am working on. It is the most customizable and extensible jQuery plugin for this function.

Since version 2.0, it also introduced a concept of ‘helpers’ to reduce the size of the main JS file and also to allow developers to play more with its functionality with less risk of breaking the core functions when they are updated. Below I am going to show a little trick to modify FancyBox’s media helper to allow Vimeo link to auto-close when the video finishes.

Vimeo API

The first step to achieve this is by understanding Vimeo Player JavaScript API and how to enable API calling for the videos. To save your time, there are two items you need to note:

You need to turn on the API using api=1 code and define the player ID ie. player_id=vimeoplayer
Use Froogaloop, a JS mini-library written by Vimeo to communicate with their API. It can be downloaded here.

Modifying Fancybox media helper file

By default, the media helper file from FancyBox does not define the API and player ID. So we need to make minor change with the helpers/jquery.fancybox-media.js:

vimeo : {
    matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
    params  : {
        autoplay      : 1,
        hd            : 1,
        show_title    : 1,
        show_byline   : 1,
        show_portrait : 0,
        fullscreen    : 1,
        api           : 1, // enable Vimeo Player API
        player_id     : 'fancybox-vimeo' // define Player ID
    },
    type : 'iframe',
    url  : '//player.vimeo.com/video/$1'
},

That’s it. You may want to save the helper file to another name, like jquery.fancybox-media.custom.js

Putting them together

First call FancyBox scripts like you usually do, including the customized media helper file and Froogaloop.

Next, let’s try to call FancyBox that auto-closes when the video has finished playing:

Done.

The post Make Vimeo Lightbox Auto-Closes on Finish Using FancyBox appeared first on Michael Sunarlim.

jQuery Cycle Pager Style as Dots with CSS

Michael — Tue, 07 May 2013 02:30:53 +0000

jQuery Cycle is a great plugin to create image slides on your website. Out-of-the-box, it is so simple to use but you can explore the options extensively to get the functions and effect that you expected.

One of the best feature is the ‘pager’ option that will create a pagination of your slideshow. By default, the function will look up for a container with ID value of ‘pager’ and generate this code:
[syntax_prettify linenums=””]

[/syntax_prettify]

Without any style, the pager will be shown simply as “123” on the front-end. You can of course stylize it any way you like it, I used to fancy the background-image replacement technique, but I want to share the CSS codes that will display it as dots or bullets. Since this is pure CSS, you can easily change the colors or size quickly and easily.
[syntax_prettify linenums=””]
#pager {
/* you can add positioning properties here if needed */
width: 75px; /* change as required */
padding: 0;
height: 14px;
z-index: 999;
}

#pager a {
display: block;
float: left;
width: 10px;
height: 10px;
text-indent: -999em;
background: #fff;
border-radius: 10px; /* must be the same as width and height */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 1px 1px #707173; /* border color */
margin-right: 10px;
}

#pager a {
background: #c0c0c0; /* optional: color when hovered */
}

#pager a.activeSlide {
background: #707173; /* color when active */
}
[/syntax_prettify]

Quick preview of how it will look like:

There you go. Simple pager for a great slideshow plugin.

The post jQuery Cycle Pager Style as Dots with CSS appeared first on Michael Sunarlim.

Responsive Multi-level Menu to Dropdown

Michael — Wed, 27 Feb 2013 07:45:30 +0000

Thanks to this excellent tutorial from CSS-Tricks explaining how to create list-based menu into select dropdown on small screens, I was able to finally complete the product detail pages on Bluelounge website. My homework was not finished though. With around 20 active products on the website, I needed to preserve the product categories within the dropdown menu to make it easier for visitors to check out other products. With some adjustments and a few extra lines of codes, it now works the way I wanted.

Reading Requirement

Before I begin, please first read the tutorial from CSS-Tricks to understand the initial concept: Convert a Menu to a Dropdown for Small Screens

The HTML

Here is the simplified HTML I use for the navigation:


Cable Management
Sumo
CableBox Mini
CableClip
CableDrop
CableBox
Cableyoyo
Stands
Mika
Milo
Nest
Notebook Kit
Cool Feet
Chargers
MiniDock
Refresh
Extra Connectors
The Sanctuary

I use class=”category” and

for list items that are categories. Since we do not have a category page, the list items do not have a link.

jQuery

The fun part was to modify the original code to only create dropdown options from list items with class="category" and then list the following option with the URL as value until it finds the next category title.
Another code I added was to validate when changed if it has a (URL) value, otherwise it will not change the page.

// Create the dropdown base
$("