I am currently trying to stream the content located on http://store.kenstanton.net/Default.asp the five images located just above the featured videos
and stream it to http://www.kenstanton.net to the content (currently the same atm however I would like to be able to update one webpage and have the following update as well) above the featured videos on that page.
I'm currently trying to use an ajaxpagefetch script if thats the appropriate route our should I curl it and then parse?
AJAX is probably the way to go - you might want to look at jQuery manual for .load(). In your case it'd be something like:
$('#result').load('http://store.kenstanton.net/Default.asp .v65-productDisplay');
But of course there might be some styling issues as well as AJAX security restrictions (of those I'm not sure, but writing simple redirector should do the trick in such case)
Related
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
Let me know if this question needs more clarification.
I am a front-end developer, and I usually use Wordpress with lots of custom fields to put together a CMS for clients.
A current client wants a design portfolio site that initially presents a grid of images that link to projects, but instead of loading a new page on click, the new content loads and fades in smoothly.
I figure the simplest way to do this kind of thing is to load everything up front on one page with ajax (a loading screen is OK), and then just show/hide/move content with jQuery.
The request I am having trouble with is being able to have specific URL's for different projects and images. The client wants a URL scheme like here:
http://collins1.com/work/bp-helios-house/3
Where the number at the end causes a specific image to load in the given project. It seems like this would be simple enough using php variables where like:
http://www.whatever.com?project=3&image=2
And using those to manipulate the initial AJAX load.
But how is this accomplished using a more traditional (pretty) URL structure like the example? If I am building the site as one page loading content, won't the browser attempt to load that as a page and just come up with a 404?
Bonus: How do you change the URL in the address bar to create these links as the user navigates the site without reloading the page?
Thanks!
what you see there, is called url routing. Basically, some server rule that rewrites the url in a proper way, depending on server and scripting language used.
for example, the url
http://server.com/foo/bar
MAY be redirected to
http://server.com/index.php?foo=bar
If you need a lightweight framework to handle this, take a look at www.slimframework.com
If you want real pretty urls you are going to need a server-side framework for url routing and will require you to get into php or ruby on rails. If you want a pure front end solution you can fake it in javascript using hash fragments. For how to do this see
http://backbonejs.org/#Router
http://www.asual.com/jquery/address/
http://benalman.com/projects/jquery-hashchange-plugin/
I am attempting to load a script that is on one of my web servers into a page that is on a hosted site with another service. Currently, I am using an iframe to make this work. The issue I have is the iframe cannot dynamically expand based on the php's output.
What has been suggested to me is trying to inject the php output into a div but I don't think that I can do that cross domain.
I am going from a web server at example.net/scripts, which I have full access to, and loading it in a page on example.us, which I have very limited access to since it is a hosted service (namely enjin).
What I need is a solution that will allow me to call the php script from the web server and display its output on the page in an element that can expand based on the output from the script. When it pulls the php script, it needs to display within the CSS parameters that are predefined in the CSS for the div (min-height, max-height) but only at the height of the elements of returned in the script.
To further clarify, I am using the php script to do a foreach loop for json output from an API from TwitchTV. When the foreach loops runs it builds an element structure for each of the returned results to display them as desired. I end up overflowing out of the iframe if i have too many returns and if i have no returns, it just returns a string and displays it, but at that point the iframe's height is too high.
Any examples anyone can give me or solution suggestions?
Since you can AJAX, your solution would be to use AJAX to call the code on the non-locked down site, and return the box with the stuff in it. On the locked-down site, process that code and then just stick it in a <div> on the locked-down site. And of course that div can expand to fit the content like usual.
If, for some reason, you have to use the iframe, just gather the height of the box with javascript (you could hide the box off to the left if need be with left: -9999px). Use that height information to set the height of the iframe. So you are basically loading the content of the iframe twice. Once through ajax just to get the height, and once through the actual iframe.
I don't really see any reason that the iframe should be necessary -- the process in the first paragraph should work fine.
As some of you may know, Google is now crawling AJAX. The implementation is by far something elegant, but at least it still applies to Yahoo and Bing AFAIK.
Context: My site is driven by Wordpress & HTML5. An Custom Post Type has tree types of content, and the contents of these are driven by AJAX. The solution I came for not using hashbangs (#!) until fully understand how to implement them is rather "risqué". Every link as HREF linking to *site.com/article-one/?tab=first_tab*, that shows only the contents of the selected tab (<div>Content...</div>). Like this:
This First Tab
As you may note, data-tab is the value that JavaScript sends with AJAX Get, that gets the related content and renders inside a container. At the other side, the server gets the variable and does a <?php get_template_part('tab-first-tab'); ?> to deliver the content.
About the risqué, well, I can see that Google and other search engines will fetch *http://site.com/article-one/?tab=first_tab* instead of http://site.com/article-one/, making users come to that URL instead of showing the home page with the tab content selected automatically.
The problem now is the implementation to avoid that.
Hashbang: From what I learned, I should do this.
HREF should become site.com/article-one/#!first-tab
JS should extract the "first-tab" of the href and pass it out to $_GET (just for the sake of not using "data-tab").
JS should change the URL to site.com/article-one/#!first-tab
JS should detect if the URL has #!first-tab, and show the selected tab instead of the default one.
Now, for the server-side implementation, here is where I'm kind lost in the woods.
How Wordpress will handle site.com/article-one/?_escaped_fragment_=first-tab?
Do I have to change something in .htaccess?
What should have the HTML snapshot? My guess is all the site, but with the requested tab showing, instead of showing only the content.
I think that I can separate what Wordpress will handle when it detects the _escaped_fragment_. If is requested, like by Google, it will show all the content plus the selected content, and if not, it's because AJAX is requesting it and will show only the content. That should be right?
I'm gonna talk third person.
Since this has no responses, I have a good one why you should not do this. Yes, the same reason why Twitter banged them:
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
Instead of doing hashbangs, you should make normal URIs. For example, an article with summary tab on should be "site.com/article/summary", and if it is the default one that pops out (or is it already requested) it also should change to that URI using pushState().
If the user selects the tab "exercises", the URL should change to "site.com/article/exercises" using pushState() while the site loads the content throught AJAX, and while you still maintain the original href to "site.com/article/exercises". Without JavaScript the user should still see the content - not only the content, the whole page with the tab selected.
For that to work, some editing to the .htaccess to handle the /[tab] in the URL should be done.
I am trying to load a div from another domain and display it on my site. An <iframe> will not work as the content is dynamically sized and I don't wish to render the entire page, just the content of <div id="content-article">
I have attempted to follow the guide from: http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html however after reading the comments it appears to only work for external pages on the same domain.
I don't really care how it is done; php, jquery, ajax or what have you I just don't want to upload the same content to two different domains.
Is there any way to do this?
You can't when it should fetch it from external URL. Perhaps you can create a proxy or so and do a jquery.get?
You could use PHP's DomDocument to parse the HTML of the page that has the div and extract the div you want and then put it into your own content.
What is the URL with the div you want to grab? (Maybe we could write some code to help you pull it out.)