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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    changing embed src attribute via javascript (jquery) works in firefox, not safari

    Hey all,

    1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.

    2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags?

    Code:
    $(".image_thumb ul li ul li").click(function(){  			
     
    	var imgTitle = $(this).find('a').attr("href");  
    	var imgDesc = $(this).find('.block').html();  
    	var imgDescHeight = $(".main_image").find('.block').height(); 	
    
    	if ($(this).is(".active")) {   
    		return false;  
    	} else {
    		console.log(imgTitle);
    		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
    			$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
    			$(".main_image embed").attr({ src: imgTitle}); 
    		});
    	}
    
    	$(".image_thumb ul li ul li").removeClass('active');  
    	$(this).addClass('active');  
    	return false;
    
    }) .hover(function(){
    	$(this).addClass('hover');
    	}, function() {
    	$(this).removeClass('hover');
    });
    Thanks for response.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    I tried cloning:
    Code:
        $(".image_thumb ul li ul li").click(function(){     
    var imgTitle = $(this).find('a').attr("href");  
    var imgDesc = $(this).find('.block').html(); 
    var imgDescHeight = $(".main_image").find('.block').height();   
    
    if ($(this).is(".active")) {  
        return false; 
    } else {
        alert(imgTitle);
        var videoClone = $(".main_image object").clone()
           .find("embed").attr({src: imgTitle}).end()  
           .find("param:first").attr({value: imgTitle});
        $(".main_image object").remove();
        $(".main_image").append(videoClone);
    
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
            $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
    
        });
    }
    //more code
    Still doesn't work! In fact, now quicktime movie doesn't ever get loaded.

    Has anyone manipulated quicktime movies with JavaScript before? Could I be the only one in the world?

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    The only solution was to put the object and embed tags in divs and control the divs. However, the embed tags are still layered on top of everything else in page, even though they should be behind some things like a menu that I have animate up. It's like these embed tags defy all logic.


  •  

    Tags for this Thread

    Posting Permissions

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