We Keep Coding

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.

If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Save a page before leaving

I have made a basic HTML file by using HTML, CSS and javascript. Based on the user's input and specific actions, I've run methods to create elements(which alter the page). And when the user wishes to go to another page via the link in the page, I want to save the changes that are made in the page.
Note: I am using Google Chrome on Windows XP
And the method execcommand() does not work on Chrome
Any help is appreciated
Thanks in advance

Then you can do two things,
first:
Detect when the user changes the page, at that time script for coping the page like:
var your_var = $(document).html();
$(document).load("new-page.html");
and then navigate a back button detection, when the user comes back to the first page just place your_var like:
$(document).html(your_var);
This is only applicable when your page navigation is done using only jQuery/ Ajax.
Second:
If you want to save state with server side scripting as well then use
javaScript.history();
this will give you the same page you left before with state.

How to trigger a click event of a button with javascript on an arbitrary site

I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?

If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.

javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.

repeated google maps script tag

I have developed a simple application with Google maps (API 3). This application loads a store's menu dynamically, so if the user click's a store item, the map shows the specific location of the store.
For that I have applied "Asynchronously Loading" from the Developer's guide, it works perfectly, but I'am concern that every time the user click a store item (with out reloading the page), a script tag in the body is inserted.
Is it possible to have further problems because of that, performance , anything ?

Google Website Translator - Waiting for translation to finish before displaying page

I'm trying to add localization to my site with minimal effort by using Google Website Translator. There's one really annoying snag I've run into though: Every time I try to load a (translated) page, it's displayed briefly in English before Google's javascript does its thing and it toggles to a new language.
I've tried setting "display: none" on my entire HTML body until Google's code finishes running, but I couldn't see anywhere convenient to put the javascript to toggle the display back to normal once the translation code is done without modifying the javascript file that Google loads from Google.
Is there a better solution?

Try Site Translator - http://www.deskshare.com/translation-software.aspx. The full content of your pages is directly on your website so you don't have to worry about the online service being slow or flashing the English text first.