In my webform I have a repeater control. I have a button to open pop Up also. This pop up contains all records which are coming up in the parent window. On selecting the record I have to move the scrollbar of parent window for the location of the record.
Any Suggestion?
If your popup have fixed position and you do not support IE7 and less you can use simple link anchoring:
records/#record1
where record1 is ID of the record header or container. In this case browser will focus on the target element and your popup will stay with fixed position.
Also, you can use jQuery for it. You can get position of the target eleemnt and then scroll window to this position. Here is example of scrolling: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
<div id="record1"></div>
<div id="record2"></div>
<div id="record3"></div>
and links should be like
record1
record2
record3
Below is the code to move the scrollbar in two cases.
window scroll
Repeater in div
repeater.item[0].focus();
Related
I try to click element that doesn't appear in page then I use "keyword Scroll Element Into View" but it doesn't scroll into view and Robot return element is not clickable at point.
I try these way: Nothing happen and cannot click
Scroll Element Into View &{quickLink}[sendDoc]
Set Focus To Element ${PRODUCT}
Click Element ${PRODUCT}
And these way: it scroll to the bottom of page and cannot click
Wait Until Element Is Visible ${PRODUCT} timeout=30s
${x}= Get Horizontal Position ${PRODUCT}
${y}= Get Vertical Position ${PRODUCT}
Execute Javascript window.scrollTo(${x}, ${y})
Set Focus To Element ${PRODUCT}
Click Element ${PRODUCT}
ElementClickInterceptedException: Message: Element is not clickable at point (453.75,186.5) because another element obscures it
Instead of scrolling, you have more options:
1) Resize your browser, so you dont need to scroll (use xvfb to create a screen with a specific size, then use Set Window Size)
2) I guess only using "Wait Until Element Is Visible" is enough. No need to scroll
I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.
I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.
My actual code (I cannot paste here my code for security reasons) has:
The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.
The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when
the pop up height is less.
The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.
If i did not apply jquery ui select menu, it´s working as expected.
Please find the below images for reference.
1.When having enoug popup size.
2.when popup size is less ,select is hiding.
3.What i am expecting.
Please suggest me what i can do to solve this.
Add CSS property overflow-y:visible on the main popup div:
This will make the inner content that is outside the main div top/bottom bounds to be rendered.
popupSelector {
overflow-y: visible;
}
Here is the documentation about overflow-y
I am using asp.net in VS 2013.
I want to display a pop up window when a user hovers over a div. I have 3 divs on the page and they are each a square of approx. 50x50. When the user brings their mouse over each one I want a different pop up box to appear.
I have been playing about with the hovermenuextender to achieve this but Im not getting anywhere as it needs a control as its target. IS there anyway to achieve this with an Ajax control?
thanks
You can try this:
step 1: Keep the three pop ups with different ids in your html with style = "display:none;position:absolute;top:50%;left:50%;". and a classname popup.
e.g.
<div class="popup" id="1" style = "display:none;position:absolute;top:50%;left:50%;"></div>
step 2: Give classname (respective ids of hidden divs) to your divs on which user will hover and a parent attribute to your divs.
e.g.
<div class="showdiv" parent="1"></div>
step 3: now write following code:
$(document).ready(function() {
$('.showdiv').mouseover(function() {
$(".popup").hide();
$("'#"+$(this).attr('parent')+"'").show();
});
});
try prop if attr doen't work.
I am having an iframe on a page. The iframe resizes itself based on the content loaded in it. So, it won't be having any scroll bars.
The iframe contains a list of draggable elements (Prototype & Scriptaculous). I have to drag the elements from bottom to top or vice versa, and while dragging, the parent window should scroll accordingly. I have modified the dragdrop.js file accordingly to scroll based on "window.parent.window" element. The outcome is that the parent window scrolls from bottom to top automatically on the drag of an element, but not vice versa.
Ok guys, thanks everyone. I think I have resolved this issue myself.
All I had to do was to calculate the position of the IFrame window and minus it from the top scroll value calculated by the drag & drop js code.