5 replies to this topic

[andershp]

Hi
I've built a website with a jQuery navigation menu which replaces a <div> on the page with a <div> from another file - in that way, if the user does not have javascript turned on, the page will just change anyhow.

I'm using lytebox for showing images since it auto-resized (which lightbox doesn't), but there are some problems with this add-on:

1. During the loading of the page, lytebox does not work and that is sometimes a problem since the page contains some pictures and a soundcloud music player.

2. After changing the content of the page using jQuery, lytebox doesn't work either.

What can the problem be and how do I solve it?

Help appreciated - Thanks.

[dargueta]

Can you show us some code, or give us a URL to look at it?

[andershp]

It's currently just on a local server, so unfortunately I can't just post a URL.

The jQuery script for the navigation is:

$(document).ready(function() {

	$('#home_link').click(function() {

		$("#content").load("index.php #home");

	});

	

	$('#about_link').click(function() {

		$("#content").load("about.php #about");

	});

});

index.php (the important part of it):

<div id="content">

        <div id="home">

        </div>

</div>

about.php:

<div id="content">

        <div id="about">

        </div>

</div>

The menu, included with php include:

<ul class="nav" id="ajax">

	<li><div id="home_link" style="cursor:pointer"><h3 class="mainfont"># HOME</h3></div></li>

	<li><div id="about_link" style="cursor:pointer"><h3 class="mainfont"># ABOUT</h3></div></li>

</ul>

The lytebox script... :

<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>

<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />

is included on all pages in with php include, including the index.php page which is the one being changed by AJAX - and in which Lytebox works until ajax is used.

Sorry for the very long post, but I wasn't really sure how much code you meant. :)

[dargueta]

index.ph[COLOR="red"][B]p #[/B][/COLOR]home

No space between the .php and the #. Same goes for any URL.

[andershp]

If I do that, the whole index.php is loaded into the content <div>. The reason it is index.php #home (or #about) is that it's only supposed to load the home <div> into the content <div> in index.php, since both index.php and about.php contains the whole page, including header, banner image etc.
This way the site works completely fine in browsers with javascript deactivated as well.

[dargueta]

Yeah, not sure about that. Sorry.