HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

DRY-ing jQuery code for portfolio site

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
ingportfoliojqueryfordrysitecode

Problem

I'm currently working on my portfolio site and it's all great, but I'm unsure how to DRY my jQuery. I'm repeating myself a lot in the jQuery and it's just messy.

HTML:


      

        
          Portfolio
          About
          Contact
        

        Click to expand
        
      
    

      

        

        

      
    

      
        About me

        Paragraph
      
    

        
      Questions

      
        

          
            
              
            

            
              
            
           

          
          

          
            
              Submit
            
          

        
      
    


jQuery:

```
$(document).ready(function() {

var $footerPortfolio = $('#footer-portfolio'),
$footerAbout = $('#footer-about'),
$footerContact = $('#footer-contact'),
$footerSent = $('#footer-contact-sent'),
$clickPortfolio = $('#clickPortfolio'),
$clickAbout = $('#clickAbout'),
$clickContact = $('#clickContact'),
$arrowImg = $('#footer-start img'),
$arrowTxt = $('#footer-start span'),
$loadHide = $('.loadHide');
sentUrl = window.location.href;

$loadHide.hide();

$arrowImg.hover(function() {
$arrowTxt.show('fade', 800);
},function() {
$arrowTxt.hide('fade');
});

$clickPortfolio.click(function() {
event.preventDefault();
$loadHide.slideUp(500);
$footerPortfolio.slideToggle(500);
});

$clickAbout.click(function() {
event.preventDefault();
$loadHide.slideUp(500);
$footerAbout.slideToggle(500);
});

$clickContact.click(function() {
event.preventDefault();
$loadHide.slideUp(500);
$footerContact.slideToggle(500);
});

if (sentUrl.search("#sent") >= 0) {
$footerContact.slideUp(500);
$footerSent.slideDown(800).delay(1000).slideUp(800);
}

Solution

The way you define sentUrl as a global variable is either buggy (if it's unintentional) or deceptive (if it's intentional).

var $footerPortfolio = $('#footer-portfolio'),
      …
      $loadHide = $('.loadHide');
      sentUrl = window.location.href;


Since the difference between a local and a global variable hinges on the distinction between a comma and semicolon, I prefer to see such multi-line definitions to be written as

var $footerPortfolio = $('#footer-portfolio');
var $footerAbout = $('#footer-about');
var $footerContact = $('#footer-contact');
var $footerSent = $('#footer-contact-sent');
var $clickPortfolio = $('#clickPortfolio');
var $clickAbout = $('#clickAbout');
var $clickContact = $('#clickContact');
var $arrowImg = $('#footer-start img');
var $arrowTxt = $('#footer-start span');
var $loadHide = $('.loadHide');
var sentUrl = window.location.href;


If it is intentionally a global variable, then fix your indentation and add vertical spacing so that

sentUrl = window.location.href;


stands alone.

Code Snippets

var $footerPortfolio = $('#footer-portfolio'),
      …
      $loadHide = $('.loadHide');
      sentUrl = window.location.href;
var $footerPortfolio = $('#footer-portfolio');
var $footerAbout = $('#footer-about');
var $footerContact = $('#footer-contact');
var $footerSent = $('#footer-contact-sent');
var $clickPortfolio = $('#clickPortfolio');
var $clickAbout = $('#clickAbout');
var $clickContact = $('#clickContact');
var $arrowImg = $('#footer-start img');
var $arrowTxt = $('#footer-start span');
var $loadHide = $('.loadHide');
var sentUrl = window.location.href;
sentUrl = window.location.href;

Context

StackExchange Code Review Q#52529, answer score: 7

Revisions (0)

No revisions yet.