I'm using a plugin called vuukle on wordpress and load a comment section. Inside that section I need to replace an image url. But seems like code is not working without any error. This is my code,
$('.bXLoAM').each(function (i, obj) {
var str = obj.href;
str = str.replace("https://api.vuukle.com/stats/External?source=talk_of_town&url=", "");
str = str.replace("https://api.vuukle.com/stats/External?source=talk_of_town&url=", "");
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent(str) +
'&callback=?',
function (data) {
console.log(data.contents);
var s = data.contents;
var htmlObject = $(s);
$(obj.querySelector('img')).attr("src", htmlObject.find('.attachment-single_thumb')[0].src);
});
});
And below is the code in iframe with parent div. And think iframe is loaded with ajax via plugin.
<div id="vuukle-comments" class="commentBoxDiv" style="display: flex;flex-direction: column;width: 100%;align-items: stretch;">
<div class="vuukle-ads" style="display: block; height: auto; margin: 10px auto; text-align: center; clear: both; width: 100%; max-width: 100%; overflow: hidden;">
<div id="div-gpt-ad-1497448474263-1" data-google-query-id="CLSC6ZfJz-MCFQoZcgodPH8Fow">
<div id="google_ads_iframe_/213794966/vuukle-widget/lankabusinessonline.com_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/213794966/vuukle-widget/lankabusinessonline.com_0" title="3rd party ad content" name="google_ads_iframe_/213794966/vuukle-widget/lankabusinessonline.com_0" scrolling="no" marginwidth="0" marginheight="0" style="border: 0px none; vertical-align: bottom;" srcdoc="" data-google-container-id="1l" data-load-complete="true" width="300" height="0" frameborder="0"></iframe></div>
</div>
</div>
<iframe src="https://cdn.vuukle.com/widgets/index.html?apiKey=mykey&host=lankabusinessonline.com&articleId=135613&author=LBO&img=&lang=en&tags=ETL%20Colombo%20denies%20claims%20as%20the%20importer%20of%20waste%20cargo%2C%20lbo%2C%20lbo.lk&title=&url=https%3A%2F%2Fwww.lankabusinessonline.com%2Fetl-colombo-denies-claims-as-the-importer-of-waste-cargo%2F&color=%23108ee9&darkMode=false&emotesEnabled=true&firstImg=&secondImg=&thirdImg=&fourthImg=&fifthImg=&sixthImg=&d=false&realtime=false&l_d=false&totWideImg=false&link=https%3A%2F%2Fwww.%5Burl%5D&hideArticles=false&maxChars=3000&commentsToLoad=5&toxicityLimit=80&spamLimit=90&gr=false&hideCommentBox=false&hideCommentBoxWithButton=false&wpSync=false&fAuth=true&gAuth=true&tAuth=true&dAuth=false&vuukleAuth=false&passwordAuth=false" style="width: 100%; min-width: 100%; overflow: hidden; order: 1; height: 731px;" name="v-comments" id="v-comments" scrolling="no" height="0" frameborder="0"></iframe>
</div>
Related
How would one make an accordion tab remain open, giving it an active state?
For example, if I was on the accordion page, then all accordion tabs would be open upon entering the page.
I've created a JS Fiddle of where I am so far. I've tried a few different methods but it just seems to stop the accordion from working altogether.
I have tried following this thread with no success:
link
Here is a link to my JSF:
link
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (!panel) {
panel = this.parentElement.nextElementSibling;
}
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: #eee;
color: #6a1b77;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-weight: 600;
margin-bottom: 0px;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #6a1b77;
font-weight: bold;
float: right;
margin-left: 5px;
font-size: 20px;
}
.active:after {
content: "\2212";
color: #6a1b77;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin-bottom: 10px;
}
.dropship-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.responsive-iframe-2 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div class="accordion">How to sign up for a Sexy Living Drop Shipping account</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2" width="1280" height="720" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Intro.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">How to connect the Sexy Living: Adult Dropshipping App to your Shopify store</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2" width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Signup.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">How to connect your Shopify store to the Sexy Living: Adult Dropshipping App</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2" width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping tutorial - importing.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">Learn about the functionality and how to add products to your store using the Sexy Living: Adult Dropshipping App</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2" width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Connecting.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">For our existing customers who have already downloaded our products through CSV or XLSX files. </div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2" width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Conecting.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I added a class stateOpened to the accordion element that you want opened when the page is loaded and only elements with this class will be opened. I call the function that open an accordion (in your original code the function was anonymous, now I'm using a function named toggleStatePanel) only on elements with the class stateOpened when the page is loaded.
window.addEventListener("load",loadHappened);
function loadHappened(){
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
if(acc[i].classList.contains("stateOpened"))
toggleStatePanel.call(acc[i]);
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", toggleStatePanel);
}
function toggleStatePanel(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (!panel) {
panel = this.parentElement.nextElementSibling;
}
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
.accordion {
background-color: #eee;
color: #6a1b77;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-weight: 600;
margin-bottom: 0px;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #6a1b77;
font-weight: bold;
float: right;
margin-left: 5px;
font-size: 20px;
}
.active:after {
content: "\2212";
color: #6a1b77;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin-bottom: 10px;
}
.dropship-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.responsive-iframe-2 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
HTML
<div class="accordion stateOpened">How to sign up for a Sexy Living Drop Shipping account</div>
<div class="panel">
<div class="dropship-container active">
<iframe class="responsive-iframe-2"width="1280" height="720" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Intro.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">How to connect the Sexy Living: Adult Dropshipping App to your Shopify store</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2"width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Signup.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">How to connect your Shopify store to the Sexy Living: Adult Dropshipping App</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2"width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping tutorial - importing.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">Learn about the functionality and how to add products to your store using the Sexy Living: Adult Dropshipping App</div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2"width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Connecting.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="accordion">For our existing customers who have already downloaded our products through CSV or XLSX files. </div>
<div class="panel">
<div class="dropship-container">
<iframe class="responsive-iframe-2"width="1280" height="682" src="https://sexyliving.com/wp-content/themes/sexyliving/video/dropship/Dropshipping Tutorial - Conecting.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I'm looking to integrate multiple embedded youtube videos (using Iframe's) that pop up on the screen after a user clicks a custom button.
There are a lot of similar questions that work for one video, but not multiple videos on the same page.
The button is nested within a set of div's uniform across all the videos. After the video pop's up, clicking outside of the video should make it disappear.
The below code finds the parent element after the button is clicked and should open that specific video modal, but instead, nothing happens.
Any help is much appreciated!
var btns = document.getElementsByClassName("watchbutton");
var openVideo = function() {
var card = $(this).closest('.card');
var modal = $(this).closest('.trailerdivbox');
var trailerbox = $(this).closest("close");
modal.css('display', 'block');
trailerbox.onclick = function() {
modal.css('display', 'none');
// When the user clicks anywhere outside of the modal, close it
}
window.onclick = function(event) {
if (event.target == modal) {
modal.css('display', 'none');
}
}
};
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', openVideo, false);
}
/* Watch Trailer Button CSS */
.watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
padding: 10px 12px;
}
.watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
.trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='videos'>
<div class='card'>
<button class="watchbutton">Watch Trailer ►</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class='card'>
<button class="watchbutton">Watch Trailer ►</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
First off, your modal and trailerbox are not defined correctly. They are offspring of a sibling of the button so .closest() will not find them.
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
It tests itself, then the parent, so it will not encounter those elements. You need to use .find() from the parent.
var modal = $(this).closest('.card').find('.trailerdivbox');
Consider the following example.
$(function() {
function openVideo(event) {
var card = $(this).closest(".card");
var modal = $(".trailerdivbox", card);
modal.addClass("isOpen").show();
}
function closeVideo(event) {
var modal = $(".trailerdivbox.isOpen");
modal.removeClass("isOpen").hide();
}
$(".videos").on("click", ".watchbutton", openVideo);
$(".videos").on("click", ".close", closeVideo);
});
/* Watch Trailer Button CSS */
.watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
padding: 10px 12px;
}
.watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
.trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='videos'>
<div class='card'>
<button class="watchbutton">Watch Trailer ►</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class='card'>
<button class="watchbutton">Watch Trailer ►</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>
I am working on a js/jquery code in which I want to override current css present in the html code below.
JavaScript/jQuery:
<script>
$("div.scribble-live").find("iframe").css("height", "200 px");
</script>
HTML Code:
<div class="scribble-live">
<div class="scrbbl-embed">
<iframe name="ee5bdd02" width="100%" height="15299px" frameborder="0" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="border: none; visibility: visible; width: 50px; height: 15299px; min-width: 100%;"></iframe>
</div>
</div>
Problem Statement:
The above js/jquery code doesn't seem to override the css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;") present in the HTML code above.
I tried with the following scripts as well but it doesn't seem to work.
<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
</script>
<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
$("div.scribble-live .scrbbl-event").height("200px");
</script>
Everything seems to work. Might consider using .ready() callback on the iframe or use setTimeout() to wait before making the change.
$(function() {
setTimeout(function() {
$(".scrbbl-event").css("height", "200px");
}, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scribble-live">
<div class="scrbbl-embed">
<iframe name="ee5bdd02" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="background: #ccc; border: none; width: 50px; height: 15299px; min-width: 100%;"></iframe>
</div>
</div>
Hope that helps.
I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}
I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code