I have a very long html page with lots of editable elements. When click on a element, an edit dialog for it will pop up. The strange thing is if the element is at the top of the page, its edit dialog can be accessed successfully while the bottom and some middle positon elements' edit dialog cann't be accessed. the error prints out is: "Element is not currently visible and so may not be interacted with". Some checks on the failed edit dialog is:
p dialog.exist? ==>got true
p dialog.visible? ==>got false
puts dialog.attribute_value('style') ==>got ""
(firebug shows the style attribute value is 'display: block;' and the checks on success dialog of top element has exactly the same value, visible is 'false' too !!! so weired!! why it can be accessed?)
Then I tried:
browser.execute_script("document.getElementById('dialogDiv').style.display='block'; ")
to set the dialog style attribute value to 'display: block;' wish it become visiable, but failed.
On this long page, when the edit dialog of element pops up, there isn't scroll bar. So there is a chance that part of the dialog of bottom element is covered up. Is this a reason?
so I tried:
bottom_element.wd.location_once_scrolled_into_view
to scroll to the bottom element before click it, when the dialog pops up, all part of the dialog showed but still fail to access.
last trying:
after the edit dialog opend, use javacript to scroll
browser.execute_script("window.scrollBy(0,-100)")
the dialog is in middle of the browser window and isn't coverd up by anything, but still got
Element is not currently visible and so may not be interacted with
When i moved to a similar long page but has scroll bar after dialog poped up, the dialog of bottom element can be accessed successfully. Dose anyone has any idea about this? Please share with me, Thank advance.
the html is:
<div id="dialogDiv" style="display: block;">
<div class="sage_dialog ui-draggable" style="top: 322px; display: block; margin-bottom: 1000px; left: 542px;">
the location and size of the dialog are:
<struct Selenium::WebDriver::Point x=0, y=1576>
<struct Selenium::WebDriver::Dimension width=800, height=0>
I got a clue from How to force Selenium WebDriver to click on element which is not currently visible?
height=0 is a problem, how can i change it?
After consulting the html designer, I got the key of the probelm, the body html is:
<body class="float_guide_parent" style="width: 800px; overflow: hidden; cursor: auto;">
The value of overflow is 'hidden', It blocks showing of scroll bar, so i modified it by:
browser.execute_script("$('.float_guide_parent').css('overflow',''); ")
Problem soveled.
Related
I'm trying to properly align the Facebook like button's comment popup. I'm using box count layout so that I can align all the Facebook/Twitter/Google+/Whatever buttons on the right side.
Here is my actual page layout. It looks like I want.
But once I click the Like button, the comment popup appears anchored from the left and is out of the window. Bummer.
What I want is simply have the popup anchored from the right instead of the left
I tried all versions of the button. IFRAME version does not show the comment box but can't be properly aligned. HTML5 and XFBML are properly aligned but they both show the popup out of the window.
I don't see any parameter in Facebook's documentation to adjust the alignment of the comment popup or to force the comment popup to be opened in a real browser popup. BTW, this can't be adjusted by CSS since the damn popup is inside a damn IFRAME, even when I'm using HTML5 and XFBML markup.
Is there a clean way to:
Anchor this popup to the right
Open the popup in an actual browser popup (window.open())
Hide the popup
Is there a way to achieve that? Google +1 button does the job perfectly without needing to add a lot of code.
Of course, the easy solution would be to move my buttons on the left side but it sucks.
Any help will be appreciated. Thanks :)
Try this
<center>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FID_HERE&layout=standard&show_faces=false&colorscheme=light&width=50&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:30px;" allowtransparency="false"></iframe>
Replace ID_HERE with your page id
On my website the comment box that pops up when I press the Like button is placed behind some elements of the page and I really don't figure out how to fix it.
For 2 days I'm struggling with z-index property but no result and now I've found a solution by changing the overflow property of the parent div from hidden to visible/auto and it works! BUT I can't use this fix because that div has overflow set to hidden because I'm using the slimScroll plugin to customize the scrollbar...
This is the website, just click on any image and press the Like button to see what happens.
The right and left side of the popup are integrated in a table... I was thinking, if i remove the table and use just divs instead, the fix would be easier?
Thanks!
I am trying to figure out on how to make the facebook comment popup box be visible and does not get hidden by the other age elements like menu and my javascript scroll
You could try nesting it in a div with css-style position: absolute and/or high z-index (like 999).
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called
I'm trying to implement a send button on my custom FB tab app.
Using the XFBML share button works, but when you click on it, the pop-up (aka "flyout") gets hidden due to the overflow: hidden; css.
Changing the overflow attribute to visible, for example, doesn't have a effect (probably cause I'm telling FB to resize the tab:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
</script>
Screenshot of the problem:
http://i.stack.imgur.com/sHH1a.png (I'm a new user, not allowed inline images)
Is there a way of telling the box to display on top of the right FB sidebar or on the left of the button instead of the right?
Do I need to create a dialogue box with share & like buttons? (this might become problematic as I intend to display a send button next to each row).
Link to raw tab index.php : http://openair.co.nz/facebook/events/
You may consider positioning the Send button to the left side of the tab iframe, and make sure that the bottom send button has enough space below itself to open a popup without losing it again. No other known solutions (my opinion)