0

Edit: I have updated the JSBin link to include the code I am using to inject CSS into the head of the iFrame

I am using the standard Twitter widget on a website(I do not have the ability to use an API approach) and the client would like some customization of the widget. I've been able to figure out how to change colors, borders, font, stuff like that, but they would also like to have these arrow images which will show up before and after each tweet like this:

enter image description here

I tried the following code, just to see if I could prepend an element to that div but no success.

$("#twitter-widget-0").contents().find('.e-entry-content').prepend('<span>TEST</span>');

Here is a JSBin for experimentation. Is this even possible?

Thanks!

user13286
  • 3,027
  • 9
  • 45
  • 100
  • can't access it if it's on a different domain – charlietfl Jan 05 '15 at 22:33
  • @charlietfl I am able to append CSS to the head of the iFrame using this method, why would I not be able to append a span to that element? – user13286 Jan 05 '15 at 22:35
  • _“I am able to append CSS to the head of the iFrame using this method”_ – are you sure? Because that should also not be possible, due to the Same Origin Policy. – CBroe Jan 05 '15 at 22:39
  • @CBroe yes I am sure, I am using this answer for reference: http://stackoverflow.com/a/18846544/3250782 – user13286 Jan 05 '15 at 22:44
  • I've updated the JSBin link to include the CSS injection I am using – user13286 Jan 05 '15 at 22:47
  • if you do have access it's alos possible the data is loaded via ajax and that the elements you are targeting don't exist at the time you try to access them. Could try setting a delay and see what happens. Can also check for `length` of the collection created by your `find`. More info on the widget would help – charlietfl Jan 05 '15 at 23:28
  • It's an "embedded timeline" widget from Twitter: https://twitter.com/settings/widgets when I console log the `length` of the collection, it returns "0," so I suspect you're right. I am going to try to do this with CSS using the `before` and `after` selectors and see if I have better luck. Thanks! – user13286 Jan 06 '15 at 00:09

0 Answers0