JQuery Custom Scrollbar Plugins - javascript

I'm trying to use the Jquery Scrollbar plugin from the below link..
http://manos.malihu.gr/jquery-custom-content-scroller/
I'm working on a web application chat window UI, I wanted to use a dark-thick jquery scrollbar for the Chat message body. The chat window will be opened upon click of a button after 8 seconds. Below are my questions...
I'm able to add this custom scrollbar using Chrome develepor tools console but not directly as the window is loading on the fly..
Where do I need to write the code "$("#id").mCustomScrollbar()" as the chat window is loaded upon the click of a button;
Also, in the message body div element the scrollbar plugin is creating another div with classes "mCustomScrollBox mCS-dark-thick". Whenever a message is sent, we are creating another div element to show in the message body. But this div is loading below the "plugin div", which is not correct as the messages are shown from bottom;

Related

How to close custom chrome extension overlay when extension icon clicked

I built a custom overlay in React that appears on initial click of my chrome extension icon. The overlay is injected as a shadow-dom element at the bottom of the DOM tree. When it does display, it covers the entire view which is the desired the effect. Now, I'd like to close the overlay by clicking on the extension icon, but can't quite figure out how to approach this. I'm tryin to achieve the same close functionality as the Loom extension.
Here is the current flow:
Initial extension icon click -> chrome message sent to content script -> content script triggers state change to display overlay
Extension icon clicked again -> message sent to content script to get visible state of overlay -> message response sent to popup.js with overlay state -> if overlay is visible, send message back to content script to close overlay, else open it.
When attempting to close via icon click, I'm seeing in that overlayVisible component state reads as false even though it is open. I have a feeling I'm approaching state management wrong.

Modal position changes depending on trigger location

I am building a web widget that opens a modal window. The window opens as expected when the trigger link is at the top of the page. But when the trigger is at the bottom of a long page (that requires scrolling), the modal window is clipped/truncated above the viewing area.
Regardless of where the modal window is triggered, the HTML is appended to the body of the page, so I don't understand what's causing the issue.
I would appreciate some help.
js code: https://textfilter.me/widget.js
example / demo : https://textfilter.me/privacy/
It's not javascript. It's css. In this case change position:absolute to position: fixed in modal class. voila.

Disable scroll in body - ExtJS

I have a app where there is list which loading by scroll, and I have modal window, when I open window I still can load list, but this is error. How can I disable scroll in parent window (body) ? I know about overflow: hidden for body, but maybe there is special option in Ext.window.Window in order to disable scroll.
Thanks.
I think you will have same issue with all ui controls under modal dialog. You can add transparent div to feel all background and display modal dialog in front of this div. In this case all ui controls in the back of dialog will not be accessible for user.
When initialising your Ext.window.Window you can add param modal: true which will add an overlay to the background which may prevent user scrolling. Otherwise it will be a manual process of setting overflow:hidden on the body when your window is shown.
Source: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.window.Window

Show modal above iframe when iframe is in fullscreen mode

I have an HTML page with an Iframe inside. I need to show the iframe in Fullscreen mode, and when I'm in such mode I need to show some Modal dialogs which are placed within the "base" HTML page.
As a solution I tried to dinamically append the dialog to the iframe's body. The modal shows, but the actions aren't executed (button clicks, etc.). I'd like to avoid, if possible, to recreated the event listeners each time I've to show a modal dialog.
Anyone with the same problem?

Resizing of page when jquery dialog opens causes scrollbars on the page

I am using JQuery dialog to display dialog box on my page. When i click on button JQuery Dialog pops up but it enables browsers scrollbars too. My default page does not show scrollbars it shows only when JQuery dialog opens. Do i need to set any dialog property to disable web page resizing when showing dialog in order to avoid showing scrollbars when JQuery Dialog opens?
Sounds like your dialog is bigger than the browser window.
Does it matter that scrollbars appear?
You could use the CCS3 property
html {overflow-y: scroll;}
To always show the scrollbar so the page doesn't jump about.

Categories