Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
In short no.
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
Yes. Take a look at this other thread for details:
How to apply CSS to iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">
You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Use Jquery and wait till the source is loaded,
This is how I have achieved(Used angular interval, you can use javascript setInterval method):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Combining the different solutions, this is what worked for me.
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
Apparently it can be done via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine.
The only solution is to fetch the page from the server side code and change the needed CSS.
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Just add this and all works well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
If the iframe comes from another server, you will have CORS ERRORS like:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
Only in the case you have control of both pages, you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage to safely send messages like this:
On you main site(one that loads the iframe):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
on the iframe site:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.
References:
Printing content of IFRAME
Accessing and printing HTML source code using PHP or JavaScript
http://www.w3schools.com/js/js_htmldom_html.asp
http://www.w3schools.com/js/js_htmldom_css.asp
We'd like to show a "Loading..." image when the page is still being transferred. Pages can get quite large in our application. I tried with a separate page that displays the image and then loads the intended page, but the animated GIF just stops.
Can something be done on the page itself?
Or is there a better way?
Thanks for your comments, as always!
UPDATE
Here's the general idea of my small switching page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div
style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
id="AjaxLoader">
<xp:image url="/loading.gif" id="image1">
</xp:image>
</xp:div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Loading a "loading" page prior than the one you want to load is not an option.
You can create to DIVs in your HTML: one for the loading icon (e.g. with id="loadingIcon"), second one for the content (id="contentWrapper"). The second one is hidden (CSS style="display:none").
Define a Javascript function like this:
function pageLoaded(){
document.getElementById("loadingIcon").style.display = "none";
document.getElementById("contentWrapper").style.display = "";
}
The script is called in the BODY's onLoad event like this:
<body onload="pageLoaded()">
...
</body>
It is not a question of the web-server environment, but how you organize your code :-)
Take your approach and modify it slightly. Instead of location.href = href - which just triggers a reload, use an ajax call and replace your loading div. Something like this:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
url: "test.html",
context: $("#{id:AjaxLoader}");
}).done(function(result) {
$( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
(contains typos, adjust as needed)
To answer my own question: No, it's not possible, but there is a nice way around this, in my case anyway.
The trick is to open a new browser window, write something in it and then allow the new page to load.
var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;
If necessary the text can be replaced by an image and the new url can be set after a timeout.
I know that it is possible to send a user to a specific a name by using a link; however, for what I'm doing, I'd prefer not to use this link element.
Ex:
http://www.domain.com/link.php#aname
will send the user down to
<a name="aname">
Is there a method of doing this on page load, like perhaps adding a line of code to the body tag or something?
I'm using this in conjunction with PHP, so basically if a particular variable is defined, I will be sending them to the location. I know how to do the PHP side of it, just not the html side of it without the use of the link element.
Use the animate method from jquery to get a nice smoothe effect
$("#down").click(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Example
Update: onload
$(document).ready(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Cheers!!
Few Assumptions :
You know/declared the ID/NAME
You are sure that a NAME/ID exist
Recommendation :
Use Id along with the name.
Make sure you have unique Id for that part of page where you want to send the user to.
Add this simple javascript before the end of </body> tag OR after all ids are echo
<script type="text/javascript">window.location.hash=id;</script>
Please change id to your required id. Once the page load first the div with a declared id is created and when everything is complete the javascript will try to move the page to the specific part.
If you will use scrollto then it requires far more steps and is complicated. You will need to
measure the page height
measure the location of that id
scroll to that id if possible
Hope it works for you
The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data
I have a Joomla site which uses mod_rewrite to create pretty urls.
http://www.example.com/resources/newsletter
However this created a problem. Including images like this: src="images/pic.jpg", it would then look for a file at:
http://www.example.com/resources/newsletter/images/pic.jpg
...which obviously doesn't exist. To work around this, I included a <base> tag in my head section:
<base href="http://www.example.com/" />
...which worked fine, until I tried to do a link to an anchor point (bookmark) on the same page:
<!-- on http://www.example.com/resources/newsletter -->
go to the footer
<!-- clicking that link takes you to http://www.example.com/#footer -->
Changing my links to be <a href="resources/newsletter/#footer"> is not feasible, since I won't necessarily know the URL of the page when editing it. Is there any way to make some links ignore the <base> directive?
Though I'd really prefer a straight HTML solution, I'm using jQuery on this site already, so that could be an option if I'm stuck.
Is it possible to change your src attribute to be something like /images/pic.jpg? That'll achieve the effect you're looking for.
If that's not possible, this (untested) jQuery code should work for you:
$('a[#href^="#"]').click(function() {
var hash = this.hash, el = $(hash), offset;
if(!el.size()) {
el = $("[#name=" + hash.slice(1) + "]");
}
offset = el.offset();
window.scroll(offset.left, offset.top);
});
Old question, new answer..
Try this:
$('a[href^="#"]').on('click', function (event) {
event.preventDefault();
window.location.hash = $(this).attr('href');
});