Develop Reference

How to execute code after 3rd party slide down animation?

Background:
I am using the materialize JS to create collapsible divs. When a div that has a class of collapsible-header is clicked, a slide down animation occurs on the sibling div that has a class of collapsible-body, showing the contents of the collapsible-body.
What I am trying to accomplish is when a collapsible header is clicked, the browser should scroll to the top of that div so that the contents are in full view of the user. I have used an on click event, which works fine on the first collapsible. But then, if you have an open collapsible and you click on another to open it, it doesn't scroll to the top of the clicked div properly (it will scroll to the middle of the body, or way above the top of the div).
JS Fiddle of on click functionality: https://jsfiddle.net/f83dct8f/4/
I am able to accomplish what I am looking to do by editing the Materialize JS itself. Here is how the line looks before my edit:
object.siblings('.collapsible-body').stop(true, false).slideDown({
duration: 350,
easing: "easeOutQuart",
queue: false,
complete: function() {
$(this).css('height', '');
}
});
I add the following to the complete portion of the above statement to accomplish what I'm looking for:
$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');
Question: I do not want to edit the Materialize 3rd party code to accomplish what I need, so I need to find a way to implement the body animate code after the slide down is finished, without editing the Materialize animation. I know there has to be a way to do it?
I have tried event queues on the collapsible body, which seemed promising, but my test console print executed during the animation. See below. If someone could point me in the right direction of what else I could try, I would greatly appreciate it.
$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){
console.log('DONE');
});

You should be able to use the onOpen option when initialising your .collapsible. Pass in a function to execute when the accordion is opened. The function receives the element as a argument.
$(document).ready(function() {
$('.collapsible').collapsible({
onOpen: function(el) {
$('body').animate({scrollTop: el.offset().top },'slow');
}
});
});

hide element with javascript progressive enhancement

I use Jquery toggle method to view a div when a button is clicked
$("button").click(function(){
$("#divId").toggle();
});
Works fine but the initial value is set to be viewed or as the css property display:block so when the page initially loads the div is viewed and I have to click the button to close it.
what other answers suggested is that I change the css property but I do not want that as that will hide the div and if the user had their javascript not working for any reason, that would not be good.
So I want to hide the div initially with javascript and then comes Jquery's toggle method working normally. I tried document.getElementById(divId).style.dsplay="none" and put it right before the toggle method, but that makes the toggle not work and just hides the div.

You may set initial value to hide the div by this way:
$(document).ready(function(){
$("#divId").hide();
$("button").click(function(){
$("#divId").toggle();
});
});
After you click the button. it will toggle to open the page.

Try this to hide div on page load:
$(document).ready(function(){
$("#divId").hide(); //or .toggle()
});
[UPDATE]
Or if you have more advanced logic on click event and you want it to also run on load:
$(document).ready(function(){
$("button").trigger('click');
});

Tablesaw not getting triggered inside Bootstrap Carousel

I'm using the Tablesaw plugin to get responsive tables.
At some point I need to include different tables inside different items/slides of a Bootstrap Carousel.
On load, the table on the active Item of the Carousel will display correctly (Tablesaw is initiated properly), but once I move to the next slide/item, the tables in there won't be properly displayed (Tablesaw not initiated).
Tablesaw includes an extra JS file to initiate upon load:
$( function(){
$( document ).trigger( "enhance.tablesaw" );
});
This seems to work for the first slide/item but not for the rest.
Any clue on why this might be happening?
I've created a Plunker to illustrate the issue.

The problem is in the Tablesaw intialization. Tablesaw needs to know during initialization (which is done in the tablesaw-init.js) the size of the element. You have two tablesaw elements placed inside the bootstrap Carousel, while one is active and the other is not. When you look at the Carousel css, you can see that the display property of the Carousel item which is not currently active is set to none. Elements which are not displayed have width and height set to 0.
So the solution could be changing the code inside the file tablesaw-init.js to this:
;(function($) {
$(function(){
// Show all carousel items before Tablesaw intialization
$(".carousel-inner > .item").css("display", "block");
// Initialize the Tablesaw
$( document ).trigger( "enhance.tablesaw" );
// Remove the style added before initialization
$(".carousel-inner > .item").removeAttr("style");
});
})(jQuery);
After this change there is no need to handle the slid event.
Here is your original code sample with the mentioned change, so you can see it is working https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

You can't initialize Tablesaw on hidden tables.
So you have to set your custom initialization script to only initialize visible tables:
;(function($) {
$(function(){
// Initialize Tablesaw on the active carousel slide
$('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
// Initialize Tablesaw on slide change
$('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
$(e.relatedTarget).trigger('enhance.tablesaw');
});
});
})(jQuery);
Demo: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview

Hover only works when user clicks on the element

Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/

First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});

I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});

fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});​

Mouseover losing focus when Ajaxing content in

I'm using an exposed filter in Drupal7 to filter items using ajax.
I have a menu with checkboxes to decide what is being filtered that is hidden until you hover over the menu category. This is all working fine until you select a checkbox.
The page filters correctly, but when the new content loads, the mouseover menu is loosing focus. I'm trying to keep the menu open when the new content is loading in, not sure what's wrong with my js.
$('.views-exposed-widget').live({
mouseover:
function()
{
$(this)
.children('.views-widget')
.addClass('show');
},
mouseout:
function()
{
$(this)
.children('.views-widget')
.removeClass('show');
}
});
** Edit: Removed .end(); Still loosing focus when content is loaded.