I noticed that the Buffer app for chrome does things a little differently with a floating div when the extension icon is clicked. How is this achieved?
I don't believe they do this in a new window since I am not seeing an addition window being spawned.
Basically what I need is a thickbox to be displayed when the icon is clicked.
Any insight on how this is done would be appreciated.
They're using an api from that background page, to listen to the click event for when the browser action button gets clicked.
Here's a link to that API page:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){})
});
createPopup.js
You're html will be in a string. I personally recommend writing this like this:
var widgetHtml =
'<div id="main"> '+
' <p>some stuff goes here</p>'+
'</div>';
Then as your html grows, you can do a column edit of the beginning quote and end '+
Ok, now what you'll want to do is put your html in an iframe, but without setting a src property. Like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = widgetHtml;
WHY? So your stuff doesn't take on styles from the rest of the page.
Um, and then you can do a translateX or transition left/right position to slide the element into the page.
Related
I am trying to make a Chrome extension, everything is going well, except that before the content of the popup is filled with javascript(XMLHttpRequest - asynchronous) I see a small blank popup that has not yet been filled.
That is,
Before this loads
I see this
In the code, I am simply using document.getElementById to fill up the HTML. So it looks like
HTML:
<body>
<div id="status"></div>
</body>
JS:
document.getElementById('status').innerHTML = 'content of the request';
I see where this is coming from, since the popup is originally blank it shows that little blank box before javascript(XMLHttpRequest) is done. But How can I make it wait until the request is complete?
You can't manually display the browser/page action popup. This feature will not be implemented : source.
The most simple solution is to add a loading wheel gif to the html of the popup. It will display the popup until the content is changed by your code when the request is complete.
Another solution is to display a popup (not a browser/page action popup) when the user click on the browser/page action. This way you can wait for the request to display your popup.
I am trying to make a Chrome extension such that to play songs from youtube. I have done this but I have a small problem. When I click the extension icon, a popup appears where I can search the song and play it, but when the popup disappears, the music stops playing. What can I do to make the music play in the background?
Here is the function that finds the song, and inserts iframe tag into my popup.html page
function showResponse(response) {
var responseString = response;
document.getElementById('response').innerHTML = responseString.items[0].id.videoId;
var videoId = responseString.items[0].id.videoId;
var iFrame = '<iframe width="300" height="300" src="https://www.youtube.com/embed/' + videoId + '"></iframe>';
document.getElementById('player').innerHTML = iFrame;
}
When the popup closes, the page that it contains is immediately and completely unloaded.
So your iframe is destroyed. And no, you can't keep the popup open.
An extension has one persistent page - the background page. You can try adding your iframe there - the sound should continue to play.
However, the page is invisible - you can't let the user control the player. Any user-accessible controls will need to be in the popup or some other UI.
On my page I want to disaply a Polymer Paper-Dialog so I wrote an own element that looks like this:
<polymer-element name="my-dialog" constructor="MyDialog" extends="paper-dialog" noscript>
<template>
<span>I'm a dialog!</span>
</template>
</polymer-element>
Now I tried to display the dialog with this JS code:
var dialog = new MyDialog();
dialog.toggle();
But the dialog does not show up. Any ideas why?
When you are creating a new Dialog in your javascript function, you aren't adding it to the DOM anywhere. So, when you call toggle on it, it tries to show/hide a dialog that hasn't been added to the page.
If you want this to work, you should be adding the markup for the dialog to your html, getting a reference to that element in javascript, and then calling toggle.
Something else you could consider doing is looking at the Core-Overlay polymer element. It handles a lot of the dialog functions for you, and even allows you to shade everything that isn't in the dialog itself.
I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840
Web browsers are good as thin clients for web applications.
But if the user has to enter some code (where tabs and formatting are important) in an edit box, inside a web browser, he navigates through the webpage controls every time he hits the "tab" key, instead of printing the "tab" character.
Are there any free web controls or is there any code to get the opposite behavior?
Google Docs does this perfectly.
Thanks.
Yahoo UI library has a rich text editor that handles tab characters properly.
EDIT: I suspect (because I haven't looked) that both the YUI editor and Google's editor accomplish this by adding a onKeyPress handler to the text container. When they detect a tab character they append a tab to the container and return false to cancel the normal tab action.
You can filter the keyDown event and catch the tab key:
<html>
<body>
<script type="text/javascript">
function keyFilter(e, field) {
var key = window.event ? e.keyCode : e.which;
if (key == 9) {
field.value += "\t";
return false;
}
return true;
}
</script>
<form>
<textarea onkeydown="return keyFilter(event, this);"></textarea>
</form>
</html>
EDIT: Note that it's of course more complicated than this. One needs to keep track on where in the text the tab key is pressed and insert the character accordingly.