Develop Reference

Jquery .offset to scroll to content after click, now it won't stop scrolling

My page is set up of a header image with a jquery accordion below with a bunch of items. In the header image I have click maps set up so that the user can click on a part of the header image and then view the content below. As of now, it works. However it won't stop working... I set up an anchor id within the accordion header like below...
<div class="accordionClass">
<h3><a id="accordionID"></a>Accordion Title</h3>
<div>
<p>accordion Content</p>
</div>
</div>
the jQuery that makes it all happen looks a bit like this...
$( "#mapAreaID" ).click(function() {
$( ".accordionClass" ).accordion({ active: 1, collapsible: true, heightStyle: "content", activate: function() {
$('html,body').animate({
scrollTop: $("#accordionID").offset().top},
'slow');
}, });
};
);
This seems to be working just fine for the functionality that I'm looking for, but it is one of those problems where you fix 1 issue, but cause another...
When you click the map up in the header, the appropriate accordion expands with the active index #, then after it opens the screen scrolls down to the anchor placed into the h3 tag. great! but now, if you scroll up/down and click another accordion item from the list. The page now keeps scrolling up/down to the offset anchor selected at the beginning. It keeps doing this over and over again.
What I would like it to do is animate to that spot, and just finish. I don't' want to remove the button up top just in case the user wants to 'jump' to that content again, but remove/stop that animation from reoccurring. Any thoughts would be greatly appreciated, thanks!
EDIT - Just noticed that if I create a seperate accordion with a different class name, it doesn't jump to the anchor. So this issue only happens when I click elements inside the same class of "accordionClass". I think I'm missing something small...

I have figured out the issue.
It may not be the cleanest solution, but I managed to find out what was causing it & it works.
the issue was that I was setting up an animation after the .accordionClass was "activated". By doing that It set the specific offset every time any item in that class was "activated". So...
What I did was keeping the animation code as is and incorporated a function that fires after the animation completes that "resets" the activate status of the accordion.
Here's the revision of the code...
$( "#mapAreaID" ).click(function() {
$( ".accordionClass" ).accordion({ active: 1, collapsible: true, heightStyle: "content", activate: function() {
$('html,body').animate({
scrollTop: $("#accordionID").offset().top},
'slow', killActivate);
}, });
};
);
function killActivate (){
$('html,body').finish();
$( ".accordionClass" ).accordion({
activate:
function() {
console.log("do nothing")
}
});
}

multiple dialog box within same page

Requirement is to show dialog box on click of a button.I have created dialog box using jQuery UI. Please find the code here http://jsfiddle.net/M4QM6/32/.
ISsue is i have single function for creating dialog box, how can i show multiple dialog box within same page with each dialog box displaying different data,
When i click on dialog2 button, i need to show a dialog box which has textArea and a submit button.Please suggest.
Below is the sample code:
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});

You could go a couple routes. Since your need for dialog content is pretty specific (textarea control - first dialog pops second dialog - etc), I would hard-code the needed divs on the page. So, make a "#textAreaDialog" div and put the needed controls in it ad set its style to display:none.
Next, modify your function to accept parameters (the name of the div that should be popped, the funciton to execute if "OK" is clicked - and the function to execute if "Cancel" is clicked), so you're not limited to using #dialog for all of your modals and you can finely control what happens when each button is clicked (not always just closing the dialog. Then, set event handlers for the click events of the buttons you need, and call your dialog accordingly.
html:
<input type="button" id="btnPopFirstModal" Value="Open First Modal"/>
<div id="divFirstModal" style="display:none;">
Here is the content for the first modal
</div>
<div id="divSecondModal" style="display:none;">
Here is the content for the second modal
</div>
Javascript functions:
function PopDialog(divToPop, OkFunction, CancelFunction)
{
$("#" + divToPop).dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Ok": function() {
OkFunction();
$(this).dialog("close");
},
"Cancel": function(){
CancelFunction();
$(this).dialog("close");
}
}
});
});
}
function PopSecondModal(){
PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
}
Javascript event handlers:
$("#btnPopFirstModal").click(function(e){
e.preventDefault();
PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
return false;
});
Remember, you can expand this as much as you want, adding more event handlers and custom divs to use for more tailored modals. Also, as you can see, you can write your OK and Cancel funcitons inline when calling the PopDialog function - or you can pass it a function name (this is preferable if you're going to reuse that function).

Here is how I did:
$(
//when JQuery is ready
funciton()
{
$('#SomeButton').on
(
'click',
function()
{
//Note that content could be anything (HTML, text...)
//This dynamicly create a div to be your dialog
$('<div>').append(content).dialog
(
{
//autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
resizable: true,
//I remove the double quotes here because height didn't have any but maybe it was the other way around
width:750,
height:300,
//I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
modal: false,
buttons:
{
Close: function()
{
$(this).dialog("close");
}
},
//this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
close:
function()
{
$(this).dialog('destroy').remove();
}
}
);
}
);
}
);

jQuery Dialog, hiding an element in the dialog upon close

I'm using the jQuery UI Dialog function and upon close, I would like to hide one of the elements which was in my dialog.
I'm attempting to do this within the close event of the Dialog function but it's not working. I am guessing because that element no longer exists at the time of close.
Here's the code.
// Dialog settings for our edit dialog's
$("#myDialog").dialog({
autoOpen: false,
close: function(event, ui){
$("#myDiv").hide();
}
});
<div id="myDialog">
<div id="myDiv">This div should hide when the user closes the dialog, but it stays open when I re-open the dialog.</div>
</div>

myDialog and everything inside it, including myDiv, should automatically be hidden when the dialog is closed. You don't need to write any additional code to make that happen. If isn't working, then something else is wrong. My guess based on the code sample in your question:
Hide myDialog by default, e.g., <div id="MyDialog" style="display:none;">...
Explicitly open the dialog when appropriate, e.g., $("#myDialog").dialog("open");

you probably just need to reference those elements relative to the dialog.
$("#myDialog").dialog().find('#myDiv').hide()
-edit-
close: function(event, ui){
$(this).find('#myDiv').hide()
}

Specify an image onclick listener within the JQuery Modal Dialog box

I'm working on an application where I'm opening a modal dialog box. The dialog box allows the users to add checkboxes like criteria to the modal dialog div being displayed. They enter the text for the checkbox into a textbox on the page, and click a button to append the checkbox. The checkbox shows up just fine. Next to each checkbox, I'm also adding a jquery ui-icon icon-close image class so that when the X next to the new entry is clicked, the entry is removed from the page.
The problem lies in the fact that simply having the script specified in the page doesn't work. The div doesn't appear to be a part of the page and defining an onclick listener for all images doesn't do what it's supposed. So my question is, how can I define an image onclick listener within the modal dialog. For example, in defining the modal dialog box, I can specify an on open function that does something whenever the dialog box is first opened. I want to, in similar fashion, define a function that is actively listening for whenever an image has been clicked within the modal dialog box.
Example:
$("<div class='rationale' style='position: relative;'><div class='rationaleContainer' style='display:block; height:155px; overflow-y: scroll;'></div><div class='rationaleText' style='position: absolute; bottom: 0; float: right;'><input type='text' placeholder='Add rationale' id='rationaleBox' style='width: 540px;' maxlength='180'></div></div>").dialog({
height: 300,
width: 600,
modal: true,
closeOnEscape: false,
resizable: false,
title: "Comments for " + item,
open: function(event, ui){
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog-title").after("<i style='font-size: 12px; float: right;'>("+value+")</i>");
$(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css("float", "none");
},
Similar to the open function being defined, I want to create a listener for image clicks

To define a global handler which listens when a element is clicked, use the on function on jQuery 1.7 or above. For example:
$(document).ready(function() {
$('.ui-dialog .icon-close').on('click', function() {
// an element of *.icon-close* within *.ui-dialog*
// had been clicked
$('ui-dialog').hide();
});
});
If you are using a version of jQuery prior to 1.7, then use delegate instead of on like this:
$(document).ready(function() {
$('.ui-dialog .icon-close').delegate('', 'click', function() {
// an element of *.icon-close* within *.ui-dialog*
// had been clicked
$('ui-dialog').hide();
});
});

How to make jquery-ui-dialog not have a close button?

I didn't find this in the documentation.
Should I just make the close button display:none with css, or is there a clean way in the API to make a dialog without the X button (top-right)?

This may solve your Problem:
$("#dialogId").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }
});

There is no option to disable the 'X' button. You would need to add css to display none/hide() the element with the class 'ui-icon-closethick' when it is loaded and opened.

For some reason .hide() did not work for me. This did:
$('#divMsg').dialog({ title: 'Please wait...',
modal: true,
closeOnEscape: false,
open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).css('display', 'none'); } }).text('Text To Display').css('background', 'white');
This code snippet also shows how to set the title and text of the dialog box -- I am using it as a modal notification window and closing it when my AJAX call completes.