Paul Paul - 1 month ago 12
CSS Question

Unwanted behaivour with iframes and transitions

I have a bit of a tricky one here. Please keep in mind I am very new to web dev. I am trying to get videos to open with a fade in and a slide when a text is clicked. I am using iframes as it allows me to avoid jquery's slide function which is not smooth enough unless it's cached. I have never used iframes before and I am running into unwanted behaivour. When I click on a link, ALL VIDEOS, open up. See gif:

enter image description here

here is my code. I have edited the text out for clarity.

The way I've gone about it is that all videos have a class that has them collapsed and with the javascript I add a class of "open". But as I said, it seems to target all of them. Any help appreciated. P

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
<div id="wrap">

<p id="text"> Lorem ipsum dolor...
<span id="link1">link 1</span>
<span id="wrap1">
<iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor...
<span id="link2">link 2</span>
<span id="wrap2">
<iframe id="frame2" class="rect" src="iframe2.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor sit amet...
</p>

</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>


CSS:

#wrap{
margin: 100px auto;
width: 350px;
}

p{
line-height: 2em;
}

iframe {
border:0 none;
}

.rect{
float: left;
height: 0px;
width: 350px;

display: block;
margin: 0px;
padding: 0px;

opacity: 0;

transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}

.open {
height: 200px;
width: 350px;
opacity: 1;
}

#link1{
color: red;
cursor: pointer;
}

#link2{
color: red;
cursor: pointer;
}


JavaScript:

$(document).ready(function(){

$("#link1").click(function(){


if ($( ".rect" ).hasClass( "open" )){

$(".rect").removeClass("open");

$("body").find("iframe").contents().find("#pasc").get(0).pause();

} else {

$(".rect").addClass("open");

$("body").find("iframe").contents().find("#vid1").get(0).play();
}
});

$("#link2").click(function(){


if ($( ".rect" ).hasClass( "open" )){

$(".rect").removeClass("open");

$("body").find("iframe").contents().find("#vid2").get(0).pause();


} else {

$(".rect").addClass("open");

$("body").find("iframe").contents().find("#vid2").get(0).play();
}
});
});


iframe1:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid1" width="350" height="200" >
<source src="video1.mp4" type="video/mp4">
</video>
</body>
</html>


iframe2:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid2" width="350" height="200" >
<source src="video2.mp4" type="video/mp4">
</video>
</body>
</html>

Answer

Working fiddle.

When you use $(".rect") it'll target all the elements with class rect, same thing when you call $("body").find("iframe") it will target all the iframes in the page and that you're problem here.

so to avoid that you could use the current object $(this) to refer to the related iframe with the clicked link using :

$(this).next().find('.rect');

So you could store it in a variable and just use it to trigger all the other functions :

$("#link1").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#pasc").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid1").get(0).play();
    }
});

$("#link2").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#vid2").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid2").get(0).play();
    }
});

Hope this helps.