I pasted the Twitter generated code for an embedded timeline in a Text widget in WordPress. It causes a rendering issue in IE8 whereby links are being replaced by the tweet button.
Screenshot:
http://www.48thave.com/clients/ntp/shotshow/test-twitter.png
WordPress test page:
http://shotshow.com/test-twitter/
Code:
<a class="twitter-timeline" style="border:0" href="https://twitter.com/nssfshotshow" height="300" data-widget-id="336534911341166596" data-chrome="noheader nofooter noborders transparent">Tweets by #nssfshotshow</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Anyone have a solution?
Thanks!
This issue was resolved today by Twitter patching a recent release of their script.
https://dev.twitter.com/discussions/21893
Related
I am trying to get the chart download to work in IE9 from an html file having just the
iframe element as shown below .
<iframe frameborder="0" width="500" height="425" scrolling="no" src="http://www.highcharts.com/demo/bar-basic"></iframe>
However it works fine if the iframe is placed inside a jsfiddle .I get the impression that
this is due to some html elements missing in the html file .Please help me out on this issue.
Thanks,
Bimal
I have tested this line in IE9 and it seems to be working fine. Are you on a server or just opening an HTML file with the broswer?
I could fix this issue by setting up the highcharts export server in my .Net web app .
I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
Then it works fine but I loose all the styling and the text on webpage displays very tiny.
I am using Opera Mobile emulator for testing.
The links are local and are like "localhost:62234/Articles/10".
Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.
Here is solution I found which solved my problem finally.
Here is how my code looks now..in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>
I found some more information with this problem Here.
Hope this helps others
One page app, where there are user-profile pages(that you change dynamically).
This doesnt work, it appears as link
<a href='https://twitter.com/{{user.twitter}}' class='twitter-follow-button' data-show-count='false' data-size='large'>Follow #{{user.twitter}}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
If it reinitializes the code it doesn't work either
<div ng-show="user.twitter" ng-bind-html-unsafe="user.twitter|followButton">
I'm currently working on an Angular app where I need to implement such widgets - from Facebook, Twitter, Google+ and Pinterest.
Although I wasn't able to make the Facebook button work without using its iframe form, the other three work like charms (read on).
The real issue with Angular seems to be the asynchronous Javascript codes these platforms usually provide (which dynamically create a script tag calling the actual JS code needed to make the button work). If you call the right JS file directly (and synchronously), it works great.
Example for Twitter :
<!-- This won't work : -->
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- This will (note I'm using the same URL for the script) : -->
Tweet
<script src="//platform.twitter.com/widgets.js"></script>
I forgot about Iframe, there's no option on twitter when you generate the button. So it works!
<iframe ng-show="user.twitter" allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name={{user.twitter}}"
style="width:300px; height:20px;"></iframe>
Also very important: iframes update history. To solve this problem I generate element iframe dynamically and then appendChild it to the location where it is supposed to be.
Here's a good example: http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
I've tried to create simple facebook app with iFrame,, but I always get nested iFrame on every I click link on my application, I already tried a solution from site http://railsrant.com/2009/10/14/creating-a-facebook-iframe-app-using-ruby-on-rails-facebooker/
it's work on Firefox and Chrome, but doesn't work at IE
Any idea or suggestion for this?
Thanks
I think you should use this line in your head section, this will open the links in parent window instead of iframe in iframe:
<base target="_parent" />
and also make these URL related to canvasURL(facebook app URL). I hope this will solve your problem.
add target="_top" to your <a href="..."> links