Develop Reference

Scrape web data from mouseover popup

I'm trying to use JavaScript to scrape data from the following page, specifically the "free shipping free returns" text that appears when you hover your mouse over the cart icon:
Whenever I hover over the cart icon, new HTML is added to the DOM.
And when I move my mouse away, the the previously added HTML goes away. I want to be able to parse data from the HTML that gets added without having the popup visible. How would I be able to scrape this text data even if someone does not hover over the cart icon? Is there a way to access all the HTML data at once?

You can try to catch the JavaScript function being executed when you hover your mouse over the cart icon. You can do this via the developer tools. Add break points to code execution if the DOM changes (on the parent element in which the new element is added).
Once you get the function, just execute it directly on that page and you'll probably be able to see the popup and extract it's contents.
You could also try to simulate a hover as explained in these answers: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?

Scraping a page for data is not usually recommended since they can change over time (especially ones not written directly in HTML, but are rather generated (usually they have CSS classes like 8h2H1)).
If this is not supposed to be a long-term solution, the above answer by #nvkrjn is a good answer. Or, you can just check for an element with the id name free-shipping-label.
But, if this is supposed to be a long-term solution, then I would suggest using an API (this site doesn't seem to have one) or querying the database like how to Javascript does. Also, if you're using a non-browser environment (eg BeautifulSoup), it may not run the JS required to get the data.

Determine which link (on same page) was used?

I have a page with two links to an introduction/registration page. We want to show different content based on which link the user uses. They appear in different contexts on the same page, and we would like to tailor the message on the registration page to that context. For SEO purposes I was told not to change the URL.
I'm using rails. Since the incoming user will have the same referrer regardless of which link was clicked, what is the best way to know which link was used to get to my page? Is it possible in a practical way without altering the URL?

I would change the href on click like described in How to change href of <a> tag on button click through javascript
But I would not change the whole url. I would only append a parameter. This should not influence SEO.

Pass onclick from another page

I have a page showing a list of events with anchors which trigger popups onclick. How can I trigger these modal popups when an anchor is clicked on another page?
How can I pass the values on, I suppose, and trigger the click?
For example, anchor on event page I'd like to trigger a popup for from another page:
<a class="event " href="#" data-onclick="popup" data-color="#000" data-event-id="3">
<div class="event-inner" data-event-id="3"></div>
</a>

Your webpage and Javascript won't have any knowledge of the anchor tags if they aren't on the current page (or even in another tab, for that matter). If you really need that information available on the second page, you can try passing it through the query string like this.
Otherwise, you can save JSON data for your events on the server and retrieve them for every page that needs them. If you're not familiar with JSON and AJAX, you can find a tutorial here. If you're using jquery, it has a great API for AJAX calls.

Linking to a page and expanding a topic with Javascript

I want to link to a page which contains multiple support topics.
When the user clicks on the link while being on an external site, the topic should be expanded as soon as the user arrives on the support page.
Example:
I link to this page
http://www.nintendo.de/NOE/de_DE/support/nintendo_ds_lite_159_142.html
Topic I want to be opened on arrival
javascript:fadeNAppearDiv('box_3_9277');
(First topic in the FAQs)

It's not clear if you are maintaining the target site (where the div will open) or not. If you don't have access to the code for that page, then there isn't any way to invoke the javascript function on it. If you can modify that page, you can do as #PhiLho suggests and modify the URL you are using to specify the DIV to open and have an onLoad handler that parses the URL and opens the appropriate DIV.

Good idea, but I don't see the question... :-)
The way I saw on some sites, like deviantART, is to use the sharp anchor notation: myURL.com/foo/page.html#TopicToExpand
JS can analyze the current URL and get the anchor part, then do whatever you need to do to highlight/jump to the right place.

Any ideas on how to make edit-in-place degradable?

I'm currently writing an edit-in-place script for MooTools and I'm a little stumped as to how I can make it degrade gracefully without JavaScript while still having some functionality. I would like to use progressive enhancement in some way. I'm not looking for code, but more a concept as to how one would approach the situation. If you have any ideas or know of any edit-in-place scripts that degrade gracefully, please share.

It sounds like you might be approaching this from the wrong direction. Rather than creating the edit-in-place and getting it degrade nicely (the Graceful Degradation angle), you should really be creating a non-Javascript version for editing and then adding the edit-in-place using Javascript after page load, reffered to as Progressive Enhancement.
There are two options for this. Create the display as a form with a submit button that works without Javascript, then using Javascript replace the inputs with some kind of label that performs the edit-in-place. You should be able to use a combination of labels and id attributes to pick out the correct properties for your edit-in-place implementation to work. The other option if you don't want a form to display by default is to display the values with an button/link for turning it into a form using server-side processing, then adding the edit-in-palce to that.

You can't do edit-in-place at all without JavaScript, so graceful degradation for it consists of making sure that the user can still edit the item in question when JavaScript isn't available.
As such, I'd just have a link to edit the entire item in question and then create the edit-in-place controls in JavaScript on page load, hiding the edit link if you'd rather than users use edit-in-place when available.

If it's textual content, you could show the editable content as an input type submit button, with as caption the content. When clicked, it would submit the entire form, preserving the other values, and show an edit dialog. Afterwards the form values could be restored.

Maybe put an input in a div under each element that has an edit-in-place. When the page loads, use javascript to hide those divs. That way they'll only be usable if the javascript never fires.

I'm asuming what you're trying to do is something like the following scenario:
<li>
<span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>
Where the <a> is a button that replaces the <span> with an <input>, so that it can be edited. There are a couple of ways to make this degrade gracefully (ie work without javascript).
In theory:
Using CSS, do it with psuedo-selectors. :active is somewhat like an onclick event, so if you nest a hidden <input> in the <li>, this CSS hides the <span> and shows the <input> when the li is clicked on.
li:active #editable {
display:none;
}
li:active input{
display:block;
}
This may work in your favorite browser, but you'll without doubt find that it breaks in IE.
In practice:
Use a link. Have that <a> be an actual link that goes to a page where this input/span substitution has been done server side. You stick an event handler on the <a> that uses MooTools to cancel the click event for people who have JS, like this:
function make_editable(evt) {
var evt = new Event(evt);
evt.preventDefault();
}

Try using a styled input text, and after the page loaded make it readonly, using the readonly attribute.
and when click on it remove the readonly attribute, and onblur making it readonly again.
when clicking on "Save" button or on onblur event make an Ajax Request to save the data in the server.