Using Twitter's embed code for single tweets causes a script called widget.js to be loaded. This script is responsible for dynamically generating the HTML of the tweet.
Is there an event triggered by widget.js when the rendering of an embedded tweet is complete? How can my code find out that rendering is complete?
I need this because I am trying to use jQuery Masonry to layout a set of tweets. Masonry fixes the container height for each tweet before the tweets are fully rendered, causing overlap. I'd like to be notified that all tweets are fully rendered in order to refresh the Masonry layout.
I ended up using a jQuery "watch" plugin (e.g. https://github.com/darcyclarke/jQuery-Watch-Plugin) to watch for DOM changes on the container div.
If you look into the uncompressed code here searching for "render" yields this interesting conditional
if (this._rendered) {
var anchor = this.byClass('twtr-join-conv', 'a');
anchor.href = 'http://twitter.com/' + this._getWidgetPath();
}
and somewhat lower in the code is
this._rendered = true;
// call the ready handler
this._ready();
return this;
you might be able to explore...
Related
I am using Rails with turbolinks. I want to trigger some script on load page event. The problem is that TL does not fire this event on page navigation. This log does not happen on page navigation:
window.addEventListener('load', (event) => {
console.log('load');
});
It get fire on full page refresh. But that does not helps.
My goal is to scroll on certain #id (using anchor at the end of link) after all content of the page loads (mainly images). Without this event images change scroll positions after fully images loaded.
Github to something about it. For example this link:
https://github.com/uBlockOrigin/uBlock-issues/issues/338#issuecomment-452847292
will scroll to the comment even though there is image just before it.
Is there away to achieve this using TL or any other way?
To install behavior, or to perform more complex operations when the page changes, avoid script elements and use the turbolinks:load event instead
source https://github.com/turbolinks/turbolinks
For older versions page:change
I'm using Turbolinks 5 on the backend, and turbolinks-ios in my iOS app.
When a page loads in a VisitableViewController, I'd like to have the native app receive (or retrieve?) some metadata from the web page, in order to offer some additional UI affordances using native code.
I know I can do this in a roundabout way by setting some <meta> tags on the server side, and then executing JS in the WKWebView and getting at the meta tags that way, but it seems like a hack.
Another option is executing a turbolinks callback message and receiving via addScriptMessageHandler, but that also seems like a hack.
Any help would be appreciated! Perhaps there is a better, sanctioned way to do this? It seems like it would be a common need.
I ended up going with my original idea with the meta tags. Then, what I do is on page load, invoke a message handler like so, passing the contents of those (filtered) meta tags to the handler:
$(function() {
if (typeof webkit != 'undefined') {
var metadata = {};
$('meta[data-scanner-app="true"]').each(function() {
metadata[$(this).attr('property')] = $(this).attr('content');
});
webkit.messageHandlers.ScannerApp.postMessage(metadata);
}
});
Then I simply intercept that handler in turbolinks, and I have the data.
Note: data-scanner-app is a data attribute I add to just the meta tags I want to include.
In a Rails 3.2 app I have a javascript function that is triggered by the presence of a DOM element with class "trigger". (this function adds UI elements).
This works perfectly, except in partials that are rendered by ajax calls.
For example in an index view, when the page is initially rendered the function is correctly called and the UI elements rendered.
If the user then filters or paginates or otherwise interacts with the index via ajax, the function is not called and the UI elements are not applied when the partial is re-rendered via the ajax call.
So, how can I make javascript aware of elements that are rendered via ajax calls?
I think you should use jQuery.on() method.
eg
$("#content").on("click", "input[type='checkbox']", function(event){
// do some stuff
});
Seems this question has been asked before, but I was not using the correct search terms.
In case anyone else stumbles across this, the answer is...
Adding $('.switch')['bootstrapSwitch'](); to the end of your some_action.js.erb file should do the trick....
And the full question is
bootstrap-switch functionality does not load when I re-render a partial with "respond_do"
I have a mobile web app built with jQuery Mobile. It is using a multi-page template, with most of the content being created dynamically with javascript. The first time the app is loaded it shows a splash screen and then sends the user to an "index" page. From there the user can navigate to different parts of the app via # links. Each page's content is created dynamically with javascript and then inserted into the DOM on the "pageshow" event.
This works very well with one little problem that I haven't been able to solve. The first time a page is loaded it takes several seconds for the content to be generated and inserted into the DOM. Subsequent loads are fine since the previously rendered content is already in the DOM and is only replaced if there is new data. What I want to do is pre-render each page's DOM so that there is no noticeable delay when a page is loaded for the first time. I can achieve this by calling $.mobile.changePage() on each page. The problem is that I want this to be done in the background without the pages or any page transitions being shown to the user. Is there any way to do this?
P.S.: Worst-case scenario, I'd just keep the splash screen on top of everything while the pages are pre-rendered, but I can't even do this since JQM does the transition and changes the page whenever I call $.mobile.changePage().
All you have to do is use the $.mobile.loadPage. In the example below I show how to initialize a single page by hash URL upon the showing of #one. You could list out all of them if you wanted or create a fancy script to find all the [data-role] elements that do not have a class of ui-page, grab it's ID, and call a load on in the same way I have here.
$("#one").live("pageshow",function(){
$.mobile.loadPage("#two");
});
You can see the example in action on this jsfiddle..
I stumbled upon your question since I was looking into somewhat the same issue. What I ended up with is a _preloadPages() function in my project basically instantiating the page widgets which normally are done internally. Since this is not documented please keep in mind this can break anytime when upgrading JQM.
To control which pages to preload and which not I've introduced a class 'preload' which I place on the page containers I want to preload. This _preloadPages() function I call during splash screen and to not stress the initialization of my app to much the preloading is done in a 300ms interval. Still playing with these numbers though.
function _preloadPages()
{
// Execute the page() widget call on all pages that haven't yet been initialized, we do this
// to prevent a slight delay when initially loading a page
//
var $pages = $( "[data-role='page'].preload:not(.ui-page)" )
, index = 0
, pageCount = $pages.length
;
var preloadTimer = setInterval( function()
{
var page = $pages[ index ]
, $page = $( page )
;
$page.page();
index++;
if ( index === pageCount )
{
clearTimeout( preloadTimer );
}
}, 300 );
}
Using jquery UI 1.8's autocomplete, is there any known way to take the results and return them to a different div element on the page, or to customize how they look upon return? I want to have the results show up in a list that can be interacted with, essentially.
There does not seem to be a built in way to return the results to another location on the page. However, customizing how they look is quite straightforward, that is just a matter of applying CSS to the widget. The Theming docs will explain all the detail.
I would suggest attaching an event handler to one of the events of the autocomplete (maybe search) and writing your own custom code to capture the results and move them to the the required place in the DOM.