I have a Bootstrap 5 nav bar with stick-top. I have a search icon in the toolbar that opens a full width google search bar right below the nav bar. When I make the search bar sticky it is always available when the search icon is clicked. The problem is that the results are populated in the same div, over the main content, so they run off the bottom of the screen until you scroll to the end of the page and the search results scroll. If I don't make the search bar sticky the results populate between the search bar and the content of the page and works like it should. The problem is that unless the page is scrolled to the top the search bar is off the top of the page.
I need to have the search bar always visible when they search icon is clicked and the results to appear as part of the page, a separate scrollable container with a close or a new window.
Any help greatly appreciated.
my nav bar code
<nav class="navbar sticky-top navbar-expand-xl start-0 end-0 p-1">
my google search code
<div id="target2" class="text-center hidden w-100" style="padding-top:0px; position:absdolute; top:50px; background-color:#3048e9; width:90%;">
<script async src="https://cse.google.com/cse.js?cx=*****************"></script>
<div id="cse" style="width: 100%; margin:0 auto; padding:5px; padding-top:0;">
<div class="gcse-search"></div>
</div>
</div>
Related
I am facing an issue with slider button link, when I right-click on button it's working fine but not on left-click. I have tried many things, yet do not find any solution.
here is button code:
<a class="wow bounceInUp" data-wow-offset="10" href="https://www.google.com" style="visibility: visible; animation-name: bounceInUp;">Shop Now</a>
I put your button code into a codepen. It does seem to work for me. make sure to start and end your button with <a> </a>
<a class="wow bounceInUp" data-wow-offset="10" href="https://www.google.com" style="visibility: visible; animation-name: bounceInUp;">Shop Now</a>
https://codepen.io/Leeroy-J/pen/podVRvy
I am developing an automation script and a part of it requires me to hover over a navigation bar to display a dropdown menu. The script is written using NodeJS and the browser used is Internet Explorer.
Navigation source code
...
<ul class=navigation " data-dojo-attach-point="nonmMenu ">
<li class= "dropdown ">
<i class="fa fa-clipboard nav-icon " aria-hidden="true "></i><span>Accounts</span>
<div class='fulldrop i3">..</div>
</li>
</ul>
...
NodeJS code:
let xPathButton = "//span[text()='Accounts']";
//Find button to hover over
let buttonWithDropDown = driver.findElement(By.xpath(xPathButton));
//Hover
driver.actions().mouseMove(buttonWithDropDown).perform();
However, this does not work. The end goal is to click a link once the dropdown menu appears, which I have tried doing but as the element is not visible I get the exception ElementNotInteractableError: Cannot click on element. I would appreciate some pointers in the right direction to sort this out.
Update:
Been looking at this a bit more; Could the aria-hidden attribute in the anchor tag be causing the selenium driver to not detect the element?
Please note that changing the browser is not an option.
Try to hover over an a or li element. Also you can try click:
By.xpath("//a[span[.='Accounts']]")
By.xpath("//li[.//span[.='Accounts']]")
You can try open menu without opening menu with javascript:
executeJavaScript("arguments[0].click();", yourDropdownMenuElement);
(Working with Python 3 and Selenium. Trying to interact with Buffer.com's alert window after pressing "Shuffle" link.)
After pressing a button on the main browser frame, an alert pops up with two buttons. I want to press one of them.
I am trying to change the focus to this iframe that contains the alert, but I can't see it to have a name. Here's the code of said alert iframe:
<iframe src="https://js.stripe.com/v2/m/outer.html#referrer=https%3A%2F%2Fbuffer.com%2Fsignin&title=Buffer&url=https%3A%2F%2Fbuffer.com%2Fapp%2Fprofile%2F55e5cd556321154607cc5244%2Fbuffer%2Fqueue%2Flist&muid=c7aa769e-c41c-4e86-b75f-99771764f6a5&sid=26221bdc-c091-42c2-8965-8ea3e84267e2&preview=false&" frameborder="0" allowtransparency="true" scrolling="no" tabindex="-1" aria-hidden="true" style="width: 1px !important; height: 1px !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important;"></iframe>
The element CONTAINING this iframe, in turn, has a name, but it is dynamically generated. The code of the upper level iframe containing the iframe I want is:
<iframe name="stripeXDM_default441361_provider" id="stripeXDM_default441361_provider" aria-hidden="true" src="https://js.stripe.com/v2/channel.html?stripe_xdm_e=https%3A%2F%2Fbuffer.com&stripe_xdm_c=default441361&stripe_xdm_p=1#__stripe_transport__" frameborder="0" style="position: absolute; top: -2000px; left: 0px;"></iframe>
The "stripeXDM_default441361_provider" is dynamic and changes every time the alert pops up.
I have tried switch_to.frame but could not get it right.
I also tried to select the dynamically-generated iframe with "Xpath containing" but did not work either.
Any suggestions on how I can select this iframe with no name?
To select the iframe, you could use the xpath. For example, if we consider this html:
<!DOCTYPE html>
<html>
<body>
<span id="n2">
<span id="n6">
<a class="cn" name= "A1" >One</a>
</span>
<span id="n7">
<a class="cn" name= "A2" >Two</a>
</span>
<span id="n8">
<a class="cn" name= "A3" >Three</a>
</span>
</span>
</body>
</html>
You can do this:
driver.find_element_by_xpath(("//span[#id='n2']/span[#id='n6']/a[#name='A1' and text()='One']"))
to identify the element with name 'A1' and text 'One'.
But also:
driver.find_element_by_xpath(("//span/span[1]/a[#name='A1' and text()='One']"))
So, in your case you can find the "external" iframe element and after the "internal" one (I assumed there aren't other iframe). Something like this:
//iframe/iframe
After you select the iframe you have to switch to it.
It turns out I was overcomplicating things. I did not need to change focus or anything else.
I just assume that it was all html and I tried to select the element directly with xpath, like so:
#do something
#press shuffle button
#once the button appears in the iframe, blurring everything else, use this line:
button = browser.find_element_by_xpath('//*[#id="modal-buttons"]/a[2]')
button.click()
That's what I did and worked perfectly.
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
Background
I have a basic HTML page with an iframe that points to a page with a SilverLight object on it. When the Silverlight object extends past the predefined height, the vertical scroll bar is displayed but in an inactive state. Below is my HTML and screen shots of the iframe.
Question
Is it possible to have a vertical scroll bar in an iframe when the target page contains a Silverlight object?
Code
<html>
<body>
<form>
<div>
<IFRAME height="300" width="1000" name="MyFrame" scrolling="yes"
src="http://mycompany.com/mysilverlightpage.aspx">
</IFRAME>
</div>
</form>
</body>
</html>
Screen Shots
This issue had nothing to do with Silverlight but with the SharePoint masterpage hosting the web part that hosted the Silverlight object. To allow the vertical scroll in this case the following changes need to be made to the masterpage. I created a custom masterpage based off for my business needs so I didn't have to worry about these mods wrecking the rest of my environment.
Remove scroll="no" from the body tag
Remove the two divs surrounding the "PlaceHolderMain" ContentPlaceHolder
<div ID="s4-workspace" class="s4-nosetwidth">
<div ID="s4-bodyContainer">
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
</div>
</div>