SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Find and change CSS on elements within iFrame with jQuery

    Hi all

    At the moment I'm trying to change the li tags within the twitter iFrame I'm using, without success so far.
    No errors, just nothing happens.

    Code JavaScript:
    $(document).ready(function() {
               $('#twitter-widget-0').find('.tweet').css('padding','12px 12px 10px 69px');
           });

    Some of the markup which I've minimised for viewing purposes:

    Code HTML4Strict:
    <iframe id="twitter-widget-0" class="twitter-timeline">
    ...
    <html>
    <body>
    <div id="twitter-widget-0" class="var-chromeless">
    <div class="stream">
    <ol class="h-feed">
    <li class=" h-entry tweet>

    You'll also notice the iframe and div within the body have the same ID.
    Not sure if this is causing the issue.

    Any suggestions?

    Thanks, CB
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");
    $(".twitter-timeline").contents().find(".var-narrow.var-chromeless .tweet").css("padding","5px 8px 6px 12px");
    }, 1000);

    How do I add multiple css styles?

    Code JavaScript:
    .css("padding","5px 8px 6px 12px","margin","0 auto 12px"); // doesn't work
    .css("padding":"5px 8px 6px 12px","margin":"0 auto 12px"); // doesn't work

    Thanks, cb
    The more you learn.... the more you learn there is more to learn.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to fix the multiple css issue if anybodys interested, I was missing the extra braces { }

    Code JavaScript:
    .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.

    cb
    The more you learn.... the more you learn there is more to learn.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    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.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    // 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.

    Thanks, cb
    The more you learn.... the more you learn there is more to learn.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Below is a comment taken from the twitter dev site
    Ah ok, that makes a lot more sense.

    Quote Originally Posted by computerbarry View Post
    how do we select these html elements to style?
    Well, you seem to have done that:

    Code:
    $(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");
    Quote Originally Posted by computerbarry View Post
    And is there a way to shorten the amount of code we write, maybe using the Bind Event Handler?
    bind() is for attaching events to dom elements, not for selecting elements.

    Quote Originally Posted by computerbarry View Post
    I'm also wondering why:

    Code JavaScript:
    // this doesn't work 
    $(document).ready(function(){
     
    // but this does ?
    window.setTimeout(function(){
    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.

    In your case it would be better to write:

    Code:
    $('.twitter-timeline').load(function() {
      $(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");	
    });
    which waits for the iframe (plus contents) to have loaded, then proceeds.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you seem to have done that
    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?

    Code JavaScript:
    $(".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.
    I'll have to read up on bind thanks.

    $('.twitter-timeline').load(function() {
    $(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");
    });
    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.

    Thanks, cb
    The more you learn.... the more you learn there is more to learn.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by computerbarry View Post
    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?

    Code JavaScript:
    $(".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...
    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.

    e.g.

    Code CSS:
    .tweet{
      padding","12px 12px 10px 69px
    }
     
    .tweet .deeper li a{
      padding","12px 10px
    }

    Dynamically added elements should pick up on existing CSS styles.

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    $('.twitter-timeline').load(function() {
    Thanks for the help.
    cb
    The more you learn.... the more you learn there is more to learn.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, will do thanks.

    cb
    The more you learn.... the more you learn there is more to learn.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •