I am creating a website that uses SQL queries to show, input, modify, delete data from a database. I am using CSS to show/hide the main div (#accounts-page/#hardware-page) content for the main navigation menu. This works good, but the issue comes in when I have another menu inside that div element and try to navigate to content within that submenu. The desired is that the table on each 'page' will still be shown after a submenu button is clicked, along with the content of that submenu button below it.
I have tried using JavaScript, jQuery, plain CSS & HTML, but can't seem to wrap my head around all the examples that I've searched up online and apply it to my situation.
Here is a stripped down version of HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="main-nav" class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
<button>Modify Accounts</button>
<button>Delete Account</button>
</ul>
<div class="column" id="add-acc">
<p>Add account content</p>
</div>
<div class="column" id="del-acc">
<p>Delete account content</p>
</div>
</div>
<div id="hardware-page">
<table id="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="" style="text-align:center">
<button>Add hardware</button>
<button>Modify hardware</button>
<button>Delete hardware</button>
</ul>
</div>
<div class="full" id="add-hdwre">
<p>Add hardware content</p>
</div>
<div id="edit-hdwre">
<p>Edit hardware content</p>
</div>
<div id="del-hdwre">
<p>Delete hardware content</p>
</div>
</div>
<div id="computers-page" class="tab-content">
</div>
<div id="games-page" class="tab-content">
</div>
</div>
</body>
</html>
And CSS:
#accounts-page #add-acc,
#edit-acc,
#del-acc,
#add-hdwre,
#edit-hdwre,
#del-hdwre {
display: none;
}
#accounts-page #add-acc:target,
#edit-acc:target,
#del-acc:target,
#add-hdwre:target,
#edit-hdwre:target,
#del-hdwre:target {
display: block;
}
#accounts-page,
#hardware-page {
display: none;
}
#accounts-page:target,
#hardware-page:target {
display: block;
}
Or the JSFiddle for your convinience
My first thought is to use child selectors, but I can't quite seem to figure out how to implement it. Any pointers or recommendations would be highly valued.
If there is an easier way to implement this within javascript/jQuery then please let me know.
EDIT: When the submenu links on each 'page' are clicked (add-acc,edit-acc, etc) the URL is changed to that ID, which I am assuming is where the problem lies and I need to direct the link to the child of the page. Example: #accounts-page > #add-acc
Images:
URL after 'Add Account' submenu link is clicked
URL after 'Accounts' main menu link is clicked
I eventually got to the solution by following this StackOverflow Question and it's Answers, who helped me tremendously.
Here is the JSFiddle with the desired result.
Using Javascript to navigate the main navigation solved the issue. I don't know why I couldn't understand from the countless other questions I saw but this solution works for me.
Thanks to Jared for his explanation in the comments about display:block;, it was insightful to debugging the issue.
Added Javascript:
function ShowContent(content) {
document.getElementById("accounts-page").style.display = 'none'
document.getElementById("hardware-page").style.display = 'none';
document.getElementById(content).style.display = 'block';
}
Modified CSS:
.submenu {
margin: auto;
padding: 7px 0 7px 0;
font-size: 24px;
text-align: center;
}
.hide {
display: none;
}
.hide:target {
display: block;
}
Updated HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="hide">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
</ul>
<div class="hide" id="add-acc">
<p>Add account content</p>
</div>
</div>
<div id="hardware-page" class="hide">
<table class="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="submenu" style="text-align:center">
<button>Add hardware</button>
</ul>
</div>
<div class="hide" id="add-hdwre">
<p>Add hardware content</p>
</div>
</div>
</div>
</body>
</html>
Related
I'm stumped. As far as I can see from other posts the following should work to replace the contents of the p tags:
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
but no dice. Also, no indication of an error comes up in the console. Would anyone be kind enough to tell me what I'm doing wrong??
EDIT
Ok here's the whole HTML as rendered by Umbraco:
<!DOCTYPE html>
<html>
<head>
<title>WSHA</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style-mobile.css">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet">
</head>
<body>
<nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home
<span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
</li>
<li class="mainMenuItem">
About us
<span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li class="mainMenuItem">
Being a Tenant
<span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li class="mainMenuItem">
News
<span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
<div id="banner" style="background-image: url('/media/1035/houses-banner.jpg');">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="bannerMobile">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="subTitle">
<h4 class="text-centre">A Charity Registered in Scotland No. SC035633.</h4>
<h2 class="text-centre">Aiming for High Quality Homes in a Desirable Environment</h2>
</div>
<div id="homeContent-container">
<div id="homeContent">
<p><p>Welcome to our website. Please let us know if there is any information you would like to see included which we haven't thought of.</p>
<p>The modules are designed to help you navigate the site, and by clicking on the 'keys' on the left hand side of the module home pages, you will, hopefully, find the infomation you need.</p>
<p>You can opt for a text only version (see top of page), and there is the facility to download Adobe Reader is you want to print off any information and don't have this facility already (see below).</p>
<p>Please contact us using the link at the bottom of the page.</p></p>
</div>
</div>
<div id="footerContent">
<div class="footerContentBlock" id="first">
<h4>Quick Links</h4>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/our-people/" target="_blank">
<p>Our People</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/news/" target="_blank">
<p>News</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/annual-reports/" target="_blank">
<p>Annual Reports</p>
</a>
</li>
</ul>
<ul>
</ul>
<ul>
</ul>
</div>
<div class="footerContentBlock" id="middle">
<h4>Opening Hours</h4>
<table border="0" height="79" style="width: 272.583px;">
<tbody>
<tr>
<td style="width: 144px;">Monday to Thursday</td>
<td style="width: 108.583px;">9am to 5pm</td>
</tr>
<tr>
<td style="width: 144px;">Friday</td>
<td style="width: 108.583px;">9am to 3pm</td>
</tr>
<tr>
<td style="width: 144px;">Saturday, Sunday</td>
<td style="width: 108.583px;">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footerContentBlock" id="last" >
<p style="text-align: right;"><strong>Whiteinch and Scotstoun Housing Association</strong></p>
<p style="text-align: right;">The Whiteinch Centre</p>
<p style="text-align: right;">1 Northinch Court</p>
<p style="text-align: right;">Glasgow</p>
<p style="text-align: right;">G14 0UG</p>
<p style="text-align: right;"> </p>
<p style="text-align: right;">Phone: 0141 959 2552</p>
<p style="text-align: right;">Fax: 0141 950 4432</p>
<p style="text-align: right;">email: wsha_admin#wsha.org.uk</p>
</div>
</div>
<div id="googleTranslateContainer">
<p>Translate this page.</p>
<p id="closeButton" onclick="translateClose()">x</p>
<div id="googleTranslate"></div>
</div>
<script type="text/javascript">
function translateClose() {
document.getElementById("googleTranslateContainer").style.visibility = "hidden";
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'googleTranslate');
}
</script>
<script type="text/javascript" src="/scripts/template2Javascript.js"></script>
</body>
</html>
And the javascript in template2Javascript.js:
document.getElementById("mainMenuIcon").onclick = function () {
var x = document.getElementsByClassName("mainMenuItem");
var numberOfMenuItems = x.length;
for ( i=0 ; i < numberOfMenuItems ; i++ ) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
};
if you print something in console you have to write cosole.log() like
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
and also you prevent p tag value than += concat with old value
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
document.getElementById("activateSubMenuIcons1").innerHTML += "hello";
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
}
<p id="activateSubMenuIcons">.</p>
<p id="activateSubMenuIcons1">.</p>
I apologise for wasting everyone's time. I now realise that I had misunderstood how innerHTML works. I was looking for a change in the source code, not the change in the browser. The reason I didn't spot that it was working was the text was displaying white on white. When I changed the css to make it purple and 200% it showed up and I could see that it does work after all.
I just need to rethink what I'm trying to do - see comment on Bhargav's answer below.
I am facing a kind of problem that maybe I can't properly tell you guys about. I am working with a management system where my menu bar is fixed to display the whole page. meaning the menu bar is always showed. But the problem is-->my other page content displayed upon my menu bar,that is occurred.please show this pic below->
look my search box is displaying upon my menu bar. That is happening when I scroll my page.
First my menu bar is inside my body tag. the for selving this problem is took it to the head tag->but still problem is occurring.
code->
<!-- top navigation bar -->
<div style="position: fixed; width: 100%" class="w3-container w3-teal">
<ul class="w3-navbar w3-container">
<li class="w3-right" >Log Out</li>
<li class="w3-right w3-dropdown-hover w3-hover-orange">
<a class="w3-hover-orange" >Options<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
change password
</div>
</li>
<li class="w3-right" >User Profile</li>
<li class="w3-right" >Home</li>
<li class="w3-right" ><button class="w3-btn w3-black" id="sgo">Go</button></li>
<li class="w3-right" ><input type="text" class="w3-input" id="text-search" placeholder="Search.."></li>
</ul>
</div>
<!-- end of top navigation bar -->
and body->
<body class="w3-theme">
<?php include 'pageSideNavigationBar.php'; ?>
<section class="w3-row-padding w3-theme" style="margin-left:165px;" id="main-content">
<div id="guts">
<a style=" margin-left: 88%;width: 11%;border-radius: 2px;" class="w3-btn-block w3-green w3-section w3-padding" onclick="$('#addABatch').show()">Add A Batch</a><br>
<!-- TABLE TO SHOW THE DATA -->
<div class="w3-container">
<p>Available Batch details....</p>
<table id="myTable" class="display" data-page-length="25" data-order="[[ 1, "asc" ]]" width="100%">
<thead>
<tr>
<th>Batch Code</th>
<th>Course Name</th>
<th data-orderable="false">Batch Starting Date</th>
<th>Faculty Name</th>
<th>Room Number</th>
<th>Amount</th>
<th>Routine</th>
<th>Delete Batch</th>
</tr>
</thead>
<tbody>
and closing tags. sorry can't give full code->>>>
what is the problem. why this is happening.....
add this to your navbar style
z-index: 99999;
it should work
I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>
One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview
You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.
To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com
I want to save table as an image.I want to save the first row (first row contain image and text on that image)in the table as an image. e.g-jpg.
I used canvas but image was not too clear and I heard about the Webkit but,I don't know how to use it.
I am trying to make an android application (using phonegap).
I want to save the table as an image and save that image to the device (phone).
plz help me!
<html>
<head>
<!-- omitting link,meta & script -->
<!-- omitting link,meta & script -->
<script>
$(document).ready(function(){
$('#textinput1').keyup(function () {
$('#display').text($(this).val());
});
});
</script>
</head>
<body>
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;"
cellpadding="2" cellspacing="2">
<tbody>
<!-- 1 row!!!!!!!!!!!!!!!!!!! -->
<tr>
<td style="vertical-align: middle; text-align: center;">
<div class='wrapper'>
<img class="image_set"
src="./img/old_coca_cola_bottles-wallpaper-1440x900.jpg">
<div class='description'>
<p id="display" class='description_content'>text</p>
</div>
</div>
</td>
</tr>
<!-- 1 row end!!!!!!!!!!!!!!!!!!! -->
<!-- omitting below -->
<!-- omitting below -->
</tbody>
</table>
</div>
</body>
</html>
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.