layout / masonry - delayed layout adjustment - one click behind - javascript

Ok, so here is the problem
https://jsfiddle.net/yq7f1a63/1/
Here is my code:
$(function () {
$('.content').hide();
$('a.read').click(function () {
$(this).parent('.excerpt').hide();
$(this).closest('li').find('.content').slideDown('fast');
$('ul').masonry('layout');
return false;
});
$('a.read-less').click(function () {
$(this).parent('.content').slideUp('fast');
$(this).closest('li').find('.excerpt').show();
$('ul').masonry('layout');
return false;
});
});
$('ul').masonry({
itemSelector: 'li',
});
I have several masonry items with text inside. When clicking 'read more' it reveals more text (swaps .excerpt for .content).
I am using the layout method to adjust the grid when each item is clicked to reveal more, but for some reason it's one click behind. So for example I click read more on the first item and it goes wrong, but then I click read more for the next item and it adjusts to what the first item layout should have been, and so on!
Any ideas people?! Thanks in advance :-)

You need to adjust the grid after slideDown() or slideUp() finishes. So, add that code to their complete callback functions.
$(function () {
$('.content').hide();
$('a.read').click(function () {
$(this).parent('.excerpt').hide();
$(this).closest('li').find('.content').slideDown('fast',function(){
$('ul').masonry('layout');
});
return false;
});
$('a.read-less').click(function () {
$(this).parent('.content').slideUp('fast',function(){
$(this).closest('li').find('.excerpt').show();
$('ul').masonry('layout');
});
return false;
});
});
$('ul').masonry({
itemSelector: 'li',
});
JSFiddle: https://jsfiddle.net/yq7f1a63/2/

Related

Slidetoggle Not working properly on child element of the parent

On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});
Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.
Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});

How to stop looping slide in jQuery

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

How do i make so the div's overlap with eachother?

How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});
pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').toggle();
});
});

Removing and Adding CSS Class with jQuery

I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});

JQuery drop down, remain down while hover over drop down

I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.
Here is my HTML:
<ul id="tabnav">
<li class="tab2">My Leases</li>
</ul>
<div id="leases">
<!-- slide down content here -->
</div>
JS Trigger:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").hover(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
return false;
});
});
</script>
Any ideas?
EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html
I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
$("#leases").slideUp("medium");
$(a).removeClass("active");
}, 500);
}
$(".btn-slide").hover(
function(){
$("#leases").stop(true,true).slideDown("medium");
isMousedOver = true;
$(".btn-slide").removeClass("active");
$(this).addClass("active");
var that = this;
$("#leases").data("mouseoutfn", function() { hideDropdown(that) });
},
function(){
isMousedOver = false;
hideDropdown(this);
}
);
$("#leases").hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
Here's a demo: http://jsfiddle.net/mMRZc/
The .hover() binds two events, mouseenter and mouseleave.
I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases
$(function()
{
$(".btn-slide").mouseenter(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
});
$("#leases").mouseleave(function(){
$(".btn-slide").toggleClass("active");
$(this).slideToggle("medium");
});
});
EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.
EDIT2: fix my bad finger typing of funciton to function
I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...
$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
$("#leases").slideDown("medium");
$(this).toggleClass("active");
return false;
});
});
Does it need to slide back up sometime?

Categories