jscrollpane colors - colors

I'm trying to modify the scrollbar colors for jscrollpane.
This didn't work for me:
$('a.athlete_popup_content').click(function(){
$('#box_on_top').append($content); //.athlete class is within $content
$('.athlete').jScrollPane({autoReinitialise: true});
$('.jspVerticalBar').css('width', '10px');
$('.jspTrack').css('background','lightgrey');
$('.jspDrag').css('background','black');
$('.athlete').jScrollPane({autoReinitialise: true});
});
i tried placing athlete class both before and after... it doesn't do anything... also, the second time this runs, the scrollbar doesn't appear at all.
any help?
-=update=-
For the issue where it does not appear correctly the second time, I had to destroy the jsp on close and it started working.
var element = $('.athlete').jScrollPane();
var api = element.data('jsp');
api.destroy();
I was unable to get the colors to work.
I am including the .css initially, but want to change the colors on load. I wasn't able to figure out this issue so I just modified the .css
Thanks!

Your code es working perfectly, as you can see here. If you are calling jScrollPane() on a click event then the tags you are trying to reach (.jspVerticalBar, .jspTrack, .jspDrag) are created after css() calls, then you should use .on() to attach those calls to the event.

Related

#material material-component-web Invalid tab component given as activeTab

firstly let my say that the mdc documentation is difficult for non-pros like me.
I'm using Elixir Phoenix and Brunch.
I import and everything is fine.
import {MDCTab, MDCTabFoundation} from '#material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '#material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'#material/tabs';
I manually instantiate the tab bar in a separate function that I export
export var Tabbable = {
run: function(MDCTabBar, el){
var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));
Which is following the documentation like this
const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));
but is slightly different to the documentation's use of the tab bar in their code snippet
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
But, whenever I try to use mdc I get a 'not defined' error. Therefore, I'm not using it :-)
Now, when the user clicks the tab bar I capture that like this:
myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
});
The subtle difference is that my myDynamicTabBar is MDCTabBar but the documentation's dynamicTabBar is mdc.tabs.MDCTabBar
My tab control works, but it throws an error only visible in the console:
Uncaught Error: Invalid tab component given as activeTab: Tab not
found within this component's tab list
which is likely because I'm not using mdc.tabs? The documentation notes the change event happens on the MDCTabBar.
Therefore, how do I get rid of this annoying error in the console?
And why can I not access the global mdc? I have tried this in my Brunch file
globals: { mdc: "#material"}
But no good.
I'm right behind you on this! I'm frustrated with the docs too :(
You answered your own question in this Elixir thread which is very informative.
I found the real solution in this thread https://github.com/hyperapp/hyperapp/issues/546
MDCTabBar automatically initiates its children. So initiating tabs will result in that error.
The fix is to just initiate MDCTabBar

Canvas.observe does not seem to be effective

I've wrote this :
// canvasRoot is a Canvas object
canvasRoot.observe('mouse:down', function() {console.log('<mouse down event>')});
But if I click anywhere on my canvas, the event does not seem to be triggered
Check if canvasRoot is an actual fabric.Canvas or the DOM canvas node ^_^
You should also use canvas.on(...) instead of canvas.observe(...) [same function anyway]
Also if you are attaching events to fabric.Canvas objects, you should attach them to "mousedown" vs "mouse:down" for canvas.
Take a look at source code for more info :)

Guide.ShowSignIn(1, false) Value not in range exception

In a new Xna game I wroted this:
GamerServicesComponent gsc = new GamerServicesComponent(this);
gsc.Initialize();
Components.Add(gsc);
if(!GamerServicesDispatcher.IsInitialized)
GamerServicesDispatcher.Initialize(Services);
And in the Update method
if (Keyboard.GetState().IsKeyDown(Keys.S))
if (!Guide.IsVisible)
Guide.ShowSignIn(1, false); // true doesn't solve it nor 2 or 4 as paneCount
I'm receiving a
Value does not fall within the expected range.
Anybody?
It seems that Guide.ShowSignIn() can't be used anymore. I Don't know the reason nor if it is really true. But I couldn't get it working with ShowSignIn.
The way I had to login was by pressing the Home button.
The Guide will appear and you can simply follow the Guide to login.
Waiting a few frames before calling Guide.ShowSignIn() works for me. I don't call it until my game has loaded all assets and at least I frame has been rendered.

raphael text() not working in ie9

Why is the following example not working in ie9?
http://jsfiddle.net/dzyyd/2/
It spits out a console error:
"Unexpected call to method or property access."
I found it pretty quickly. You created the element, but did not put it anywhere. Once it is added to the document body, everything seems to be fine.
this._width=300;
this._height=300;
this._bgSvgContainer = document.createElement("div");
//NOTE: add the created div to the body of the document so that it is displayed
document.body.appendChild(this._bgSvgContainer);
var bgCanvas = Raphael(this._bgSvgContainer, this._width, this._height);
this._bgCanvas = bgCanvas;
var num = this._bgCanvas.text(this._width-10,this._height-10,"1");
It's really hard to tell with such a tiny code-fragment (doesn't run on any browser for me), but it's probably a scope issue this in IE during events is completely different to this using the W3C event model. See: quirksmode-Event order-Problems of the Microsoft model

How to attach mouse event listeners to embedded nsIWebBrowser in C++

I've embedded an nsIWebBrowser in my application. Because I'm just generating HTML for it on the fly, I'm using OpenStream, AppendToStream, and CloseStream to add content. What I need is to add event listeners for mouse movement over the web browser as well as mouse clicks. I've read documentation and tried lots of different things, but nothing I have tried has worked. For instance, the code below would seem to do the right thing, but it does nothing:
nsCOMPtr<nsIDOMWindow> domWindow;
mWebBrowser->GetContentDOMWindow(getter_AddRefs(domWindow));
if (!mEventTarget) {
mEventTarget = do_QueryInterface(domWindow);
if (mEventTarget)
mEventTarget->AddEventListener(NS_LITERAL_STRING("mouseover"), (nsIDOMEventListener *)mEventListener, PR_FALSE);
}
Perhaps it isn't working because this is run during initialization, but before any content is actually added. However, if I add it during AppendStream, or CloseStream, it segfaults.
Please tell me a straightforward way to do this.
Well, here's the answer:
nsCOMPtr<nsIDOMEventTarget> cpEventTarget;
nsCOMPtr<nsIDOMWindow> cpDomWin;
m_pWebBrowser->GetContentDOMWindow (getter_AddRefs(cpDomWin));
nsCOMPtr<nsIDOMWindow2> cpDomWin2 (do_QueryInterface (cpDomWin));
cpDomWin2->GetWindowRoot(getter_AddRefs(cpEventTarget));
rv = cpEventTarget->AddEventListener(NS_LITERAL_STRING("mousedown"),
m_pBrowserImpl, PR_FALSE);

Resources