Develop Reference

jQuery Plugin for Inline Balloon Popup Editor

(I don't quite know what to call this kind of control, so if someone can tell me what the name is, I'll edit the question for clarity.)
I'm looking for a jQuery control that will let me make a little pop-up editor that looks like a balloon coming out from a point in the form. In my use case, I'm tight on space and I want to let the user pick a couple of date ranges.
Something like this in the iCloud Calendar new event pop-up:

I ended up using qTip2 for jQuery:
http://qtip2.com/
But to get it to put a who div in there, I had to customize the JS a bit:
events: {
show: function(event, api) {
$("#tooltipContainer").html("");
$("#btnSelectDatesPopup").detach().appendTo("#tooltipContainer");
$("#btnSelectDatesPopup").show();
},
hide: function(event, api) {
$("#btnSelectDatesPopup").hide();
$("#btnSelectDatesPopup").detach().appendTo("#originalSelectDatesPopupContainer");
$("#tooltipContainer").html("<p>...</p>");
}
}
And on the form submit, close the tooltip if it's not closed already, and put it back into the DOM where it belongs:
// On form submit, trigger the tooltip hide to preserve user-chosen values
$("#aspnetForm").submit("submit", function(event) {
qtipApi.hide();
setTimeout(function(){}, 300);
});

Tab index get increased in Jquery UI tab

I am using Jquery UI tab plugin.
Here is my DEMO
In my code I use
var tabControl = $("#tabs");
tabControl.tabs();
tabControl.tabs({ heightStyle: "auto",
beforeLoad: function (event, ui) {
},
load: function (event, ui) {
alert(ui.panel.selector);
if (ui.panel.selector == "#ui-tabs-1") {
m1();
} else if (ui.panel.selector == "#ui-tabs-2") {
m2();
}
}
});
When I moved to page 1st time it displays ui-tabs-1 correctly on pop up. But when I moved to some other page and come back and select the tab it shows an increased index (ui-tabs-4) and my desired method is not called. I don't know why my tab index gets increased. Your help is really appreciated.
Edit 1:
Thanks Rahul for creating the Demo. This code is part of a web application. This is related to one single page. In other pages also there are tabs. When I first load the page alert(ui.panel.selector) shows as "#ui-tabs-1" and when I go to other pages and come back it shows increased id such as #ui-tabs-4". I found that in the source code (jquery.ui.tabs.js) I found following implementation.
var tabId = 0,
rhash = /#.*$/;
function getNextTabId() {
return ++tabId;
}
Seems like tabId is increased and not being reset # . I want to reset that # every page load. Thank you very much for concerns.
Edit 2:
I have created a demo. when tabs clicked u get #ui-id-3 and #ui-id-5. In my scenario when I go back and come to the same page it displays as some increased number like #ui-id-7 for which it displayed #ui-id-3 previously.
Thank You!

Is there any way to acquire focus on a div popup?

From searching the internet and StackOF, I see that my question has been asked before or at least some variation of it; but I cannot identify any real solutions.
I have acquired some code that utilizes div tags to produce a modal popup window. While this seems to work adequately aesthetically, there is a small problem of acquiring and retaining focus on the popup that would allow the user to use the tab key to navigate to screen.
function PopUp() {
$('#<%= divPopUp.ClientID%>').modal(
{
overlayCss: {
backgroundColor: '#000'
},
onShow: function (d) { d.container.css({ position: 'absolute', top: '10px' }); }
});
window.location.hash = 'SubmitButton';
}
The div tag refers to a table element that contains some labels and a couple of asp LinkButtons. The function is called from the Server-side using the ScriptManager component to Register and display the popup.
So far I've tried to set the focus from the Server side code and also made a few attempts based on others suggestions from the Client side but nothing gives.
Is there anyone here who has struggled with this or a very similar issue that wouldn't mind sharing a solution? Or is this expected behavior under the circumstances that can only be circumvented via alternative methods?
I've included VB.Net as a tag on this post because that's the Server code language.
Thanks

JS
Inside the modal open or complete function , add this line
function PopUp() {
$('#<%= divPopUp.ClientID%>').modal(
{
focus:true,
overlayCss: {
backgroundColor: '#000'
},
.....//All other stuff
});
}
OR
Use this in onshow function
$('#<%= divPopUp.ClientID%>').focus();

jwPlayer not working properly in IE 8

I want jwPlayer to play for 2 sec. and then pause.
I implement this functionality but its not working properly in IE 8.
Its working in mozilla and chrome.
Anybody suggest me how to do it?
JAVASCRIPT :
$(document).ready(function(){
jwplayer('GridMessageBoard__ctl3_dvMsgContent').setup({
var jwplayerid = this.id;
flashplayer: 'mediaplayer/player1.swf',
file: 'http://www.youtube.com/watch?v=HOfdboHvshg',
width: 400,
height: 300
});
jwplayer(jwplayerid).play();
window.setTimeout("PausejwPlayer('"+jwplayerid+"')",1500);
});
function PausejwPlayer(objID)
{
jwplayer(objID).pause(true);
}
HTML :
<div id="GridMessageBoard__ctl3_dvMsgContent" style="display:block;width:100%;"></div>
Thanks

Add this to your configuration in setup (and remove your other call to window.setTimeout):
events: {
onPlay: function(){
window.setTimeout(function(){
jplayer(jwplayerid).pause(true);
}, 2000);
}
}
I'm guessing that it was just a timing issue, where the player was maybe still starting or buffering, etc. - and the whole 1.5 or 2 seconds had elapsed before the player ever had a chance to play. This will start the timer only after the player has actually started playing.
(I don't see where jplayerid is being set, so I'm assuming you have it defined elsewhere and above your current code.)
If this doesn't work by itself, add some debugging lines within the function call I provided here to see if the setTimeout is getting called, and that you still have a valid player ID, etc.

i had the same problem
primary: "flash",
this code will solve your problem :)

grumble.js, jQuery plugin (Bubble popups): how to make it not polute my document body with unremovable trash?

I want to show a popup many on click. I want that many to be in a bubble. So I created a demo: here. But that Bubble generator plugin i use tends to keep tons of trash in the DOM each time it shows a popup. Well so I tried to destroy trash via
$('.grumble-text').remove();
$('.grumble').remove();
$('.grumble-button').remove();
But it somehow brakes it at all=( So how to change grumble-bubble popup plugin code to make it either keep DOM clean or at least make plugin independent of trash it creates?

I've recently updated the plugin to provide better control of positioning and angle. The update also persists the grumble, invoking the plugin more than once on an element will not create extra left over DOM.
Try updating to the latest code. The code below should now work as you expect.
var html = ''
+'Download me'
+'<br/>'
+'Edit me'
+'<br/>'
+'Delete me';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
$grumble.grumble({
text: html ,
angle: (Math.random() * 360 + 150),
distance: 30,
hideOnClick: true,
onShow: function() {
$grumble.addClass("hilight");
},
onBeginHide: function() {
$grumble.removeClass("hilight");
}
});
}).mousedown(function() {
$grumble.addClass("hilight");
});
Thanks for your interest. If there are any further problems please raise them as bugs on the github page. https://github.com/jamescryer/grumble.js

Use the grumble and button parameters on the onHide callback like this:
$('#grumble').grumble({
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
onHide: function(grumble, button) {
grumble.bubble.remove();
grumble.text.remove();
button && button.remove();
}
});
This allows you to remove only the "trash" (I prefer "leftovers") associated with that specific tooltip/popup/bubble. Note that button only exists if hasHideButton is true, hence the button && existence check.

Why do you want to remove it? Is the 'trash' causing problems with browser performance?
In general, the only way to do this is to dig into the plugin source and add a function to remove the plugin, if one is not already present. If you just remove the related DOM elements you will leave behind references to them and events handlers that access them.