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!
Related
I trying to get an object from Firebase database using axios, and when I getting data from it,I want to assign to my users array in vue data object.
when i console.log this.users ,it has value, but when I trying print in DoM , its shows empty array.I try vm.$forceUpdate() ,so thinking maybe,it's just DoM,not getting updated.But it doesn't work.Thanks in advance for help.
var SeptCoh = [
{
name: 'Example Name',
description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact',
photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg',
learningjournal: 'http://yourplunkhere.smth',
},
];
var app = new Vue({
el: '#app',
data: {
user:{
name:'',
description:'',
photourl:'',
learningjournal:''
},
users:[],
cohort:SeptCoh,
},
methods:{
//Posting data to Firebase
submit(){
axios.post('https://september-cohort.firebaseio.com/users.json', this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
//fetching data from Firebase
fetchData(){
axios.get('https://september-cohort.firebaseio.com/users.json').then(function (response) {
// console.log(response.data);
// this.users = response.data;
// console.log(this.users);
const resultArray = [];
for(let key in response.data){
resultArray.push(response.data[key]);
}
this.users = resultArray;
console.log(this.users);
})
.catch(function (error) {
console.log(error);
});
},
},
//Triggering fetching method.
created(){
this.fetchData();
},
//watching for changes in users array
watch:{
users:function(){
var vm = this;
setTimeout(vm.$forceUpdate(),1000);
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>SEPCO: Elium September Cohort Page</title>
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pimg">
<div class="ui two column centered grid">
<h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
</div>
</div>
<div class='ui container'>
<br>
<br> <br>
<h2 class="ui center aligned header">Welcome</h2>
<p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
<i>Our clan name on codewars.com: SEPCO</i>
<div id='countdown'>
<!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
</div>
<hr>
<h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2>
<hr>
<ol class="ui list">
<li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
<li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
<ol>
<li>Suggestion Flo: paste link here?</li>
</ol>
</li>
<li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li>
<li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
<ol>
<li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
<li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
</ol>
</li>
<li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
</ol>
<h2 class="ui grey center aligned header">Shared Milestones</h2>
We want to get the following done by September 10th.
<ul>
<li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li>
<li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li>
<li>REVISIT first week of August: Basic HTML</li>
<li>REVISIT first week of August: Basic CSS</li>
<li>REVISIT first week of August: GIT</li>
</ul> <br>
[this section needs more love]
<h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)
<br> <br>
<!-- loop and create Info card Using Vue.js -->
<div id="app"> <!--Starting vue instance here-->
<div class="ui link cards">
<div v-for="people in cohort">
<div class="ui card">
<div class="image">
<img :src="people.photourl">
</div>
<div class="content">
<div class="header">{{people.name}}</div>
<div class="description">
<p>{{people.description}}</p>
</div>
<br>
<div class="extra content">
<span class="left floated">
<i class="arrow down icon"></i>
<a :href="people.learningjournal">Plunker</a>
</span>
</div>
</div>
</div>
</div>
</div>
<br>
{{users}}
<br><br><br>
<!-- Form for making users cards -->
<form class="ui form">
<div class="field">
<label>First/Last-Name:</label>
<input type="text" v-model="user.name" placeholder="First/Last Name">
</div>
<div class="field">
<label>Description of You:</label>
<textarea v-model="user.description"></textarea>
</div>
<div class="field">
<label>Picture Url:</label>
<input type="text" v-model="user.photourl" placeholder="Picture Url">
</div>
<div class="field">
<label>Plunker Url:</label>
<input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
</div>
<button class="ui button" #click.prevent="submit">Submit</button>
</form
</div> <!--end of vue instance-->
<div id="footer"><hr></div>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="client.js"></script>
</div>
</body>
</html>
At your fetchData method, before call ajax, get an instance from this, then use that instance in your ajax body! also you don't need to watch users. it's binded. you can see below:
var SeptCoh = [
{
name: 'Example Name',
description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact',
photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg',
learningjournal: 'http://yourplunkhere.smth',
},
];
var app = new Vue({
el: '#app',
data: {
user:{
name:'',
description:'',
photourl:'',
learningjournal:''
},
users:[],
cohort:SeptCoh,
},
methods:{
//Posting data to Firebase
submit(){
axios.post('https://september-cohort.firebaseio.com/users.json', this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
//fetching data from Firebase
fetchData(){
var vm = this;
axios.get('https://september-cohort.firebaseio.com/users.json').then(function (response) {
// console.log(response.data);
// this.users = response.data;
// console.log(this.users);
for(let key in response.data){
vm.users.push(response.data[key]);
}
console.log(vm.users);
})
.catch(function (error) {
console.log(error);
});
},
},
//Triggering fetching method.
created(){
this.fetchData();
},
//watching for changes in users array
watch:{
}
});
<!DOCTYPE html>
<html>
<head>
<title>SEPCO: Elium September Cohort Page</title>
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pimg">
<div class="ui two column centered grid">
<h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
</div>
</div>
<div class='ui container'>
<br>
<br> <br>
<h2 class="ui center aligned header">Welcome</h2>
<p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
<i>Our clan name on codewars.com: SEPCO</i>
<div id='countdown'>
<!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
</div>
<hr>
<h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2>
<hr>
<ol class="ui list">
<li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
<li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
<ol>
<li>Suggestion Flo: paste link here?</li>
</ol>
</li>
<li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li>
<li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
<ol>
<li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
<li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
</ol>
</li>
<li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
</ol>
<h2 class="ui grey center aligned header">Shared Milestones</h2>
We want to get the following done by September 10th.
<ul>
<li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li>
<li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li>
<li>REVISIT first week of August: Basic HTML</li>
<li>REVISIT first week of August: Basic CSS</li>
<li>REVISIT first week of August: GIT</li>
</ul> <br>
[this section needs more love]
<h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)
<br> <br>
<!-- loop and create Info card Using Vue.js -->
<div id="app"> <!--Starting vue instance here-->
<div class="ui link cards">
<div v-for="people in cohort">
<div class="ui card">
<div class="image">
<img :src="people.photourl">
</div>
<div class="content">
<div class="header">{{people.name}}</div>
<div class="description">
<p>{{people.description}}</p>
</div>
<br>
<div class="extra content">
<span class="left floated">
<i class="arrow down icon"></i>
<a :href="people.learningjournal">Plunker</a>
</span>
</div>
</div>
</div>
</div>
</div>
<br>
{{users}}
<br><br><br>
<!-- Form for making users cards -->
<form class="ui form">
<div class="field">
<label>First/Last-Name:</label>
<input type="text" v-model="user.name" placeholder="First/Last Name">
</div>
<div class="field">
<label>Description of You:</label>
<textarea v-model="user.description"></textarea>
</div>
<div class="field">
<label>Picture Url:</label>
<input type="text" v-model="user.photourl" placeholder="Picture Url">
</div>
<div class="field">
<label>Plunker Url:</label>
<input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
</div>
<button class="ui button" #click.prevent="submit">Submit</button>
</form
</div> <!--end of vue instance-->
<div id="footer"><hr></div>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="client.js"></script>
</div>
</body>
</html>
Ok, your issues are fixed in this updated snippet.
When your fetch users request is done, the response was assigned to users array while your DOM was pointing to cohort instead. Look at this <div v-for="people in cohort">.
I guess using mounted instead of created is better. Also you don't have to force Vue to re-render.
var SeptCoh = [
{
name: 'Example Name',
description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact',
photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg',
learningjournal: 'http://yourplunkhere.smth',
},
];
var app = new Vue({
el: '#app',
data: {
user:{
name:'',
description:'',
photourl:'',
learningjournal:''
},
users:[],
cohort: SeptCoh,
},
methods:{
//Posting data to Firebase
submit(){
axios.post('https://september-cohort.firebaseio.com/users.json', this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
//fetching data from Firebase
fetchData(){
axios.get('https://september-cohort.firebaseio.com/users.json').then(response => {
// console.log(response.data);
// this.users = response.data;
// console.log(this.users);
const resultArray = [];
for(let key in response.data){
resultArray.push(response.data[key]);
}
this.users = resultArray;
console.log(this.users);
})
.catch(function (error) {
console.log(error);
});
},
},
//Triggering fetching method.
mounted(){
this.fetchData();
},
//watching for changes in users array
watch:{
users:function(){
var vm = this;
//setTimeout(vm.$forceUpdate(),1000);
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>SEPCO: Elium September Cohort Page</title>
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pimg">
<div class="ui two column centered grid">
<h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
</div>
</div>
<div class='ui container'>
<br>
<br> <br>
<h2 class="ui center aligned header">Welcome</h2>
<p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
<i>Our clan name on codewars.com: SEPCO</i>
<div id='countdown'>
<!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
</div>
<hr>
<h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2>
<hr>
<ol class="ui list">
<li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
<li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
<ol>
<li>Suggestion Flo: paste link here?</li>
</ol>
</li>
<li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li>
<li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
<ol>
<li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
<li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
</ol>
</li>
<li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
</ol>
<h2 class="ui grey center aligned header">Shared Milestones</h2>
We want to get the following done by September 10th.
<ul>
<li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li>
<li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li>
<li>REVISIT first week of August: Basic HTML</li>
<li>REVISIT first week of August: Basic CSS</li>
<li>REVISIT first week of August: GIT</li>
</ul> <br>
[this section needs more love]
<h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)
<br> <br>
<!-- loop and create Info card Using Vue.js -->
<div id="app"> <!--Starting vue instance here-->
<div class="ui link cards">
<div v-for="people in users">
<div class="ui card">
<div class="image">
<img :src="people.photourl">
</div>
<div class="content">
<div class="header">{{people.name}}</div>
<div class="description">
<p>{{people.description}}</p>
</div>
<br>
<div class="extra content">
<span class="left floated">
<i class="arrow down icon"></i>
<a :href="people.learningjournal">Plunker</a>
</span>
</div>
</div>
</div>
</div>
</div>
<br>
{{users}}
<br><br><br>
<!-- Form for making users cards -->
<form class="ui form">
<div class="field">
<label>First/Last-Name:</label>
<input type="text" v-model="user.name" placeholder="First/Last Name">
</div>
<div class="field">
<label>Description of You:</label>
<textarea v-model="user.description"></textarea>
</div>
<div class="field">
<label>Picture Url:</label>
<input type="text" v-model="user.photourl" placeholder="Picture Url">
</div>
<div class="field">
<label>Plunker Url:</label>
<input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
</div>
<button class="ui button" #click.prevent="submit">Submit</button>
</form
</div> <!--end of vue instance-->
<div id="footer"><hr></div>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="client.js"></script>
</div>
</body>
</html>
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')
I'm kind of new to jQuery Mobile and AJAX requests. I'll try to be as clear as I can.
I'm developing a project for mobile and I'm using the jQuery Mobile auto-complete list, and populating it with an XML file (because it's too complicated for me to do it with a MySQL database right now).
I've succeeded in pulling the auto-complete list, filled with data from my external XML file (lista.xml), with this code:
<script>
$(function(){
$.ajax({
type: "GET",
url: "lista.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("anuro").each(function(){
Cientifico = $(this).find("n_cientifico").text();
Comun = $(this).find("n_comun").text();
Foto = $(this).find("foto").text();
Familia = $(this).find("familia").text();
SubFamilia = $(this).find("subfamilia").text();
$("#lista").append('<li><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
});
$("#lista").listview("refresh");
}
});
});
</script>
This is the code in the content part of my page:
<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar..." data-inset="true">
</ul>
This works fine right now. It loads all the data from my XML file, displays the correct picture of the anuro (frog) and the family, and all. My question is:
How can I find out which option of the list is clicked, and populate another page <div> with the correct data from the same XML file?
The idea of the web app is, as a user you search for an anuro (frog) by the scientific name, or by the family of the species, and when you click it the page displays more info about that species.
For another example, I'll paste a sample of what I want to accomplish, filled with sample data:
<!-- PAGINA RESULTADO -->
<div data-role="page" id="resultados">
<div data-role="header" data-position="fixed">
<h1>eFrogs</h1>
<a data-rel="back" data-icon="back" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all">volver</a>
</div>
<div role="main" class="ui-content">
<!-- TITULO -->
<h3><center><i>Phyllomedusa Sauvagii</i></center></h3>
<!-- FOTO -->
<a href="#foto" data-rel="popup" data-position-to="window" data-transition="pop">
<img class="popphoto" style="margin-right:10px" src="img/phyllomedusa_sauvagii.jpg" alt="Phyllomedusa Sauvagii" width="100%"></a>
<div data-role="popup" id="foto" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">
Cerrar
</a>
<img class="popphoto" src="img/phyllomedusa_sauvagii.jpg" style="max-height:512px;" alt="Phyllomedusa Sauvagii">
</div>
<br><br>
<!-- GRILLA DE DATOS -->
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Nombre Común
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Rana Mono
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Familia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Hyllidae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
SubFamilia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Phyllomedusinae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Estado de Conservación
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Least Concern
</div>
</div>
</div>
<!-- DATOS EXTRA -->
<h4 class="ui-bar ui-bar-a">Distribución Geográfica</h4>
<div class="ui-body">
<p>Chacoan region of eastern Bolivia, northern Paraguay, Mato Grosso do Sul (Brazil), and northern Argentina.</p>
<p>Up to 1500 m</p>
</div>
<h4 class="ui-bar ui-bar-a">Hábitat y Ecología</h4>
<div class="ui-body">
<p>It occurs in the dry Chaco and is an arboreal species. It occurs on vegetation near temporary lagoons or ponds and the males call at night. They make a coarse leaf nest, filled with their glutinous egg-clutches which hangs over the water, the hatched tadpoles then drop in to the water below where they develop. It breeds only in the rainy season and is not tolerant of substantial habitat disturbance.</p>
</div>
</div><!-- /content -->
<!-- PIE DE PAGINA -->
<div data-role="footer" data-position="fixed">
<h4>Webapp en Construcción</h4>
</div>
</div>
The page above it's filled with sample data. The idea it's that when you select an option, the data is updated with the correct one.
I hope you can understand all of this. Thanks for your help!
I'm not sure if i understood everything, but you could listen for the 'click' event on your list item :
$('li').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
EDIT :
when you generate an item in your list, you can give it an id to retrive it easly:
<li id="anuro">...</li>
then you can add the event listener :
$('#anuro').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
in your case, the code could look like this :
var item = ('<li id="aruno"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
$('#lista').append(item);
item.on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
$("#lista").listview("refresh");
EDIT 2 :
Once you start understanding jquery, everything becomes easy.
below i edited part of the code a created above to replace the photo in your page :
item.on('click', function() {
$('.popphoto').attr('src', 'img/'+Foto);
});
I have a Javascript Accordiong, currently it displays the first dd when page is loaded, then when you click on a dt tag, the dd that is open should close and the dd tag within the dt clicked show slidedown.
However atm the first dd is shown on load, the open dd closes when another dt is clicked, but the next dd doesnt show.
Can someone please help me :/
My JS:
//Accordion - Hides open, and opens the clicked
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
$('dd').slideUp('slow'); //slides up current dd
$(this).parent('dt').next('dd').slideDown('slow');
});
});
This is my html:
<!DOCTYPE HTML>
<html>
<head>
<title>Hobbies</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscript.js"></script>
<link rel="stylesheet" href="style\main.css" media="screen" />
</head>
<body>
<div id="container">
<a name="top"></a>
<div>
<ul class="menu">
<li>Home</li>
<li>Schedule</li>
<li>Resume</li>
<li>Contact</li>
<li>Hobbies
<ul>
<li>University</li>
<li>Gaming</li>
<li>Chess</li>
<li>Golf</li>
<li>Harmonica</li>
</ul>
</li>
<li>Images</li>
</ul>
</div>
<div id="contenthobby">
<div>
<dt><a name="uni"><h2>University</h2></a></dt>
<dd>
<div class="pa">
<p> content
</div>
<div class="pic">
<img src="http://physics.uq.edu.au/ap/cosmicflow/wp-content/uploads/2011/11/uq_logo.gif"
alt="Error Loading Image">
<p>This is the UQ logo</p>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-27.497899,153.013222&zoom=16&size=250x250&markers=-27.497899,153.013222&sensor=false" alt="The University of Queensland"/>
<p>This is UQ</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="games"><h2>Gaming</h2></a></dt>
<dd>
<div class="pa">
<p>I love to play games, even though it wastes so much time and amounts to nothing.
It allows me to just go into another world. Something amazing when your slaying dragons
haha.</p>
<p>SKYRIM!</p>
<p>What I Like About it</p>
<ol>
<li>Able to immerse yourself into the game</li>
<li>Gets the adrenalin pumping when your in an intense fight</li>
<li>Allows for late night fun</li>
</ol>
</div>
<div class="pic">
<img src="http://www.darylh.com/images/articleimages/SkyrimLogo.png"
alt="Error loading image: http://www.darylh.com/images/articleimages/SkyrimLogo.png">
<p>This is the game logo for skyrim</p>
<iframe width="320" height="240" src="http://www.youtube.com/embed/ARaOOKafLEw"></iframe>
<p>This is a video of the fun shout in skyrim.</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="chess"><h2>Chess</h2></a></dt>
<dd>
<div class="pa">
<p> I love playing chess. It is a good way to unwind, will keeping your mind
sharp. It allows you to hone your skills and adapt your way of thinking.</p>
<p>Chess is a game played by men and boys alike, and this is why i believe
it is essential to a persons growth. Hence why I play it.</p>
<p>What I Like About it</p>
<ol>
<li>Sharpens your mind</li>
<li>Fun to work out the problem and beat your opponenet</li>
<li>Gives you a clearer outlook on the world</li>
</ol>
</div>
<div class="pic">
<img src="http://www.graemeanthonypewter.com.au/uploads/image/Armageddon-Chess-Set-2.jpg" alt="chess" height="250" width="250">
<p>This is an example of a chess set</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif" alt="chess board" width="250" height="250">
<p>This is a chess move, used by pros</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="golf"><h2>Golf</h2></a></dt>
<dd>
<div class="pa">
<p>The sport of golf is one of majesty and finesse. It allows one to realise
that one cannot focus on where he is, but where he is going, and how he is
going to get there!</p>
<p>What I Like About It</p>
<ol>
<li>Its outdoors</li>
<li>Is fun to play</li>
<li>Get to drive around in the golf cart</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.ashlargolfclub.com.au/upload/wysiwyg/whatsonIndex/Copy%20of%20Copy%20of%20Golf-Ball-and-Tee.jpg" alt="Golf ball">
<p>This is a golf ball</p>
<iframe width="250" height="200" src="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&output=embed"></iframe><br /><small>View Larger Map</small>
<p>This is my favourite golf course</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="music"><h2>Harmonica</h2></a></dt>
<dd>
<div class="pa">
<p>I Love playing the harmonica, it allows me to just release my feelings
through music.</p>
<p>It also allows me to learn control, in how to release air, and adjust my
mouth to get the perfect pitch and sound</p>
<p>What I like About It</p>
<ol>
<li>Its a musically instrument</li>
<li>It has soul</li>
<li>It allows me to unwind after a hard day of work</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.harmonicagame.com/help/harmonica_tab_screen.gif" alt="Harmonica">
<p>These are the chords of a harmonica</p>
<img width="250" height="250" src="http://www.hoerl.com/Graphics/music_harm_hold.gif" alt="Proper way to hold">
<p>How to Hold a Harmonica</p>
</div>
Return to Top
</dd>
</div>
</div>
<footer class="footer">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</footer>
</div>
</body>
</html>
Working demo http://jsfiddle.net/UL3V3/1/
Good read: API : http://api.jquery.com/visible-selector/
slideToggle http://api.jquery.com/?ns0=1&s=slideToggle&go=
Using this you can close the open dd as well.
Rest you can play around and find out the behavior.
This will help. B-)
Jquery code
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
if ($(this).next('dd').is(":hidden"))
$('dd').slideUp('slow');//slides up current dd
$(this).next('dd').slideToggle('slow');
});
});
$(this) in your case is the 'dt' so you need to find the next element ('dd'):
$('dt').click(function() {
if ($(this).next().is(":hidden")){
$('dd:visible').slideUp('slow'); //slides up current dd
$(this).next().slideDown('slow');
}
});
EDIT also added a condition to only animate the slide if the current dd is hidden.
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;
}