Develop Reference

loading navbar for the whole site, how should i deal with the links?

I have just started this small project for a website and I thought i should use only one menu bar for the whole site, since it's kinda tedious to have to change all the links for all the pages in the menu bar.
I have found the following code for loading my menu bar:
<div id="nav-placeholder"></div>
<script type="text/javascript">
$(function(){
$("#nav-placeholder").load("navbar.html");
});
</script>
It works fine and I do get my menu, however I find that the links basically work the same as if I just had the menu on the page instead of loading it.
So for example if I am on the root directory everything loads fine, but as soon as I move up one directory the links wont work anymore.
I know this can be fixed by simply changing them, but then I would have to make more than a couple of navbars for the whole site?
Any fix around this?, hope you guys get my idea, would appreciate any help.

If you're using anything that can dynamically create pages on the fly like ASP or PHP then you could make a separate page with just the menu in and include it in each page that needs it. For example:
ASP:
<!-- #Include virtual="menu.aspx" -->
PHP:
<?php include 'menu.php';?>

Bootstrap Dropdowns will expand, but not close when included as asp file

I have created a bootstrap navigation bar that works perfectly in its own html file. The dropdowns on this file will open and close like they should. I want to include this file onto my other pages so that I don't have to update every single page's navigation bar if I ever change it. I have chosen to do this through using server side includes. My other pages are saved as asp files to allow for server side includes.
When I use
<!-- #include virtual="/navigation.html" -->
the dropdowns in the navigation are able to be expanded, but they will not go back up. Any ideas what may be going wrong?

I figured out the problem. My include files only needed the html code, no links to javascript, css, or opening and closing html,head, or body tags.

How to load remote html page links in the same <div> container?

This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.

Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});

Bootstrap.js file in both parent and iframe

I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?

found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).

I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.

You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.

Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.

I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.

It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css

Open the shadowbox.css and set direction:ltr for #sb-container