Anyone know how to hide/remove Popout of Google Drive Embed Video? - html

anyone here have the same problem with
class="drive-viewer-v2-toolstrip"
I tried a lot of things but somehow I can't kill it.
$(document).ready(function () {
$('.drive-viewer-v2-toolstrip').remove();
});
Any ideas on how to get rid of it?

The embeded code for the video is inside an iframe and because of that you won't be able to access its content from your page. in this case the jquery code you are using does not have visibility of the content of the iframe and this is due to same origin policies.
The context of your page is different from the context of the page inside the iframe. here you can find information about this topic: http://javascript.info/tutorial/same-origin-security-policy

One way maybe to show a logo icon there as an overlay with z-index set to render above the toolbar.

I actually solved it 100% flawless, use a link like this but just replace it with your own google doc id: https://video.google.com/get_player?docid=0B67eSO00NnBBTzNjV2hDaW9DUHc&ps=docs&partnerid=30&cc_load_policy=1 (if it doesn't work, just post the link onto facebook first, then let it automatically make a preview, then just get the link from the source code of that preview!)

Related

How to prevent Iframe tags from showing?

It has come to my attention that if you turn off Javascript, on Google Chrome(at least), the text <iframe> and its attributes are visible when Javascript is turned off and leave an odd appearance on the page.
You can test this on sites that use it. For example. turn JS off to see
Is this a bug? Is it considered a type of script, and should it be wrapped with "noscript"?
I'm sure companies that use iframes are unaware, I've noticed it on some Google pages too, there must be someway to get around it.
i'm working with iframes but i'm not aware about this problem, but here is a hint if it helps.
You can start the page with iframe hidden:
<iframe style="display:none;"></iframe>
and once page load you can show them, then if javascript is enabled this line will run and will show them otherwise will kept hidden:
$("iframe").show(); //jQuery
document.getElementsByTagName('iframe').style.display = 'block'; //Pure Javascript

How to make a html page to show content from another url

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 open an iframe from clicking an image

I'm wondering if anyone can help me. I'm hoping I can open an iFrame in the centre of my webpage from clicking a picture. So in effect the iframe would be hidden until the picture is clicked. I have a very small and simple upload form on another page that I would like to appear when the user needs to upload and click the picture. I've had a good look round on this site and google in general but not found what I'm looking for, or the basics weren't included because it's common knowledge for most people here. Would there also be a way of closing this when it's finished uploading too? The form currently diverts to the homepage when finished so It would be handy to have a close option as in the end (post successful upload) the iframe contents will be the same as the page it's displayed on.
The best/easiest I have come across has been on w3schools but I have read using html for iFrames is not widely accepted or it isn't the best option cross-browser.
I have been viewing and trying different code but without even the basic knowledge I can't get my head around it.
If anyone is able to help, please assume I'm 5 years old. I'm not daft but in terms of code I'm literally just starting.
Thanks in advance
You would need to add a javascript onclick function to your img tag which would open a new window upon a click. You would pass the window.open function the name of the html file you want to display. Something like this:
<img src="image.jpg" onclick="window.open('welcome.html')">

Is it possible to make a link from my website go to the middle of the page on an outside website?

I am attempting to link from my website to an outside website but the information that relates to the user is in the middle of the outside page. Can I make the link take them to there?
Thank you in advance
If that outside page has an anchor tag in or near the content you wish to link to, yes.
<a name="releventContent">
If the above code (or something like it) is present in the outside page, you can link to it from your site like so:
clicky
I can suggest you a dirty trick that might work or not too. Steps
Open the new link in an IFrame.
Create a javascript function that will accept the string to search as parameter.
On the bodyload call that function that will search for the text in the source file.
Some SO links
Filling an IFRAME with dynamic content from JavaScript
Read IFrame content using JavaScript

Make a web toolbar load on any webpage

I've created a toolbar in html that I need to be able to load of any given webpage; I'm thinking of loading it on the page through the use of a bookmarklet but I can't quite get my head around how I go about doing it.
An example of what a need to happen is as follows.
I navigate to any webpage on the internet, I click the bookmark for my toolbar and it appears at the bottom of the page without affecting any of the content on the page, it will stay fixed even when scrolling.
I've added a picture of how the toolbar will look, any suggestions on how I can implement the required functionality?
http://d.pr/bVeM
Many Thanks
What you will need to do is use CSS to keep it at the bottom. Basically you stick your toolbar html code in a <div> tag and then use CSS to keep it at the bottom. Try reading this link or this link on how to do it
Create a script file that you can host somewhere (if it's just for you, you can use localhost). In that script build the toolbar. Your bookmarklet will look something like this:
javascript: document.body.appendChild(document.createElement("script"))
.src = "http://myserver/myscript.js"; void 0;
It wraps here for readability. It won't wrap in your bookmarklet.
The javascript: tells the browser you are executing a script. The void 0 at the end prevents the page from navigating to the return value of the JavaScript.