Make a web toolbar load on any webpage - html

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.

Related

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

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!)

how to put a floating toolbar at the top extension page action by URL

I'm developing an extension page action that works in certain urls, I want to put a bar at the top of the page to appear whenever the user accesses the specific site, how can I do this?
You can do this but it is up to your creativity.
You can make DOM manipulations from the 'content.js' and
style it with content.css. Create your bar with HTML and CSS. Append or prepend the HTML code to the page and add your 'content.css' to 'manifest.json'. It is very easy. You should read and watch the content in these URLs for your aim.
Content
Scripts
Fixed Header
Tutorial
(I'm sorry about my english...).
You can't create real bar with chrome extension. You need do it with content script.
The best way to do this is with iframes - one for your bar and one for the site.
var mySite = "http://www.example.com";
chrome.tabs.onCreated(function(tab) {
if (tab.url === mySite) {
chrome.tabs.executeScript(tab.id, {file:""});
}
});

Dropdown menu in external file

I made a drop down menu using HTML and CSS. Something like this: http://sneznipark-kg.si/
How can i put a menu in external file(so that i don't need to make changes to it on every page individually)?
I could use iframes, but the problem there is, that elements that "drop down", are only visible in iframe, not on the main page.
I found some solutions using PHP, but i cant use those, because contract with my server provider doesn't include databases (so i cant use PHP, right?).
I think you are looking for:
How to Make Website Navigations with PHP Includes:
http://www.youtube.com/watch?v=IMh2cGIX41g
Simple PHP/HTML navbar for a static website:
http://www.youtube.com/watch?v=v8PUIVn3NFE
As mentioned above, you should be able to use PHP.
If you're not opposed to jquery AND both files are on the same domain. You can use .load().
http://api.jquery.com/load/
You can use any container as a place holder. Like a div, then load the html page into the div. It will put the entire page into the div. So you probably just need to add the menu part, and not the entire html markup.

Automatically open external links with iframe?

I am working on a WordPress site that has a lot of authors. The stories often contain external links, and I am looking for a way that we can automatically have external links open with a small header that has a "Back to our site" link, along with a close button.
Ideally this would be done automatically, but we'd also like to be able to create links manually that open in this same sort of iframe with our header. How can I go about setting this up?
I suggest you build this via Javascript, so you could easily turn it off/on as needed and it will be kind of portable too and you can use it on other site as well.
steps to do:
Go through all the anchor links and if the href is external link, add attribute target blank, and change the href links
if(external_link){
a.target = '_blank';
a.href="http://example-ownsite.com/iframe_holder/?page=" + a.href;
}
Then take a look at my page on http://fedmich.com/works/odesk/
so you could provide a vertical scrollbar on the iframed page.
Im using a function called resizeIframe() there
Note: some sites dont want to be placed inside iframe and they will breakaway from the topframe.

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