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!
Related
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?
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.
This is my first post - I have searched for the answer in other questions but couldn't find anything so hoping that someone can help with this specific question?
I'm trying to track a link that's sat in a 'floating' bar in the footer of this site:
The link is #browsealoud - which is when you click on Screen reader - which upon clicking opens a pop-up which then reads out text (to assist those with sight problems).
I have set up the Tag and Trigger in Google Tag Manager, and know it works fine as when I insert the below link code in the body content, the Event is tracked in Google Analytics.
However, as this link sits in the floating grey bar in the footer, the trigger doesn't fire and I can't quite work out why. What is the best solution to allow me to track link clicks on this particular link (which appears on all pages)?
<h6>Screen reader</h6>
UPDATE: Screenshot of tag, trigger and variables below, as requested.
screenshot
It looks to me as though you've already fixed this, as I think I can see a GA event firing whenever I click.
In any case, I think your problem is likely that there are two different places that you can click to obtain the same result; the text 'Screen reader' is actually a child of the element that includes the arrow, so clicking it will obtain a different set of attributes.
I woudl set up a custom javascript variable Parent href that reads the href of the parent of the clicked object. For example...:
function() {
return {{Click Element}}.parentElement.href;
}
And then set up a trigger that fires when either Click URL or Parent href is equal to #browsealoud.
Thanks for the screenshots. I believe what you need to do is to simply enable the History listener variables
The reason is because you are trying to track a URL fragment (ie. it has a hash) which GA doesn't track by default but can be tracked through GTM via the history listeners. I would also change your trigger to this:
We have an app with nested grids which contain popup editors.
I've also played with a sample from Kendo which has nested grids with inline editing, and in both cases, when the details view is hidden to start with, the edit event fires when I click the 'expand', but it does not fire when we click 'edit'.
We want to disable radio buttons based on data in the parent object, but, the template gets build by the grid one on load ( which is sensible ), and the window gets constructed when needed, so even if we add our own click event to the button, it fires BEFORE the window exists, so it fails. We need to run javascript AFTER the edit window is visible.
This does not appear to be possible, and every answer we see, references the 'edit' event. Is it just broken in the current release? Or does it just not work for nested grids?
I have MS Excel WebApp document embeded in my web page using JavaScript option (not an iframe).
I want to prevent users to click on the cells and selecting them this way (at least for some columns).
But when I make a jquery function which catches a click in the outer Excel div,
nothing happens because some inner div of some cell of the Excel table catches it. Problem is, that I can't change (remove click functions) the content of the embeded Excel document, because it is generated automaticaly.
So the question is: How can I prioritize the outer div click funcion and prevent to fire a click event on the inner div without changing the content of the inner div?
Thanks
Have you tried using event.stopImmediatePropagation()? I've setup a quick fiddle here.
jQuery Docs:
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.