We Keep Coding

How to scroll to the bottom inside of an element with selenium?

I'm writing in C# with selenium. However, the best way I've found to scroll a page was to use:
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
js.ExecuteScript("window.scrollBy(0,900);");
However, in my current case, the window I need to scroll is not the full page but a part of it. And this command doesn't do anything. I imagined that I need to select the element first so I tried something like this:
js.ExecuteScript("document.getElementsByClassName('scroller')[0].scrollBy(0,500)")
This didn't work either and I'm not sure if its because its wrong as I'm not particularly familiar with JS or if I'm doing something else wrong, like selecting the wrong element to try and scroll.
To sum up my questions are, is there a better way to scroll a window in c# selenium? Is my js code to try and scroll the element wrong? And is there a way to figure out which is the correct element i should try to scroll?

You can use the scrollIntoView(true); to do that, it will brings up the passed element view.
Suppose that you want to scroll until the below element
WebElement element = driver.getElementByClassName('scroller');
then you can do like this :
js.ExecuteScript("arguments[0].scrollIntoView(true);", element);
For multiple elements, you can try the below by passing a matching index number :
js.ExecuteScript("arguments[0].scrollIntoView(true);", driver.getElementsByClassName('scroller')[pass the index number here]);

Jquery, cannot access css properties of dynamically generated element

I am using jQuery to append elements to a div, and all works fine.
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
However, I'd like the div to appear by fading in, instead of abruptly.
I notice though that I get an error when I try to access graphic properties on my dynamically generated element. So this, for example fails:
new_div.hide().fadeIn();
The console reports the following error:
TypeError: jQuery.curCSS is not a function
Do I understand this correctly, that this fails because current css properties are not defined for the dynamically generated element? Or what else can be goingg wrong?
Important edit
Additional checking and working on this pointed out to a complete misunderstanding from my part. This has nothing to do with the fact that the element was dynamically generated. I got the same thing by calling fadeIn() on whatever element.
I sincerely apologize!
I still didn't get, though, why this happens

Adding elements to the DOM takes some time, miliseconds maybe, but it's still a reason for jquery not be able to find the element.
This process might be even slower if the DOM is a large html page.
Write your code like this:
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
setTimeout( function(){
new_div.hide().fadeIn();
} , 150); // 100 could be also good
It might be enough time for jquery to catch the element.

I would add an id to keep track of all elements I'm creating (just my preference, but it makes it easier to code it).
var new_div = '<div id="myNewDiv1" style="display:none;">My Styff</div>'
$('body').append(new_div);
$('#myNewDiv1').fadeIn();

It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it.
Adding this code fixes the problem though:
jQuery.curCSS = function(element, prop, val) {
return jQuery(element).css(prop, val);
};

Updating a value of a <span> using Javascript getElementById

I am very new to JS and trying to get my head around how to change values of a span using JS. So, I have a span looking like this:
<span id="s551392614400915" class="vote-count-post" value="551392614400915">0.31</span>
I would like to change the 0.31 to say 150 - and Iam trying to use the getElementById as follows:
var xx=150;
document.getElementById("s551392614400915").value = "150"; //dosent work.
//document.getElementById("s551392614400915").value = xx; //dosent work.
for some reason this does not seem to work. I know I am doing something completely stupid, but I am unable to see where. Here is my rather silly JS Fiddle
any help with this would be great.

Use document.getElementById("s551392614400915").innerHTML= "150" if you want to change the contents of the span.

Use innerHTML instead of value. value is used for form inputs with a user-changeable value.
document.getElementById("s551392614400915").innerHTML = "150";

Weird margin when using .prependTo()

I've got some trouble in understanding the following behavior. I'm having a container <div> which contains a few inline-block <div> nodes. Example view:
Now my requirement is, to prepend new foobar inline-block <div> elements. No Problem, using jQuery -> .prependTo() to the rescue(applied on the parent container). Now comes the issue, the first time using .prependTo() "something, somewhere" creates an untrackable margin on the right side from the newly inserted element (it lookes like this to me). Example:
As you can see, only the very first element has this margin (again, I cannot track the space using Firebug/DevTools, it seems like its not there). All further insertions are just fine. Using .insertBefore() on the very first element also works fine and looks great. Unfortunatly I cannot use .insertBefore() in my particular usecase, that is why I'm asking for some heads-up here.
What do I miss ? Where comes this strange margin/spacing from ?
How to avoid it ?
Here is the jsfiddle playground where the above images come from:
http://jsfiddle.net/r7d6s/
I only tested on Firefox 4/5/6 so far.

It's the whitespace inside your parent div (i.e. line break). It gets sanitized to an ordinary space by HTML renderer. Remove it:
<div id="area"></div>

Style display not working in Firefox, Opera, Safari - (IE7 is OK)

I have an absolutely positioned div that I want to show when the user clicks a link. The onclick of the link calls a js function that sets the display of the div to block (also tried: "", inline, table-cell, inline-table, etc). This works great in IE7, not at all in every other browser I've tried (FF2, FF3, Opera 9.5, Safari).
I've tried adding alerts before and after the call, and they show that the display has changed from none to block but the div does not display.
I can get the div to display in FF3 if I change the display value using Firebug's HTML inspector (but not by running javascript through Firebug's console) - so I know it's not just showing up off-screen, etc.
I've tried everything I can think of, including:
Using a different doctype (XHTML 1, HTML 4, etc)
Using visibility visible/hidden instead of display block/none
Using inline javascript instead of a function call
Testing from different machines
Any ideas about what could cause this?

Since setting the properties with javascript never seemed to work, but setting using Firebug's inspect did, I started to suspect that the javascript ID selector was broken - maybe there were multiple items in the DOM with the same ID? The source didn't show that there were, but looping through all divs using javascript I found that that was the case. Here's the function I ended up using to show the popup:
function openPopup(popupID)
{
var divs = getObjectsByTagAndClass('div','popupDiv');
if (divs != undefined && divs != null)
{
for (var i = 0; i < divs.length; i++)
{
if (divs[i].id == popupID)
divs[i].style.display = 'block';
}
}
}
(utility function getObjectsByTagAndClass not listed)
Ideally I'll find out why the same item is being inserted multiple times, but I don't have control over the rendering platform, just its inputs.
So when debugging issues like this, remember to check for duplicate IDs in the DOM, which can break getElementById.
To everyone who answered, thanks for your help!

Can you provide some markup that reproduce the error?
Your situation must have something to do with your code since I can get this to work on IE, FF3 and Opera 9.5:
function show() {
var d = document.getElementById('testdiv');
d.style.display = 'block';
}
#testdiv {
position: absolute;
height: 20px;
width: 20px;
display: none;
background-color: red;
}
<div id="testdiv"></div>
Click me

Found the answer :
I need to use the following to make it work on both browsers :
document.getElementById('editRow').style.display = '';

Actually I was experiencing the same problem you're describing here. What actually fixed my issue was changing the document properties.
Old DOCTYPE/html spec
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Replaced with
<html>

Check the error console (Tools Menu > Error Console in Firefox 3) to make sure that there isn't another error happening that you're not seeing, which is stopping your script from working.

Try setting the height and width of the div, and make sure it is on top by setting its z-index higher than everything else. If the absolutely positioned div is inside an element that is relatively positioned, it's top and left location is based off the top and left of the relatively positioned element. Try putting your div just under the body element.

You must write a window.onload method:
window.onload = document.getElementById('testdiv').style.display='inline';
Or you can also make a variable:
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';

There is an annoying display error on Firefox 3.5 but not on IE7 or Firefox 2.0.9
I have 3 DIV's position absolute - the first with plain text; the second with a CSS menu (sucklefish type with UL and LI) and the third ditto. The third will not display at all even though the coding has been checked and found to be perfect with W3C's HTML validator.
As a temporary measure, I have merged the second and third DIV's contents.
Things must be bad at Mozilla when IE7 and FF2 display OK but not FF 3.5

I'll give you a BIG hint:
<div style="..." class="..."> ... </div>
If you have something in style, then document.style will work!
If you have something in class, it will not show up in document.style and class="..." will OVERRIDE it!
Think about this and this will clear up SO MANY ISSUES. Just this one little understanding will RID you of this MIND VIRUS. Have a good day. Cheers, Ron Lentjes, LC CLS.