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>
Related
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>
I am in the process of working through a tutorial on Angular JS in which we build a shopping cart app.
Adding items to the shopping cart is done through the click of a button. That works fine. However, once I go to view the shopping cart and checkout, I want to have a "spinner" on the quantity so I can increase/decrease the quantity.
I am stuck working with IE 11 and, while it may support the HTML 5 input type "number", it does not augment the control as a spinner (As seen in this SO question)
Therefore I am attempting to add a jQuery UI spinner to my partial view.
Here is my main view
<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
<title>SportsStore</title>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="../Scripts/jquery-1.6.4.js"></script>
<script src="../Scripts/jquery-ui-1.11.4.js"></script>
<link href="/Content/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Content/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Content/Styles/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="js/ngSportStore.js"></script>
<script src="routes/sportsStoreRoutes.js"></script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
<script src="controllers/statesController.js"></script>
<script src="controllers/checkoutController.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
<cart-summary></cart-summary>
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{data.error.status}}). The product data was not loaded.
Click here to try again
</div>
<ng-view></ng-view>
</body>
</html>
and here is my partial view for my cart:
<script>
$(function () {
$("#spinner").spinner({
min: 0
});
});
</script>
<h2>Your cart:</h2>
<div ng-controller="cartSummaryController">
<div class="alert alert-warning" ng-show="cartData.length === 0">
There are no products in your cart.
Click here to continue shopping
</div>
<div ng-hide="cartData.length === 0">
<table class="table">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
<th class="text-right">Price</th>
<th class="text-right">Subtotal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cartData">
<td class="text-center"><input id="spinner" class="pull-left" value="{{item.count}}"></td>
<td class="text-left">{{item.name}}</td>
<td class="text-right">{{item.price | currency}}</td>
<td class="text-right">{{(item.price * item.count) | currency}}</td>
<td>
<button ng-click="remove(item.id)" class="btn btn-sm btn-warning">Remove</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">Total:</td>
<td class="text-right">{{total() | currency}}</td>
</tr>
</tfoot>
</table>
<div class="text-center">
<a class="btn btn-primary" href="#/products">Continue shopping</a>
<a class="btn btn-primary" href="#/placeorder">Place Order</a>
</div>
</div>
</div>
In the partial view, the textbox for quantity is displayed and populated with the value from the model, but the icons for the spinner are not displayed.
I put together this jsFiddle in which everything works as desired. But I just can't seem to get this to work in my app.
What am I doing wrong?
Thank you
EDIT
I have tried the following suggestions: Add Font-awesome, include and use the latest version of JQuery. Neither have worked. I've tried moving where I load JQuery to the partial view. When I do that and, monitoring IE F12 network, I do not see the libraries being downloaded from the CDN.
In addition, I added an alert to the document.ready function and it is not being fired.
Any other suggestions would be welcomed.
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 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'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.