Could someone please explain to me how to change this internal js to external. If there is something in the file that is isn't show it is another document but I do need all the ID's and Class's that are mentioned
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $pageTitle; ?></title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<!-- CSS link -->
<link href="Content/css/tlm-styles.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1><img src="Content/images/coloured-logo.svg" alt="TLM logo">TLM Project Management</h1>
<nav id="top-nav">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
<main>
<nav id="sidebar">
<ul>
<li>Home
<li>Add Projects</li>
<li>All Projects</li>
<li>All Users</li>
</ul>
</nav>
<section class="content">
</section>
</main>
<footer>
<section id="copy">
<p>© 2016 | TLM Content Management System | Tara McNeil</p>
</section>
</footer>
<!-- JavaScript -->
<script src="Scripts/tlm-scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
Not sure this is what you want but I would replace the contents of your script tag with this function call in your HTML
<script>
initToggle();
</script>
Then on your tlm-scripts.js file, I would define the function, something like this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
});
Lastly, include your custom JS file after your Jquery files
UPDATE
If you do not want JS on your HTML page, then change the function declaration to this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
// invoke function here, not in the HTML
initToggle();
});
Related
I have been having so many problems with getting my JQuery to load properly. I have looked at youtube videos and scoured Google but nothing seems to work :(
The most common problem with JQuery not being loaded properly is that people load the js file BEFORE the JQuery, but I have loaded it in the correct order and I am still having problems.
Before, I was able to run my feature that used JQuery only locally, but now even that isn't working.
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel = "stylesheet" href="style.css" /> <!-- Link to css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"> </script> <!-- link to js AFTER JQuery-->
`
<!-- Import Fonts to Use -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Works</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
<span class="bar-top"></span>
</div>
</section>
</body>
</html>
I have a css file named "style.css"
This is my js file titled "script.js"
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
ANY help would be appreciated!! Thank you!!
here is what it shows:
Your js files should go at the bottom of the body. You are referencing dom elements in your js that do not exist yet because they have not been loaded in the markup.
Move your jquery and js references to the bottom of the body
I am currently developing a dynamic menu using jQuery.mmenu plugin.
The definition (nav + ul) of my menu is static and written into the index.html
The submenu is an external html page that I open in the jQuery(document).ready part, and added with append function.
My problem is located on the form:
Good version / bad version
On the left, you can see a standard and static implementation,
With my solution, CSS seems to don't apply.
My code:
index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var $menu = $("#menu").mmenu({
"extensions": [
"pageshadow"
],
"counters": true,
"navbar": {
"title": "Ressource List"
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
},
{
"position": "top",
"content": [
"prev",
"title",
"close"
]
}
],
"sectionIndexer": true
});
var api = $("#menu").data( "mmenu" );
api.bind( "init", function() {
$.ajax({
// options to retrieve the submenu
url:"include/menu.html",
type : 'GET',
dataType : 'html'
}).success(function(data) {
var $ul = $menu.find( "#panel" );
$ul.append(data);
$("body").addClass("body");
});
});
api.init( $("#panel") );
});
</script>
</head>
<body>
<!-- The page -->
<div class="page">
<div class="header">
Index
</div>
</div>
<!-- The menu -->
<nav id="menu">
<ul id="panel">
</nav>
</nav>
</body>
</html>
menu.html
<ul>
<li>Home</li>
<li><span>Room</span>
<ul>
<li>Room11</li>
<li>Room12</li>
</ul>
</li>
<li><span>Room2</span>
<ul>
<li>Room21</li>
<li>Room22</li>
</ul>
</li>
<li>Update data</li>
</ul>
To simplify the problem, I've used the basic example included in the package: http://mmenu.frebsite.nl/download.html
Could you please help me ?
Not sure if this is affecting anything but...
Your ul tag is missing a closing tag.
Also... in your success callback you have the code:
var $ul = $menu.find( "#panel" );
$ul.append(data);
If you are trying to get the first list in the panel. It should be:
var $ul = $menu.find( "#panel>ul" );
$ul.append(data);
jQuery.mmenu plugin appears to rearrange the markup.
Works for 1 level:
var $menu = $('nav#menu').mmenu();
var api = $('nav#menu').data('mmenu');
$('#btnAdd').click(function () {
var $ul = $menu.find('#test>ul');
$ul.append('<li>Home12</li>\
<li>About us</li>\
<li>Contact</li>');
});
<button id="btnAdd">Add</button>
<nav id="menu">
<ul id="test"></ul>
</nav>
This only works for one level. If I try to add a nested list item it doesn't appear to work.
Doesn't work for nested levels:
$ul.append('<li>Home12</li>\
<li><a id="about2" href="#about">About us</a><ul><li>About us</li></ul></li>\
<li>Contact</li>');
This github thread may help...
At the bottom of the thread the user FrDH provides an example that may help you.
Link: https://github.com/FrDH/jQuery.mmenu/issues/57
http://jsfiddle.net/1nLLdfdw/
Trying to make the fancybox images sortable (When the links are clicked they filter as in http://isotope.metafizzy.co/), which I was able to do with v1 of isotope but not v2, I've been poking around all night and through many iterations of my main.js file. I don't know whats going wrong exactly, would appreciate any help.
My main.js file:
jQuery(function ($) {
$(document).ready(function () {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
afterLoad: function () {
this.title = 'Download ' + this.title;
},
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add tweet button
this.title += 'Tweet ';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
afterShow: function () {
// Render tweet button
twttr.widgets.load();
},
helpers: {
title: {
type: 'inside'
}
}
});
});
/*----------------------------------------- FancyBox ^ ------------------*/
$(document).ready(function () {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter button click
$('#filters').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
// bind sort button click
$('#options').on('click', 'button', function () {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({
sortBy: sortByValue
});
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
/*----------------------------------------- Isotope Filters ^ ------------------*/
});
});
And my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="_include/css/normalize.css">
<link rel="stylesheet" href="_include/css/main.css">
<link rel="stylesheet" href="_include/css/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<!--END HEADER-->
<header>
</header>
<!--END HEADER-->
<!--START CONTENT-->
<div class="content">
<nav id="options" class="work-nav">
<ul id='filters' class='option-set' data-option-key='filter'>
<li class='type-work'>Type of Blah</li>
<li>ALL</li>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</nav>
<section class="isotope">
<ul id="thumbs">
<li class="item-thumbs test1">
<a title="test1 title" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test1">
<a title="test2" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test2">
<a title="test3" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test3">
<a title="test4" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
</ul>
</section>
</div>
<!--END CONTENT-->
<!--STARTFOOTER-->
<footer>
</footer>
<!--END FOOTER-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- fancyBox -->
<script type="text/javascript" src="_include/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="_include/js/jquery.fancybox.pack.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- Isotope -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<!-- others -->
<script src="_include/js/main.js" type="text/javascript"></script>
</body>
</html>
You have a few errors in your code. You have set your #filters click function on a button, yet you have no button, you have a link inside a "li". You also set the link element to #filter, not sure why. I would say set it to #.
You Filtervalue is set to:
var filterValue = $(this).attr('data-filter');
but your using the data-attribute "data-option-value", not "data-filter"
Try this:
// bind filter button click
$('ul#filters li').on('click', 'a', function () {
var filterValue = $(this).attr('data-option-value');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
I'm trying to update the content of a div (#slide-content) on clicking certain navigation elements (h2.pagenav). The content structure is uniform, and each requested HTML document contains two such nav elements ('Previous','Next'). However, my listener only fires once—for click events on the initial nav button present at page load, and I don't understand why.
My understanding is that when using jQuery's append() function instead of html(), the appended content should be registered with the DOM and thus available for event listening. Lil' help?
The page structure is pretty simple:
The HTML
<?php require('common.php'); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ethogram Lab</title>
<link rel="stylesheet" href="css/foundation.css"/>
<link rel="stylesheet" href="css/foundation-icons.css"/>
<link rel="stylesheet" href="css/app.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div id="slide-content">
<div class="slide">
<div class="row">
<div class="row">
<!---- content ---->
</div>
<div class="row">
<div class="small-4 small-centered columns">
<h2 data-link="slide_0" class="medium button expand text-center pagenav">Start <i class="fi-play"></i></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='js/vendor/jquery.js'></script>
<script src='js/foundation.min.js'></script>
<script>
$(document).foundation();
</script>
<script src='js/app.js'></script>
</body>
</html>
The Javascript
And here is the relevant it of app.js
/**
* PAGE VARS
*/
var DS = '/';
var WEBROOT = "127.0.0.1"+DS+"ethogram"+DS;
var PHP = ".php";
/**
* DOM LISTENERS
*/
$(".pagenav").click(function() {
console.log("*** pagenav listener has fired");
var loc = $(this).attr('data-link');
var pageNum = loc.substr(-2) == "_" ? loc.substr(-1) : loc.substr(-2);
var URL = WEBROOT+"slides"+DS+loc+PHP;
$.get(URL, function(data) {
$("#slide-content").html('').append(data).fadeIn();
});
});
The ".on()" function should be used. ".live()" is deprecated.
.on() function
$("body").on("click", ".pagenav", function() {
// do something
});
You should use
$("body").on ("click",".pagenav",function(){
// Your code go here
})
This function will detect the items created programatically
See Documentation
I've recently started restructuring a website, which currently uses frames and framesets.
I have now adopted a typical structure.html:
<body>
<div>
<div id="headerNavigation"></div>
<div id="PageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
With the following jQuery scripts to populate the DIVs:
<head>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading the header. Please re-try"); });
function processHeader(file_data)
{
$("#headerNavigation").html(file_data);
}
$.get('TermsConditions.html', processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
$.get('Footer.html', processFooter, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processFooter(file_data)
{
$("#Footer").html(file_data);
}
</script>
</head>
This works great when i specify the Content page, however, i need some kind of jQuery function that forwards/populates the DIV with the correct content when clicking on an item in my Navigation menu - index.html:
<html>
<head>
<!-- jQuery code for drop down nav menus -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
</head>
<body>
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources">Date Sources <span class="icon-caret-down"></span>
<li>
Information
<ul class="fallback">
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Additional Info</li>
</ul>
</li>
<li>
Need Help?
<ul class="fallback">
<li>Need Help</li>
<li>FAQs</li>
<li>Ask our Experts</li>
</ul>
</li>
<li>
Cookies
</li>
</li>
</ul>
</nav>
</body>
</html>
Any ideas how how i can create a function to do this would be greatly appreciated.
Thanks
Update 21-06-2013 Basic Site Skeleton:
Index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
</head>
<body>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li><a onclick="gofor('information.html')">Information (go for)</a></li>
<li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>
<li><a onClick="gofor('information.html')">Information Go For onClick</a></li>
<li>Information Go For HREF</li>
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
<section>
<div class="page-heading">
<h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>
Other welcome content
</div>
</section>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small>2013 TL&C’s. </small>
</div>
</footer>
Frameset.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="en">
<head>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processHeader (file_data)
{
$("#header").html(file_data);
}
</script>
</head>
<body>
<div>
<div id="header"></div>
<div id="PageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
</body>
</html>
PageHeader.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Page Header</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function() {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li><a onclick="gofor('information.html')">Information (go for)</a></li>
<li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
Information.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Information</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>
<body>
<form>
Information about Tables Ladders and Chairs etc.
</form>
<br>
</body>
</html>
Thanks
You can, for each link in the menu, add a call to a function like this:
<a onclick="$.get('Information.html', processContent, 'html')" >Information</a>
As you see, you will reuse the same function used to load the content the first time:
$.get('Information.html', processContent, 'html')
In this way,you have just called the same 'processContent' but for a different page to load. You can simplify the onclick event more by adding a third function which will be called by the onclick(or href) and then, will call the function to load the content, like this:
<a onclick="gofor('Information.html')">Information</a>
or this one:
Information
and then add this simple function:
function gofor(page){
$.get(page, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
Obviously you can't use this function to load external content, because it's forbidden by the browsers
Your index page should be something like this, please pay attention to the div with id "pageContent" in it the pages will be loaded and to the function you need to have to load contents in your page.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://modernizr.com/i/js/modernizr.com-custom-2.6.1-01.js"></script>
<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
</head>
<body>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li>Information (go for)</li>
<li> New Customer (Go For)
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
<section>
<div class="page-heading">
<h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>
Other welcome content
</div>
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small>2013 TL&C’s. </small>
</div>
</footer>
There is no need for you to load all those elements via javascript. In fact I would argue that it's bad practice. You're making unnecessary calls that will lead to longer loading times for your visitors. The standard practice is to load your initial content and then use javascript as needed to respond to user commands.
I understand what you're trying to do with splitting up the content into separate partials (Header, footer, etc..) but this isn't usually how it's done. There are some template engines that would do exactly what you're trying to achieve without requiring extra ajax calls to pull in regular html content. Here are some basic examples of separating out reusable content:
PHP (Server side):
<?php include 'pageheader.html'; ?>
<div>My main content</div>
<?php include 'footer.html'; ?>
Handlebars.js (Client side)
{{>pageheader}}
<div>My main content</div>
{{>footer}}
Having said that, if you absolutely must stick with the current set up, then you would just need to parse out the url from the a tag and send that to your processContent function. Here is an example of how you can do that using jquery:
$('li').on('click', function (e) {
var url = $(this).find(">:first-child").attr('href');
$.get(url, processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
});
The above code basically just binds to the click event of every li and grabs the a tag's href value before passing that value to your processContent function