My Problem in a subject. For Example: how can i dev my own Alert Pop-ups
I think, its possible with overlays, but i dont know how.
My suggestion would be to use a combination of javascript and CSS. The key to the pop-up will be using a z-index in the CSS that puts it in front of the rest of the page content.
The javascript would just be used to activate and deactivate this section. You could also set up some other CSS classes to darken the rest of the page content, and apply those classes in the same javascript function.
What about ol'good?
<script type="text/javascript">
alert("Hello, I'm a pop-up!");
</script>
Eventually, you could use jQuery UI Dialog module: http://jqueryui.com/demos/dialog/
Edit: I think you should also say if you are interested in JavaSctipt OR XUL based solution.
Edit 2:
If you want to use XUL, check out this links:
https://developer.mozilla.org/en/XUL_Overlays
https://developer.mozilla.org/en/Building_an_Extension
http://www.gmacker.com/web/content/tutorial/firefox/firefoxtutorial.htm
I found them very useful when I was working on my own extensions.
Truly, all you need is a:
<box id="myBox"> content here </box>
plus some logic to open it.
My suggestion would be to use BlockUI , its light-weight and very easy to use.
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
Is there any Lightbox-live or overlay library out there that only provides the "basic cross-browser centered popup with a dark background" without attempting to perform requests and display images?
I would like to populate the contents myself using my own JS code which is non-trivial and all of these libraries expecting a link with something displayable inside it are unusable for my simple yet unusual (it would appear) use case...
I've gone over maybe 15 Lightbox clones today and for the life of me couldn't find a simple way to just get the basic overlay functionality without the added fluff. Is anyone familiar with something like that ?
Look into Colorbox. Check the Inline Examples. It works well.
http://jacklmoore.com/colorbox/
Look here: http://jacklmoore.com/colorbox/example1/ under "Other Content types"
Try jQuery UI dialog!
jQuery Dialog in jQuery UI might be an option to consider.
You can customize the download of the library to give you only the dialog.
Just de-select everything from here and select "Dialog" only (it will select the minimum dependencies for you):
http://jqueryui.com/download
Is their any jQuery plug-in for auto complete that allows our own styling?
Every library i see comes with a built in cascading style sheet.
Yes and no.
At http://jqueryui.com/download you can select "no theme", but you will still get an .css that you need to use. That css is used in the javascript code to open, close and interact with the autocomplete menu and text.
It is pretty easy to alter the .css to make it look like you want it to. Try some small changes and reload the page to see what happens!
I don't have a perfect script for you, but you can download the Jquery-ui library with the "No Theme" option.
In fact, there is a minimalist default theme, but you can easily override it in order to build your own theme.
jQuery UI Does indeed allows user-based styling. You can simply change the css file as if you'd do from scratch. Heck, just write down the class names and create your own...
Is reddit's join popup that appears on the page hidden on the page or is it injected via ajax?
How do they do it? (general terms if someone out there knows, I will dig into the source myself but need some guru pointers).
For reddit, its a hidden element. You can use tools like Shadowbox or nyroModal to achieve this kind of effect (since you can adjust the animation)
Its not so much AJAX as it is javascript, and it is generally refered to as a Lightbox or a Dialog
It's there but hidden with CSS, and shown with Javascript. With jquery, you could achieve the similar effect by triggering:
$('#join_div').show();
Try to view the page with CSS disabled and you'll see it's at the bottom of the page. (Optionally, you could try viewing the source.)
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.