How to grab and display img from external site - javascript

I'm trying to figure out how to grab the image from an external site, in my case, http://bikerace.com/tracks/[levelCode]
(as an example level code, nhx874, the url would be http://www.bikerace.com/tracks/nhx874)
Users on bikeracelevels(dot com) have to input the level code THEN upload a screenshot. I'm trying to remove this requirement by automatically grabbing the image based on the code they input, since I could append their input code to the url, then somehow find the image (since the only image on the page would be the one I want)
How could I accomplish this?
Thank you very much in advance!

Get this cross-domain AJAX plugin for use with jQuery: https://github.com/padolsey/jquery.fn/tree/master/cross-domain-ajax
Use it to load the page on bikerace.com/[levelcode], then select the image from the data as you normally would with jQuery.

Related

Use javascript to set image URL of image control in asp.net

I have a Image, FileUpload and a Button controls. I want to save the image to the server from the local path obtained from FileUpload control. I implemented this functionality on Button Click in C#..
Now i want to set the image URL of Image control OnClientClick of the same button on which server side code is implemented.
Image URL will defer everytime depending on file selected in FileUpload control. Can anyone help me to understand how javascript can be used to set image URL based on thre file selected in File Upload Control?
First of all, understand that JavaScript doesn't understand, care, or even know about C# and its fancy "controls". It just deals with HTML. Period. That said, you can use JavaScript's setAttribute function to set the image URL of an img tag (not control). Like this:
document.getElementById('my-image').setAttribute('src', 'http://ecx.images-amazon.com/images/I/41%2BjAZ4dUGL._SS500_.jpg');
Demo here:
http://jsfiddle.net/je9Gx/
You can use this code to find the image control, where imgid is ID of image control;
$("[id$='imgid']").attr("src",pathfromfileuploader);
//pathfromfileuploader=it is a variable which stores the path taken from file uploader;
Hope it will help :)

CKeditor with a url-prefix for image tags

I am using CKeditor to allow users to add images to their textboxes in a CMS.
A possible scenario is this: I develop a new site for a customer at http://developer.com/customer/a. The base url is "/customer/a". But when I ship the finished site to their domain www.customer-a.com, base url is changed to "/" and all image links are broken.
I would like to CKEditor to save something like {base_url}/media/my-image.jpg, but still keep all the WYSIWYG-features of CKeditor. Is there a hook or event in CKeditor where I could replace for e g {base_url} before the html i viewed?
I would appreciate any hints.
The hard way would be to use CKEditor's html parser and traverse whole html text when its loaded into editor and check/correct url of img tags.
Second option, although im not sure if it can be applied on your case, would be to make all images dependant on CKEDITOR.basePath and determine just that when CKEDITOR is initializing.
Or just develop on http://developer.com/customer/a, but let images be placed on www.customer-a.com even for development :)

jQuery Copy text inside iframe to main document?

Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....
when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly

Show div from another website

Is there a way to use an iframe or some other method of showing a named div from another website?
I want to pull in some data from a government website into a google map and when they click the point I want the information from one of the divs on that page to display.
Using JQuery, you should be able to exactly that with the load-function.
Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.html #container');
You can visit the JQuery documentation here for more info.
I take assumption that you are sure of div's ID in that other website.
If yes. use Jquery Ajax to pull the site's content into a hidden iframe in your site. then fetch the content of the div-in-question into some variable and then you can use it for your purpose (parse html table data or do whatever)
Discard the iframe's content so that you don't have unnecessary items in your page's DOM.
Ajax Call
In-House Service to Scrape the HTML from the page
Select the div with xpath / SGML parser
Return to ajax call-handler
Replace the content of your div
However There are other problems, i.e. scraping someone's site for their content without their permission is BAD.
They may or may not care, but still you should seek permission, or one day you could find your webserver blacklisted from their site. Or worse... Especially a government site.
You should probably go about figuring out how to properly obtain the data you need (perhaps there's an api somewhere) and then render your own version.
You would have to make use of either JSONP or a middle-agent to retrieve the data (i.e. a PHP script using the CURL library).
JSONP functionality is included in numerous Javascript libraries such as MooTools and jQuery. That is the method I would use.
MooTools: http://mootools.net/docs/more/Request/Request.JSONP
jQuery: http://docs.jquery.com/Release:jQuery_1.2/Ajax
Once you have retrieved the body of the page the DIV resides on, you could use REGEX to extract the information from the specific DIV element.

Help with editing an existing Javascript file

I'm trying to edit the readability.js file from http://code.google.com/p/arc90labs-readability/.
It's a bookmarklet that "cleans" the current page by stripping everything except for the web page/web article title and body.
However, I'd like to edit the script so that when the bookmarklet is active, the current page is untouched but outputs the "cleaned" html file to a specified local directory instead.
Can anyone help? Thank you!
Note: The clean HTML file is called 'document.body.innerHTML'
To begin with, it can't be done without touching the original page. The way the script works, it edits the current page (so image urls continue to work, etc). The best you could do would be to store the innerHTML of the root html and then restore it after you have grabbed the content (or store the head and body separately) It would look something like this:
First you would need to store the existing innerHTML of the html element.
Next, you would have the script run as needed, just remove the readability-controls part.
Get the HTML contents of either the readability-content or the whole document and store it in a variable.
Restore the original content using the content stored in step 1 (so the page goes back to how it was before)
At this point, depending on your browser, you could either try to use a dataURI or you could dynamically add a reference to the Downloadify library, images, etc and add the download button to the page. Finally, clicking the "Download" button you could pre-supply the filename and the data stored in step 3, but the location would have to be selected every time.
Sorry this is so hypothetical, but it would take quite a bit of work to put this together.
You don't really need to modify the readability code. Just pull the contents of:
document.getElementById("readability-content");
You can then pass that onto a local script to be saved.

Categories

Resources