I need to embed a search form from external website. Currently I am using the IFRAME with css trick
#outerdiv{ width:446px; height:246px; overflow:hidden; position:relative; }
#inneriframe{ position:absolute; top:-412px; left:-318px; width:1280px; height:1200px; }
<div id="outerdiv"><div id="innerdiv"><iframe></iframe></div></div>
which helps to display particular div only but i want to load particular div rather than whole site and display particular div.
I tried PHP SIMPLE DOM PATSER (Fetching Data From A Specific div id Using PHP)
include('simple_html_dom.php');
$html = file_get_html("http://www.farebuzz.com");
$displaybody = $html->find('div[class=search_bg]', 0)->plaintext;
But it only gives the content without stylesheet and functionality.
So is there any way of fetching particular div along with it's style and functionality.
You seem to be on the right path. If the site from which you are trying to fetch the div from has not provided a way to embed the div, then the only alternative, as far as i can see, is to fetch the div you are interested in using some sort of script just like you did.
However to get the "style and functionality" as well, what i would do is find out which stylesheets and/or javascripts are being used in the div and just include them. If you go this way, maybe it would be best to create a separate file for the fetched content, and then call it to your site in an iFrame. That way the scripts and styles only affect the contents in the iFrame.
If you maintain the attributes/properties (of the elements you will be fetching), I see no reason why the css and/or javascript would not work.
Related
I got a .html Page with jQueryMobile. This page sends a database request to a .php script on my server. Then the script returns the result with html code and jQuery Mobile theme features like data-role="listview" included. But the JQM theme is not shown in my frontend. Only the "normal" html style of ul and li. Anyone of you know how to show the database results in jQuery theme? Thanks in advance!
When dynamically adding new jQuery Mobile its content markup can only be enhanced manually through use of a proper enhancement functions. Every widget has an unique function.
This should do it:
$('#listviewID').listview('refresh');
In case this error is thrown:
cannot call methods on listview prior to initialization
use this:
$('#listviewID').listview().listview('refresh');
There's also another solution. Instead of enhancing single component you can enhance whole content DIV, do it like this:
$('contentDivID').trigger('create');
or it can be done on a whole page like this:
$('pageDivID').trigger('pagecreate');
If you want to find more about this process (with working examples) take a look at this ARTICLE, to make it transparent it is a link to my blog post.
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.
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.)
Can someone tell me how to write code that pushes the content of a finished webpage down half an inch or so, then loads an ad across the top of the page, like this example:
http://abcnews.go.com/International/hideouts-sacred-spaces-experts-baffled-mysterious-underground-chambers/story?id=14136379
(example may no longer be showing this ad/function)
The entire page loads, then gets pushed down, then the ad loads at the top of the page. My code for this would be at/near the bottom of my clients html.
The ad content will come from a different server.
The same code would ideally work with all/most finished websites instead of being specifically tailored for each one.
Thanks for any and all help.
I suppose you implement your ads in your HTML by using a static code (eg. when you're using Google Ads). When you put this code on top of your page, it'll show the ad on top of your page. Optionally, you can style it a bit so it's centered.
Since you load your ads from a different server, I don't see any reason why the HTML-code behind those ads is dynamic (I don't know if it is?). Your ad-provider will take care of showing the ads in a random-order.
If you'd looked at the source of the page you'd see this this is achieved using JavaScript, not PHP. If you want it to happen (seemingly) after the page loads you need to write some php to inculde the html/JavaScript/images whatever for the ad, then some JavaScript to dispay it once the page has finished loading. Or use AJAX to dynamically modify the DOM.
Check out the jQuery JavaScript framework.
I would prefer to use a front-end code like jquery or normal javascript, and prepend your ad to the body.
OR
If you want to do it with a server-side language. You can add the server variable just after the opening body tag, and populate the html to the variable via server-side code.
See my example:
Gray : body tag
Green : your website
Red : the ad section
If you don't have a wrapper container around your div, add one. And use the methods I mentioned above to prepend the ad to your site.
I have some content I would like to share with other websites.
Currently I do this via an iframe:
<iframe width=“540”; height=“700” frameborder=“0” src=“http://www.energiekostencalculator.nl/forms/frame_tabs.php?first=yes&product=1&links=1&css=http://www.energiekostencalculator.nl/forms/susteen.css”></iframe>
This has two problems.
It is not SEO friendly. The links on the content of the iframes do not count as inbound links since they page is hosted on my server.
It is (on my server anyway) not possible to link outside css stylesheets to the content of the iframe. The objective is to allow other websites to easily link their stylesheet to my content.
Who has the solution to these issues?
Perhaps using jquery (see below), however I'm not sure Google would parse it and "see" the links...
<html>
<head>
<script src="/js/jquery.js" type="text/javascript">
</head>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
Have a look at how TripAdvisor does it - a static link and then javascript to replace it once the page has loaded.
<div id="TA_rated459" class="TA_rated">
<ul id="JRrkXsd6H" class="TA_links GYO6Zcd">
<li id="IN1Gc4AMw8T" class="zQkgIs4xdv"><a href=http://www.tripadvisor.com/Hotel_Review-g294207-d501440-Reviews-Ngong_House-Nairobi.html>Ngong House</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=rated&uniq=459&locationId=501440&lang=en_US"></script>
There are some better alternatives to iframe but its really up to the "other websites" to make it crawlable by creating HTML snapshots, Making AJAX Applications Crawlable.
As for your code example, Its not possible to load content from external domains, due to the Same origin policy.
Other iframe alternatives maybe a script tag, which most widgets use, where you tell your content users to embed your widget (script tag) into a parent div which will hold the content, and when your script loads it will automatically fill its parent element, with content.
There is a more "advanced" way of doing this but it might be limited by certain shared servers. Any other way I don't think you could solve your issues either by AJAX or iFrames. Since it looks like it's all html and javascript other than what gets parsed via php prior to the displaying of the page you should be able to load the actual contents of the site directly from server to server via fsocketopen and then do anything with that content from the other server. You could pregenerate code that could be used by your clients or customers on their servers.
A collection of links with no context isn't going to be SEO friendly, period. Spreading a chunk of HTML that just has some links in it around the web is just going to trash the PR of people who embed them. If you want SEO benefits, then you need unique (relevant!) content containing the links on each site linking in (otherwise welcome to duplicate content penalties).
Given that, you might as well just continue to use an iframe (assuming there is a benefit to showing the links to visitors to the other sites).
I think you could probably have a DIV with overflow: auto; (and specify dimensions). Then the HTML can be inside the DIV (and so part of the page) rather than in a separate file.
Maybe you should create an API. This will definitely solve issue #2 - allowing publishers to style up your content any way they like.
And about issue #1 - SEO - I'm not sure. Don't understand the language of the site, but to my understanding you allow people to embed some kind of useful calculator to their own pages, while the content of their pages would generally stay unique, so this may or may not be SEO benefitial, I'd also like to know if any SEO experts read this.