Develop Reference

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.

jQueryUI 2 tabs inside another tab - height isn't set when hidden

The app I'm developing has a number of main pages which I'm implementing using jQueryUI tabs with heightStyle:"fill" so they all extend to the full height of the container on the web page. One of these pages contains two more tabs elements, again created with heightStyle:"fill". I want them to appear side-by-side so I've wrapped each one in a <div> with height:100% width:50% position:absolute top:0, then one has left:0 and the other has right:0 to make them stick to the right edges of the container. JSfiddle is here.
The problem I'm seeing is that if tab "1" is selected when the page loads, and I then click on tab "2", the two inner tabs element display with the wrong height.
I only get the problem if "1" is the default tab. If I make it "2" by changing the active option in the tabs() call to 1 then the elements are visible when the page loads and their height is set correctly.
The problem goes away if you run the "refresh" method on the inner tabs because this causes them to recalculate their height, so one way of solving this is to run "refresh" from a "tabsactivate" event handler on the outer-tabs element. The problem is that this event handler is triggered for ALL tabs, not just the one we're interested in. So how do I use callbacks to handle this efficiently.
Another way of fixing it is to change the CSS, as I suspect the problem is being caused by wrapping the inner tabs in a div with "position:absolute".
Suggestions gratefully received!!

Cracked it! First bind a custom my-activate event handler to the panel that contains the inner 'tabs' elements, and from there send them a refresh event. Second, add an activate event handler to the outer 'tabs' element and from there pass the my-activate event to the activated child panel. http://jsfiddle.net/kmbro/a92rg8cy/. The neat thing with this approach is that you can bind a different handler to each child panel.
Another possibility is that you can send a custom my-deactivate event to the panel that's being deselected (using ui.oldPanel) so it can switch off any background update processing that it had put in place when it was activated.
Take care because the activate event isn't sent to the 'tabs' element when it first appears on the screen - you only get it when the selected panel changes. If you need to do something first time, handle the create event instead - http://api.jqueryui.com/tabs/#event-create. Enjoy!

Prevent same function from firing twice

I'm using jquery's bPopup() to open a modal window. When the user clicks a button, jquery loads an ajax page and then shows the modal windows. Due to this small delay when loading the page, the button remains active, and if the user clicks twice, it will fire twice, making two ajax requests to the server and opening two windows.
Is there a simple way to prevent this from happening? Since it's relatively a common problem, I wonder if there's a "right" way the pros handle it.
I've tried assigining the popup to a window.object, so that it would be overwritten on the second call, but it's still opening two popups.

That depends on what UX you're after, but I'd suggest you disable the button.
That way your user will:
Know the click was "registered".
Not try to click again.
Not crash / confuse you code.
EDIT
According to the comment, the "button" is actually not a <button>, but an element with an onclick handler. So:
You can disable the click handler by reversing what you did to set it (removeEventHandler, onclick=null...), but you'd then have to set it back once the pop-up is done, and that might be quite annoying.
You'd have to somehow manipulate the UI to indicate the button was clicked and is disabled. Could probably be quite simple to do with a CSS class.
But really, you're probably better off having 2 "versions" of your button element (<div>...), with only 1 visible at a time, with the other hidden via display: none. The "clicked" version should not have a click event handler set at all. Then, when the button is clicked, you immediately switch between the 2 (can be done with a single CSS class), and once the pop-up is done, switch back.

Change CSS of div when ATBar button is clicked

Currently trying to fix an issue with a WordPress site. The site has the ATBar plugin installed which is an accessibility plugin with a toolbar at the top of every page. This toolbar overlaps the normal Wordpress Toolbar and therefore I have added some CSS to the WP toolbar to push it down a bit:
top: 40px;
As 40px is the height of the ATBar. Unfortunately when the ATBar is closed (via a button on the toolbar) the gap is left at the top.
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on page load. Therefore, I've tried only binding the event when the window is ready, as opposed to the document, but no effect either!
The site is here: http://simp.daveclarke.me/, you will see the two bars if you visit this page.
Any advice appreciated

I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on pag
I think it's not a problem with loading the JS dynamically but the fact that the wordpress bar has an !important in the CSS top attribute. If you can remove the !important tag and then do something like:
document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
document.getElementById('wpadminbar').style.top = "1px"
});
That should fix the issue

Can't you do something like
$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
$('#wpadminbar').css({ "top": "0"});
});

try to use $('#at-lnk-atkit-unload').on('click', function(){ ...

Answering my own question..
Managed to fix this in the end, by tweaking their JS a little.
Rather than importing the JS source from their server, I made a copy at my end and added the addEventListener call that #emilioicai suggested just after the ATBar was rendered. This adds the event listener and functionality required.
Thanks!

I think, that problem lies in that: ATBar loaded after your code, so event listeners didn't attach.
And if you don't want to copy foreign code to your server (which is not appropriate decision, 'cause it will not work all the time, API of ATBar may evolve and so on), you may use timeouts
setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever
Or just use jQuery .on function (or even deprecated .live function)

Change the style of moving to next activity in phonegap - mobile android

I am using phonegap for my application.When I move from one activity to another, by default the first one dissappears and the next activity appears. I want to change it so that when I move from one activity to another, the first one goes into left and the next one enters the screen from right. Is that possible? Thanks in advance.

There are several ways.
If the page change is NOT triggered by Javascript, and you want to configure for that transition specifically, then you can add data-transition="slide" to the a tag that triggers such transition.
If the page change is triggered by Javascript, and you want to configure for that transition specifically, then you can add the option transition: "slide" to the JS Object passed to changePage() function:
$.mobile.changePage("#destPage", {
// Other options
transition: "slide"
});
If you want to change the default behavior of the transition (global change), then you can run the code below before the inclusion of jQuery Mobile script:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = "slide";
// Other overrides
});
For this last method, you can take a look at the documentation of configuring the default settings of jQuery Mobile for more details.
Check out other transitions that you can have with jQuery Mobile. The page also mentions the first method of transition, which can be used with a tag (link) or form submission.