We Keep Coding

How to use jQuery fadeIn with element created using .after?

I am new to jQuery and am trying to gracefully submit a form using AJAX rather than the traditional post method. So far I do the following to hide the form and prevent it from submitting:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').hide();
$('#contact_me').after( '<p class="submission_text">Thank you for contacting me. I will contact you shortly.</p>' );
} );
});
});
However, ideally, I would like the p.submission_text to fade in after the form has been hidden. However, if I append the following after the call to .after, the text does not fade in, it just appears:
$('.submission_text').fadeIn( 600 );
How can I get the behaviour I want?

.submission_text needs to be hidden in the first place in order to fade in. Try this:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
var $p = $('<p class="submission_text" style="display:none">Thank you for contacting me. I will contact you shortly.</p>');
$('#contact_me').hide();
$('#contact_me').after( $p );
$p.fadeIn( 600 );
} );
});
});

Because you are appending p tag with class 'submission_text' dynamically using jquery so,use event delegation as shown :
$(document).on('click','input#submit',function(){
$('.submission_text').fadeIn( 600 );
});

Add the p.submission element as a hidden element initially with .hide() as follows:
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').after( '<p class="submission_text">TEXT</p>')
.hide()
.fadeIn(600);
} );
});

How can I edit this Javascript without blocking functionality?

So I inherited some code that I am trying to customize and I've hit a roadblock. I believe this little piece of code is the issue:
jQuery(function($){
var photos = [
'cover/001_final.jpg',
'cover/002_final.jpg',
'cover/003_final.jpg',
'cover/004_final.jpg',
'cover/006_final.jpg',
'cover/007_final.jpg',
'cover/008_final.jpg',
'cover/009_final.jpg',
'cover/044_final.jpg',
'cover/085_final.jpg',
'cover/123_final.jpg' ]
$.backstretch(photos[Math.floor(Math.random() * photos.length)]);
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});
$('.nav-link a')
.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); })
.click(function(){
$(this).removeClass('hover');
});
});
If I understand correctly, this script is randomly loading the backgrounds and then stretching the images and then loading the menu...
..I would like to use the menu feature on another page that does not require a stretched background, how can I remove the dependency on the background loading/stretching and just load the menu?
Thanks in advance.

Try using :
$(function () {
$('body').addClass('load');
});
Instead of :
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});

Creating Jquery sliding menu

Want to create jquery menu like on this website slide from left and when click on icon restores to its orignal position.
http://wittlingerorthodontics.com/default2.asp
only able to achieve this on jsFiddle
http://jsfiddle.net/messi1987/tfASa/
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";
// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
whereas i want to make it slide in and on click to button/image slides back to orignal positon. New to jquery so do'nt get the helping content any where. Help me out to do this.
for complete understanding check the referenced website.

try this fiddle , i think this is what u want
$(function() {
$('#button').click(function(){
$(".ul_menu").toggleClass('show');
if( $(".ul_menu").hasClass('show')){
$(".ul_menu").show("slide",{direction: 'left'});
}else{
$(".ul_menu").hide("slide",{direction: 'left'});
}
});
$('#button').mouseleave(function(){
if($(".ul_menu").hasClass('show')){
$(".ul_menu").hide("slide",{direction: 'left'});
}
})
});

jQuery Datatable javascript on links not working with multiple pages

I am having an issue with jQuery's Datatable plugin... I have filled a table, and a specific column has cells looking like this:
12
I have prevented the onclick event and it triggers this code:
$( 'a[name="PO"]' ).click(function(){
event.preventDefault();
var POid = $( this ).attr('href');
var element = $( this );
$( '<div id="Dialog">\
<p class="error"></p>\
<p style="text-align:center;" class="main">Entrez le P.O. associé à la commande</p>\
<input type="text" class="POprompt"/>\
</div>').dialog({
resizable: false,
height: 'auto',
width:'400',
modal: true,
title: 'Ajout d\'un PO',
show: 'blind',
hide: 'drop',
buttons:{
"Sauvegarder":function() {
$('.error').css('color','FF0000');
var prompt = $('.POprompt').val();
if (!isNaN(parseInt(prompt)))
{
$.post('setPO.php',{'PO':prompt,'id':POid},function(data)
{
element.text( prompt );
$('.main').css('color','#0F0');
$('.POprompt').css('visible','false');
$('.main').text("L\'ajout a été effectué avec succès.")
$( this ).dialog( "close" );
$('.error').text("");
$('.error').css('color','#FFF');
});
}
else
{
var error = $('.error');
error.text("Veuillez entrer des chiffres seulement.");
error.addClass( "ui-state-highlight" );
setTimeout(function() {
error.removeClass( "ui-state-highlight", 1500 );
}, 1000 );
}
$('.error').css('color','FF0000');
},
"Annuler":function()
{
$( this ).dialog( "close" );
}
}
} );
});
But when I go on page 2 or 3, or when I sort results and click on that cell link but that the row was generated in another page than the first one, the javascript does not trigger.
Anyone has an idea? Thanks a lot in advance guys, and have a nice day.

I realize that this question has been answered, however, it's incomplete and with all due respect possibly wrong. The issue with the mutipage datatable is that the initial selector is rendered useless with the user clicks on ANY of the pages other than the default first page. This is because dataTable does some horrible things to the DOM in order to render the table. This has the side effect of disabling your click handler.
The good news is that there is a way to handle this other than listing ALL elements.
instead of...
$( 'a[name="PO"]' ).click(function(){
try this:
$( "#dataTable tbody" ).on('click', 'a[name="PO"]', function(){
Read this jquery page ( on() ) and look for the section on deferred selectors.

Because when the javascript insert element to document it doesn't have onclick. jQuery will not add onclick to them, automatically.
Solution: Call this script every time data loaded (when user changes page or sorts table).

I finally got everything to work fine by adding this:
"bLengthChange": true,
to my datatable declaration.
I also modified the <select> options, adding a "show all" option which loads all the rows by default, but only shows 5 rows on pageload since I set "iDisplayLength": 5.
Here is how to add a "show all" value to your length select input (sum):
$(document).ready(function(){
$('table').dataTable({
"bLengthChange":true,
"bFilter":true,
"iDisplayLength": 5,
"sDom":'<"H"lfr>t<"F"ip>',
"oLanguage":{
"sUrl": "dataTables.txt"
}
});
});
The text file contains all your translations (if you need them) and your custom SELECT:
{
"sProcessing": "Processing...",
"sLengthMenu": "Show <select><option value=-1>INFINITE</option></select> results"
}
Note: of course I added other options to my select AND datatable declaration, it is just easier to read this way. The value=-1 part is how to get javascript to load on ALL rows/cells.
Thanks to the guys who tried helping me out, both of your answers were useful to me!

JQuery UI: Disable accordion tab?

I have a JQuery UI accordion that contains different parts of the user workflow. I would like to disable accordion "tabs" that the user hasn't reached yet. (So if the user hasn't signed in yet, he can't yet publish content, etc.) Then, as the user completes the necessary steps, more tabs will become enabled.
Is there a way to do this? This doesn't work, even as a way to prevent any tabs from changing:
$("#accordion").accordion({
changestart: function(event, ui) {
return false;
}
});

You should add/remove the class "ui-state-disabled" to each header element (i.e. "<h3>") you want to disable/enable. Then use:
$( "#accordion" ).on( "accordionbeforeactivate", function (){
return ! arguments[1].newHeader.hasClass( "ui-state-disabled" );
})
To add/remove a class dyanamically, use:
$( "selector" ).addClass( "ui-state-disabled" );
$( "selector" ).removeClass( "ui-state-disabled" );
You can add a meaningul "id" attribute to each header element to simplify the "selector" part. For example, "step-1", "step-2", "step-n" for each step the user should traverse along the workflow.
You can try the following if you are positive about the position the tab to be disable has:
// Disable the first tab
$( "#accordion > h3:first-child" ).addClass( "ui-state-disabled" );
// Make sure the fourth tab is enabled
$( $( "#accordion > h3" )[3] ).removeClass( "ui-state-disabled" );
Also note that using "ui-state-disabled" is actually meaningful because it will render the header grayed (or whatever your theme makes disabled things look like).
Another note, if the tab you are dynamically disabling is currently active, it won't do anything special (i.e. it won't collapse or activate another tab). You can add extra logic to activate a default tab or do anything else.

This seems like it should be easier. But here's a solution:
The first thing we need to keep track of is which panels can be legally opened:
// Keep an array of the indexes that the user can open.
// [0,1] would allow ONLY the first and second panels
// to be opened
var available_indexes = [0,1];
Then, when you call your accordion, do it like this
$('#accordion').accordion({
header: 'h3',
change: function(event, ui) {
var newIndex = $(ui.newHeader).index('h3');
if (jQuery.inArray(newIndex, available_indexes) == -1) {
var oldIndex = $(ui.oldHeader).index('h3');
$(this).accordion( "activate" , oldIndex );
alert('That panel is not yet available');
}
}
});
So then, if you want to allow the user to access the third panel, you would do:
available_indexes.push(2);

$("#service_options_available h3").click(
function(e) {
if($(this).hasClass("empty")) {
e.stopImmediatePropagation();
return false;
}
}
);
$("#service_options_available").accordion({
autoHeight: false,
collapsible: true,
active: false,
header: 'h3',
changestart: function(event, ui) {
if($(ui.newHeader).attr("id") != null) {
alert($(ui.newHeader).attr("id"));
}
}
});

This has worked for me:
$("#accordionTabToDisable").click(function(){
$("#acordion" ).accordion( "option", "active",0); //maybe this line could be optional
return false;
});

The tab can be easily disable as below:
<p:tab title="First Tab Title" **disabled=”true”**>
To enable it you can use javascript to enable it again.

Diego Augusto Molina nailed it. ui-state-disabled class is the way to go: http://api.jqueryui.com/theming/css-framework/
Consider this piece of code that allows user go back, but not go to next accordion tab. We do it only programmatically, after proper validation:
function disableAccordionNextTabs () {
var $accordion = $(".accordion");
var active = $accordion.accordion('option', 'active');
var $headers = $accordion.find($accordion.accordion('option', 'header'));
$headers.addClass('ui-state-disabled');
for (var i = active; i >= 0; i--) {
$headers.eq(i).removeClass('ui-state-disabled');
}
}

None of the workarounds really worked for me. Would've been alot nicer if it was supported out of the box ofcourse, but here's the workaround i used. I bound the event to a custom event and added my own click event which can do whatever logic and trigger the customClick event if the navigation is allowed.
JS:
$('#accordion').accordion({
event: 'customClick'
});
$('#accordion > .ui-accordion-header').click(function() {
if(confirm ("Is this allowed?")){
$(this).trigger('customClick');
}
});
Or check out the working jsfiddle here: http://jsfiddle.net/hWTcw/

A pretty easy solution is grabbing the header (<h3>) by content:
$("h3:contains('panel name')").toggleClass('ui-state-disabled');
That way you can enable/disable with the same code or hide the panel all together with:
$("h3:contains('panel name')").toggle();