Tag Archives: jquery

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() {
        $(this).bind('click',function(){
         var target = $(this).attr('href');
         var header = $(target).parents('.accordion-pair').find('h3.ui-accordion-header');
         header.click();
        });
        });

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.

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

Drupal Commerce: Indicating a “Sold Out” Product

For the music label site I’m creating, the client wants to prevent people from ordering items no longer in stock, but he wants to continue displaying them as they represent his discography.

For a high-volume Drupal Commerce site, you’re going to want to write or use a custom module for inventory control (like Commerce Stock), but that seemed like overkill for this project.

I decided to deploy a solution that doesn’t require any additional modules – just a little jQuery and the addition of a status field to my product variation type.

Continue reading

Font-awesome’s Handy .icon-rotate Classes

Please Note: This example was based on version 3.2.1 of the font-awesome library. I’m not sure when this occurred, but the current version of the font-aewsome library  (4.0.3) has changed all the class names for their icons. The example in this posting will work with version 3.2.1, but if you prefer to use the most recent font-awesome library, you should substitute the word ‘icon’ in class names with ‘fa’

For example, in 4.0.3, you would use…

<i class="fa-play fa-rotate-90"></i>

etc…

Image

A commonly desired feature on websites is an expanding/collapsing list, with a rotating arrow button.

I want this feature on both the gench FAQ and album review pages, and I want the currently expanded section to collapse if another section is expanded or if the currently expanded heading is clicked on again.

Continue reading