ReplaceWith Jquery issue

Question

What I am trying to do is when I select one of the project thumbnails, the video on the right gets replaced, as visualized here. I have discovered I cannot do it more than once though.

I have been searching on event propagation, and I would have to use $this instead so that everytime I click on a different project, I get to change it to the desired video.

I have done a small hack where I created a hidden div with all the content inside so the replacewith could work, it works one way, but when I do the opposite the buttons don't work anymore. Any suggestions? Many thanks in advance :)

My code is here.

$(function() {
	
var height =1000;
var animSpeed=1000;
var topArrowbtn = $('.arrowTop');
var bottomArrowbtn = $('.arrowBottom');
var $slider = $('.projectorganizer');
var $slideContainer = $('.SlideContainer',$slider);
var $projects = $('.projectC', $slider); 
var $p1 = $('.pro1');
var $p2 = $('.pro2');

var $project = $('.videoSel');
var $project2 = $('.videoSel2');
var $project3 = $('.videoSel3');
var interval;

	function startSlidingUp() {
	
	$slideContainer.animate({'margin-top': '+=' +50},animSpeed, function(){
		/*if($projects.length == */
		
		
		
		}
	
		);

	}
	
	function changeProject1() {
		$("div.videoSel").replaceWith($project2);
		
	}
	
	function changeProject2() {
		$("div.videoSel2").replaceWith($project3);
		
	}
	
	
	
	$p1
	.on('click',changeProject1);
	
	$p2
	.on('click',changeProject2);
	
	/*check if
3
4
5
6
7
// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
    var elem = $( this );
    if ( elem.is( "[here I will check if class name equals to desired]" ) ) {
        elem.attr( "target", "_blank" );
    }
});
});
	*/
	
	
	
	
	
});

.Projectscontent {
	width: 900px;
	max-height: 450px;
	
	margin: 3% auto;
	text-align: center;
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
	-webkit-transform: rotate(0.000001deg);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.projectchooser {
	width: 200px;
	height: 300px;
	background-color: #FF9900;
	float: left;
	
}

.projectorganizer{
	overflow:hidden;
	position:relative;
	width:100px;
	margin:25px auto;
	height:250px;
	background-color:#0C3;
	max-width:100px;
	max-height:250px;
}

.arrowTop{
	width:100px;
	height:20px;
	margin-bottom:5px;
	background-color:#FF0;
}

.arrowBottom{
	width:100px;
	height:20px;
	margin-top:5px;
	background-color:#FF0;
	bottom:0;
	position:absolute;
}



.hiddenContent{
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	max-width:20px;
	max-height:20px;
	background-color:#0CF;
	z-index:-2;
	
}



.projectC{
width:100px;
height:80px;
margin:2px 0;
background-color:#3FC;	
}

.Desccontent {
	float: left;
}
.ContentTitle {
	background-color: #0CF;
	width: 900px;
	min-height: 50px;
}
.ContentTitleTextContainer {
	max-width: 800px;
	max-height: 50px;
	padding-top: 10px;
	margin: 0 auto;
}
.TitleDesc {
	
	min-width: 800px;
	max-width: 800px;
	max-height: 50px;
	margin: 0 auto;
	font-size:24px;
	color: #FFF;
}
.ContentDesc {
	background-color: #0CF;
	width: 900px;
	min-height: 100px;
}
.descP {
	max-width: 800px;
	max-height: 50px;
	padding-top: 20px;
	margin: 0 auto;
}
.Pclass {
	line-height: 20px;
	max-width: 800px;
	max-height: 50px;
	margin: 10 auto;
	text-align: justify;
	overflow: scroll;
	overflow-x: hidden;
	color: #FFF;
	padding-right: 5px;
}
.videoP {
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-bottom-right-radius: 0px;
	-webkit-border-top-left-radius: 0px;
	-moz-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-top-right-radius: 0px;
	width: 700px;
	max-height: 300px;
	overflow: hidden;
	position: relative;
}
@font-face {
	font-family: "Inconsolata";
	src: url('Inconsolata.otf');
}

video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
	transition: 1s opacity;
}

.footer {
	clear: both;
}

  
    
      
        ffffffffffffffffffffffffffffffffffffffff
      
    
     
 
      
        
          
          
        
        
          
          
          
        
      
    
    
      
        
      
    
    
      
        fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

gaetanoM · Accepted Answer

Instead to replace the div with the iframe inside try only to replace the iframe content:

$("div.videoSel2 > iframe").attr('src', $('.videoSel > iframe').attr('src'));

To handle the click event for the two yellow buttons you can do:

$('.arrowTop').on('click', function(e) {
   alert('ok');
});

$('.arrowBottom').on('click', function(e) {
   alert('ok');
});

ReplaceWith Jquery issue

Answers (1)

Related Questions