Unless the content of the iframe is loading from the same site as the main page there is security in place to completely block access to the iframe content - unless both pages implement postMessage to pass messages backward and forward.
Unless the content of the iframe is loading from the same site as the main page there is security in place to completely block access to the iframe content - unless both pages implement postMessage to pass messages backward and forward.
?
The code I have below is now working.
I had this snippet already and just got it working on mobile, though doesn’t seem to always fire.
I’ve managed to fix the multiple css issue if anybodys interested, I was missing the extra braces { }
.css({"padding":"5px 8px 6px 12px","margin":"0 auto 12px"});
I’m also seeing lots of WP themes heavily customising the Twitter timeline, to the extent that you wouldn’t even know it was twitter.
In conclusion, I’ve found Twitter timelines can be styled to reflect your website to match your colors and designs using a bit of JS, you’re not limited to Twitters light and dark out of the box styling.
If anybody can add to this, or knows of a better way to do things, please share.
I would have answered the same as felgall, basically if the iframe and the CSS are on different domains then you can forget it.
So, I was surprised to read that this approach worked for you.
Would you mind sharing a link to your site, so I can see this in action?
Regarding adding multiple CSS properties, you are correct, the syntax is $(selector).css({property: "value", property: "value"});
However, if you are adding more than a couple of inline declarations,it might be better to define a class and add and remove the class as necessary via JS.
I was surprised to read that this approach worked for you.
I was myself after listening to felgall, though after much searching I came across the timeout JS which seems to work. addClass will be my next approach if I need to start customising things more heavily.
Below is a comment taken from the twitter dev site, if this is achievable, how do we select these html elements to style? And is there a way to shorten the amount of code we write, maybe using the Bind Event Handler?
$($(‘#IFRAME_ID’).contents().find(‘body’))
You have the complete twitter feed as a DOM tree, do whatever you want.
I’m also wondering why:
// this doesn't work
$(document).ready(function(){
// but this does ?
window.setTimeout(function(){
Would you mind sharing a link to your site, so I can see this in action?
Sorry Pullo, everything is running locally at the minute.
bind() is for attaching events to dom elements, not for selecting elements.
Well, you need the iframe to have loaded before you can select elements it contains.
When the dom is ready ($(document).ready(function(){...}), the iframe element will be present, but its contents may not have loaded.
I see, though wouldn’t we need to write lots of lines of code to select each element/style individually as shown below? This is what I meant when I said reduce the code somehow if we needed to do this. Or is this the only way?
$(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");
$(".twitter-timeline").contents().find(".tweet .deeper li a").css("padding","12px 10px");
$(".twitter-timeline").contents().find(".some-class div a").html("<span></span>");
// and so on...
bind() is for attaching events to dom elements, not for selecting elements.
which waits for the iframe (plus contents) to have loaded, then proceeds
That makes more sense, that will explain why sometimes the CSS does not fire. About one in every five page loads, it doesn’t work. I’ll give that a try.
Um, not sure.
My immediate thought would be that if you can use JS to select “.tweet .deeper li a” and style it appropriately, you could simply do this in a stylesheet and avoid the JS altogether.
you could simply do this in a stylesheet and avoid the JS altogether
If it was only that easy Pullo (:
Already tried this, the master css that ships with twitter has top level dominance. Just ignores any css I add to the page.
As it stands, things are working fairly well at the moment, a lot better than a few days ago anyway. I can modify things as I need them now, generally gathering information really which will be very useful for other projects down the line, still learning.
I tried using .load but nothing happened. I’ll stick with timeout for now a think.
Ok, well if ever you get to a position where you can share the code publicly, post back here and I’ll be happy to have a look to see if we can find a way to streamline the JS.