Develop Reference

Bootstrap active tab shown event listener

I'm using Bootstrap Tabs and I have one default tab that has active class on page load. When I want to apply some jQuery effects with animation on that tab's content (for example 'show(2000)') that content does not show for 2 seconds, but instantly jumps in after this 2 s time. So jQuery works, but only partially - u cant see animation.
I tried to analyze the cause of this problem. It seems that when bootstrap is loading active tab some it's machinery is still working after the page load and not allowing jQuery 'show' method to get all element's properties at start of animation. So jQuery gets for example opacity but not width and height of element. If I setTimeout on 'show' animation for something about 150-200ms everything is working ok.
Another problem is, that U cant set shown.bs.tab listener on active tab, loaded by default.
Did U have similar problems, and how u managed to resolve it in the easiest way possible?
I was thinking about not setting active class but managing to click or show tabs by JavaScript, allowing to shown.bs listener to work and then apply my jQuery on callback. Another ideas?

How to Load the Comment Section Programmatically on YouTube? (Without Scrolling) (JS/HTML/DOM)

I'm creating a browser extension to enhance YouTube's keyboard navigation. One of the shortcuts I have in mind is for commenting1.
At first, YouTube doesn't load the comment section below a video. Only when you scroll down does the comment section appear2. So how can I find out which event is triggering the comment section to load? And how can I artificially dispatch it? — Otherwise the HTML element for the comment box will be nonexistent.
This question is the continuation of this other one.
1: I'm currently using Dart, but it mimics JS and later gets transpiled to it anyway.
2: For example, when a YouTube page reloads/navigates to another one, the event yt-navigate-start is triggered.

I am currently working on the extension doing that thing too.
(see https://github.com/cyfung1031/Tabview-Youtube)
I finally figure out the solution to programmatically reload it.
There is a set of criteria you need to have to perform the "loading of comments"
1. The ytd-comments#comments must be in a visible area.
You can make it position:absolute and negative z-index to hide in
the page but still "be visible". You cannot make it display:none OR
content-visibility:hidden. Also, it shall have height and width, so
that its getBoundingClientRect() is within the visible area (screen
view)
2. Attribute [hidden] is set on ytd-comments#comments.
3. #continuations exists and inside the ytd-comments#comments.
The non-zero size block element #continuations is the only element
inside the ytd-comments#comments with its own dimension. This is
used to detect the visiblity of the loading mechanism. It is always at
the end of the section to perform the triggering.
When you use make scroll, or window.dispatchEvent(new Event("scroll"));, the event listener on the scroll event in Youtube's coding will detect the visibility and perform the loading.
You must wait Youtube to perpare the stuff for you (i.e. #continuations) , and then you can trigger with ytd-comments#comments's attribute [hidden] and window.dispatchEvent(new Event("scroll"));
After the content is feteched, attribute [hidden] will be removed.
You might check my userscript https://greasyfork.org/scripts/428651-tabview-youtube for Youtube Tabview plugin.

Reliably jumping to named anchor on dynamically generated page?

I have a web page which is dynamically built by the client. It generates dozens of list items each with its own named anchor. The side of the page has a fixed table of contents (TOC) with hyperlinks that point to the named anchors. This allows the user to click a TOC entry a jump to the item.
The trouble I am encountering is that on the initial page load the page is dynamically generated and so it cannot scroll to the item in the initial hash of the URL using the default behavior of a browser. Additionally, when the user switches to a different book the page is completely regenerated with new content and a new starting hash. Same problem: since the hash preexists the content, it doesn't situate itself with the item already in view.
I nearly solved this with JavaScript by awaiting the rendering and then jumping to the hash using scrollIntoView method on the appropriate element.
The next problem is that the stylesheet is not fully applied by the time scrollIntoView is called and so the final position of the item is unknown. I see the unstyled item scroll into view, but once styling is applied the positioning is lost. I put a 1 second setTimeout in place to delay the scrollIntoView call. This works but feels fragile.
Are there reliable techniques for jumping to a named anchor when the content comes after the hash is in place? If I knew when the CSS was done styling content that might help. Alternately, it might be useful to trigger an event once the height of the page stabilizes (thus signaling the finalization of CSS styling).

I had a similar problem, although in my case only the table of contents and named anchors were autogenerated in the onload handler - not the rest of the page content. I solved the initial hash problem by adding the following code to my onload handler after generating the anchors:
if (location.hash)
{
var requested_hash = location.hash.slice(1);
location.hash = '';
location.hash = requested_hash;
}
I had to set the hash to '' before setting it back to the requested name to make the browser respond. This seemed to work in all the browsers I tried (Opera, Chrome, Edge, IE, FF).

You can use jQuery if you will always know the name of the element you want to set focus to. You can run this after your page has loaded:
$( "#targetElementGoesHere" ).focus();
Edit: To scroll to that, check out https://github.com/flesler/jquery.scrollTo

I think the answer you require was answered by this guy...
How to wait until a web page is loaded with javascript?
So, something like this...
document.onload = function(){
scrollIntoView...
}

Triggering function on page update (infinite scrolling)

I'm currently working on a Chrome extension that modifies content on a user's Tumblr dashboard, which uses infinite scrolling. However whenever the use scrolls down, a function needs to run again.
Here's a basic run-down of how I've got it working right now:
User loads page
Extensions modifies elements on page
User scrolls down
Triggers infinite scrolling
Next page loads below current one
More content loads
After that final step, I need step 2 to trigger again and have the new content modified.
I've tried .binding elements such as the entire <body>, the container div around the elements, and to no avail.
How do I trigger a function so that it runs when the content of a page changes (specifically the Tumblr dashboard)?
jQuery is fine, by the way.

You should set up a MutationObserver in your content script to watch for insertions of elements you want to modify.
See this question for more details.
Also, the Mutation Summary library might work well in your case.

You can try jQuery.ajaxComplete. It runs whenever there is an ajax request completed. You could have something like
$( document ).ajaxComplete(function( event, xhr, settings ) {
if (settings.url === 'tumblr.com/update') { //obviously change the update url
//do your thing
}
});
Of course the best way would be to find the actual function that gets fired on the scroll and modify it to fire yours on its success. But give that a shot.

Pushing back the load time of specific ASP.NET elements

I'm having trouble with the drop-down navigation being flattened and completely shown for several seconds while a page is loading. It usually only shows on pages that are more info-heavy, so I'm assuming its loading the navigation really fast.
Is there a way to delay loading the navigation bar until after all of the info is loaded? I tried writing a javascript onLoad function, but that just led me to a bunch of form errors for some reason.

One simple method could be wrapping your navigation in an HTML element with attribute display:none;, then when the DOM is loaded you could remove the attribute. I think that should keep it hidden from the beginning.