We Keep Coding

Bootstrap Collapsible panel content reset to top

I have panel which contains huge scrollable data, once scroll down the content and collapse the panel/come from other page then data is setting to top, scroll down remains same, its not resetting to top position.
I have tried below code but no luck
please anybody help me to get resolve this
$('#techAssmnt').on('show.bs.collapse', function (e) {
//setTimeout(function(){
//$("techAssmnt").animate({
//scrollTop: $('#page-top-wrapper').offset().top
//}, 800, 'swing',
//function() {});
//},500);
//$( "div.assessmentMainDiv" ).scrollTop( 0 );
//$("#Section_1").animate({ scrollTop: 0 }, "slow");
$("#Section_1").animate({ scrollTop:
$('#templateCollapse3262').offset().top }, 800, 'swing', function() {
});
//$("div.assessmentMainDiv").css(["top","1px", "left","0", 'right':'0','bottom':'0', 'overflow':'auto']);
$("div.assessmentMainDiv").css({
'top' : '1px',
'left' : '0',
'right' : '0',
'bottom' : '0',
'overflow' : 'auto'
});
});
Below code also I have tried
$('#techAssmnt').on('shown.bs.collapse', function (e) {
//alert("sasdas")
var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;
if ( currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) {
$("#Section_1").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}
});
https://www.bootply.com/8bGdJgkmUv
please check this.. In the first panel there is huge content and also scrollable.. Once I open and scroll the content then I close/hide/toggle the panel but content is not all reset to top

You just need to add this jquery
$(".collapse").on('hide.bs.collapse', function(){
$(this).children().scrollTop(0);
});
Working Snippet

Isotope elements refresh / redraw

Im using isotope menu on wordpress page.
Everything works fine till i use another plugin to expand content (menu actually).
Since that menu showes only first position and i have to manually select category to display all position properly.
This is the code im using for the menu:
if ( $('#menus-container').length ) {
// Zebra stripes
$('.menu-list .menu-item:even').addClass('even');
$('.menu-list .menu-item:odd').addClass('odd');
// Isotope
var $menus = $('.menu-list'),
filter = $('#menus-filter .menu-icon a').eq(0).attr('data-sort');
$menus.imagesLoaded(function() {
$menus.isotope({
itemSelector: '.menu-item',
filter: filter,
animationEngine: engine,
layoutMode : 'fitRows',
animationOptions: {
duration: 400,
easing: 'linear',
queue: true
}
});
$('#products').isotope( 'reloadItems' ).isotope();
$('#menus-filter .menu-icon').eq(0).addClass('selected');
$('.menus-category h5').text( $('#menus-filter .menu-icon a').eq(0).text() );
});
$('#menus-filter .menu-icon a').on('click touchend', function() {
$('#menus-filter .selected').removeClass('selected');
$(this).parent().addClass('selected');
var menusFilter = $(this).attr('data-sort');
var menusLegend = $(this).text();
$('.menus-category h5').text( menusLegend );
$menus.isotope({filter: menusFilter});
});
$('.menus-options a').click(function() {
$menus.isotope();
});
// Binding mouse and touch events
var bindOver, bindOut;
if ( !isMobile.any() ) {
bindOver = 'mouseover';
bindOut = 'mouseout';
} else {
bindOver = 'touchstart';
bindOut = 'touchend';
}
// Image hover and zoom icon overlay
$('a.menu-image').each(function() {
var dataColor = $(this).attr('data-color');
$(this).on(bindOver, function(e) {
$(this).find('.menu-overlay').css({'width': $(this).find('img').width()});
$(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 0.3)}, 400);
$(this).find('.menu-overlay .menu-zoom').stop().fadeIn(300);
});
$(this).on(bindOut, function(e) {
$(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 1)}, 400);
$(this).find('.menu-overlay .menu-zoom').stop().fadeOut(300);
});
});
// Category legend hover
$('.menus-panel .menu-icon').each(function() {
$(this).on(bindOver, function(e) {
$(this).find('.menu-legend').stop().animate({'left': '60px', 'opacity': 1}, 300).show();
});
$(this).on(bindOut, function(e) {
$(this).find('.menu-legend').stop().animate({'left': '0px', 'opacity': 0}, 300).fadeOut(100);
});
});
}
Ive tried to modify the code with jQuery:
jQuery( function() {
var $menus = jQuery('#menus');
$menus.imagesLoaded(function() {
$menus.isotope({
itemSelector: '.menu-item',
filter: filter,
animationEngine: engine,
layoutMode : 'fitRows',
animationOptions: {
duration: 400,
easing: 'linear',
queue: true
}
});
});
It works but showes all positions of the menu and breaks the design of menu.
Any help would be great.

add js code on add to cart magento 1.9

I tried to add this JS code on Magento 1.9 , but nothing happens when i click on add to cart button.
I added code in XML file ( i see that is ok when i see source code in page via browser ) :
and added this JS in folder JS/Carrello/cart.js :
$('.btn-cart').on('click', function () {
var cart = $('.skip-cart');
var imgtodrag = $(this).parent('.item').find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
cart.effect("shake", {
times: 2
}, 200);
}, 1500);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
I followed this guide :
http://codepen.io/ElmahdiMahmoud/pen/tEeDn

First of check any conflicts with prototype.
if that's the case replace $ with jQuery
Also, could you please explain how did you add your code using xml?

jquery stop() not working when combining jquery fade and slide jquery-ui

I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?

Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need

jQuery plug-in conflict

So, today I have one more question: HOW I COULD I HAVE BROKEN MASONRY JQUERY AND FANCYBOX (LIGHTBOX)?
I really need this. I have lost few hours trying solve this by myself, but i really can't. :/
This is my script where I'm calling fancybox and masonry:
<script type="text/javascript">
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
$(document).ready(function() {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
To be brief, my problem is on overlapping, but as you can see, I'm already using imagesLoaded plug-in, and more. I already tried to set all of images width/height, but it still doesn't work.
Thank you.
I need to press the mouse scroll to work. Ideas?

I rewritten your code:
<script type="text/javascript">
$.noConflict();
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
jQuery(document).ready(function($) {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
Hope this works on you.