I have a working jsFiddle that shows content based on drop-down value. How can I minify the jQuery so that I don't have to repeat myself for each 'port'. At the moment I have done 2 'ports' but it will take a while to populate the remainder.
http://jsfiddle.net/d4pvz51v/1/
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "all") {
$(".auckland").hide();
$(".tauranga").hide();
$(".all").show();
}
if ($(this).attr("value") == "auckland") {
$(".all").hide();
$(".auckland").show();
$(".tauranga").hide();
}
if ($(this).attr("value") == "tauranga") {
$(".all").hide();
$(".auckland").hide();
$(".tauranga").show();
}
});
}).change();
$('.auckland-link').click(function () {
$('select option:contains("Auckland")').prop('selected', true);
$('.auckland').show();
$('.tauranga').hide();
$(".all").hide();
});
$('.tauranga-link').click(function () {
$('select option:contains("Tauranga")').prop('selected', true);
$('.auckland').hide();
$('.tauranga').show();
$(".all").hide();
});
});
Instead of adding different handlers for each option or link you can
On change of the select, hide all elements with class data, then show the element with the class as the selected value
In the same way you can have a single click handler for the links, assign a common class to all of the link elements then add an data-*(data-el in this case) to specify the target elements class name. In its click handler read the data value and set it as the select element's value and then manually trigger the select's change handler which will set the proper data element visibility.
$(document).ready(function() {
$("select").change(function() {
var $target = $('.' + $(this).val()).show();
$('.data').not($target).hide();
}).change();
$('.data-link').click(function() {
var val = $(this).data('el')
$('select').val(val).change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="ports section-padding text-center" id="ports">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>PORTS OF OPERATION</h1>
<h3>Select a port to view information and contact details</h3>
<select class="choose">
<option value="all">Select Port</option>
<option value="auckland">Port of Auckland</option>
<option value="tauranga">Port of Tauranga</option>
</select>
</div>
</div>
</div>
</section>
<section class="all data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port of Whangarei</h2>
<hr />
<h2 class="data-link" data-el="auckland">Port of Auckland</h2>
<hr />
<h2 class="data-link" data-el="tauranga">Port of Tauranga</h2>
<hr />
<h2>Eastland Port</h2>
<hr />
<h2>Port Taranaki</h2>
<hr />
</div>
<div class="col-md-4">
<h2>Port of Napier</h2>
<hr />
<h2>Port Nelson</h2>
<hr />
<h2>Centre Port Wellington</h2>
<hr />
<h2>Port Malborough</h2>
<hr />
<h2>Greymouth Port</h2>
<hr />
</div>
<div class="col-md-4">
<h2>Lyttleton Port</h2>
<hr />
<h2>Primeport Tmaru</h2>
<hr />
<h2>Port Otago</h2>
<hr />
<h2>Southport</h2>
<hr />
</div>
</div>
</div>
</div>
</section>
<section class="auckland data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port Information</h2>
<p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p>
<p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p>
<p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the
handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p>
</div>
<div class="col-md-4">
<h2>Features</h2>
<p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p>
<p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical
industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p>
</div>
<div class="col-md-4">
<hr />
<img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" />
</div>
</div>
</div>
</div>
</section>
<section class="tauranga data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port Tauranga</h2>
<p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p>
<p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p>
<p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the
handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p>
</div>
<div class="col-md-4">
<h2>Features</h2>
<p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p>
<p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical
industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p>
</div>
<div class="col-md-4">
<hr />
<img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" />
</div>
</div>
</div>
</div>
</section>
function manageState(hide1,hide2,show){
$(hide1).hide();
$(show).show();
$(hide2).hide();
}
Make a method that takes in two fields to hide and one to show. Pass in the specific classes for each condition. This works since you seem to be hiding in paris and showing a single item.
Example:
manageState('.all','.auckland','.tauranga')
Related
I've implemented this cool 3d slider but don't know how to add autoplay to cycle through the slides. Any suggestions? Here is the link to the codepen below. I've included some of the HTML snippets but not the any of the CSS or javascript because I couldn't get it to format properly.
https://codepen.io/paulnoble/pen/yVyQxv
<div class="carousel">
<div class="carousel__control">
</div>
<div class="carousel__stage">
<div class="spinner spinner--left">
<div class="spinner__face js-active" data-bg="#27323c">
<div class="content" data-type="iceland">
<div class="content__left">
<h1>ICELAND<br><span>EUROPE</span></h1>
</div>
<div class="content__right">
<div class="content__main">
<p>“As I flew north to begin my third circuit of Iceland in four years, I was slightly anxious. The number of visitors to Iceland has doubled in that period, and I feared this might mean a little less magic to go around. At the end of this trip, 6000km later, I'm thrilled to report that the magic levels remain high. It's found in glorious football victories and Viking chants, kayaking among icebergs, sitting with puffins under the midnight sun and crunching across brand-new lava fields.” </p>
<p>– Carolyn Bain</p>
</div>
<h3 class="content__index">01</h3>
</div>
</div>
</div>
<div class="spinner__face" data-bg="#19304a">
<div class="content" data-type="china">
<div class="content__left">
<h1>CHINA<br><span>ASIA</span></h1>
</div>
<div class="content__right">
<div class="content__main">
<p>“Its modern face is dazzling, but China is no one-trick pony. The world's oldest continuous civilisation isn't all smoked glass and brushed aluminium and while you won't be tripping over artefacts – three decades of round-the-clock development and rash town-planning have taken their toll – rich seams of antiquity await.”</p>
<p>– Damian Harper</p>
</div>
<h3 class="content__index">02</h3>
</div>
</div>
</div>
<div class="spinner__face" data-bg="#2b2533">
<div class="content" data-type="usa">
<div class="content__left">
<h1>USA<br><span>NORTH AMERICA</span></h1>
</div>
<div class="content__right">
<div class="content__main">
<p>“When it comes to travel, America has always floored me with its staggering range of possibilities. Not many other countries have so much natural beauty – mountains, beaches, rainforest, deserts, canyons, glaciers – coupled with fascinating cities to explore, an unrivaled music scene and all the things that make travel so rewarding (friendly locals, great restaurants and farmers markets, and plenty of quirky surprises).” </p>
<p>– Regis St Louis</p>
</div>
<h3 class="content__index">03</h3>
</div>
</div>
</div>
</div>
This will enable autoplay but also allow you to jump indexes and continue autoplay from that whatever index you're on
const autoplay = () => {
const max = $controls.length;
setInterval(() => {
// use the internal activeIndex to track
$controls.eq(activeIndex).next().click();
if(activeIndex + 1 === max){
$controls.eq(0).click();
}
}, 3000);
}
const init = () => {
assignEls()
prepareDom()
attachListeners()
autoplay()
}
DEMO
Just call the spin() function inside an interval.
setInterval(spin, 3000);
Place this after the call to init() at the bottom of the code on CodePen.
Hi Everyone,
I have a main menu navigation that has secondary links to a page with anchor links that open up content below it using smoothScroll. I’ve been able to get the anchor links on the page to highlight after being selected and the secondary links in the main menu nav to go to the correct content, but if I select one of the secondary links from the main navigation [under 'Betts Lake'] the anchor link image [e.g. Image of House and name of house type Crane, Heron, Peregrine, Redtail] either doesn’t highlight or shows the highlight on the secondary link in the main menu nav of the "Betts Lake" dropdown. I’m sure I’m missing something simple but I can’t see it. c1992.paas2.tx.modxcloud.com/index.php?id=6
This is my jQuery:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$('#layoutbg a,.navnew2 ul li a').click(function(){
$('#layoutbg a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Colorado Golf Club - Betts Lake</title>
<meta name="description" content="Meta Description Placeholder">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/fonts/MyFontsWebfontsKit.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<style>
#bettsactive .options:not(:target) {display: none;}
#bettsactive .options:target {display: block; outline: none;}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="u-max-full-width" id="topheader">
<div class="container">
<div class="row">
<p id="location">Parker, Colorado | 303 840 5400 <img src="assets/images/mail.png" alt="email" id="mail">
</p>
</div>
</div>
</div>
<div class="u-max-full-width">
Colorado Golf Club
<div class="container">
<div class="row">
<div class="nav">
<div class="twelve columns" id="bettsnav">
<ul class="topnav" id="topnav">
<li class="searchnewtop">
<form class="sisea-search-form" action="index.php?id=8" method="post" name="searchform" id="searchform">
<fieldset>
<input type="text" name="search" id="search" value="" placeholder=""/>
<button class="icon-search" type="submit"></button>
</fieldset>
</form>
</li>
<li class="navnewspace"> </li>
<li class="navnew1">CUSTOM HOME SITES</li>
<li class="navnew2">BETTS LAKE
<ul>
<li>CRANE</li>
<li>REDTAIL</li>
<li>PEREGRINE</li>
<li>HERON</li>
</ul>
</li>
<li class="navnew3">COLORADO GOLF CLUB LIVING
<ul>
<li>IMAGE GALLERY</li>
<li>COMMUNITY MAP</li>
</ul>
</li>
<li class="navnew4">ABOUT
<ul>
<li>IMAGE GALLERY</li>
<li>COMMUNITY MAP</li>
</ul>
</li>
<li class="searchnew">
<form class="sisea-search-form" action="index.php?id=8" method="post" name="searchform" id="searchform">
<fieldset>
<input type="text" name="search" id="search" value="" placeholder=""/>
<button class="icon-search" type="submit"></button>
</fieldset>
</form>
</li>
<li class="icon">
<b>☰</b>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="u-max-full-width" id="videotop">
<div class="row">
<div class="twelve columns" id="video">
<div id="bettsbannertop">
<img src="assets/images/betts-cover.jpg" style="width:100%;" alt="Betts Lake - Colorado Golf Club">
</div>
</div>
</div>
<div class="u-max-full-width">
<div class="container">
<div class="row">
<div class="twelve columns" id="custombodytop">
<h2>Custom Appointed Luxury Homes at Betts Lake</h2>
<p>Combine the new trend in luxury living with smaller, more efficient homes for a lock-and-leave lifestyle. Colorado Golf Club's custom-appointed homes sit on half- to one-acre lots surrounding Betts Lake. </p><p>Choose from four floor plans, all featuring comfortable main living, spacious lower levels, and outdoor rooms, decks, and patios. All within the gates of one of America's most acclaimed golf communities. <br> </p> <p>Award-winning architect Karen Keating of TKP Architects has combined all the hallmarks of fine living—richly appointed spaces for everyday life, and modern amenities for entertaining guests. A smaller footprint with numerous design configuration options allows for a luxurious yet low-maintenance lifestyle.</p> <p>Homes start at $1,080,000 and range from 2,648 to 4,308 square feet.</p>
</div>
</div>
</div>
<div class="u-max-full-width" id="bettsbodytopbottom">
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve columns" id="homebody">
<h3 id="featuredprop">CHOOSE A HOME PLAN</h3>
</div>
</div>
</div>
<div class="u-max-full-width">
<div class="container" id="bettsboxes">
<div class="row">
<div class="three columns">
<span id="layoutbg" class="option1"><img src="assets/images/crane.jpg" alt="Betts Lake Home Layout 1" style="width:100%;background-color:transparent;" /><span id="homelayout1text"><h3>Crane</h3></span><span id="homelayout1bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option2"><img src="assets/images/redtail.jpg" alt="Betts Lake Home Layout 2" style="width:100%;background-color:transparent;" /><span id="homelayout2text"><h3>Redtail</h3></span><span id="homelayout2bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option3"><img src="assets/images/peregrine.jpg" alt="Betts Lake Home Layout 3" style="width:100%;background-color:transparent;" /><span id="homelayout3text"><h3>Peregrine</h3></span><span id="homelayout3bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option4"><img src="assets/images/heron.jpg" alt="Betts Lake Home Layout 4" style="width:100%;background-color:transparent;" /><span id="homelayout4text"><h3>Heron</h3></span><span id="homelayout4bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></span>
</div>
</div>
</div>
<div class="row">
<div id="bettsactive">
<div id="option1" class="options">
<span id="betts1image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts1"><h3>THE CRANE</h3>
<p>The Crane home features a dynamic floor plan that allows you to create the perfect setting for both private living and exquisite entertaining. The central entryway divides the private master suite and study from the active living areas, with beautiful views and inviting outdoor spaces. An open interior accommodates a lifetime’s worth of furniture, art and kitchenware. The lower level provides a vast entertaining space or multiple bedroom suites for friends and family. You have the flexibility to customize your home for your lifestyle. </p></span>
<span id="betts1specs"><h5>FEATURES</h5>
<p>3,582 to 4,243 square feet</p> <p>3 to 5 Bedrooms</p> <p>3 to 7 Bathrooms</p> <p>3- to 4-Car Garage</p> <p>From $1,340,000 </p></span></span>
<span id="bettslayout"><span id="betts1image2a"><img src="assets/images/crane_lower_2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts1image2b"><img src="assets/images/crane_main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 1 -->
<div id="option2" class="options">
<span id="betts2image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts2"><h3>THE REDTAIL</h3>
<p>The Redtail design is for those who have an appetite for alternatives and finishes. With an optional upper level and a range of configurations on the main and lower levels, this home can become the perfect empty-nester ranch, a six- or seven-bedroom home suitable for a young family, or a second home accommodating multiple couples and guest parties. A casita option allows for a guesthouse or an apartment for in-laws or grown children. Entertain with a formal dining room or enjoy the intimacy of a breakfast nook just off the kitchen. Covered and uncovered deck spaces maximize outdoor living.</p></span>
<span id="betts2specs"><h5>FEATURES</h5>
<p>3,210 to 4,456 square feet</p> <p>3 to 6 Bedrooms</p> <p>3 to 7 Bathrooms</p> <p>2- to 4-Car Garage</p> <p>From $1,190,000</p>
</span></span>
<span id="bettslayout"><span id="betts2image2a"><img src="assets/images/redtail_lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts2image2b"><img src="assets/images/redtail_main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end options2 -->
<div id="option3" class="options">
<span id="betts3image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts3"><h3>THE PEREGRINE</h3>
<p>Designed for casual living, the Peregrine home opens with a dynamic entry space that showcases the open interior and outdoor rooms. Natural light streams from all directions, creating an alluring sense of space. This home is perfect for entertaining friends while allowing for serenity and privacy in the main floor master suite. The lower level offers an easy flow to the outdoors and a flexible space for incorporating entertaining areas and guest rooms.</p></span>
<span id="betts3specs"><h5>FEATURES</h5>
<p>3,482 to 3,590 square feet</p> <p>3 to 5 Bedrooms</p> <p>3 to 4 Bathrooms</p> <p>3- to 4-Car Garage</p> <p>From $1,260,000</p><p>The Peregrine offers endless choices for customizing your home, from additional bedroom suites to outdoor entertainment areas. Contact us for more information about custom features at Betts Lake. <br></p>
</span></span>
<span id="bettslayout"><span id="betts3image2a"><img src="assets/images/peregrine-lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts3image2b"><img src="assets/images/peregrine-main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 3 -->
<div id="option4" class="options">
<span id="betts4image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts4"><h3>THE HERON</h3>
<p>The Heron is the most compact of the Betts Lake home designs. Efficient and well organized, this design maximizes all the interior and external spaces to create comfortable living spaces and relaxation. Windows and long, diagonal view corridors fill the interior with natural light and an expansive feel. A comfortable and private study provides space for work and reflection, and lower level finish options allow you to integrate guest rooms or entertaining spaces.</p></span>
<span id="betts4specs"><h5>FEATURES</h5>
<p>2,965 to 3,300 square feet</p><p>2 to 4 bedrooms</p><p>3 to 4 bathrooms</p><p>3- to 4-car garage</p><p>From $1,080,000</p><p>The Heron offers endless choices for customizing your home, from additional bedroom suites to outdoor entertainment areas. Contact us for more information about custom features at Betts Lake. </p></span></span>
<span id="bettslayout"><span id="betts4image2a"><img src="assets/images/heron-lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts4image2b"><img src="assets/images/heron-main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 4 -->
</div>
</div>
<div id="bettsseo">
<div class="container">
<div class="row">
<h4>Design Center</h4>
<p>Exceptional design is high priority at Betts Lake at Colorado Golf Club, and with our onsite design center, homeowners can plan their dream home and personalize their interiors easily and conveniently. </p><p>The design center is stocked with the most current finishes, including options for tile, carpet, hardwood, lighting, plumbing, millwork, hardware, and more. Available luxury brand names include Sub-Zero, Wolf, Tharpe, Brizo, Kohler, Glazzio and Hubbardton Forge. Our design coordinator will facilitate an easy design process with options that reflect the latest trends as well as timeless classics and impeccable quality. </p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="five columns" id="bettsbottomseo">
<h4>Lakeside Living</h4>
<p>Within the gates one of America’s most acclaimed golf communities, you’ll discover a country-club lifestyle complete with lakeside homes, meandering paths, abundant wildlife, and dramatic mountain views. Choose from four floor plans, all featuring comfortable main level living, spacious lower levels, and outdoor rooms, decks, and patios.</p>
<p> </p>
</div>
<div class="seven columns" id="bettsbottomseo">
<img src="assets/images/betts_map_160912.png" alt="Betts Lake Lot Premiums" style="width:100%;" />
</div>
</div>
</div>
<div> </div>
<div id="footer">
<div class="container">
<div class="row">
<div class="twelve columns">
<div class="social">
<ul>
<li><img src="assets/images/facebook.png"></li>
<li><img src="assets/images/instagram.png"></li>
<li><img src="assets/images/twitter.png"></li>
<li><img src="assets/images/vimeo.png"></li>
<li><img src="assets/images/google%2B.png"></li>
</ul>
</div>
<div class="policy">
<ul>
<li>Terms</li>|
<li>Privacy Policy</li>|
<li>Contact</li>
</ul>
</div>
<p>©2016, Colorado Golf Club</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$('#layoutbg a,.navnew2 ul li a').click(function(){
$('#layoutbg a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<script>
function myFunction() {
var x = document.getElementById("topnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Any help or assistance you can provide would be so greatly appreciated!
I am having an issue of my webpage flickering/blinking randomly, this happens in chrome, I have not yet tested other browsers.
I figured that this issue should be due to bootstrap.js & jQuery.js conflict because if I remove one of these then it does not blink no more, it doesn't matter which one I remove.
I tryed to use the jquery-noConflict() method but either I don't know how to use it properly or it did not wok for me.
But removing both any of them is not an option because some of the websites features are not working then.
I have recorded how it looks while it flickers:
removed
It is hard for me to describe the problem when I am limited to uploading images and links as I am a new member of stackoverflow, as I can only post 2 links, I'll post the link of the website, so if anybody can help me they can look over the source code there freely - http://removed
I am using jquery-1.11.0.min.js and bootstrap.min.js
This is one of the blocks that flickers:
<section id="privalumai" class="container">
<div class="row">
<div class="col-md-12 title">
<h2>Privalumai</h2>
<span class="underline"> </span>
</div>
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Draudimas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra apdraustos tiek KASKO, tiek privalomuoju ( TPVCA ) draudimu. Kasko draudimo galiojimo teritorija – geografinė Europa, o TPVCA – „žaliosios kortelės“ sistemos ribose.
Jums pageidaujant, galime pasiÅ«lyti ir vykstanÄių į užsienį kompleksinį kelionÄ—s draudimÄ… ( pvz. vykstant slidinÄ—ti ir pan.)<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Mobilumas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra naujos ir yra aprūpintos tiek pilna gamintojo garantija, tiek techninės pagalbos kelyje paslauga, todėl tiek avarijos ar techninio gedimo atveju Jums bus suteiktas pakaitinis automobilis ir pasirūpinta Jūsų kelionės pratęsimu.<br/><br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Neribotas kilometrų kiekis</h3>
<div class="clearfix"></div>
<p class="service-content">Mes suprantame savo klientų poreikius, todėl neribojame jų nuvažiuoto kilometrų kiekio.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Nauji automobiliai</h3>
<div class="clearfix"></div>
<p class="service-content">Mūsų transporto priemonės yra naujos ir sukomplektuotos taip, kad Jums būtų patogu ir lengva keliauti.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
</div>
</section>
I am really lost here and now sure how would I go about fixing this. I would really appreciate if somebody would point me at the right direction. If there aren't enough resources or anything else please comment and I will supply them and reply to all of your answers!
Does adding this to your flickering element solve it?
.flickeringElementFix {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
It could be that there's some element manipulation going on in one or both of your scripts that are arguing
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
I have the following JSON Object in my javascript:
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Problem of the Week(PoW)",
"What": "PoWs are complex problems.",
"When": "PoWs should be administered once per month.",
"How": "1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up"
},
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Problem of the Month (POM)",
"What": "The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up.",
"When": "Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. ",
"How": "Write them on a pieces of paper."
},
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Formative Assessment Lesson (FAL)",
"What": "FALs consist of 3 parts including a pre-assessment (approximately 15 min.",
"When": "The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study.",
"How": "1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment."
},
{
"IG":"Problem Solving", "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Mathematics Assessment Resources (MARS)",
"What": "Story Problems.",
"When": "Done at the begining of the unit.",
"How": "After each asssessment." }
]
$('body').append(template(igListOrig));
And I want to iterate over this object so only when it iterates over the 2nd, 3rd, and 4th object I get a different "IP", "What", "When", and "How" each time AND ignore all the duplicities. After each of the iterations only the "IP", "What", "When", and "How" are different. I need to keep these differences and ignore other other duplicates.
I referenced something like this but I think this person's situation was a little different.
Iterating over a JSON-Object
Eventually this will go in a handlebars template like this
<script id="template" type="text/x-handlebars-template">
<div class="container">
{{#each this }}
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> {{IP}} </h3> </center> </br>
<p><span class="description">What</span> {{What}} </p></br>
<p><span class="description">When</span> {{When}} </p></br>
<p><span class="description">How</span> {{How}} </p></br>
</div>
</div>
{{/each}}
</div>
</script>
Eventually, the "IP", "What", "When", and "How" will look something like this near the bottom half of the document under the heading "Process"
http://imgur.com/rV4PIFC
Here is the JS Fiddle I'm working with:
http://jsfiddle.net/rr9Vz/
UPDATE
I just tried something like this
var ips = [];
for(var i in igListOrig) {
var ip = igListOrig[i].IP + igListOrig[i].What + igListOrig[i].When +
igListOrig[i].How ;
if($.inArray(ip,ips)== -1 ){
ips.push(ip);
}
}
And I get the array that I need, but now how do I pass my templating AND this iteration through in handlebars?
UPDATE 2
For all intents and purposes the <div class='bottom-container text> needs to look like this when Handlebars compiles.
<script id="template" type="text/x-handlebars-template">
<div class="container">
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Problem Solving</h3> </center> </br>
<p><span class="description">What</span> PoWs are complex problems. </p></br>
<p><span class="description">When</span> PoWs should be administered once per month. </p></br>
<p><span class="description">How</span> 1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up</p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Problem of the Month (POM) </h3> </center> </br>
<p><span class="description">What</span> The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up. </p></br>
<p><span class="description">When</span> Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. </p></br>
<p><span class="description">How</span> Write them on a pieces of paper. </p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Formative Assessment Lesson (FAL) </h3> </center> </br>
<p><span class="description">What</span> FALs consist of 3 parts including a pre-assessment (approximately 15 min. </p></br>
<p><span class="description">When</span> The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study. </p></br>
<p><span class="description">How</span> 1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment. </p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Mathematics Assessment Resources (MARS)</h3> </center> </br>
<p><span class="description">What</span> Story Problems. </p></br>
<p><span class="description">When</span> Done at the begining of the unit. </p></br>
<p><span class="description">How</span> After each asssessment. </p></br>
</div>
</div>
</div>
I want this: http://jsfiddle.net/8Xnpk/1/
but I'm getting this: http://jsfiddle.net/rr9Vz/3/
#MarcoCl's solution works in terms of code execution, but for whatever eason I can't seem to get this http://jsfiddle.net/8Xnpk/1/
In order to avoid duplicates, use a dictionary instead of an array: this speed up the duplicate lookup and it won't hurt your current code.
function filterDuplicates(array){
// this will hold the new filtered dictionary
var uniqArray = [],
// this is used for the lookup
dupCheck = {};
for( var i=0; i< array.length; i++){
var entry = array[i];
var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
if(!dupCheck[uniqueKey]){
// here there are only unique values
dupCheck[uniqueKey] = true;
uniqArray.push(entry);
}
}
return uniqArray;
}
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];
$('body').append(template(filterDuplicates(igListOrig)));
As alternative you can integrate the filterDuplicates logic in a custom Handlebar helper.
Replace the {{#each this}} tag with the custom {{€#eachUnique this}} one:
<script id="template" type="text/x-handlebars-template">
<div class="container">
{{#eachUnique this}}
...
{{/eachUnique}}
</div>
</script>
Then register the new helper:
Handlebars.registerHelper('eachUnique', function(array, options) {
// this is used for the lookup
var dupCheck = {};
// template buffer
var buffer = '';
for( var i=0; i< array.length; i++){
var entry = array[i];
var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
// check if the entry has been added already
if(!dupCheck[uniqueKey]){
// here there are only unique values
dupCheck[uniqueKey] = true;
// add this in the template
buffer += options.fn(entry);
}
}
// return the template compiled
return buffer;
});
Update 2
The problem changed a bit from the original one - it was only about removing duplicates from a list and it became a more template-related question...
I'll leave the duplicate answer and add this other one for the second update:
Preprocess your data to remove the common data:
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];
var newModel = {
'IG': igListOrig[0].IG,
'AIR_Indicators': igListOrig[0].AIR_Indicators,
'SMP': igListOrig[0].SMP,
'Purpose':igListOrig[0].Purpose ,
entries: igListOrig
};
$('body').append(template(newModel));
The new template will look like this one:
<script id="template" type="text/x-handlebars-template">
<div class="container">
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
// use eachUnique here instead of each to avoid duplicates
{{eachUnique items}}
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3>{{IP}}</h3> </center> </br>
<p><span class="description">What</span> {{What}} </p></br>
<p><span class="description">When</span> {{When}}</p></br>
<p><span class="description">How</span> {{How}}</p></br>
</div>
{{/eachUnique}}
</div>
</div>
</script>
I have implemented some javascript within my site but it only seems to work when you click on certain li's and not on others [Specialities, Contact Us & Referral Schemes not working as they should]
http://global-markets-recruitment.com/test/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/scripts.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.accordian.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contentGallery').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<div id="header">
<div id="logo">
<h1>
Global Markets Recruitment</h1>
</div>
<div id="nav">
<ul>
<li class="end"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear">
</div>
</div>
<div id="navPointer">
<div id="controlContainer">
<div id="pointer">
</div>
</div>
</div>
</div>
<div id="contentHolder">
<div id="contentGallery">
<img src="Images/Gallery/london.jpg" width="1200" height="550" alt="London" />
<img src="Images/Gallery/singapore.jpg" style="display: none;" width="1200" height="550"
alt="Singapore" />
<img src="Images/Gallery/geneva.jpg" style="display: none;" width="1200" height="550"
alt="Geneva" />
</div>
<div id="contentShadow">
</div>
<div id="content">
<div id="contentScroller">
<div id="home" class="page">
<div class="homeContent">
<span class="homeHeaderText">GMR</span>
<div class="clear">
</div>
<div class="homePageText">
<p>
Global Markets Recruitment is an expert in financial recruitment.
</p>
<p>Through leveraging our extensive networks and combining this with the latest recruitment practices, credibility and professionalism we find our strategic clients the most capable and intelligent candidates throughout Europe, the United States, Asia and the Middle East.
</p>
</div>
</div>
</div>
<div id="artScience" class="page">
<div class="pageContent">
<span class="headerText">About Us</span>
<div class="pageText">
<a class="acc_trigger_3" href="#">About Global Markets Recruitment</a>
<div class="acc_container">
<p>
Our philosophy is simple, we stick to our strengths. We understand where and how we can make a difference. We ensure that before engaging with your organisation and the assignment we appreciate how this relates to both the long and short term value of your business and our role in achieving this.
The approach is not just professional, but personal. We employ both empathy and understanding into the recruitment process. This can only be done by gaining a thorough understanding through face-face meetings with both clients and candidates, allowing us to appreciate their unique aspirations and exacting criteria.</p>
</div>
<div class="seperator">
</div>
<a class="acc_trigger_3" href="#">Clients</a>
<div class="acc_container">
<p>
When working with a company, we employ a very rigorous approach. Our selection process consists of screening a pool of qualified candidates. We identify applicants from various sources based on systematic research and the Global Markets Recruitment database, through which we would entirely map the market of potential candidates in various institutions across the globe. We would also utilise our extensive professional networks and relationships, complemented with our vast experience in the recruitment space. This approach saves you a great deal of time by restricting the number of candidates you consider.
When approaching a potential candidate they are approached in the most discrete, confidential and at the same time compelling way, also taking into account their plausible concerns in relation to the career opportunity at hand.</p>
</div>
<div class="seperator">
</div>
<a class="acc_trigger_3" href="#">Candidates</a>
<div class="acc_container">
<p>In turn we offer candidates that work with us intellectually challenging and financially rewarding positions with the most dynamic, and ambitious organisations throughout Europe, the United States, Asia and the Middle East.</p>
</div>
</div>
</div>
</div>
<div id="context" class="page">
<div class="pageContent">
<span class="headerText">Approach</span>
<div class="pageText">
During the identification phase we would have first introductory telephone interviews.</p>
<p>During the selection phase we shall conduct personal and detailed interviews with motivated and rigorously qualified candidates.</p>
<p>This would ultimately result in the shortlist of applicants who on the basis of the defined job specification qualify for the position. They should meet the profile requirements to a large extent and should, in meetings with you, make the impression of being outstanding candidates, willing to accept the role on offer. Candidates will be presented by means of standardised curriculum vitae, detailed confidential report including all base salary, bonus and benefits.</p>
<p>Finally, we would assist at the offer stage and with the integration of the successful candidate into the client.</p>
</div>
</div>
</div>
<div id="contact" class="page">
<div class="pageContent">
<span class="headerText">Expertise</span>
<div class="pageText">
Content coming soon
</div>
</div>
</div>
<div id="specialities" class="page">
<div class="pageContent">
<span class="headerText">Specialities</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
<div id="contactus" class="page">
<div class="pageContent">
<span class="headerText">Contact Us</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
<div id="referral" class="page">
<div class="pageContent">
<span class="headerText">Referral</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
</div>
</div>
<div id="main">
<div id="footerNav">
<ul>
<li class="start">Home</li>
<li>About Us</li>
<li>Approach</li>
<li>Expertise</li>
<li>Specialities</li>
<li>Contact Us</li>
<li>Referral Scheme</li>
</ul>
</div>
I have edited scripts.js but that still doesn't seem to fix the problem
Tim is right, but in addition to that, the three functions are never actually called.
In scripts.js, you set up the links to call gotoSpecialities, gotoContactUs and gotoReferral on click. But there are two functions with each of those names in the same scope - meaning the one defined last will replace the earlier one. I.e., for gotoReferral, this will be called:
function gotoReferral() {
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
return false;
}
... rather than this:
function gotoReferral() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}
Your scripts.js file has these functions that get called when a user clicks on a link in the nav, but they all contain scrollTo($('#context') instead of the id of the content you would like to show. Looks like they were copied and pasted from the gotoContext() function and not changed. Keep in mind the H1 tag text is not updated here as well.
function gotoSpecialities() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-2940px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(643px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}
function gotoContactUs() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-3920px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(867px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}
function gotoReferral() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}