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!!!!!!
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.
We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias
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.
I'm trying to make an embedding Flickr video be fluid on a responsive theme I'm working on for Tumblr. I'm doing well with any other embedded video or audio players (Youtube, Vimeo, Soundcloud, Spotify, etc), but Flickr videos are overlaping, being unable to contain them on their parent container.
Flickr video iframe and some of its children elements has inline css declarations which are causing the content overflows.
Here's a screenshot with the iframe structure
First I've tried to simply overwrite those styles with CSS but have no effect.
Then I tried with jQuery, but can't target the iframe.
<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>
Despite the iframe has a css class .flickr-embed-frame I can't neither target it, nor its child elements. I've tried with my function inside $(document).ready() and $(window).load() with any result.
Selectors like $('.flickr-embed-frame').contents().find('.child-class'); haven't worked neither.
Inside the iframe there's a video element:
<video src="https://www.flickr.com/photos/138041208#N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>
Also tried to target it with selectors like $('video[src^="https://www.flickr.com"]') with no result.
Couldn't find any question related, so hope someone will have a solution. Thanks.
EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Ok, I tried to manually embed a Flickr Video on a JSFiddle instead of Tumblr (where you just have to paste an URL link to the video). This is the code Flickr asks you to add on your code in order to display the video:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/138041208#N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Seems to be that iframe is added later, injected into the DOM via javascript. This must be the reason why I can't target the iframe, neither via CSS nor jQuery, since initially it doesn't exist.
Now my question is: How can I check when this iframe is injected to the DOM? This way I could target it and make the changes I need via jQuery.
SOLVED =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
I've finally found a solution for this problem, check my comment bellow.
Thanks to a pretty neat trick exposed by David Walsh (davidwalsh.name/detect-node-insertion) I've managed to solve this.
First we add an animation that will start when the iframe is inserted:
/* set up the keyframes; remember to create prefixed keyframes too! */
#keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
The animation needs to be applied on the elements you'd like to listen for (in this case, the iframe).
.parent-container iframe {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
When the animation ends, the insertion event will fire.
First, you have to create a function which acts as the event listener callback:
var insertListener = function(event){
if (event.animationName == "nodeInserted") {
// This is the debug for knowing our listener worked!
// event.target is the new node!
console.warn("Another node has been inserted! ", event, event.target);
}
}
If the animation name matches the desired animation, we know a DOM node has been injected. Now we add the event listener to the parent:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Here's a demo I made with the Flickr video embedded, working fine:
Check out this previous post on SO: How to access the content of an iframe with jQuery?
The solution seems to be using jQuery's contents()
$("#myiframe").contents().find("#myContent")
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)