I have an iframe:
<iframe src='myurl.php' frameborder='0' width='500' height='500' ></iframe>
I need to place its contents right below a <fieldset></fieldset> element.
How can I do that using jquery/javascript?
I am working with dynamic content so is not that easy as to put the iframe right below the fieldset.
Thanks a lot
First as dudzio said, use it simple like this:
<fieldset></fieldset>
<iframe src='myurl.php' frameborder='0' width='500' height='500'></iframe>
If you have another problems and you don't tell us corectly you can use:
CSS, sample: position:absolute;top:X px; for iframe,
If your fieldset is not visible it may be z-index lower than another element on page.
We need the entire page to check why fieldset is below iframe... A lot of causes can be responsible for this. Please update you question!
I supose you want a fieldset at top of the iframe. Put them into consecutive div's.
But this doesn't use javascript/jquery just plain HTML tags.
<fieldset></fieldset>
<iframe src='myurl.php' frameborder='0' width='500' height='500'></iframe>
It should be that simple. If it's not - check CSS code, especially float: left/right or position:absolute for fieldset element.
And try to avoid using iframes it can make a lot of troubles. Starting with CSS styling problems, ending with security issues, for example with https protocol.
Related
I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link
Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!
I'm afraid not!
I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.
Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.
But a cross-over
you can use blank rectangles to not let them be shown but it's not really guaranteed.
:root {
--hiderColor: red;
}
#hider {
width: 640px;
height: 55px;
margin-top: -50px;
background: var(--hiderColor);
position: absolute;
z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>
It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!
By the way, I used the red colour so you know how it works you, can change the colour;
And a note: the widths of the div and iframe must be one and the same
Good luck!
External iframe means you have no control on what's inside.
I had that problem for something I made for a class, I used
div.a {
display: none;
}
I haven't tried it, but you should be able to use
<p style="color:black">(Link Here)</p>
To recolor the text. Again, I haven't done much restyling of links, but these should work.
Hi I'm using the the iframeSizer to load iframes dynamically. On the parent page I'm currently implementing this code to load the spinning preloader image with css:
<script type="text/javascript" src="//example.com/iframeResizer.min.js"></script>
<style>
iframe{width:100%}
.holds-the-iframe {
background:url(//example.com/preloader.gif) center center no-repeat;
}
</style>
<div class="holds-the-iframe">
<iframe src="http://example.com/iframed-content-url" scrolling="no" frameborder="0"></iframe>
</div>
<script>iFrameResize()</script>
The problem with this is if there is a transparent background on the iframe content, the spinner shows through. iFrameResizer has a bodyBackground option but that changes the entire body, not just the content inside of the iframe.
Any thoughts on how to improve this? Is there a way with CSS or JS to remove the spinner node completely after the iframe initially is loaded? Thanks!
The plugin allows you to use options,
one of them is bodyBackground and accepts a String value.
so you could perhaps give this a try:
iFrameResize({
bodyBackground : "rgba(0,0,0,1) url(preloader.gif) 50% no-repeat"
});
Thanks for the feedback. My simple solution was to just put the spinner as a background in the actual iframe css, rather than in a wrapper. Then the content overwrites it upon load.
I've tried the following codes to remove the controls / buttons / iframe from my Tumblr. None of them seem to work with the new control bar.
#tumblr_controls { display: none;}
<script>
var T_C = document.getElementById('tumblr_controls');
T_C.parentNode.removeChild(T_C);
</script>
I just checked, Tumblr does not seem to be using the id tumblr_controls anymore, that is most probably the reason your code is not working. Try this;
body > iframe:first-child { display: none !important; }
This selector selects any iframe that is the first child directly under body.
If you have some script putting something else in the beginning remove the :first-child (make sure you do not have any other iframe directly under body). Optionally you can use the new class(es) Tumblr is using to select the element you want to hide, but that way when Tumblr changes the class(es) your code will stop working.
An example of how the element in question looks like now:
<iframe class="tmblr-iframe tmblr-iframe--desktop-loggedin-controls iframe-controls--desktop" name="desktop-loggedin-controls" scrolling="no" src="https://www.tumblr.com/dashboard/iframe?tumblelogName=example" width="0" frameborder="0" height="0">
... codes ...
</iframe>
In my tumblr there were two iframes following the body tag... so I made it like this. Hope it helps!
body > iframe:first-child, body > iframe:nth-child(2) {display: none;}
Just wanted to say that yes, it STILL works! I've made a small music player for a notion setup (used Tumblr as a free host) AND I WAS DYINGGGGGG for a solution because body > iframe:first-child { display: none !important; } DID NOT TAKE OFF THE EMBED'S IFRAME!!!! Now my tumblr embed is completely free of it's branding!!!!!!
Page on my server has multiple iframe tags with different ID. One iframe tag I added to embed a youtube video. The iframe tag has a style element that gives it 250 width and 250 height that gets added in by a plugin. I want to remove this style that gets added to the iframe so that the youtube video shows in the height and width in the iframe tag from just this specific iframe as there are other iframe tags on the page that have style that should not be touched.
1) Code I am adding (notice width=640 height=390)
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" frameborder="0"></iframe>
2) Code that is on page when loaded with browser (notice that style="height:250;width:250;" is added to the iframe tag now, this is the garbage i want to be removed, but only from this iframe tag id
<iframe id="player" style="height: 250px; width: 250px;" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" height="390" width="640" frameborder="0"></iframe>
Javascript or Jquery would be nice. But the remove tag in jquery strips styles from every iframe on page.
ideal solution would result in only the iframe with id="player" to be changed from 2) above to no longer have the style="" or have the style="" but have nothing inside it.
$('#player').removeAttr('style')
should work using the latest jQuery
As an explanation
$('#player')
targets a DOM element with id='player' (the # targets an id, like the css selector).
removeAttr('style')
removes the 'style' attribute from the targeted object
document.getElementById('player').removeAttribute('style')
I think it is not a case when you should use jQuery or any other JS library
CSS solution: #player { width: 640px !important; height: 390px !important; } but using !important is bad practise.
try this
$('#player').removeAttr('style');
Try with ,
For style change :
$("#player").css("Height","90");
For attribute change :
$("#player").attr("Height","90");
For inside of iframe tag attribute or style change :
$("#player div").attr("Height","90");
$("#player div").css("Height","90");
Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.