Is there a Javascript component that allows me to simply pass it a string made up of arbitrary HTML (any HTML I wish to use) and will show that HTML in a lightbox?
I've been scouring the internet, searching for examples, but it seems like there simply isn't any component capable of doing this.
Even LightWindow, which claims to be all-purpose, still requires me to attach it to an tag with the href set to an element ID.
This isn't what I want. I want to be able to call a function and pass in the HTML myself.
(Another issue with LightWindow is that it requires scriptaculous as a dependency. The project already uses jQuery, and I'd rather not include two frameworks at once.)
Any ideas?
colorbox is great. It relies on JQuery.
To use it with an html string, you would call it like this:
$.colorbox({html:'<p>Hello</p>'});
You can use jqModal or jQuery UI dialog.
SLaks is correct. You should definitly use JQuery UI dialog. Here is an example of using the JQuery dialog as a modal, very similar to using lightbox.
$("#dialog-message").dialog({modal: true});
Related
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
I got a wordpress page where users can add posts from the front_end. For this i use the WP_editor() function.
When I was trying the functions just plain in a new wordpress page I could just use
tinyMCE.activeEditor.getContent();
But now I'm setting everything up as the final product should look like, this means the editor is loaded in a modalbox (using fancybox plugin), and it initalizes fine, and it works. But I can't fetch the content the same way, it just returns me with the following error:
Uncaught ReferenceError: tinyMCE is not defined
I assume this has something to do with the modal box loading the page in an iFrame, meaning the editor isn't there when the javascript code is running. How do I solve this? Can I bind it to something like .live() ?
Seems like such an easy problem, guess I'm just to tired to be thinking clearly today.
Best Regards.
On the Front-End try to use wp_enqueue_script('tiny_mce') before.
In the WordPress version I use the JavaScript object tinymce and not tinyMCE. Try using tinymce.
As I know that in JQuery Mobile, every page changing is equivalent to create new "page" div, Can we just change a portion in the "content" of the page, something like subpage?
jQuery Mobile doesn't require you to manage pages by creating additional div element in the same HTML file - you can do it perfectly fine in a different HTML file and make a transition to it (perhaps with data-prefetch attribute set) using <a>.
Nothing prevents you from writing a jQuery plug-in, jQuery UI plug-in or (scary though, I know) pure JavaScript that will alter the contents of the DOM element dynamically and manage pages loading according to data received from server - with necessary calls to things of the listview('refresh') ilk - to ensure proper styling.
With that said you have to ask yourself two things:
Why do you need to do it? Can't you manage by pre-creating the page using jQuery Mobile paradigm and just retrieving and inserting the data into the new page?
What will the performance implication (if any) will be, if I have to perform DOM manipulations on every 'page transition'?
As a side note - jQuery Mobile provides you with methods that allow for page manipulation:
$.mobile.changePage and $.mobile.loadPage that you can use (look at pageContainer option).
See API docs here
I am trying to use right now a jQueryMobile plugin for subpages: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
I didn't make it work yet but i think it should work :).
So i'm trying out MVC after only playing with it some time ago.
Need to find the best way to selectively show and hide sections (divs, etc) on clicking or changing a value of a control, but not having to post back, i.e. javascript?
Any suggestions.
Use jQuery. You can use a jQuery Event to detect a click and then hide or show divs.
So, You have a button called "HideDiv" and "DivToHide" is the div you wish to hide.
$("#HideDiv").click(function() {
$("#divToHide").hide();
};
It's that easy. Can't really go in-depth here but check out their tutorials: http://docs.jquery.com/Tutorials or browse this site: http://www.learningjquery.com/category/levels/beginner
jQuery actually comes with ASP.Net MVC, check the scripts folder of a new MVC project and you'll see it in there. This site using jQuery and MVC :) So your browsing a sample of what is possible with it
You can use jQuery. It is included with the standard MVC project template.
$("#myButtonId").click(function () {
$("#myDivId").toggle();
});
See more at the jQuery docs for toggle.
You can do the same way as you are doing it with normal ASP.NET application using JavaScript. I think JavaScript is best as its fast and works on client-side.
If you are having a specific requirement then please put the specific requirement here.
You can use jQuery or MooTools if you want some animation.
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.