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
Related
When you click 'Darrien Tu' the text on the far right disappears but it doesn't come back when you reclick the name.
https://jsfiddle.net/gkrh0ok0/1/
$("#nav_list").click(function () {
$(".sidebar-right").toggle();
});
I have check the fiddle. There is one issue in .sidebar-right
You have given margin-left:80% instead of give right:20px
This might help to solve your issue.
I have update your script code :
<script>
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open').after($(".sidebar-right").toggle('slow'));
});
});
</script>
Add comment to this code
<script>
/*$("#nav_list").click(function() {
// assumes element with id='button'
$(".sidebar-right").toggle();
});*/
</script>
I made a function where I hover over a content box and a div with class name bottomdata slides down from the top. This function works great, except when you scroll over the box multiple times, the animation runs in a loop. I want to animation to run once, then stop until it is hovered again after the first animation is done looping.
$(".databox").on('mouseenter', '.box', function() {
$(this).find('.topdata').slideUp(400);
$(this).find('.bottomdata').slideDown(350);
}).on('mouseleave', '.box', function() {
$(this).find('.bottomdata').slideUp();
$(this).find('.topdata').slideDown();
});
So I tried to use stop(); I also tried to use finish(). I even tried to use clearQueue(). I just can't seem to figure it out. All help is greatly appreciated.
I have included a sample on jsfiddle: http://jsfiddle.net/4cx1kygc/
$('.databox').on('mouseenter', '.box', function() {
var that = $(this);
that.find('.topdata').stop(true, true).slideUp(400);
that.find('.bottomdata').stop(true, true).slideDown(350);
}).on('mouseleave', '.box', function() {
var that = $(this);
that.find('.topdata').stop(true, true).slideDown();
that.find('.bottomdata').stop(true, true).slideUp();
});
Documentation
Demo
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 facing an issue, issue is I've a product page where image thumbnails are appearing,
i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing,
link is: http://etekstudio.org/demo/crateen/en/men
cod is:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});
I'd go with something like this:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well.
Try to use:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter
Try this:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);
try this :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});
Try it.
And you also don't have need to create new object with the name target.You an do directly with this way also.
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
You can try this:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});
inside the function
you are selecting all elements with '.popUpPrice button', you must find the correct button to show.
in this html structure, for instance:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. In this case will always be .product-image
Try this
$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});
DEMO
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>