How to append the Smooch web-messenger-container element to a custom element - smooch

I want to be able to append the #web-messenger-container element to an element instead of the document.body.
I've tried using Smooch.render without setting the embedded attribute to true and it works fine on some browsers, but on others, the smooch CDN calls are cancelled. It is related with this issue: https://github.com/smooch/smooch-web/issues/666
I don't want to use embedded mode, I just want to move the Smooch button to another container. I've tried moving the iframe element with JS but it causes the iframe to reload and the Smooch window disappears.

I would say if you want to append #web-messenger-container to a different element, embedded mode is the way to do that. Without embedded mode Smooch's host JS will call render() to append the iframe on it's own so trying to call it second time will give you nothing but grief I think.
If all you want is to render your own open/close button, that's pretty straightforward. You can specify a custom button width and height of '0', and trigger Smooch.open() / Smooch.close() however you like.
For example:
https://jsfiddle.net/alavers/ve5uhjnd/

Related

Selenium: How to deal with web elements that get hidden when you try to inspect them? Python 3.x related

I'm about to finish developing an automated program on Python and the only thing that's stopping me it's a web element that gets immediately hidden when I try to inspect it from an OpenSea page (can't share the link here since it requires to be connected to my wallet):
So far, I have only managed to get the XPATH and the CSS_SELECTOR of this problematic element (div#tippy-298) which is the following:
button_problematic_xpath = driver.find_element(By.XPATH, '//*[#id="tippy-298"]')
button_problematic_css = driver.find_element(By.CSS_SELECTOR, '#tippy-298')
But what I need is to get the XPATH or CSS_SELECTOR of the Web Elements that button_problematic_css contains, more specifically the "Starting" and "Ending" Textboxes :
Also, just in case, the element that's on top of button_problematic_css is called "Duration", here's its XPATH:
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click #after clicked it deploys div#tippy-298 element
I was wondering if there could be any method to force the visibility of this button_problematic_css using the Chrome Console in the Inspection of Web Elements, or by using an specific method from Selenium on Python3.x to inmediately download all of the web elements this page has right after button_problematic_css is visible.
What I have tried so far is to manually inspect the element, by pressing Ctrl + Shift + C and and then clicking the elements contained in button_problematic_css which just ends up hiding this element before even clicking its content, the same happens when trying to display the contents of this element in the DOM of this page, it just dissapears.
I just wish my program could be capable of editing the dates in the "Starting" and "Ending" Textboxes
I guess you need to click the button to show the element. why did I guess? you need to show the url
or u can also try this code:
clickmore=WebDriverWait(driver, 2).until(EC.element_to_be_clickable((By.XPATH, 'blabalabla')))
self.driver.execute_script("arguments[0].click();", clickmore)
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click()
After several days of working, I managed to solve this, it happened that in order to get the XPATH from these particular elements, I had to use the Chrome Console and type $('#duration').click();.
In this case, #duration is a Selector that can be used to get the web element button that allows you to edit the period of time you want to set when clicked.
I guess the general statement would be something like this:
$('#your_css_selector').click();
Now, this way I could managed to look deeper in the DOM without making them hide again.

Persisting an iframe in Angularjs

So I've recently been converting an old project to Angularjs, but there's a bigger section that I can't convert right now, but still need to work inside Angular.
To solve this I used an Iframe. The problem now is when I switch to a different page, the view and by association the iFrame is getting destroyed. This means when I switch back it will reload the iFrame and will lose the user's spot and any data they didn't save on the form. Usually I solve this by storing everything inside a service, but it won't work for this since its an iFrame.
Is there anyway to create the iFrame outside of the context of the template so when I switch back to the page I can call the iFrame to display, rather than reloading it, then I can manually destroy it when I want?
Or is there a better way to go about doing this?
Thanks!
for anyone interested, what I ended up doing is putting the iFrame in a parent template inside an ng-if. When I go to the route I want the iframe in, I set the ng-if to true and leave it as true when I'm selecting different tabs and want it to persist, when I want it to switch or not persist I set the ng-if back to false and everything seems to be working as expected.

Is there any way to position the scroll bar using css?

I am using jquerymobile 1.4.2.
I tried with all the functions which are specified using jquery(scrollTop).But it snot working in my page.
Is it possible to scroll to a specific position using css when we reload a page or when submit a button.
Your problem is that you have the script at the top of the page. I see you wrapped it in a $(document).ready() but that alone isn't always guaranteed to work, like in your case. $(document).ready fires when the dom is loaded, the dom tells the browser that somewhere in the page there is an image, but the browser won't know the size (in pixels) of that image until it's completely loaded. This causes your issue:
1) dom starts loading
2) dom is done, $(document).ready() fires
3) the script tries to animate the scrollTop but it won't work because the page has not yet reached its complete height (because the images are not loaded), so there is no scrollbar.
4) the images load but the script has already done its job
Solutions:
1) add height and width attributes to your images
2) use $(window).load() instead of $(document).ready()
A hint for the future: if the problem is "sometimes it works, sometimes it doesn't" it's a timing problem 90% (or even more) of the times. So try to figure out what happens and when.
No, there's no way to do that in CSS. Sorry!
Maybe, you should try for this one : jQuery.mobile.silentScroll()

How to hide specific iframe elements from JAWS frames list?

I've got some specific iframe elements that I want to be able to hide from the JAWS frame list (insert + f9). There are other iframes that are very important so just having a user ignore iframes isn't going to work.
Is it possible to do this?
Edit: I should mention why. There is a user option that changes whether specific types of windows open in a new window or open in an iframe on the page, even if the option is set to open in a new window the iframe is still there but the src is set to a blank html file. In that case I(or if it's set to load in the iframe but it isn't at the moment) the content of the iframe is useless to the user and I'd rather hide it from them. I'd rather not make major changes to the code if I can avoid it.
You should be able to hide it with CSS (visibility: hidden or display: none) or with aria-hidden="true".

Html popup window, the parent should have no access

I'm trying to create a popup() where user clicks on button, then it triggers window where he does some edit.
While the user is editing in the child window, parent window should not be accessed, it should be blocked.
How exactly should i do this?
This is what i'm doing now.
function Popupwindow()
{
name = "Select Requestor";
url = "selectLocation.html";
options = "height=330, width=210, location=no, scrollbars=yes,menubars=yes,toolbars=yes,resizable=yes,left=0";
window.open(url,name,options);
}
So now i'm able to close parent window and even edit parent elements without closing child window.
What you want is called a modal dialog. There's no standard way to do this across multiple browsers, some don't even have anything like it. Your best bet is creating a modal dialog inside the page. Most JS frameworks/toolkits will provide dialogs.
don't use "real" popups, use javascript to "emulate" them in teh same window. take a look at jquerys dialog, where you can also set the modal-mode (example and example) - i think this is what you want.
there are a lot of standalone-js examples out thre if you're not using jquery and a lot of js-frameworks include things like this - just search for "modal dialog".