Script to Make Anchor Links Work Within Accordions

I found a lot of suggested solutions online to this problem, but none of them worked for my purposes, so I wrote this. Hope it helps others…

   /*except for the minimize and maximize links, add special class to all anchor links*/
        if (!$('a').hasClass('maximize' && 'minimize')) {
        $('a[href*="#"]').attr('class' , 'accordion-anchor');
        /*wrap accorion header-content pairs*/
        $("#accordion h3.ui-accordion-header").each(function() {
        $(this).nextUntil("h3.ui-accordion-header").andSelf().wrapAll("<div class='accordion-pair'></div>");
        /*Add script trigger to anchor link*/
        $('.accordion-anchor').each(function() {
         var target = $(this).attr('href');
         var header = $(target).parents('.accordion-pair').find('h3.ui-accordion-header');;

If you need to see my html markup to parse this, let me know in a comment. My markup is the standard accordion.js structure so I think this will make sense to many of you without the markup.

“Shop Small Saturday” Resources for e-Commerce Sites

Today is “Black Friday” in the States, which signals the start of our holiday gift shopping season. This means tomorrow is “Small Business Saturday,” also sometimes referred to as “Shop Small Saturday.”

“Shop Small Saturday” is an effort to drive holiday shoppers to smaller businesses, which rely on holiday spending for their survival. I selfishly think it’s a great way to find gifts that are more interesting and unique than what I find in mega-stores.

I just finished preparing the gench site for “Shop Small Saturday” and thought I’d share some handy resources I found. Continue reading

Hide Those Drupal Node Edit Tabs!

Wouldn’t it be nice if you could have your node edit tabs (view, edit, manage display, etc.) without having them push your layout down 50-100 pixels? Well, good news: you can!

This is how the node tabs normally look (with my subtheme styles). Not even close to what my normal visitors will see..

Screen Shot 2013-11-14 at 10.37.50 PMThis is what I’m going to show you how to do in this post…

Screen Shot 2013-11-14 at 10.29.30 PMYou can get a better sense of it from this short video.

Continue reading

Site Launched: Some Useful UNIX Commands for Promoting Sites

I finally launched the new and improved gench site! It’s my first Drupal site.

In order to replace the current (non-drupal) site with the new one, I had to juggle some big directories around on the live server. The good news is it’s relatively easy to do this. The bad news is it’s still rather nerve-racking! UNIX commands are indispensable for a task like this.

My scenario…

development environment = my local MAMP stack

staging environment = sub-directory under the live site (the old gench site)

live site = root of shared hosting web server

Continue reading

How to Create a Slogan Randomizer Using PHP

One of my all-time favorite Saturday Night Live skits was “Stuart Smalley’s Daily Affirmations.

I’ve decided to have a little fun with PHP by adding random Stuart Smalley quotes to the gench site I’m building. I only want one user to see these quotes (my client who is also my husband) and it’s really just a silly joke between us. As silly as this example is, this technique can be used for serious applications as well. Many is the client who wants rotating slogans in their branding zone.

Continue reading

The Power of CSS3 Pseudo Class Selectors

Though not fully supported in all browsers, CSS3 pseudo class selectors are really powerful and exciting. I’ve been using the basic CSS pseudo classes (e.g., a:hover) for ages, but I’ve only recently started using other pseudo classes, particularly the position/number-based ones.

Continue reading

How to Style Responsive Omega Subthemes

A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).

Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”

Continue reading