...

View Full Version : jquery problem



matt_sich
01-03-2011, 10:32 PM
hey guys,

I'm building a little tutorial player for a friend. I have four tabs that load new content when pressed but don't reload the page.
On each page I have a vimeo video in an iframe and a slider bar with videos on it.
I attached a screenshot
when you press the left right buttons, the list of videos slides and when you press a video, the iframe with the vimeo video changes.

Here's my problem:
When I first load the page everything is fine (the jquery things work) but when I go to one of the other tabs (or even if I return to the same tab) it seems like jquery stops working. The left right button rollover js actions still work but when I click them, the videos don't slide. When I click a video, the new video doesn't work.

Here's the code I used for the tab thing:

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#tuttabs .singletab a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html .contentwrap';
$('.contentwrap').load(toLoad)
}
});

$('#tuttabs .singletab a').click(function(){

var toLoad = $(this).attr('href')+' .contentwrap';
$('.contentwrap').hide('fast',loadContent);
$('#load').remove();
$('#tuttabs').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('.contentwrap').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('.contentwrap').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;

});

});

and here's what I used for the individual pages(this is just one of the tabs):


<?php $thepage = other; ?>

<div id="tuttabs">


<div class="singletab"><a href="index.php"><img src="tutorialsmedia/c4d.png" name="c4dbutton" onmouseover="buttondown('c4dbutton')" onmouseout="buttonup('c4dbutton')" onmouseup="buttongo('c4dbutton')" id="c4d"/></a></div>
<div class="singletab"><a href="other.php"><img src="tutorialsmedia/other.png"name="otherbutton" onmouseover="buttondown('otherbutton')" onmouseout="buttonup('otherbutton')" id="other"/></a></div>
<div class="singletab"><a href="3dartist.php"><img src="tutorialsmedia/3da.png"name="somebutton" onmouseover="buttondown('somebutton')" onmouseout="buttonup('somebutton')" onmouseup"buttongo('somebutton')"/></a></div>
<div class="singletab"><a href="web.php"><img src="tutorialsmedia/web.png"name="webbutton" onmouseover="buttondown('webbutton')" onmouseout="buttonup('webbutton')"/></a></div>
</div>
<div class="contentwrap">

<script type="text/javascript" src="../scripts/other.js">


</script>
<div class="pagetitle">Other</div>
<iframe id="theframe" src="http://player.vimeo.com/video/7419113" width="855" height="480" frameborder="0"></iframe>

<br/>

<img src="tutorialsmedia/left.png" class="right" name="leftbutton" onmouseover="buttondown('leftbutton')" onmouseout="buttonup('leftbutton')" onmousedown="buttonclick('leftbutton')" onmouseup="buttongo('leftbutton')"/>
<img src="tutorialsmedia/right.png" class="left" name="rightbutton" onmouseover="buttondown('rightbutton')" onmouseout="buttonup('rightbutton')" onmousedown="buttonclick('rightbutton')" onmouseup="buttongo('rightbutton')"/>



<div class="container">
<div class="block">

<div class="tutorial">
<div class="title"> 04 C4D to AE </div>
<img src="../tutorialimgs/other04.gif" class="image" height="64" id="104" style="border-color: #e66800;"/>
</div>
<div class="tutorial">
<div class="title"> 03 Dynamic titles in AE </div>
<img src="../tutorialimgs/other03.gif" class="image" height="64" id="103" />
</div>
<div class="tutorial">
<div class="title"> 02 Vue|Little Big Planet</div>
<img src="../tutorialimgs/other02.gif" class="image" height="64" id="102" />
</div>
<div class="tutorial">
<div class="title"> 01 Vue skies with C4D </div>
<img src="../tutorialimgs/other01.gif" class="image" height="64" id="101"/>
</div>


</div>

</div>

<div id="description">Learn how easy it is to use Vue atmospheres/skies to light your cinema 4d scenes, even if you don't have Vue xStream. It's simple to do and can give some lovely results. Also a tip about using the hair engine in a scene lit this way.<br /></div>







</div>

and finally, here's the js for that page:



$(function() {

var video4 = "Learn how easy it is to use Vue atmospheres/skies to light your cinema 4d scenes, even if you don't have Vue xStream. It's simple to do and can give some lovely results. Also a tip about using the hair engine in a scene lit this way.";
var video3 = "In this tutorial you will learn how to create a planet with exaggerated features, similar to things you may have seen in advertising for Lloyds TSB, British Gas or Chrysler. <br/>It is a simple project but gives great results very quickly and easily.";
var video2 = "This is the video tutorial from 18/08/09 and covers creating a fun and dynamic title sequence in After Effects.";
var video1 = "This tutorial is a response to a question on the C4Dcafe.com forums.<br/>I hope it sheds some light for you.";


$(".right").click(function(){
if(count > 0){
count -= 1;
$(".block").animate({"left": "+=431px"}, "slow");
}
});

$(".left").click(function(){
if(count < 1){
count += 1;
$(".block").animate({"left": "-=431px"}, "slow");
}

});

var count = 0;
var border= 1;

$('.image').click(function(){
if(border = 1){
$('.image').css({'border' : 'solid 2px #666'});
$(this).css({'border' : 'solid 2px #e66800'});
}

});

var testIFrame = $('#theframe');



$('#104').click(function(e) {
var testUrl = 'http://player.vimeo.com/video/7419113';
var str = $("#description").html(video4);
testIFrame.attr('src', testUrl);
e.preventDefault();
});
$('#103').click(function(e) {
var testUrl = 'http://player.vimeo.com/video/6891644';
var str = $("#description").html(video3);
testIFrame.attr('src', testUrl);
e.preventDefault();
});
$('#102').click(function(e) {
var testUrl = 'http://player.vimeo.com/video/6178853';
var str = $("#description").html(video2);
testIFrame.attr('src', testUrl);
e.preventDefault();
});
$('#101').click(function(e) {
var testUrl = 'http://player.vimeo.com/video/5430325';
var str = $("#description").html(video1);
testIFrame.attr('src', testUrl);
e.preventDefault();
});
});


I've been trying to get this to work with no success. I would really appreciate it if someone could help me out with this!
thanks,
Matt

matt_sich
01-04-2011, 04:59 AM
bump/

matt_sich
01-05-2011, 12:56 AM
anyone?

harbingerOTV
01-05-2011, 02:06 PM
look at http://api.jquery.com/live/. From reading your issue, it sounds like that might be what you're looking for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum