Embed html class into my page - javascript

The landing page of reliefweb has a 'latest disasters' section that I want to embed onto my website (see screenshot).
I was told that I need to use an iframe and some JavaScript to get the element with class=“latest-disasters”.
This way, when the block is updated, it will also reflect on my website.
As I have no background in JavaScript, can someone show me how to do this?
Thank you for helping.

You haven't provided enough information.
But this is usually how it's done with iframe
<iframe src="http://www.latest-disasters-api.com" class = "latest-disasters"></iframe>
About the javascript part i don't have enough information but obviously you need some kind of SDK or JavaScript plugin
Hope it will help

Related

website inside website - no redirection or leave the first site [duplicate]

I want to make a html page that act kind like google cache.
Say in my homepage HOME, I have a link A to a website B, and when I click on A, the page that comes out will display the content of another page, with a floating bar on top that has some functions of my own choices.
For example, I want my link to show google.com, but I also want to add a button(floating bar, anything) to that google.com that allows me to return to my own webpage when pressed.
Can someone provide me some useful resources for me too look at, or even better a solution template? :)
Thanks!
You could use an <iframe> in order to display an external webpage within your webpage.
Just place the url of the webpage that you want to display inside the quotes of the src attribute.
<iframe src="http://www.webpage.com" width="400" height="400"></iframe>
An iframe sounds like it may be what you need, but I'm not 100% sure after reading your description. The iframe will show content from another URL in your page. Once you have that all you need to do is style the page and use CSS/JavaScript to add in your functionality as described.
Check out this:
http://www.w3schools.com/tags/tag_iframe.asp
Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).
Here's the general idea:
HTML:
Click Here
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>
Some jQuery (not tested):
$(document).ready(function() {
$('#frame').hide();
$('#link').click(function () {
$('#frame').show();
})
})
Style it as necessary
Note - this answer in no way endorses w3schools.com :-) . Please see w3fools.com/
I found Kevin Gourney's answer to be most straight forward and helpful. I'm using this to work around Adobe Spark's Domain limitation and created a simple one liner index.html file and tweaked the code as follows:
<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>

How to add CSS property to elements outside iframe?

I'm sorry if this wasn't the right place to ask. I'm having trouble figuring this one out.
What I'm trying to do is removing the demo bar provided by marketplaces like themeforest or mojothemes within my own demo site.
But since what appears in the marketplace's live demo of a theme is fetched, it appears within an iframe inside of their site.
I've tried asking in their forums but no one has been helpful.
Is there any way to do about this? An example done in a marketplace would be great.
The Answer is No. It is not possible to modify dome elements outside iframe by a script on site in iframe.
Reason: Since The Marketplace website is Accessing your Demo Site within iFrame at thier server.
Like how you embed a YouTube Video on your Page and Specify a Heading above it etc, does youtube or google map ever try to change their container styles? do they ever change the heading you wrote above the embed code?
Thats it
You cannot (due to the Cross Site Scripting - http://en.wikipedia.org/wiki/Cross-site_scripting) as it is a separated document. But what You can do is to use Web Messenging: http://en.wikipedia.org/wiki/Web_Messaging to affect JS/CSS within the iframe (but this will require actions on both sides).
If you can execute Javascript from within an iframe you can change the elements outside of it with the Window parent Property. Example usage:
parent.document.body.style.backgroundColor = "red";
changes the background of the <body> outside of the iframe.

How can I save the content inside an html frame that pops up when a link is clicked using greasemonkey?

I need to automate a process that involves getting data from a series of links on a website.
Greasemonkey could do the job, but I can't get the content from inside that link.
The link looks like this:
<a id="ctl00_main_gvPolite_ctl02_lbDetaliiPolita" title="Detalii polita" class="icon16 icon-detalii" href="javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')"></a>
This would be the important part: javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')
I can't find that function defined anywhere in the javascript, it's only used at various points.
A frame pops up over the website displaying the content I need. After I get it in a variable I can just send it to a script on my server for processing.
For anyone interested, I was missing an input called __VIEWSTATEENCRYPTED
It's further down the page in the source code, just include it in your $.post(); or whatever you use and it will work.
All credit goes to MaxArt for this one. Thank you!

How to create a javascript plugin like the Facebook live stream?

I am looking to create an easy java script plugin for my site that can be placed in other sites to pull info from my site. The Facebook live stream plugin allows you to select a couple options and it will spit out a line of code to place in your site to have the Facebook live stream. Can someone point me in the right direction or give me some info on how to do this? I know how to write the java script to pull from my site but I do not know how to make it so simple to integrate into another site. I really like that the Facebook plugin requires only one line of java script, this will make it easier for my customers to include in their site. Any help would be appreciated.
Thanks
Take a look at the code you have to post when using FB live streams:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>
<fb:live-stream event_app_id="APP_ID" width="400" height="500" xid=""
always_post_to_friends="false"></fb:live-stream>
So here's what I would think happens under the covers:
The script is fetched from the server
Onload the script code looks for the fb:live-stream element and looks at the attributes as parameters
The fb:live-stream element is removed from the DOM and converted to appropriate DIVs, etc.
The script registers some mechanism to periodically refresh the content in the DIVs
It's also possible that the fb-root element is used for the content. No idea. Would have to look # a DOM.
That's really all most of these widgets do. Usually you tell the user to get a script.js via a script tag and also define an element that they would like for the content to appear in. Once the script tag is loaded, register an onload handler, find your element, and do what you gotta do.
Just be careful to isolate any jQuery instances or globals you might depend on so you don't mess up anything on the page.

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.

Categories