Posts By: Jason Glisson

Find Your Congressperson Drupal Module

This module allows users to lookup a congressperson using a 5 digit US zipcode. It connects to the Sunlight Foundation Congress API V3 (https://sunlightlabs.github.io/congress).

The admin page allows you to toggle on and off the features that you’d like to display.

Here are some screenshots:

drupal module

drupal module
drupal module

You can view this modules on going development on GitHub and on Drupal.org.

Note: This was originally named “Find Your Congressman” because of a clients requirements. I’ve since renamed it “Find Your Congressperson”.

Using javascript to hide/show something on scroll

We’ve probably all seen the little “back to top” buttons that appear on sites once you scroll past the menu or if you at the bottom of a page. This snippet will show you how to slide that out from the right after scrolling down the page.

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('.totop').stop().animate({ right: '0px' });
    } else {
        $('.totop').stop().animate({ right: '-300px' });
    }
});
[/cc]

Obviously, you'll need to tell the browser window to "listen" for scrolling.
[cc lang="javascript"]
$(window).scroll(function() {});
[/cc]

Then you'll tell the browser windows, after you scroll 100 pixels down the page, you want to do something.
[cc lang="javascript"]
if ($(this).scrollTop() > 100) {}
[/cc]

The actual animation is next. We're just going to slide this out from the right, but really you could fade it in and out, or side it from the bottom. Any kind of animation would work.
[cc lang="javascript"]
$('.totop').stop().animate({ right: '0px' });

Add a Search field anywhere in a Drupal template file

When I’m theming a site in Drupal, I don’t always use the search block that Drupal provides. Sometimes I like to put a search field in the header, sidebar, or even in the off-canvas menu. This snippet will let you display a search field anywhere you’d like.

<div id="search-form" class="search">
    <?php $form = drupal_get_form('search_block_form', TRUE); ?>
    <?php print render($form); ?>
</div>

Query all content, except the currently viewed post

This is a great snippet for WordPress, usually used in a sidebar for featured content. If you were looking at a post of some type of content, you could stop that same post from being listed in the sidebar as well by using this code.

$this_post = $post->ID;
$args = array( 'post_type' => 'career', 'post__not_in' => array($this_post), 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_excerpt();
echo '</div>';
endwhile;

Query by Taxonomy

Taxonomies are extremely useful for categorizing content within your WordPress site. Building a query to show those post is something that I had trouble finding. So I’m posting this so other will be able to use it.

function cc_community_partner_query() {
    $args = array(
        'post_type' =&gt; 'partner',
        'posts_per_page' =&gt; 99,
        'tax_query' =&gt; array(
            array(
                'taxonomy' =&gt; 'partner-levels',
                'field' =&gt; 'slug',
                'terms' =&gt; 'community-partners',
                'operator' =&gt; 'NOT IN'
            )
        )
    );
    $community_partners = new WP_Query( $args );
    return $community_partners;
}

Fixed Header Revisited

Over the past year I’ve recieved a lot of emails thanking me for going through the steps of adding a fixed header region to a drupal website. The post seems fairly popular as well. So now, I’ll introduce another way to create a fixed header using strictly jQuery.  This is also called a “sticky header”, but I prefer to call it fixed since the positioning is changed to “fixed”.

There may be lots of other ways to do this, however, this one is the simplest I’ve found so far.

The previous post about fixed header regions really only applied to Drupal 7. With these instructions, you’ll be able to create a fixed header in any CMS as well as flat HTML sites.

First Things First

Before you do anything else, add the Jquery plugin to your website if you don’t have it already. I let Google host my jQuery plugins because they do a very good job of maintaining it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Next you’re gonna want to create a new javascript file with the jquery inside that will power the fixed header.

Jquery Fixed Header

Doesn’t matter if you want the navigation or something else to stick to the top, it will all work the same way. Here’s the code.

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}
jQuery(window).scroll(fixDiv);
fixDiv();

Let’s break it down…

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)

This part of the code is running a function called fixDiv, but this could be named anything really. Now, the next line is important. The various sites that I’ve used this on I’m usually using the header div or the navigation div. Either way, you’ll use the div you want to make fixed to the top of the browser here where ‘#header’ is. The next line is where the magic takes place. This is “listening” for scrolling action. Right now this is set to zero. That means that immediately when you scroll down, the header div is fixed. You can change this zero to 100, or 120, or anything really. If you change it to 100, that will tell the function not to make the header fixed until you scroll down the page 100 pixels. Now for the next part of the code….

     
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}

This is the really cool part. At least it is to me. The first line here says “ok browser, when you fix the header, I want all of these stylings to be given to it.” Notice the “position: fixed, top: 0px” part. That is really what you need to make this work. The rest is additional styling I’ve used to make the header look better. The position needs to be fixed, and top needs to be set to zero. Next I’ve given it a display of ‘block’, a z-index of 2 (so that it will go over all elements as you scroll down), and I’ve added a box shadow so that it looks more apparent that the div is fixed and everything is going under it. Lastly…

jQuery(window).scroll(fixDiv);
fixDiv();

This last section just tells the window to execute the script on scrolling. That’s it. Email me if you have questions at all!

Creating a fixed header region in Drupal 7

One of the big web design trends in the last year has been fixed headers. They look great (sometimes) and you can do some really creative things with them.



tech-crunch

This article will explain how to make a fixed header that appears after the website scrolls up. Essentially, you’ll have two headers. One fixed, and one scrolling.

When doing this in Drupal 7 you’ll run across several issues:

  1. What CSS changes do you need to make for all of this to work?
  2. Accommodating the admin bar on the top and the fixed header.
  3. How does the fixed header work as a region? How do I create a new region?

CSS

Let’s look at the CSS first. You’ll need to use something like firebug to check where your header region begins and ends. This can vary template to template. Find the line in your stylesheet that has all of the CSS for your header div. Usually begins with .header or .header-wrapper.

Here is the CSS that I used on my site:

#header {
    position: relative;
    z-index: 999;
}

You might also, depending on your template, need to make the header’s width 100% of the page. Or if you want it to only stretch a certain width, then just adjust the width to match your template.

Now, we’re going to go ahead and create the CSS for the new fixed header. We’ll call the new div “fixed-header”. Creative, right?

#fixed-header {
    width: 960px;
    margin: auto;
    position: fixed;
    top: 0;
    z-index: 99;
    text-align: center;
}

Then create the container that the fixed header region will reside in.v You can call this anything you’d like, but just make a note of it.

.top-fixed-area {
    width: 1000%;
    height: 60px;
    margin: auto;
    position: fixed;
    top: 0;
    z-index: 99;
    background-color:#fff;
}

Note the z-index value. That is really what creates the magic here and it’s very simple to alter. You don’t have to use 9’s, I just have a habit of using them. One 9 will be the lowest layer. 99 will appear over that layer. 999 will appear as the top layer. And so on. Makes sense, right?

Fix the Admin Bar

While you’re in the stylesheet, go ahead and adjust your admin menu so that when you’re logged in, it appears over everything:

#admin-menu, #admin-menu ul {
    line-height: 1.4em;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 99999;
}

Create a New Region

Next we’ll need to create a region in Drupal and insert the CSS to make that region work.

Go into your theme folder on your server and open the .info file for your theme. MAKE SURE YOU BACK THIS UP BEFORE DOING ANY EDITS! You’ll notice that these regions coincide with the regions in your block administration page. Insert a line just under the header region called “Fixed Header”. This will be the title that shows up in your block administration area.

    regions[header] = Header
    regions[fixed_header] = Fixed Header
    regions[help] = Help
    regions[page_top] = Page top
    regions[page_bottom] = Page bottom
    regions[highlighted] = Highlighted

Now, open your page.tpl.php. PLEASE remember to back this up. You’ll need to do two things here.

  1. Create the div for the fixed header to “reside” in.
  2. Create the region for the fixed header.

Insert this just before your header div. Should look something like:

<div class="top-fixed-area"></div>

Next create your fixed header region. I’ve done this in a manner so that I have two logos. One logo will be in your normal header, and the other will be a shorter logo tailored to your fixed header height.

<?php if ($page['fixed_header']): ?>
  <div id="fixed-header">
                 <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
    <img src="INSERT YOUR PATH TO THE FIXED HEADER LOGO HERE" alt="<?php print t('Home'); ?>">
  </a>
        <div class="top-header">
    <?php print render($page['fixed_header']); ?>
  </div></div> <!-- /.fixed-header, /#fixed-header -->
<?php endif; ?>

Save this and drop it back in your theme folder then clear your cache.

After refreshing your site, you should see the header appear at the top, and you should have a Fixed Header region in your block administration page.

 

Conclusion

Naturally, you can style this any way that you’d like. I’ve done a drop shadow on the content area before, which looks great. Making the header background transparent looks awesome as well. You can do that by using a transparent PNG as the background. I am doing this type of fixed header on a furniture website that I’m developing right now (pictured above). The logo was no problem, and you can use the module “Menu Clone” to copy your top menu and create a new block to place into your new fixed header region.

That’s pretty much it! Ask any questions if you got ’em. All comments are monitored and approved.