Develop Reference

What event can I use to to target elements on close of fancybox (lightbox mod)?

So I have a website using the fancybox plug-in (http://fancybox.net/). I want the text inside of fancybox to be printable, so I wrote a function that sets everything but the elements in fancybox to have a display:none. Here's my function:
var everything = [];
var hideEreythang = function () {
var everything = document.querySelectorAll(':not(.fancybox-opened):not(body):not(html):not(#shervani)');
var i = 0;
while (everything) {
everything[i].style.display = "none";
i++;
}
}
Problem is, once you close fancybox everything is still set to display:none. Is there an event handler I can use that will be triggered by the close of fancybox (either by clicking the x button or clicking outside the box), so I can reset everything back to normal? I'm still pretty new at js; I know fancybox has something that does that (since it's how theirs works) so I went through their source but had no idea what to look for. It seems pretty complicated. Is there a way I could manage to do this?
Thanks a million.
By the way, I'm using an onClick to run this function (the same link they click to open the fancybox)
EDIT: I think I'm just going to have it load two stylesheets, once for when they click on fancybox and (the normal one) when they close fancybox. How (and where) do I put my onClose to get it to work?

In order to do something when fancybox was closed you can use onClosed event
onClosed: Will be called once FancyBox is closed
Sample
$("#tip5").fancybox({
'onClosed': function() {
// your logic
}
});

Bootstrap 3 Open Drop Down on page load with Javascript

I can't seem to open this dropdown menu on page load. Can anyone help?
Documentation on Bootrap 3 is here: http://getbootstrap.com/javascript/#dropdowns
I tried this but it doesn't seem to work
$('#myDropdown').dropdown()
Ultimately, I need to be able to open a drop down that is inside a collapsible menu. For example, I want to open the first down down menu after the user clicks on the menu button. but I can't get it to work.
http://jsfiddle.net/G4k4F/3
Edit: When the navbar is shown, use a timer to wait 1 millisecond before calling .dropdown('toggle'). Like this.
function OpenDropDown() {
$('.dropdown-menu').dropdown('toggle');
};
$('.collapse.navbar-collapse').on('show.bs.collapse', function () {
window.setTimeout(OpenDropDown, 1);
});

try this :
$(function () {
$('.dropdown-menu').dropdown('toggle');
});

Try this..
$(function () {
$('[data-toggle="dropdown"]').dropdown('toggle');
});
Or you can use the button id like:
$('#dLabel').dropdown('toggle');

opening jquery mobile popup on ajaxStart()

I want to show a revolving loader on ajaxStart. I've used a popup for this so that the background fades out and becomes inactive. That said, if there are other ways to achieve this (instead of using a popup), id be willing to try them out too.
The problem is, while the same function containing the AJAX call is executed on both page-load and a button click, the loader only shows up the first time - on page load. I put some console logs and verified that the ajaxStart and ajaxComplete do get triggered, but the pop-up fails to open when the AJAX call is made following the button click.
JavaScript :
$(document).ready(function(){
$( document ).ajaxStart(function() {
$("#loader").html("<img src='../images/ajax-loader.gif'/>").popup("open");
}).ajaxComplete(function() {
$("#loader").popup("close");
});
// do other stuff
loadData();
$("#button").click(function(){
loadData();
});
});
function loadData(){
//make an ajax call to fetch data
}
HTML:
<div data-role="popup" data-shadow="false" data-corners="false" class="loader1"
id="loader" data-overlay-theme="a" data-theme="none" data-dismissible="false" >
</div>
What could be the issue, or are there other solutions altogether to achieve the desired results?

First, the short answer: jQuery Mobile only supports one active popup at a time (for now). The documentation says:
Note: Chaining of popups not allowed
The framework does not currently
support chaining of popups so it's not possible to embed a link from
one popup to another popup. All links with a data-rel="popup" inside a
popup will not do anything at all.
I bumped against this issue a few times in the past and had to hack my way around it. The following code is the solution I'm currently using and works quite well so far (with jQuery Mobile 1.3.2):
$(document).on("mobileinit", function() {
$.widget("mobile.popup", $.mobile.popup, {
_trigger: function(type, event, data) {
return this._suspended ? undefined : this._super(type, event, data);
},
_openPrereqsComplete: function() {
this._super();
delete this._suspended;
},
open: function(options) {
var activePopup = $.mobile.popup.active;
if (activePopup) {
activePopup._suspended = true;
activePopup._close(true);
this.element.one("popupafterclose", function() {
activePopup.open();
});
}
this._super(options);
}
});
});
In a nutshell, that code extends the popup widget in-place to introduce a "suspended" state. All events are muted if a popup widget is in that state.
Then, the open() method is overloaded to detect if another popup is already active. If that's the case, it suspends and closes that popup (without performing any animation, so it is closed right away), then opens the new one and schedules the un-suspending and re-opening of the previous popup when the new one is closed.
Note that code binds to the mobileinit event, so it has to run after jQuery is included but before jQuery Mobile is included. Otherwise, it will be too late to extend the popup widgets that were instantiated during page initialization.

Making colorbox pop up on scroll down (inview)

sorry for the basic question, but I have a page I'm trying to build. It's using inview, which triggers Javascript events on reaching a certain div.
The particular event I want to trigger is a colorbox popup opening. I can see how you make the colorbox open on load, but as I'm a bit new to javascript, I've had difficulty making inview trigger it. I've tried searching, but didn't get anywhere.
I've put it on JSBin. Here's the link: http://jsbin.com/idizop/6/edit
Thanks very much in advance! :)

Maybe something like this:
$('p.inview').bind('inview', function (event, visible) {
if (visible)
{
$.colorbox(
{inline:true, href:"#inline_content"}
);
} else {
$(this).text('nothing');
}
});

jQuery Dialog not appearing when called

I am trying to get a modal loading dialog to pop up while I make an ajax call but it is not showing up in the onClick function. If I slow it down with firebug and step through the loading panel will show up. Is this just javascript running ahead of itself? Is there a better way to do this?
$(function(){
$("#loading_panel").dialog({
modal:true,
position:'center',
minHeight:40
});
$("a.view-in-frame").click(function(){
$("#loading_panel").dialog('open');
$("#tabs").hide();
var blog = $(document.createElement('div')).attr('id', 'blog').load(('blog_reader.php?blog='+this.href)), $("#loading_panel").dialog('close'));
$("#content_wrap").append(blog);
return false;
});
})

Just an idea, try setting the 'autoOpen' to false when creating the dialog:
$("#loading_panel").dialog({
modal:true,
position:'center',
minHeight:40,
autoOpen:false
});
At the moment you are telling the dialog to open when it is created. This should prevent that behaviour.

#ErsatzRyan
Have you tried set your javascript function to load after your document is ready?
Like this:
$(document).ready(function(){
//Your functions
});
And as #Nat Ryall said, you must set your autoOpen to false, otherwise your dialog won't open twice.
And another thing, try to call your $(".selector").dialog("open") after you done everything. You're telling your function to call your dialog before it has loaded it's content.