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.
Related
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>
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
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-9">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$(document).ready( function(){
$("#btn3").hide(0);
$("#carne").hide(0);
$("#alfacePicada").hide(0);
$("#EspetadasFrango").hide(0);
$("#lasanha").hide(0);
$("#gelado").hide(0);
});
});
$(function() {
$(document).ready(function(){
$("#ovo").click(function(event){
$(this).animate({right: '+=200', bottom: '+=300'}, 1000);
});
});
});
</script>
</head>
<body>
<div class="recortesredondos1">
<div class="recortesredondos2">
<h3>Regulamento 2073/2005 Módulo 1: Identificação de Critérios Aplicáveis</h3>
<p id="menu">Menu</p><p id="recursos">Recursos</p>
<p id="glossario">Glossário</p>
</div>
<h2><center>Estado de Alimentos Prontos Para Consumo<center></h2>
<div id="botoes">
<input type="submit" id="btn3" value="Submeter">
</div>
<img src="ovo2.gif" id="ovo" name="qq1" style="width:100px;height:100px; margin-left: 600px; margin-bottom:100px; margin-top: 100px z-index:4;">
<img src="alfacepicada2.gif" id="alfacePicada" name="qq2" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:6;">
<img src="carne2.gif" id="carne" name="qq3" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:7;">
<img src="gelado2.gif" id="gelado" name="qq4" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:8;">
<img src="galinha2.gif" id="EspetadasFrango" name="qq5" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:9;">
<img src="lasanha2.gif" id="lasanha" name="qq6" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:10;">
<div ="clique">
<p id="linha1">---------------------------------</p>
</div>
<button type="submit" id="btn2" value="Submeter">RTE</button>
</div>
</html>
While this question looks great and I'd love to help, its lacking a bit of information and format to help you answer!
Try fixing these things:
Format your code nicely using the helpful code button next to the image button in the toolbar!
Provide your HTML, remember I can't see your screen (unfortunately) so it would be really helpful if I had your HTML so I know what your trying to move and what is being clicked!
Googling before you ask! Although I am happy to help I feel like Google could be a really quick way to get this answered!
For Example (just 30 seconds of googling) I found:
https://stackoverflow.com/a/2532509/5868718
+1 to Nick Craver! :)
function myAnimate() {
$("#div").animate({left: '+=100', top: '+=100'}, 1000);
}
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">Test</div>
I am no jQuery Guru, but I think you could probably link the above function up to another function which listens for a click like this!
$("button").click(function() {
$("#div").animate({
left: '+=150',
top: '+=150'
}, 1000);
})
button {
position: relative;
left: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;"> </div>
<button type="button" id="myButton">
Hi there!
</button>
Check it out!! looks pretty good! I hope that helps!
Welcome to the community :)
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 have access to edit the code
Could you please help?
Thanks in advance.
You need to do it like this:
window.top.location.href = "http://www.google.com";
I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">