JS know the current distance to the top of an object - javascript

I want to know, how can I get the distance that a div is from window top, by it's id attribute.
I've already tried
var pubID = "#pub_<?php echo $_GET['pub']; ?>";
alert($(pubID).scrollTop());, and this alert return me "NULL".
I want to use this, when I'am on a determinate page and click on a notification, it redirects the user to another page, and should scroll the new page to the position of the div mentioned on the notification.
Help please,
Gonçalo Ribeiro

Your best bet would be to use jQuery, because offsetTop / offsetLeft don't work consistently in all browsers.
So, assuming you've included jQuery on the page, you could use:
$('#element').offset().top
Also, if you're so inclined, have a read here on the subject here and here.
Edit
Thinking about your problem, would linking to an anchor name (i.e. Adding a hash to the URL) not be easier than trying to work out the position like this?
One link to rule them all

Related

How to capture the displayed link in HTML (JavaScript) and pass to another HTML page as a variable?

I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.
In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>
If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.

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]);

iframe top window status change

I have a link in Iframe and am redirecting users to final destination say x.com through an intermediate php script. However I want the users to see the final destination link in their status bar when they mouseover the link.
I have tried everything to change the window.status(in desperation) but nothing works. I have tried so far :
<a onmouseover='window.top.status="x.com";return true;'....
<a onmouseover='window.parent.status="x.com";return true;'....
<a onmouseover='parent.window.status="x.com";return true;'....
This has been disabled in most modern (and even not so modern) browsers: https://developer.mozilla.org/en-US/docs/Web/API/window.status
If you want to do this, you can create a function onload to create the link element, and change it on mousedown. There is a good example here: How to change window.status by onmouseover of a createElement()
Alternatively, you can skip the status all together and use a tooltip or something else to let users know where they will be forwarded.
It's better you to have the desired href inside tag. So users will see the needed string in status bar. Then change href on click to go to the needed php script.

How to make a div with dynamic content automatically scroll to the bottom?

I have googled around and found a few solutions to this problem, but none of them seem to work in my situation. I have tried hidden inputs to scroll to, that stay at the bottom
document.getElementById('scrollToMe').scrollIntoView();
I have tried
$("#postbox").scrollTop($("#postbox")[0].scrollHeight);
and a few others. Here is my situation
I have a chat room (http://novaplasm.topiacloud.com/Chat). When you type anything, it enters it into the div "postbox" using Knockout. Every time you enter new content, it appends it. I want to make it so you can always see the latest message, without having to scroll yourself. I can't seem to do this for the life of me. Thanks in advanced!
First get a reference to your postbox and chat message div
var pbox = $('#postbox');
var chat_div = $('<div></div>').attr('class', 'chat_msg').text(msg);
Here msg is your chat message
Then you have to scroll down using the 'animate' method like this
chat_div.appendTo(pbox);
var height = pbox.scrollTop() + pbox.height() + $('#postbox').filter('.chat_msg:last').scrollTop();
pbox.animate({'scrollTop' : height}, 1000);
Here the animation is happening over 1 sec.
Refer jQuery documentation for more detailed explanations on jQuery methods.
Live fiddle example

Jquery extension BeautyTips doesn't work with dynamic ajaxPath option

I'm using the BeautyTips jQuery extension, but I'm not having any luck passing dynamic URLs as the ajaxPath. In the documentation, they suggest:
$('#example18').bt({
ajaxPath: ["$(this).attr('href')", 'div#content']
});
I have
$( '.username' ).bt({
ajaxPath: ["$(this).attr('title')"]
});
However, when I hover over the username element, instead of bringing up the URL stored in the title attribute within the Beautytip, it attempts to send the whole browser to another page (or refresh; it's hard to tell because the browser address doesn't change, but the page goes blank, and a View Source shows an entirely different page.)
I have verified that the title in the element in question is correct and is being addressed correctly. If I statically pass the path, it works, but I'd rather not write a new version of this function for every item on the page that needs a Beautytip.
Is there a syntax issue here? Any help would be much appreciated.
My HTML is like:
<span class="username" title="http://degree3.com/popup/baloon/member-summary?id=53">Username</span>
Okay, I had to dig through the extension, but I figured this one out.
The plugin author (for reasons I did not spend the time to decipher) kills the "title" attribute of the element that BeautyTips operates on and moves its value to an attribute called "bt-xtitle" instead. I guess this is why his sample used the "href" attribute instead of the title attribute, and it was my dumb luck to attempt this maneuver on the wrong attribute.
Anyway, this works:
$( '.username' ).bt({
ajaxPath: ["$(this).attr('bt-xtitle')"]
});

Categories