I can't seem to figure out why this wont work. I have a footer.html file in my main directory, one level above the directory this file is located in. I'm trying to include it on all the pages in the website, without having to have the footer.html file copied into every subdirectory. I assumed that a simple ../ preceding the footer.html would work, like it does in HTML, but maybe it doesn't work in jquery? It works fine on all the pages in the top level directory where the footer.html file is located. Can someone tell me what I'm missing here? It validates as correct. I'm sure it's something I'm overlooking. The whole point of making one footer.html page is so that I can update it in one place and it updates on every page, if I can't figure this out, it sort of defeats the purpose. Also: should I move the script to the head tag instead of nesting it inside the footer div tag?
HEADER:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title></title>
<style>
body {background-color:#000000; color:#ffbb00;}
a, h1 {color:#ffffff;}
.center-div {
margin: 0 auto;
width: 1084px!important;
background-color:#000000;}
div.rule { margin: 0 auto;
width:50%;
height:1px;
background:#ffbb00;
align:center;
overflow:hidden;}
</style>
</head>
FOOTER:
<div id="footer">
<script>
$( "#footer" ).load( "../footer.html" );
</script>
</div>
You are mixing metaphores here.
jQuery's .load uses a URL which doesn't conform with file-system methods. You'll need to either use the absolute reference to the URL of the footer or use some javascript to figure out what it is. For example:
window.location.href.substr(0,window.location.href.lastIndexOf("/")+1)+"footer.html"
That's pretty goofy, but it finds the last "/" in your URL then cuts everything after it and appends footer.html to it.
Since your code is inside the block it's trying to look up, it's probably not loaded yet. Best practice is to wrap jquery calls in a $(document).ready(). Also, it's cleaner to not use relative stuff in your url's like ../. If you use relative paths that start with a slash like /templates/footer.html, you can reuse the same script on all your pages.
Related
I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.
The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.
Here's the rendered HTML.
And here’s a code snippet showing you how I generate these pages:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
});
</script>
<div id="includeHeader"></div>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="includeNavigation"></div>
I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.
You should use one of the templating languages.
If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.
You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.
You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.
Try
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
</script>
</body>
Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden,
$( "#result" ).load( "ajax/test.html", function() {
/// show your stuff
});
You will of course need to know both has loaded.
I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.
I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html", function(data){
console.log("header loaded");
$("#includeNavigation").load("includes/templates/navigation.html", function(data){
console.log("navigation loaded");
});
});
</script>
</body>
I'm creating a website that uses jQuery .load() to present content that is stored in divs on another .html page, as follows
index.html head:
<link href="css/prism.css" rel="stylesheet" />
<script type="text/javascript" src="js/prism.js"></script>
index.html:
$('#content').load('project_info.html #example', function() { $(this).fadeIn(".25s"); });
project_info.html's corresponding div:
<div id="example">
<pre><code class="language-css">p { color: red }</code></pre>
</div>
I'm trying to get the prism.js code block to display correctly, and while
<pre><code class="language-css">p { color: red }</code></pre>
works properly when I embed it in index.html, it won't seem to inherit the prism.js file, just the prism.css stylesheet. It seems the prism.js file won't manipulate the "content" div. Any ideas?
After you load the remote content onto your page, you'll need to manually apply prism to it. After some brief search, looks like prism.js provides this method:
highlightElement: function(element, async, callback) { ... }
I'm assuming can use Prism.highlightElement(document.getElementById('example')) to highlight the code inside #example.
(Also see this example: https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)
I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});
New to designing on the Volusion platform and stuck after investigating the help topics on the support forms. I need to override a CSS style on all pages but my default.asp homepage. I am attempting to do this with javascript but it doesn't seem to be working.
Here is the demo for the site: http://v1330583.ovjk2w9aumkd.demo19.volusion.com/default.asp
I am attempting to modify my #content rule by beginning with this Javascript:
<script type="text/javascript">
//<![CDATA[
if (location.pathname == "/ProductDetails.asp") ||
location.pathname.indexOf("-p/") != -1 ||
location.pathname.indexOf("_p/") != -1)
var onHomepage = true;
if(!onHomepage)
document.writeln("\n<style type='text/css'>content {
padding: 20px background-color: #fff}</style>\n\n");
//]]> </script>
Can anyone tell me
Where I should inset this code.
If there is a better way to do this.
Would really appreciate any help!
There's a much simpler way to do this in Volusion without Javascript. If you log in to your dashboard, go to 'Design->File Editor" and then click on the template HTML file (it will be under the heading 'Template Files', you'll be in the main template file for your site.
In between the <body> tags you'll just add a div with an id of "if_not_homepage" and the site will only read the contents of this div if not on the default.asp page. For example:
<div id="if_not_homepage">
<style type="text/css">
#content{
padding:20px;
background-color:#fff;
}
</style>
</div>
OR you could call a separate stylesheet completely from within this div (for example):
<div id="if_not_homepage">
<link rel="stylesheet" href="/v/vspfiles/templates/YOUR_TEMPLATE/css/inner_style.css" />
</div>
If you place the stylesheet within the directory "/v/vspfiles/templates/YOUR_TEMPLATE/css/" you'll be able to edit the stylesheet from within the File Editor in the Volusion dashboard as well (like your other stylesheets).
Alternately, there is a div with an id of "if_homepage" that is read only if the user is on the default.asp (opposite of "if_not_homepage").
On a completely separate note, in your code above, you are missing either a class (.) or id (#) selector on 'content' in your CSS, so that may have something to do with it as well.
Instead of a style tag, I think you are better off setting the style directly with jQuery (if the DOM is loaded) or writing out a link tag to a separate style sheet.
This sounds a little obscure, but...
Is there a technique in Jquery (or just straight javascript) to step thru all the external CSS and JS file references in an HTML file and replace the references with the contents of the files.
So instead of:
<link rel='stylesheet' id='style-css' href='http://domain.com/style.css' type='text/css' media='all' />
<script type='text/javascript' src='http://domain.com/js/domain.js'></script>
..it takes all the stuff from those files and sticks it into the rendering html to make one big html doc...?
<head>
...
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
.etc {color:red}
.etc {color:red}
.etc {color:red}
</style>
<script type="text/javascript">
function message()
{
alert("This is an alert");
}
etc
etc
</script>
</head>
<body>
...
</body>
Add this script..
$("script").each(function() {
var script = $(this);
script.load(script.attr("src"));
script.removeAttr("src");
});
$("link[rel='stylesheet']").each(function() {
var link = $(this);
link.after("<style type='text/css'></style>").next().load(link.attr("href"));
link.remove();
});
..and you can test it with..
alert($("head").html());
..when it's all done.
(And I don't see any reason in doing this ;)
The only place I can imagine that makes sense is if you run Javascript on the server, using Rhino or similar.
You can do as Sverre suggests and load the files yourself from the browser instead of letting the browser do it, but I can't see any scenario where that would be useful - you have the same number of background requests and end up with the same result, so the only thing you gain is extra work for yourself and probably some extra delay in rendering the page. Or do I misunderstand your goal?
On the server, on the other hand, it can make sense, as the browser can save a load of requests by getting all the external resources in the same document. Is this what you want to achieve?