Develop Reference

Copy/paste Lightbox script for third-party sites

I want to give my clients a few bits of copy/paste code so that a Lightbox shows on their site with an iframe showing a URL that I specify. This would be something similar to a support widget that comes up when you click on a button (ZenDesk, UserVoice, etc.).
I've been trying to write this on my own, but after attempting to include jQuery on page load plus the Lightbox CSS file, it's proven to be a little bit of a mess.
Could someone point me in the right direction as to how I can create an optimal bit of JS that can accomplish this? Perhaps a framework already exists so that I don't need to reinvent the wheel?

I found something reliable. Decided to use http://sandbox.scriptiny.com/tinybox2/

Where can I find simple and small Javascript lightbox plugins or tutorials?

Does anyone know of a plugin or tutorial for making a simple lightbox to display a simple HTML form?

Hmm the title says dialog, but the question says lightbox.
For a dialog, you can use jQuery Dialog.
For a lightbox, you can use FancyBox

I like Shadowbox. It's a jQuery plugin, so you have to be running jQuery; but it can display just about anything you want it to: HTML, videos, images, whatever. If you're moderately HTML/CSS savvy, it's easy to install, use, and style.
It also allows you to download versions...that do whatever you want it to. So if you only want it to display HTML, you're good. Just download that bit, et voila.

Google Chrome Extension

I have a few questions that need answering. I am trying to create a Google Chrome extension and I need every page to be monitored for a keyboard action. I have added a content script that runs on the page load and when you click the keyboard shortcut an alert is shown.
What I want to do is instead of an alert have something like fancybox, thickbox, etc... however all of those are jquery plugins which adds a dependency to my js file. I tried launching the plugin before my js file but it still does not work.
I run the content script from the manifest.json file with
"content_scripts": [
{
"matches":["http://*/*", "https://*/*"],
"run_at":"document_start",
"js":["jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
}
],
I cannot execute an HTML page where the js is located I have to use a js file.
so what I want to know is if either there is a way to include the plugin without physically adding it to my file or if there is a way to call the js file which then just executes an HTML file or if there is another way of creating a popup screen like fancybox that is already included in js.
Another question I have is if there was a way to embed HTML into an alert box (this is a backup if I cannot figure out the above question)
and finally does anyone know of an execution command for x-webkit-speech? I want the command to start recording and somehow some people have used some commands (none of which answer my question) so someone somewhere knows a little more about this function then me. I would really appreciate help with this I am really close to finishing my program and these are my last holdups with these questions answered I will be able to release my extension. Please help where you can I have researched and researched everywhere all different ways of trying these things and none have worked.
edit:
You were correct (JHurrah) including the jquery actually solved the problem I really appreciate that. simple yet successful I just assumed the jquery provided was enough but I guess everyone knows what happens when you assume especially when programming.
NewTang I have already looked at that website however I will relook at it and see if I missed anything thanks for the help
yeah see I don't have that I have link edit and flag I looked all over and did not see an add comment button at all... :[

since simplemodal is a plugin it depends on jquery, try including jquery in your manifest before the other scripts.
"js":["jquery-1.5.2.min.js", "jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]

I"m a little confused by your question, but I'll give it my best shot.
1) I think you're trying to ask: Can I use a content_script to inject HTML. The answer is yes, but only through Javascript. So, you could have something like:
//using jquery
$("body").append("Hi, I'm on the bottom of the page");
Your javascript would have to create or load the HTML that would get inserted into the page.
2) No, no HTML in an alert box. You're on the right track with using lightbox, thickbox, etc.
3) There's not many resources on x-webkit-speech, but maybe this can help you get going: http://nooshu.com/experimenting-with-webkit-form-speech-input

facebook auto-expanding like box

can anyone provide me any ideas about how to import a facebook like box, in my site. I would it to seem like the one in the folowing site "http://www.babyspace.gr/". Does any of the existing javascript frameworks afford such a functionality?
Thank you in advance

It is simple Facebook social plugin called Like Box and you can get it here: http://developers.facebook.com/plugins?footer=1
You can install it on any webpage quite easily - If you follow the instructions on the page linked above.
About the slider - It can be achieved quite easily with jQuery. Put the Like Box on some div and use jQuery animate to show it by click.

How to use jQuery in Firefox plugins?

I'm trying to create a Firefox plugin and I would like to use some jQuery functions. How to include needed jQuery libraries? Some way to include the libraries to the plugin itself?
I need to show a jQuery Dialog type window on various web sites when user clicks a link injected to the page.
Thank you for your answers!

In your overlay.xul file, just include it as if you were including any other Javascript file:
<script type="application/x-javascript" src="chrome://my-firefox-extension/content/path/to/jquery.js" />

I suggest using chrome dialogs instead of jQuery. I've written a similar extension, though I didn't use a jQuery, but dialog code written by myself. The problem is that when you inject your html dialog inside some random page, in many cases it will come distorted because of unpredictable clashes with the loaded site CSS. Even when using inline styles and all other tricks.
In the end, I've looked how Google notebook extension is implemented and used the same idea. It worked great.