Change class of iframe element on click - javascript

I have an iframe (soundcloud embedded track) of a particular class.
What I want is that, when I click on the iframe, its class change to another one with different properties.
My code for that is:
index.html
<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
<script>
$('#soundcloudtrack').click(
function (v) {
$(this).toggleClass('soundcloud soundcloudext');
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
}
);
</script>
and style.css:
.soundcloud{
z-index:99997;
width:100%;
height:62px;
opacity:0.25;
}
.soundcloudext{
z-index:99997;
width:100%;
height:135px;
opacity:1;
}
But it's not working and I can't see why. I have also tried with getElementById. Can you please help?

You can't really target the iframe directly as I.G stated, you need to set something over the iframe that you can control on your webpage , I wrote something on jsfiddle, please try and see if it's what you are looking for: https://jsfiddle.net/652ejv6j/#run.
<div id="player">
<span>click here</span>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
</div>
$('#player span').click(function() {
//alert(1);
$("#soundcloudtrack").toggleClass('soundcloud soundcloudext');
alert($("#soundcloudtrack").attr("class"));
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
});
.soundcloud {
z-index: 0;
width: 100%;
height: 62px;
opacity: 0.25;
}
.soundcloudext {
z-index: 99997;
width: 100%;
height: 135px;
opacity: 1;
}
#player {
position: relaitve;
z-index: 999;
width: 100%;
height: auto;
}
#player span {
position: absolute;
height: 20px;
top: 40px;
opacity: 0;
z-index: 999;
text-align: center;
width: 100%;
}
ALT Check if there's an API for your player through which you can control directly.

Related

Get mouse events (click) from the overlay div

I have the following code with an invisible div that's over an iframe. I would like to get all the mouse events that are executed on the iframe (for now let's listen just to click). But if I set the pointer-events to none, the click listener is not called.
I tried to implement this as well, but without success: Add click event to iframe
My goal is to listen to any event that happens in the iframe and pop-up a message in the main window: "some event happend in the iframe". I don't care to know more info about the events in the iframe, just if they where triggered or not.
Note: The src of the iframe is a different domain as the window.
Any ideas if this is possible?
jQuery(function($) { // DOM ready
$('#overlay').on('click', function(e) {
alert('test');
});
});
#frame {
z-index: 1;
width: 600px;
height: 400px;
position: absolute;
pointer-events: all;
}
#overlay {
width: 605px;
height: 405px;
opacity: 0;
background: red;
z-index: 9999;
position: absolute;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>
here is http://jsfiddle.net/cxbmu/348/
var frame = $('#frame').contents(); only possible if same domain or CORS
frame.find('body').click(function(event){
console.log('yaay');
});
If this wasn't given many sites would be pretty vulnerable to XSS.
you must remove pointer-events: none from css:
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>
#frame {
z-index: 1;
width: 600px;
height: 400px;
position: absolute;
pointer-events: all;
}
#overlay {
width: 605px;
height: 405px;
opacity: 0;
background: red;
z-index: 9999;
position: absolute;
}
$(document).ready(function(){
$('#overlay').on('click', function(e) {
alert('test');
});
})

Removing iframe white space around videos?

How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>

Fullscreen image view not behaving correctly after scrolling

I've created a full-screen image viewer as follows...
At the top of my <body> tag I have the following:
<div id="backdrop" class="hide"></div>
I then have some <img> tags that are toggled via JavaScript.
<img id="1" onClick="toggleSelect(1)" src="thumb.jpg" class="small" />
<img id="2" onClick="toggleSelect(2)" src="thumb.jpg" class="small" />
<img id="3" onClick="toggleSelect(3)" src="thumb.jpg" class="small" />
CSS:
#backdrop {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000000;
}
.hide {
display: none;
}
.show {
display: block;
}
img.small {
cursor: pointer;
position: relative;
height: 300px;
width: auto;
z-index: 999999;
}
img.big {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
z-index: 1000001;
}
The images and the backdrop basically have their classes toggled:
<script type="text/javascript">
toggleSelect: function(index) {
if (images[index].selected)
{
$("#"+index).addClass('small');
$("#"+index).removeClass('big');
$("#backdrop").addClass('hide');
$("#backdrop").removeClass('show');
images[index].selected = false;
}
else {
$("#"+index).addClass('big');
$("#"+index).removeClass('small');
$("#backdrop").addClass('show');
$("#backdrop").removeClass('hide');
images[index].selected = true;
}
}
</script>
This all works well and good as you can see here:
However, if I scroll down and then toggle the image, you can see it's problematic:
Given this situation, is there any easy or convenient way to get the image to go fullscreen (90% height as set in the CSS) regardless of my current scroll position?
Thanks in advance for any help.
Try by setting overflow hidden to body, when image is fullscreen:
<script type="text/javascript">
toggleSelect: function(index) {
if (images[index].selected)
{
$("#"+index).addClass('small');
$("#"+index).removeClass('big');
$("#backdrop").addClass('hide');
$("#backdrop").removeClass('show');
$('html, body').css({overflow: 'auto'});
images[index].selected = false;
}
else {
$("#"+index).addClass('big');
$("#"+index).removeClass('small');
$("#backdrop").addClass('show');
$("#backdrop").removeClass('hide');
$('html, body').css({overflow: 'hidden'});
images[index].selected = true;
}
}
</script>

iframe resizing window with overlay

As you all know iframe's are archaic but I wish to have a responsive one. Basically the video always needs to be 100% of the available screen height (which is actually 94.2% because of the banner at the top of every webpage of the site) even when changing window size. I was just wondering how to set the width so it is always 16:9 because at the moment the video displays as a strip:
<iframe src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div id="video-overlay" onclick="hide()">
<h2>Video</h2>
</div>
<script>
function hide() {
document.getElementById("video-overlay").style.display = "none";
}
</script>
#iframe {
display: block;
border: none;
height: 94.2vh;
}
#video-overlay {
position: absolute;
top: 0;
left: 23.4%;
width: 53.3%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#video-overlay h2 {
color: white;
position: absolute;
bottom: 2%;
left: 5%;
}

Pre-loader Image at page load issue

I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards
I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).
page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});
Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}

Categories