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.
Related
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 currently using AJAX to actually make my website more dynamic. But somehow the event objects method e.preventDefault() does not fire to prevent the link to load. I have specified a container which will be replaced, now I don't know the reason for this failure. Through the .load method I am loading HTML content, to be exact the content from another 'container' in the HTML.
My index.php:
<nav>
<a class = "current" href="index.php">Home</a>
Search
</nav>
<div class="header">
<header class="title">jrr scientists - Official</header>
<img id="logo" height="100" width="160" src="Logo/dev.png">
</div>
<section id="content">
<div id="container">
<div class="img2">
<img id="ish"src="img/ish.jpg">
<img id="mit" src="img/it.png"><br>
<img width="100" height="100" id="home" src="img/toys1.jpg">
<img width="200" height ="100" src="img/This is CS50.gif"> <br><br> <br><br>
<p> This is supposed to be a small thank you to all these institutions to make </p>
<p> education accessable worldwide, even to non-college students. Therefore material </p>
<p> will be pblished here to enhance the use of this education. </p>
<p> *********************************************************************************************** </p>
<p> *********************************************************************************************** </p>
<p> From the Editor JRR - Jayant Raul Rao </p>
</div>
<div id="text">
<p> This is the official website of jrr developer and the </p>
<p> CS environment to make your life easier. This website</p>
<p> will focus on programming and computer science introducing </p>
<p> concepts, displaying offical documentations and scripts </p>
<p> from various examples. We can actually have a look at </p>
<p> Google Scholar pdf's and a lot of facts of cs, maths </p>
<p> and physics undermining the determination and will to </p>
<p> save and keep data in a way to help. This page will be </p>
<p> empowered by different features like a search engine, </p>
<p> CS50 lectures, Google Scholar texts and maths problems. </p>
<p>********************************************</p>
<p> JRR (Jayant Raul Rao) </p>
</div>
<div id="img">
<img class= "img" width="200" height="120" src="img/ibm.jpg">
<img id = "img1" width="190" height="120" src="img/term.png"> <br>
<img id="xcode"width="80" height="70" src="img/xcode.png">
</div>
</div>
</section>
<script type="text/javascript" src="JS/basis.js"></script>
<script type="text/javascript" src="JS/ajax.js"></script>
Now here I will replace the container through this jQuery script (ajax.js)
:
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#container').remove(); // Remove old content
$('#content').load(url + ' #container').hide().fadeIn('fast'); // New content
});
After this I will load this and replace the old container with the new one:
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
</head>
<body>
<section id = "content">
<div id="container">
<!-- <img src="toys1.jpg" /> -->
<div id="header">
<img class="pio"alt="CS50 Search" src="img/Unknown.gif"/>
</div>
<form action="https://www.google.com/search" method="get">
<input class="t" name="q" type="text"/><br/>
<button class="u">Search</button>
</form>
</div>
</section>
<script type="text/javascript" src="JS/ajax.js"></script>
</body>
</html>
Thank you in advance
Simple Text Slider from here
Can't change speed or remove automatic slide here
button "Więcej o prelegentach" opens full screen layer where slider is placed.
Trying to change speed in
var speed = 5000;
but didn't helped. Even tried to remove:
var run = setInterval(rotate, speed);
Any ideas?
Try loading the jquery before you load any other script (on your page it is loaded after few others, including the slider script).
I think that will solve it, right now your page gives back error:
ReferenceError: $ is not defined
Edit:
Here's the html structure for that plugin.
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
</p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
</p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
</ul>
</div>
*EDIT: Here's a link to a staging version of the site: http://staging-site.site44.com/ *
I am extremely new to jquery so I apologize if this question is extremely simple. What I'm trying to do on my website is first when the page is loaded have the content in my #topContent div fade in.
But along with this I'd also like my main navigation to use jquery hashtags to switch up the page content displayed in the #topContent div. I've read up a bit on how to do this in jquery and from what I've read I think I need create page sections within my main html doc that are hidden until a certain nav link is selected - then hide the content that is currently showing and show the content associated with the nav link that was just selected, how close am I?
Here's my attempt so far at doing this...
HTML
<nav id="headerNav">
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
</nav>
</div>
</div>
<!-- topMain -->
<div id="topContentWrapper">
<div id="topContent">
<div id="#products">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#about">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#portfolio">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
</div>
JS
// Fade In Effect
$(document).ready(function() {
$("#topContent").css("display", "none");
$("#topContent").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#topContent").fadeOut(1000);
});
function redirectPage() {
window.location = linkLocation;
}
$("#view-about").click(function(event){
$("#products").fadeOut(1000);
$("#portfolio").fadeOut(1000);
$("#about").fadeIn(1000);
});
});
Ok, this code should work:
$(function(){
$last = null;
$(".navList li a").click(function(){
if ($last != null) $last.fadeOut(1000);
$last = $($(this).attr("href"));
$($(this).attr("href")).fadeIn(2000);
});
});
However, you will need to change your topContent to this:
<div id="topContent">
<div id="products" style="display: none;">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none;">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none;">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
Reasons:
Firstly, you need your ids to be like this: id="about" and not this: id="#about".
The id specified doesn't need a # in front of it. (Same as how class doesn't need a . when setting a tag with it)
The jQuery code I tested locally, so it should work.
Note:
You may want to automatically have some different content automatically displayed, because right now as it loads it is blank until you click one of the links.
Hope this helped!
Edit:
I suggest you change the code to this:
ids = [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];
$(function(){
$last = null;
$(".navList li a").click(function(){
New = "#" + ids[links.indexOf($(this).text())];
if ($last != null) $last.fadeOut(1000);
$last = $(New);
$(New).fadeIn(2000);
});
});
Because it will keep all the content constantly in the same place. For this to work, you'll need to change two more sections of your code:
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
And:
<div id="topContent">
<div id="products" style="display: none; position: absolute">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none; position: absolute">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none; position: absolute">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
That last part was just my suggestion, but do whatever you need to.
Instead of doing this in your a.transition handler:
$("#topContent").fadeOut(1000);
do:
$("#topContent").children().fadeOut(1000);
The issue is that you're actually fading out the higher level item thus the children are no longer visible even if you fade them in.
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;
}