I have a page that contains CSS that hides a div class
.sectiondiv.showhide {
display: none;
}
But when loading the same page within a fancybox iframe I'd like to have that same content to be visible. I've tried the following CSS in the jquery.fancybox.css but that doesn't help. Any suggestions for this fix?
Why don`t you simply check if page is inside fancyBox iframe and just add custom CSS if needed? You can create links like 'mypage.html?fancyboxed=true' to make checking easier.
Another solution would be to use aferLoad callback to access iframe contents and do some modifications.
This is how you can access some element within iframe:
$.fancybox.getInstance().current.$content.find('iframe').contents().find('body')
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I am using Redactor v10.0.9 to allow users to create some custom posts for my web app. These posts are rendered in an iframe in a modal, and I need images that are uploaded to have a max-width of 100%. I have tried to maintain an outside stylesheet that I append to the iFrame that contains
img {
max-width: 100% !important; } }
But that doesn't seem to be working at all. I would like to just add style="max-width: 100%" inline style to the img tag when it's inserted, but I can't seem to find where the image is inserted into the post after an image upload.
Any ideas on how to force these images in an iFrame to be max-width: 100%? Thanks
Edit 1:
I am using the imagemanager plugin to upload images to Redactor. Forgot to mention that.
Edit 2:
The content contained in the iFrame is dynamically created HTML, not content from another domain.
Figured out how to do this!
Instead of appending any sort of style to the img tag on insertion, when I render the custom posts I am retrieving all of the images in the iFrame in JavaScript, and then applying a CSS attr of "max-width: 100%" on each one.
I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:
html:not(:root) body {
background: black !important;
}
I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.
IE8 support not requierd.
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
It is probably possible to do the styling in an iframe with JavaScript.
document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame
Posting my comment as an answer for better display, you should:
Put "is in iframe" detection code in JS, as I don't see any other way of doing so
Put CSS code inside the iframe depending on the JS result
So if all code is inside the iframe, do:
if (window.parent !== window) {
document.documentElement.classList.add('inside-iframe');
}
html.inside-iframe {
bkacground-color: black;
}
If you want the detection-JS-code to be inside the parent frame, go for:
document.querySelectorAll('iframe')
.forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));
Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on load event of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)
html:not(root) body {
background: black !important;
}
Works
In my html webpage I insert an iframe
but in this iframe bottom show a div which's class name mobile-desktop-link
So you want to hide the "view web version" link? Alright, than you can use this:
.mobile-desktop-link a.home-link { display: none; }
Add this to your stylesheet and you are ready to go. Of course this is only possible if the iFrame is on your domain. If you have tried the snippet I shared here above, with or without !important statement and it did not work? Well than, you can't remove it.
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }