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);
} );
});
Related
I have tried these things without the use of a toggle and they work individually. However when i do a toggle nothing works properly please help.
$(document).ready(function() {
$(".nav-toggle").toggle(
function () {
$( '#menu' ).multilevelpushmenu( 'expand' );
},
function () {
$( '#menu' ).multilevelpushmenu( 'collapse' );
},
);
});
Nav toggle html simple button.
<p><a class="nav-toggle" href="#"><span></span></a>Menu</p>
The .toggle() you are using is a jQuery event. It works like a click of button/switch. toggle() (Event) event is deprecated in jQuery 1.8 and removed in jQuery 1.9. So this is invalid now.
Current .toggle() function changes the state of the element. Like .show() and .hide()
*Referred from this answer
$(document).ready(function () {
var state = false;
$(".nav-toggle").click(function () {
if(!state){
$('#menu').multilevelpushmenu('expand');
state = true;
}
else{
$('#menu').multilevelpushmenu('collapse');
state = false;
}
});
});
This is the jQuery code written on the php file of the plugin. IT is working fine now but i want it to close when some one clicks outside of the panel.
Here is the javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
/* SideOffer Sidebar Functionality */
$("#sideoffer").toggle(
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
);
/* SideOffer .hd-sideoffer click function */
$(".sideoffer").click(function(){ $("#sideoffer").click(); });
/* SideOffer aLlow clicks on content box */
$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
});</script>
Kindly help.
What you'll want to do is add this into the ready function
What it does is adding a delegated event on the document to trigger when anything that is not #sideoffer is cclicked and then hide #sideoffer.
$(document).on('click', ':not(#sideoffer)', function(){
$('#sideoffer').hide()
});
You'll need to capture the click event for everything other than your original click, which I guess is #sideoffer?
$('body').click(function(event) {
if (!$(event.target).closest('#sideoffer').length) {
$('#sideoffer').animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow");
};
});
try to use javascript
$('body').click(function(event) {
var target = event.target;
/* do something when getting element you are currently click on*/
}
Here is example, http://api.jquery.com/event.target/
I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>
I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});
Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?
This should be easy but I checked on google and did not find any info on this.
I am doing:
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
However it is not sliding down. It is getting displayed without any animation. No error either.
.slideUp() is working properly.
What am I doing wrong here?
jsFiddle
Change
$notification.slideDown(1000, function () {
$('#notifications').append($notification);
});
to
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
The reason why slideDown doesn't work is because the element is visible when you are appending it
DEMO
Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place
$closeButton.click(function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
});
You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().
.notification{
display: none;
}
Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
Updated script below. PS: Don't forget to add the CSS snipplet.
$(document).ready(function(){
CKEDITOR.replace( 'description' );
$('#title').focus();
$('form').submit(function(event){
event.preventDefault();
var html=CKEDITOR.instances.description.getSnapshot();
var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').html(html);
var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
$('#notifications').append($notification);
$notification.slideDown(1000);
$closeButton.click(function(){
$(this).parent().slideUp();
});
});
});
slideDown documentation says:
$notification.slideDown(1000, function(){});
here function executes on sliding complete. So you need to append hidden element then slidDown to show.
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
Here is demo