I'm trying to style tweet and make a screenshot with html2canvas. I used Twitter Widget twttr.widgets.createTweet to render tweet and then got elements from shadow-root DOM. It worked perfectly in latest Chrome browser until some days ago. Now I can't get #shadow-root element, only iframe.
The code is:
<div id="tweet" tweetID="1276058326954938368"></div>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
var tweet = document.getElementById("tweet");
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(
id, tweet,
{
conversation : 'none',
theme : 'light'
})
.then (function (el) {
el.shadowRoot.querySelector(".footer").style.display = "none";
});
});
</script>
It looked like:
screenshot_1
Now it looks like:
screenshot_2
Do you have any ideas? Could this be related to chrome update?
Related
I'm new in Angular and html development. So i don't know yet all features and code terms.
I created a form which contains a rich textarea field. I used nicEdit as this is the one recommended by mycompany (so cannot change of editor).
As you can see in the image below, nicEdit is working well.
But when I want to get the field content in ng-model, it doesn't work.
Most of forum Q&A informs that that ng-model does not working properly with that nicEdit textarea. I found something about a directive to create. So I tried by modifying one dedicated to ckEditor.
But it doesn't work. I found that $('div.nicEdit-main') was the div updated (but not my field htmlLondDesc attached to the nicEdit textarea, neither the ng-model).
I also found something about the nicEditors.findEditor('htmlLongDesc').getContent(); but i don't know where to use it in the ng-model...
So how to get the content of nicEdit and save it in ng-model ?
Thanks in advance for your help.
Here is an image of the text area
Here is my js and html code:
scApp.directive('ncGetContent', function () {
return {
require: 'ngModel',
link: function (scope, elm, attr, ngModel) {
var content = $('div.nicEdit-main').html();
if (!ngModel) return;
content.on('instanceReady', function () {
content.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(content.getData());
});
}
content.on('change', updateModel);
content.on('key', updateModel);
content.on('dataReady', updateModel);
ngModel.$render = function (value) {
content.setData(ngModel.$viewValue);
};
}
};
});
<head>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
var nicInstance = nicEditors.findEditor('htmlLongDesc');
});
</script>
</head>
...
<textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc" ng-model="user.htmlLongDesc" ncGetContent ></textarea>
I'm writing a simple mobile web site using JQuery Mobile.
I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function and call the function from within the section in the . Here is the code:
function initPage() {
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
}
Here is my HTML fragment calling the code:
<html>
<head>
...
<script type="text/javascript">
initPage();
</script>
...
My code works fine, but I have a doubt, so here comes my question: should I wrap my code with $(document).on('pageinit')? Like this:
function initPage() {
$(document).on('pageinit', function(){
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
});
}
I am not sure whether do I need to do that for stuff that register an event, like vclick on specific elements.
Thanks for support.
I have a multipage mobile app using phonegap, leaflet and jquery(-mobile) and the following problem:
On page1, when clicking on a map-marker, the name of the poi is written to localstorage and then page2 is called:
var onMarkerClick = function(e) {
akt_poi = e.layer.options.poi;
var globVars = {
"akt_poi": akt_poi,
};
localStorage.setItem('globalVariables', JSON.stringify(globVars));
window.location = '#page2';
};
On page2 i'm doing the following:
<div data-role="content">
<div id=poi></div>
<script type="text/javascript">
var gV = JSON.parse(localStorage.getItem("globalVariables"));
var a_poi = gV.akt_poi;
document.getElementById("poi").innerHTML='<h2>'+a_poi+'</h2>';
</script>
The correct value is shown only at the first call. When doing another click on a map-marker of page1 the old value instead of the locally stored one is shown on page2 until doing a page-refresh.
What can i do display the right value?
I solved the problem by using sessionstorage:
setting on page1:
var onMarkerClick = function(e) {
akt_poi = e.layer.options.poi;
sessionStorage.akt_poi=akt_poi;
window.location = '#page2';
};
reading on page2:
<div data-role="content">
<div id=poi></div>
<script type="text/javascript">
$('#page_audio').live('pageshow', function(event, ui) {
document.getElementById("poi").innerHTML='<h2>'+sessionStorage.akt_poi+'</h2>';
});
</script>
I've just put a facebook like button on my rails app by adding the following tag into an html.erb page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>
And ... that works OK but I get a big white space on the page as the facebook sdk is loading. So, I thought I'd try putting this in my application.js file and running the function after the page is loaded. The only problem is that I can't get this to work at all :)
So far, I've kept the "fb-root" div in the html and I've placed the following function into application.js
$(function() {
$('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});
However, this is not working for me and I can't figure out why (I'm a js newb). Any help would be greatly appreciated. Thanks!
You should load the javascript function asynchronously:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Then once the javascript library has loaded, it will convert your fbml like button into the appropriate html iframe code. If it is showing a white space until it loads, put the like button fbml code inside a div and style that div with css.
Here is a full example which doesn't have the issue you are talking about (I load the javascript library asynchronously, on a timed delay to simulate a slow load. Notice that there is no white while the load button is loading.
<!DOCTYPE html>
<html>
<body bgcolor="#000">
<div id="fb-root"></div>
<fb:like href="http://stackoverflow.com" send="" width="100" layout="button_count" action="recommend"></fb:like>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
// delay to simulate slow loading of Facebook library - remove this setTimeout!!
var t = setTimeout(function() {
alert('loading fb');
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}, 3000);
}());
</script>
</body>
</html>
OK, I figured this out. First, I put the following tags in the html:
home.html.erb
<div id="fb-root"></div><div id="facebook">[Facebook]</div>
The important tag here is "fb-root" as that is what Facebook's javascript will look for. Then, in my js file I add this function:
application.js
// facebook recommend button
$(function() {
likebutton =
'<fb:like href="" send="" width="100" show_faces="" ' +
'font="" layout="button_count" action="recommend">' +
'</fb:like>';
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
FB.init({appId: 141936272547391,
status: true,
cookie: true,
xfbml: true
});
$('#facebook').replaceWith(likebutton);
});
});
And, no more white box, if he client doesn't have JS enabled they just see "[Facebook]" and my code is nice and maintainable. :)
I wrote like there: http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
});
</script>
<div id="tabs">
<ul>
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
Tabs are created, but initial list (div, ul, li) is visible as well. Another problem: when I hover over tab, I see URL kind of /default.htm#ui-tabs-1, /default.htm#ui-tabs-2 etc. But I want to see URL "/default.htm" over the 1st tab and URL "/about.htm" over the 2nd tab.
What could I do to solve my problem?
UPDATE
In version 1.9 there is powerful widget "menu".
You are miss interpreting the jQuery UI Tabs.
This Tabs are for having content hide/show and if using ajax pull the page info and show it on demand.
if you want those tabs to act as a menu ... then you need a menu, not the jQuery UI Tabs.
If your idea if to use this tabs but to fetch the /about.htm as a new content, then you can use the ajax example
http://jqueryui.com/demos/tabs/#ajax
keep in mind that it will fetch the entire content, so the /about.htm page should not have <html> neither <body> tags
I don't want to encourage you to do this, but the solution is currently available on jQuery UI's website: http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax
You may extend it a bit to follow only certain URLs:
select: function(e, ui)
{
var tab = $(ui.tab);
var url = $.data(ui.tab, 'load.tabs');
if(url && tab.attr('data-ajax') == 'false')
{
location.href = url;
return false;
}
return true;
}
Then, when defining tabs:
<li>...</li>