Jscroll pane is not working when dynamic data is appended to an empty div - jscrollpane

I have an empty div to which data may be appended dynamically through a ajax call on button click. I have Jscroll pane tagged to that div and its not working. The div is without scroll. But the scroll works when I put only a static data to that div. Please help me out.

You need to reinitialize the scrollbar whenever the content is updated. See an example here http://jscrollpane.kelvinluck.com/dynamic_content.html

Related

Any links or HTML form items like button inside the Bootstrap 4 modal is unusable

I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.
Check site here.
Add any product to cart and then click bag/cart icon on the top right to see the issue.
Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.

ObjectPageLayout inside a Dialog

Can I insert Object Page Layout (for example this https://openui5.hana.ondemand.com/explored.html#/sample/sap.uxap.sample.ObjectPageSection/preview) inside a Dialog?
If I try to do it, I see only the anchor bar, not the bottom body.
The solution is to disable scrolling on the sap.m.Dialog element to avoid the Dialog from adding content indefinitely. See https://github.com/SAP/openui5/issues/2514

Get HTML Source of temporary drag & drop element

I have this page I can only access in the browser. There is a HTML element that only exists during drag&drop, and I want to get / analyze its HTML code in the Inspector / Firebug.. but as soon as I stop dragging, the element is removed.
Is there any way of getting the generated HTML element without wading through the JS source that builds it?
EDIT: got it, using the ctrl+S shortcut in chrome to save the page while holding mouseDown with the dragged-element did the trick.
Firebug html inspection shows the HTML of the page real time, so it does show changes caused by interaction. The trick is probably to scroll the inspection panel to the section of the HTML where your drag element appears. That way you would be able to see it while you drag.

Facebook Send flyout clipping issues

I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!

Firebug: How can I inspect an element I can't click on?

I'm trying to use Firebug to inspect a page element that appears when I hover over a photo.
Problem is, the element's position is dynamically offset from the mouse position, so it's impossible for me to right-click on it to get the "Inspect Element" option.
I had hoped that the onhover element would be inserted into the DOM in a sensible place, but so far, I haven't been able to find it.
Any suggestions?
If you know where in the DOM the new element will be created (quite often those elements are created as children of the body element) you can set up a breakpoint for when it is created.
Let's assume that the element will be created as a child of the body element. You will be able to inspect the element if you follow these steps:
Load the page
activate FireBug's HTML panel
Locate the body element
Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
Go hover over your photo to trigger the wanted element's creation
Script execution should then break as soon as the element is created. At that point you will have all the time you need to inspect that dynamically created element, even in the HTML panel.
This isn't an ideal solution, but you could investigate the onhover code to find out more information about the element that's being created. That info might allow you to find it in Firebug's DOM viewer.
Can you search for the element using the search bar at the top of the firebug window?
You can use CTRL+F to find it in the code view.