Royal Slider: Play video when clicking anywhere in the preview image

Here is the code I use to play a YouTube or Vimeo video in a Royal Slider gallery when a visitor clicks anywhere in the preview image, and not just when they click the Play button itself:

<script>
jQuery(document).ready(function($) {
    $('.royalSlider').each(function() {
      var slider = $(this);
      $('.rsContainer').click(function() {
        slider.royalSlider('playVideo');
      });
    });
});
</script>

CiviCRM + WordPress + QuickBooks: Installing the Intuit Quickbooks Extension in your WordPress+CiviCRM installation

I have not found very clear instructions or support on how to download and install the QuickBooks extension for CiviCRM in my WordPress + CiviCRM installation so I am going to share the steps I took to accomplish this here, for future reference for myself as much as anyone :)

First, this is the extension that I used – https://github.com/NileemaJadhav/Intuit

Click the “Download” button on the right hand side of the page to download a zip file.

Once the zip file has been downloaded, expand the folder.

Inside the expanded folder, named Intuit-master, you will see another folder called org.civicrm.payment.intuitquickbooks. Upload this folder and its contents to your designated CiviCRM extensions directory.

Using your FTP client of choice, open the org.civicrm.payment.intuitquickbooks folder which you just uploaded, and move the file named IntuitQuickbooksIPN.php to this folder: <your website root>/wp-content/plugins/civicrm/civicrm/bin

Now log into your WordPress dashboard and click CiviCRM in the sidebar.

In the CiviCRM admin panel of your WordPress dashboard, navigate to Administer > System Settings > Manage Extensions. Once on this page, you will most likely have to click the “Refresh” button to see the Intuit extensions listed as available for installation, at least I did. After you’ve refreshed the list of extensions available for download, click the “Install” link next to the Intuit extensions to install it.

Once the extension has been installed, navigate to Administer > System Settings > Payment Processors. Click the button to add a new Payment Processor, and now in the dropdown list next to “Payment Processor Type“, you will see Intuit Quickbooks as an option.

Here is a tutorial with further information on getting your QuickBooks extensions configured – http://wiki.civicrm.org/confluence/display/CRM/Setting+up+Intuit+QuickBooks+Payment+Processor+for+CiviCRM

Hope this step-by-step tutorial saves someone the time I have spent trying to get this working :)

WordPress Tips: How to use “get_sidebar()” in a foreach loop

Today I was working on a one-page WordPress blog template and encountered a situation where I need to put a call to the WordPress function “get_sidebar” within my loop. The sidebar only showed up on the first post result in that loop on the website however.

A bit of online research turned up this solution finally – .

Rather than using the default function “get_sidebar“, I ended up using an “include” for the sidebar.php file in my loop, like so:

<?php include( TEMPLATEPATH . '/sidebar.php'); ?>

And now the sidebar is being displayed in each iteration of my loop. A simple and effective workaround!

How to preserve anchor tags in links shared using a social media sharing plugin on a one-page website

I ran into an issue today on a one-page scrolling website that is built using fullPage.js and therefore uses anchor links in the page URL to get people to the right place on the website. It is a WordPress website and on the blog, I naturally wanted to incorporate a social media sharing plugin.

The issue I ran into is that when you clicked a link to share the post to, say, Twitter, the link that was getting shared had the hashtag and everything following it – therefore, the anchor link -stripped out. Obviously this was not going to work – I need people to be able to share direct links to the specific post they are referencing, not to the entire website in general.

After some extensive online perusing, I finally found this extremely useful article – https://dev.twitter.com/discussions/512 – which contained exactly what I needed.

According to comment author @benward, “you need to URLEncode” the hashtag in the links, using %23.

Here is the solution that ended up working for me.

I used this line of Javascript to update the links in the social media sharing section of the page:

$(document).ready(function(){
    $('.social-media-links a').each(function(){
        this.href = this.href.replace('#', '%23');
    });
});

Voila! Now when people click the social media share buttons, my anchor links are preserved.

How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

I recently used the fullPage.js script on a website that I am working on and ran into a bit of trouble getting the section content to fade in nicely when it was scrolled into view. Here is the way I was able to accomplish that feature.

Following the instructions on how to incorporate fullPage.js into my site, my HTML structure looked like this:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

First, I added this declaration to my stylesheet, to start all of the page sections out as invisible:

.section {
	opacity:0;
}

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – https://raw.github.com/meetselva/attrchange/master/attrchange.js – and uploaded to it to my website, and then added the call to it into my webpage, after my call to the jQuery library:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/attrchange.js"></script>

*Note: make sure to verify that the path to your script in the code above is correct!

And then, finally I added this bit of jQuery to my webpage:

<script>
$(document).ready(function(){

$(".section").eq(0).animate({"opacity":"1"},1500);  //fade the first div.section in on page load

$(".section").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/active/i) == -1) { // "active" is the class name you search for inside "class" attribute
                $(".section.active").animate({"opacity":"1"},1500); //fade in the section with class active
            }
        }
    }
});

}); //end of document ready
</script>

And that did the trick! Now my section content fades in nicely when the new section is scrolled into view.

How to use Google analytics on a parked domain

I have found a way to use Google analytics to track traffic on a parked domain by using a PHP conditional statement to check which domain a visitor is accessing your site with and to render the correct Google analytics javascript code based on the domain.

First, make sure to set up a Google analytics profile for each of your domains – both the domain your site lives on and each of the parked domains that you want to track traffic on.

Then added this PHP statement in your website where you would typically place the analytics code itself:

<?php
$firstUrl = "yourparkeddomain.com";
$secondUrl = "yourwebsitedomain.com";
$currentUrl = $_SERVER['SERVER_NAME'];

if($currentUrl == $firstUrl) { ?>
<script>
  //insert Google analytics script for your parked domain here
</script>

<?php } else { ?>
<script>
  //insert Google analytics script for your main website domain here
</script>  

<?php } ?>

I think this is pretty self-explanatory – the PHP script is checking the current URL that the visitor is accessing your site at against the different URLs you have defined in the PHP script and is loading the correct Google analytics script based off of that information.

I have found that this gives me a way to at least track the data of visitors who are landing on my site through parked domains.

Resolved: Updating the server PHP version to 5.4 broke my Genesis Simple Sidebars plugin

I had to resolve an issue recently where a client’s hosting company had updated the PHP version of the server to 5.4 and this “broke” the plugin Genesis Simple Sidebars that was being used on their site, therefore causing the whole site to be down. The PHP error message being displayed in a browser when you tried to visit a site is what told me it was the Genesis Simple Sidebars plugin that was causing the site to be down.

I found this extremely useful thread which ultimately helped me to fix the issue – http://wordpress.org/support/topic/error-after-updating-to-php-54 – but want to outline what I did here to save others from having to scroll through the entire thread.

Step 1: Log into PHPMyAdmin or whichever interface you use to edit the database.

Step 2: Navigate to the wp_options table on the database (note: this may not be the exact name of the table, your table could be named differently depending on the $table_prefix defined in your WordPress site’s wp-config.php file)

Step 3: Navigate to the “ss_settings” field in the options table and open it to edit it.

Step 4: Remove this line of code from the beginning of the “ss_settings” content:

i:0;s:20:"__return_empty_array";

Step 5: Find the number listed right after “a:” at the beginning of the “ss_settings” content and subtract 1 from that number. So, for example, if the beginning of your “ss_settings” field looked like this:

a:37:

You will want to change it to read:

a:36:

Step 6: Save your changes to the “ss_settings” field and navigate to your website in a browser. Hopefully your site will be back up and running now!

 

Open and scroll to an anchor link on a different page with an offset to adjust for a fixed header

Here is the script I have used to open and scroll to an anchor link on a different page on a site that has a fixed header and therefore needs to have an offset so the anchor link is not hidden behind the header.

<script>
$(document).ready(function() {
var offsetSize = $(".header").innerHeight();
$("html, body").animate({scrollTop:$(window.location.hash).offset().top-offsetSize }, 500);
});
</script>

What this script is doing is calculating the height of your fixed header (in this case: div.header) and then, upon loading the new page, scrolling to the correct anchor link on the page with an offset that is equal to the height of your fixed header.

In order for this script to work properly, you need to add an ID to your anchor link names that is the same as their name. For example:

<a name="contact" id="contact"></a>

How to make the top-level links in a jQuery accordion menu clickable

I often use a jQuery accordion menu for the mobile menu on responsive websites and have run into issues before where the top level links by default seem only to expand or collapse submenus and not actually take you to the page you are trying to go to. What I have found is that I usually just need to add this line of code to my script:

header: '.menu-control'

So, for example, the script I now use to call in the accordion menu would be:

function enableAccordion() {
 $('#menu-mobile-nav').accordion({
 header: '.menu-control',
 autoHeight: false,
 navigation: true,
 collapsible: true,
 active: false
 });
}

Where my HTML for the menu is:

<h3>MENU</h3>
<ul id="menu-mobile-nav" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>