Load and Unload a Page into a Div w/ Nav List
Question
I've done ample research on this problem and have not yet found a solution that works for me. If you go to this link , you will see that I have used a work around to create a list, that links to iFrame Vimeo embeds. I would be fine with this, but the video continues to play, when clicking on another title in the nav list, as the videos are just stacked and hidden by the overflow. I used this content switcher ()as a starting point, without JS and then when I incorporated the JS, in Firefox, the videos stopped playing over one another, but this fix does not work in Chrome, or IE ( here's the link so you can test for yourselves ).
You will notice by my code (and question), that I am not a programmer, but I am trying to learn. If someone could help me to understand why this is not compatible with any other browsers than Firefox, it would be much appreciated. I'd love to understand JS better and I know there's a lot of extra syntax in the JS file than there needs to be. If someone could help me to arrive at a fix, I would be ever so grateful!
Thank you for reading this!
<body style="width: 98%;">
<div style="width: 625px; margin: 0 auto 0 auto;">
<div id="content-slider">
<ul id="content-slider-inside">
<li id="one"><object type="text/html" data="levelland.html" style="width:100%; height:400px; margin:1%;"></object></a></li>
<li id="two"><object type="text/html" data="legacy.html" style="width:100%; height:400px; margin:1%;"></object></a></li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
</div>
<ul id="navigation">
<li><a href="#one" class="selected">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
$(document).ready(
function() {
var currentHash = location.hash.split("#");
if (currentHash.length > 1) {
var currentHashString = currentHash[1].toString();
$("#navigation li a").removeClass("selected");
$("#navigation li a[href*="+currentHashString+"]").addClass("selected");
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === currentHashString || currentHashString === "") {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+currentHash[1];
} // if
} // else
} // if
} // for
} else {
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id !== "one") {
$(contentCollection[i]).fadeOut(650).css("display", "none");
}
} // if
} // for
} // else
$("#navigation li a").click(function() {
var myClicked = this.href.split("#");
$("#navigation li a").removeClass("selected");
this.className = "selected";
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === myClicked[1]) {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+myClicked[1];
}
} // else
} // if
} // for
return false;
} // click func
); // click event
} // anon func 1
); // ready
1 answers
solution1
0 2011-11-16 04:30:42
it would have been much easier if you posted your codew here as well, but from your post I gather that each frame is "hidden" once you navigate away from it. I think the best way to overcome this problem is to "remove" each frame insteade of hiding them by using html() function. so each time a title is clicked , use for example $("#frame").html("<frame ... ") to change the html content of your main frame. you can read more here :http://api.jquery.com/html/
if you have further questio, just post up your code and I'll fix it for you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.