Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: jquery problem

  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery problem

    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:
    Code:
    $(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):
    Code:
    <?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:
    Code:
    $(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
    Attached Thumbnails Attached Thumbnails jquery problem-screen-shot-2011-01-03-5.21.35-pm.jpg  

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump/

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    look at http://api.jquery.com/live/. From reading your issue, it sounds like that might be what you're looking for.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •