I am trying to use Jquery accordion in my website and I have a couple of issues that I am trying to address.
Firstly, I can't seem to make the cursor a hand when the user hovers over with the mouse.
Secondly the accordion does not work in IE8 or IE7, but works fine in IE9 and above and in other browsers.
I am by no means an expert in building the code and I have put together something that is almost there - I just need to get these two issues sorted and then I am done.
The link to my test page is:
http://www.micklehamweather.com/test.php
My code is:
<!DOCTYPE html>
<!-- DC RSS Feeds CSS -->
<link type="text/css" rel="stylesheet" href="tsc_rssfeed.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC RSS Feeds JS -->
<script type="text/javascript" src="tsc_rssfeed.js"></script>
<script type="text/javascript" src="tsc_vticker.js"></script>
<script>
$(function($) {
var allAccordions = $('.accordion div.data');
var allAccordionItems = $('.accordion .accordion-item');
$('.accordion > .accordion-item').click(function() {
if($(this).hasClass('open'))
{
$(this).removeClass('open');
$(this).next().slideUp("slow");
}
else
{
allAccordions.slideUp("slow");
allAccordionItems.removeClass('open');
$(this).addClass('open');
$(this).next().slideDown("slow");
return false;
}
});
})
;
</script>
<!-- Start BOM Alert Refresh -->
<!-- JQuery script -->
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#bomalertvic').fadeOut('fast').load('rss-directbomvic.php').fadeIn('fast');}, 63000);
</script>
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#firealertvic').fadeOut('fast').load('fireincidents.php').fadeIn('fast');}, 63000);
</script>
<div align="center">
<div class="accordion">
<div class="accordion-item"><table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr><td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;"> Alerts <img width="20" height="20" style="vertical-align: middle;" alt="Warnings issued by the Bureau of Meteorology" src="images/alert-icon-120.png" border="0"> Warnings Fire <img width="20" height="20" style="vertical-align: middle;" alt="Incidents issued by the CFA" src="images/Emergency_Warning.png" border="0"> Incidents
</span></td>
</tr></table><div class="type">
</div> </div>
<tr class="column-dark">
<td colspan="8" align="center">
<div class="data" style="display: none;">
<!-- Start BOM Alert TAS -->
<script type="text/javascript">
function SetHTML1(type) {
document.getElementById("a0").style.display = "none"
document.getElementById("a1").style.display = "none"
document.getElementById("b1").style.display = "none"
document.getElementById("c1").style.display = "none"
document.getElementById("d1").style.display = "none"
document.getElementById("e1").style.display = "none"
document.getElementById("f1").style.display = "none"
document.getElementById("g1").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<table width="100%" cellspacing="1" cellpadding="1">
<table style="background-color:#9F9F9F; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr>
<td width="91.428571428571428571428571428571" align="center"><img src="images/vic-thumb.png" width="30" height="30" title="Show Victoria - Warnings" alt="VIC"/>VIC</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/tas-thumb.png" width="30" height="30" title="Show Tasmania - Warnings" alt="TAS"/>TAS</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/wa-thumb.png" width="30" height="30" title="Show Western Australia - Warnings" alt="WA"/>WA</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nt-thumb.png" width="30" height="30" title="Show Northern Territory - Warnings" alt="NT"/>NT</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/sa-thumb.png" width="30" height="30" title="Show South Australia - Warnings" alt="SA"/>SA</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/act-thumb.png" width="30" height="30" title="Show Australian Capital Territory - Warnings" alt="ACT"/>ACT</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nsw-thumb.png" width="30" height="30" title="Show New South Wales - Warnings" alt="NSW"/>NSW</td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/qld-thumb.png" width="30" height="30" title="Show Queensland - Warnings" alt="QLD"/>QLD</td>
</tr>
</table>
</td>
</tr>
<tr class="column-light">
<!-- Start Hide All -->
<td colspan="8"><span id="a0" style=""></span>
<!-- End Hide All -->
<!-- Start BOM Alert VIC -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="bomalertvic"><?php include("rss-directbomvic.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- End BOM Alert VIC -->
<!-- Fire -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="firealertvic"><?php include("fireincidents.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- Fire -->
</td>
</tr>
</table>
</div>
First of all, you have a typo in your code:
Wrong:
<td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;">
Correct:
<td style="text-align:center" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
Hand Cursor on Mouse Hover:
If you want the hand/pointer cursor to show add this style:
<td style="text-align:center; cursor: pointer;" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
Browser Compatibility:
As for IE, it's really hard to get everything working correctly. IE 9 has good support, but the older versions require much more work for maximum compatibility. But jQuery and jQuery UI should have much of it covered. As helpfully mentioned by #atmd, you should check your jQuery and jQuery UI versions. But at the end of the day some features will be broken on IE that that's the best developers can do.
Hope that answers your questions. If you have any more concerns, let me know in the comments.
Related
I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete
Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>
If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>
I have a jQuery code that loads in a HTML file which includes an script. The problem is that the script gets opened in a new tab instead getting displayed in its div where it needs to be.
Script that loads contact in:
$(document).ready(function(){
$('#cont').click(function(event){
event.preventDefault();
$("#content").hide();
$('#home').removeClass("active");
$('#info').removeClass("active");
$('#vergun').removeClass("active");
$('#pasp').removeClass("active");
$('#cont').addClass("active");
$("#content").show();
$("#content").load("contact.html");
});
});
contact.html
<div id="contents">
<h2>Adres</h2>
<table>
<tr>
<td id="tableSpacer"><i class="fa fa-phone"></i></td><td id="tableSpacer">734-389-7473</td>
</tr>
<tr>
<td rowspan="2"><i class="fa fa-globe"></i></td><td>25 Woodland Drive </td>
</tr>
<tr>
<td colspan="2" >28803 Megaton, Commonwealth</td>
</tr>
<tr >
<td id="tableSpacerTop"><i class="fa fa-envelope"></i></td><td id="tableSpacerTop">info#megaton.nl</td>
</tr>
</table>
<div id="contentMail">
<script type="text/javascript" src="/mail/script/mail.js"></script>
</div>
</div>
Code where it loads into
<center>
<div id="content" style="position: static;">
<div id="contents"></div>
</div>
</center>
Code that triggers the script
<a class="menuItem" id="cont" href="#">Contact</a>
What it needs to look like
What happens
Does anyone have a solution for this? Thanks in advance.
The probems is in your mail.js contents:
you are using document.write( instead of $('#contents').html(
So you are replacing all the stuff in the document.
See line 37 of your mail.js file.
I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.
http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]
I am trying to get the text of one of the elements and show it up on an alert but its not working for me. The element in question is <h5 class="title">. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="styling.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>Example</title>
</head>
<body>
<div data-iconpos="none" data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible" data-collapsed="false">
<h2><img src="today_calendar.png" style="height: 60px; vertical-align:middle;"> Today's Events</h2>
<div id="todayCollapsible">
<div id="event1" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title One</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">01/01/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">1 hour</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">One Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
<div id="event2" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title Two</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">02/02/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">2 hours</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">Two Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
</div>
</div>
<script>
(function() {
"use strict";
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
})();
</script>
</body>
</html>
Your issue is that since you are using jQuery mobile, it is restructuring the DOM and wrapping an extra <dv> around your <ul>
Thus the closest('div') is different than the one in your source.
Try This:
Add data-title to your h5
<h5 class="title" data-title="Event Title Two">Event Title Two</h5>
And change JS to:
$("body").on('click','button',function(){
var title = $(this).closest("div").siblings('h5.title').data("title");
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
DEMO
Apparently, jQuery mobile will wrap some elements with a div, in this case, the <ul data-role="list-view">. Therefore, running .closest('div') will refer to the generated div, instead of the one that contains the h5.
To fix this, add your own class to the div.
<div id="event1" class="event-wrapper" data-role="collapsible" data-collapsed="true">
<!-- ^ Here -->
Then, use your class to refer to it.
jQuery mobile adds a further complication: it adds extra text that will be read by the .text() function. We need to store the text we need first before jQuery mobile adds text to the page.
$(document).one('pagebeforecreate', function(){
$('h5').each(function(){this.dataset.text = this.innerHTML;});
});
Then, we need to read the text we need from a data attribute instead of using .text().
var title = $(this).closest(".event-wrapper").find(".title").data('text');
var date = $(this).closest(".event-wrapper").find("table .date").text();
I've updated my answer. your code works fine. my bad. hehehe.
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
}
I'm very new to coding, so bear with me. I've looked at a few of the answered posted for the same question, and have gotten the code to work while inputting my information in some of the solved jsfiddle links.
The problem is: When I plug the working code into my HTML and JS file, it doesn't seem to work. I've looked over my code and am not sure what's breaking it or why it's not showing. I was wondering if anyone could look at my code and tell me why?
The section I'm talking about is the Browse Menu and Menu Output sections. Basically, if you click an image (omnivore, vegetarian, healthy) in the browse menu navigation, the corresponding menu output will be shown.
I've also included my HTML and JS to this post. The styles and spacing are a little messed up right now since I've been tinkering with things in my Mark up. I also recently read that tables are bad, so I will be changing that in my html to unordered lists.
Thanks so much!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Spice Up Your Love Life: An Interactive Dating Experience</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="date, interactive, cooking, culinary, dating, couple, love, date ideas, vancouver, spice, love life, experience">
<meta name="Spice Up Your Love Life" content="SpiceUpYourLoveLife.com is an interactive dating experience in which you and your date can cook a meal together. Eat your heart out!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
#font-face{
font-family: "talldark";
src: url('http://fontsforweb.com/public/fonts/383/talldark.eot');
src: local("Tall Dark And Handsome Condensed"), url('http://fontsforweb.com/public/fonts/383/talldark.woff') format("woff"), url('http://fontsforweb.com/public/fonts/383/talldark.ttf') format("truetype");
}
.diettitle {
font-family: "talldark";
font-size: 6em;
letter-spacing: 5px;
color: #b5a839;
}
.testerz {
font-family: "talldark";
font-size: 1em;
letter-spacing: 4px;
color: #b5a839;
}
</style>
</head>
<body>
<header>
Spice Up Your Love Life: An Interactive Dating Experience
</header>
<div id="topnavcontainer">
<table id="topnav">
<tr>
<td id="break">Breakfast</td>
<td id="lunch">Lunch</td>
<td id="dinner">Dinner</td>
<td id="appetizer">Appetizer</td>
<td id="desert">Desert</td>
<td id="snack">Snack</td>
</tr>
</table>
</div>
<table id="mainnav">
<tr>
<td id="home" class="bordernav">Home</td>
<td id="works" class="bordernav">How It Works</td>
<td id="menu" class="bordernav">Menu</td>
<td id="mainnavbordernone"></td>
<td id="tips" class="bordernav">Tips and Tricks</td>
<td id="contact" class="bordernav">Test Skills</td>
<td id="share" class="bordernav">Share</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="logo"><img src="images/logo.png" alt="Spice Up Your Love Life Logo" width="189" height="170"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="spicetitle" class="title">SPICE</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="upyourtitle" class="title">UP YOUR</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="lovelifetitle" class="title">LOVE LIFE</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="container">
<!--SPLASH CONTENT-->
<div class="content">
<div id="leftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">HOW DOES IT WORK?</p><br>
<p class="contentdescribed">Does it sound too good to be true? --- Well, it's not! See how it works and and how it all started. </p>
<p class="contentcalltoaction">See how it works</p>
</div>
<div id="middleleftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">WHAT'S FOR DINNER?</p><br>
<p class="contentdescribed">Eat your heart out! Browse our menu and select what
you'd like to cook for your special date. </p>
<p class="contentcalltoaction">Look at the menu</p>
</div>
<div id="middlerightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">IMPRESS YOUR DATE!</p><br>
<p class="contentdescribed">Don't get caught with your elbows on the table!
These tips will have them wanting seconds! </p>
<p class="contentcalltoaction">Learn tips and tricks</p>
</div>
<div id="rightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">GOT WHAT IT TAKES?</p><br>
<p class="contentdescribed">Put your skills to the test! Take our multiple choice test to see what culinary level you're at!</p>
<p class="contentcalltoaction">Test your skills</p>
</div>
</div>
<!-- HOW IT WORKS SECTION -->
<div id="howitworkssec">
<div class="waves"></div>
<h3 class="headliners"><strong>How does it work?</strong></h3>
<img src="images/silboth.png" alt="dating silhouette" width="875" height="499">
</div>
<div id="howdesdiv">
<p id="simpleas">It's as simple as 1, 2, 3.</p>
<p id="howdes">
1. Do this thing and that blah blah<br>
2. Then you do this lolol can you believez it?<br>
3. I'll add the actual content when the site is finished.<br>
</p>
Let's begin!
</div>
<!--BROWSE MENU-->
<div id="diet">
<h3 id="meal" class="headliners">Meal Type</h3>
<p id="lefty" class="curly">{</p>
<p id="righty" class="curly">}</p>
<div class="dietchoice"><img src="images/carnivoreb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Omnivore</h3></div>
<div class="dietchoice"> <img src="images/vegetarianb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Vegetarian</h3> </div>
<div class="dietchoice"> <img src="images/healthyb.png" alt="meat options" width="90" height="34" /><h3 class="testerz">Healthy</h3> </div>
<!--MENU OUTPUT-->
<div id="output">
<div id="meat">
<p class="diettypeheading">Magnificent Meat Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="veggie">
<p class="diettypeheading">Fresh, Colourful Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/meatballs.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="healthy">
<p class="diettypeheading">Diabetic and Heart Healthy Meals</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/meatballs.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
</div>
<!--END OF CONTENT-->
<div class="splashimage">
<img src="images/banner3.png" alt="splash image" width="1664" height="400">
</div>
<div id="sitemap">
<table class="sitemaptab">
<tr id="sitemaptitles">
<th>Get Social</th>
<th>Quick Links</th>
<th>Terms of Use</th>
</tr>
<tr id="row_two">
<td class="social"><img src="images/socialmedia/twit_sm.png" alt="sm-twiticon">Follow Us On Twitter</td>
<td class="quicklinks">Home</td>
<td class="terms">Privacy Policy</td>
</tr>
<tr id="row_three">
<td class="social"><img src="images/socialmedia/fb_sm.png" alt="sm-fbicon">Like Us On Facebook</td>
<td class="quicklinks">Browse Menu</td>
<td class="terms">Contact</td>
</tr>
<tr>
<td> </td>
<td class="quicklinks">How It Works</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Tips and Tricks</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Share</td>
</tr>
</table>
</div>
<footer>
<table id="footer">
<tr>
<td id="copyright">Copyright © Spice Up Your Love Life 2013</td>
<td id="webdesby">Web Design By: Ticking and Talking Media</td>
</tr>
</table>
</footer>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</body>
</html>
JavaScript:
// Scrolling Function
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
// Load All Images
$('body').waitForImages({
waitForAll: true,
finished: function() {
// All images have loaded.
}
});
//Hide All Divs
$("#output > div").hide();
$(".dietchoice a").click(function(e) {
$("#output div").hide();
$(this.hash).show();
e.preventDefault();
});
$("#areas div:not(#meat)").hide();
Instead of
$(this.hash).show();
You should probably use
$(this.attr('href')).show();
this.hash probably returns undefined because the property hash doesn't exist.
If my solution throws an error like "undefined method attr()" you will probably need to use the jQuery selector.
$($(this).attr('href')).show();
I'd advise using the console object for debugging purpose. You can find some docs about debugging on the Mozilla Developer Network.
This selector $("#output > div") is different from this selector $("#output div"). According to your HTML, both selectors returns the same elements but if you were to change the HTML structure issues might arise.
try, putting the modernizr, jquery and plugin scripts before your code, meaning change this:
<script src="spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
to this:
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/spicelovelife.js"></script>
Hope this help.