patternjavascriptMinor
DRY-ing jQuery code for portfolio site
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:
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);
}
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
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
If it is intentionally a global variable, then fix your indentation and add vertical spacing so that
stands alone.
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.