Develop Reference

Targeting instances of JQuery UI Accordion without knowing what they are

I have a site that uses jquery UI accordions on different pages. The script for these accordions is on the page in each case.
We're looking into daily site prints for all pages so we need those accordions to be fully expanded when we do the site print (we'll be doing this by detecting the site printer's userAgent string because they can issue a custom one).
The site printer can halt execution of javascript on a page to keep content fully expanded but we also use AJAX scripts so that would prevent content from loading.
So we need a script that targets any jquery accordions on a page and makes them fully expand. We have a custom.js file that is present on all pages so we could place a command there.
My question is, is it possible to target all instances of accordion objects without already knowing what they are? I'm looking at the possibility of putting a script in the custom.js file rather than having to rewrite all the JQuery accordion calls page by page (and trying to get everybody that adds stuff to the site to also remember to write a conditional userAgent based expand everytime they use an accordion).

Without seeing your code or knowing anything about your current HTML, you can try something like this:
$(".ui-widget.ui-accordion").each(function(index, elem){
// Code that you want to execute on each Accordion
// For example, we could disable each one:
$(elem).accordion("disable");
});
I don't see a method to expand all panels at once. Likely, you would have to activate each panel.
Found this: jQuery UI Accordion Expand/Collapse All
It advises using the theming to make the accordion look correct, and then roll your own ability to expand all.

Bypassing The pop-up blocker for window.open() in javascript

I have a text file with some lines containing some key words. My exercise is to extract info from that file and create a html document inserting the liens in the text file with appropriate tags.
for example:
This is the text file:
This should be in a html tag with START as class name
THIS SHOULD BE IN A HTML TAG WITH CAPITALS AS CLASS NAME
This should be in a HTML tag with CODE as class name
Now writing a javascript program to insert those lines into HTML is very easy. I just used some string handling like this:
if(contents[i].indexOf(" CODE")!=-1){
w.document.write("<p class='code'>"+lines+"</p>");
}
I am writing all these into a new window.open object. The main problem is that pop-up blockers do not allow this functionality. So, is there any other way I can do this? I can't generate the html file physically, I need to generate it on the fly, so window.open is the only method I could think of. Are there any other ways I can accompolish this?
(I can bypass the pop up blocker by just using
w=window.open("somefile.html")
w.document.opne("somefile.html")
where somefile.html is any file. But I do not want to do it, it hardly seems a clean way.)
More over, For me to access the file, I have to host it on a server (I am currently using http-server offered by node for this) Is there any other alternative to this?
I do not want to use Jquery, I wish to accomplish all of this with vanilla javascript. But if there is a possibility of doing this with Jquery, please let me know.
Thank you very much :)

On principle, pop-up windows are blocked by all modern browsers. They'll ask you if you want to allow them, but otherwise they'll not allow them.
If it has to be another document, perhaps an iframe could be useful?
Here's a bunch of extra solutions:
Have a fake pop-up. Just a div with all the data which floats above your regular content. You can add an 'x' button to it for closing it and implement some drag-and-drop functionality. The visual effect is much the same, but the user can't treat it as an OS-level window.
Try to somehow integrate the content into the regular page. Either an iframe or just regular content. Modern design has passed the stage of needing pop-ups and other content outside of a single plane. Furthermore, on mobile it's unclear how pop-ups would work.
Open the content in a new tab. This is basically just using an <a> tag. You can put the content you wish to have in the fragment for the link, and the page you open can decode the fragment and show the info you want. Might not work with huge content.
Have a better flow for allowing pop-ups. Inform the user that your site needs pop-ups and make them disable it. One good way is to provide some button which triggers a pop-up, which will be blocked. Then inform them to tell the browser to allow the pop-up since most of them will show something about how the pop-up was blocked. Then you can show your regular pop-up without the risk of the user missing out on the data.

Best way to display various information in bootstrap or other jquery dialog box

I have 4 images, each image has its own information and images. Not a lot, but I need it to be displayed in a pop up box. I have decided to use Bootstrap as it's responsive and quite reliable for these thing.
My question is is there any way around copy and pasting the same information, for instance, I have 10 lines of the same code just to show the modal box i.e.
$("#smiley").click(function () {
$('#myModal').modal('show');
});
and 200 of information etc.
Here's example http://jsfiddle.net/jjehfiuehf/0ck8y5jx/
You click image and the modal box appears.
The dialog box doesn't seem to appear for some reason
Is it ok to have a full html page full of information or is there a way to condense it somehow??

Dialog box does not appear because of Jquery version you should use 2.1.3 on left side you have on jfiddle Frameworks & Extensions, framework can be changed.
2.it is OK to have all information in html, and if you do not want all information in html, you should use server side scripting, PHP or else.

You could use one modal and load the information dynamically from a PHP script using AJAX.
Put all of your images, 200 (whatever) of information, etc. into a PHP script - perhaps in an array.
In your HTML, include an ID or data-attribute that corresponds with the key in the array. Each one is unique.
Create a jQuery script that parses the ID or data-attribute, and then calls the PHP script via jQuery's .get() method, which then loads the content into the modal body and displays it.
You could also store all of these as separate HTML documents instead of putting them into PHP, and load each file accordingly...
Also, there's Varying modal content based on trigger button - which may be more inline to what you need
From the Bootstrap docs:
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

What is alternatives to use popup to avoid Firefox4 popup maximum count?

I used to use Firefox3.6 but with Firefox4.0 when certain amount of popoup windows are generated, following message will appear.
Prevent this page from creating additional dialogs
According to my research, about:config page has dom.popup_maximum variable to adjust max popup limit but I cannot ask my end users to change their browser setting just because of my app.
I searched alternative coding to popup.
Many of them defines div and hide/show them with CSS using jQuery.
But I have 10 HTML pages with button that popup same page.
window.open("http://www.sample.com","samplePage");
I do not want to pre-define the contents of samplePage in every 10 pages for this reason.
Is there any alternative to popup which I do not have to pre-define in every page?

You can still do the css trick, but put an iframe in the div.
Click button then does the following:
1. Set iframe src attribute
2. Show hidden div

You can load that sample page dynamically. You either may use frames (especially <iframe>s in here) or any type of ayax, which means receiving data from the server (html, xml, json, whatever) and then showing the data in a <div>. You don't need jQuery for that.

How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.
I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...
Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?

Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
The bookmarklet itself reads as follows:
javascript:void((function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());
document.body.appendChild(e)
})())
This just injects a new script into the document that includes this file:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.

At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.

You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
So the bookmarklet would look like:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
The ability to add an element to the DOM
The ability to update innerHTML of that element to be the markup you want to display for the user
Handling for the AJAX form processing
The window effect can be achieved with CSS positioning.
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.