We Keep Coding

toggle cubeportfolio not pushing down next content

I am using cubeportfolio to get masonry filterable portfolio. Worked like a charm, but then I wanted to add a toggle inside the cbp-item.
This is the result (watch it on mobile): http://www.lichaamengeest.be/AA.php
You can see that, when toggling the content in the first cbp-item, the content comes up behind the cbp-item below, instead of the toggle content pushing the next cbp-item downwards. The height is not set fixed, so it should move freely.
The coder of cubeportfolio told me to add this code
jQuery('.cbp').cubeportfolio('layout'); But my unanswered question is: where and how to add that code? Here's the js file with toggle code: http://www.lichaamengeest.be/scripts/custom.js

I think your problem is the „position: absolute” on the „.cbp-item”. If you wrote the toggle function on your own try to get the height of the box and add this as new position for the following box, when you click on to toggle. So that it's recalculated it after every click.

Jquery Remove Clear Top CSS attribute

I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks

Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.

Jquery Flipcard Animation to flip on toggle event

I have a simple jquery flipcard animation - http://jsfiddle.net/gGAW5/36/
Now the way this flip card works is it shows the top div, and hide all divs below it. IF you click on a link in the first div, it flips to the second div andsoforth.When it gets to the last div, it flips back the the first one again on clicking an anchor tag. Now I want 3 anchor tags on the front flip card(first div) and each link(a tag) should have its own back flip card/backsideDiv. currently, in my example, when you click on the first link, it loops through the other 2 links' backsideDivs/flipcards as well. I want it to go back to the main front div again(not flipping to the other links' backflip divs).
So each set of anchor tag/back div pair should operate independently. Hoped I explained it well enough.
I would really appreciate any help
Thank You

There isn't much of easy use of functions for quickFlip... This isn't pretty, but I think I got what you're looking for or at-least close. http://jsfiddle.net/2WbYG/10/

Automatically showing div on mouseover

This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.
I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.
In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.
I use the following code to make this happen:
$("div.editable").hover(function () {
$(this).fadeTo(500, 0.25);
$('#Menu').css("position", "absolute");
$("#Menu").css("top", $(this).offset().top);
$("#Menu").css("left", $(this).offset().left);
$("#Menu").css("zIndex", "10000");
$('#Menu').show();
}, function (e) { // on mouseout
$(this).fadeTo(500, 1);
$("#Menu").hide();
});
I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.
Does anyone have an idea of how I could edit my code to make this work correctly?
Thank you very much for any help you can give me.

Just use the :hover pseudo class, that's likely to help the situation. You'll lose animation effects, but it could sure make things easier, and take javascript out of the picture

Add a hover function for the menu and set some state when the mouse is hovering over the menu and only take the menu down if the mouse is not over the div AND not over the menu.

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!

Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/