I'm using the Reactjs version, and instead of using infinity on the Page, I'm using it on the div, and don't know how to add the scroll event.
I know it's a useful hyperlink, but I won't use it.
<div className="height-100 overflowY-scroll infinite-scroll-content">
...
</div>
Related
I am trying bind a click listener to something which will open the woocommerce product gallery lightbox view.
Basically I want to re-create the functionality of the click on that little magnifying glass icon: (top right)
I am able to use jQuery to trigger the click event for that element...
$('body').on('click', '.myElems', function(){
$(".woocommerce-product-gallery__trigger").click();
});
... and this works well enough. But there's something unsettling about relying on the existence of this other element and then virtually clicking on it.
Is there a way to open the lightbox up with a function call?
--
My example uses jQuery for convenience since this is wordpress, but vanilla JS answers are fine.
After being stuck for a while with this issue.
I have found out that there is a click trigger with href = #tab-description , I think to open the product description.
So if you
jQuery("a:not('a[href$=\"tab-description\"]')").click(function (e) {
// Any Click event that is not tab-description
}
You can edit the selector inside the jQuery() to suit your use case. but this will need some more handling as it will be triggered on menu clicks, in this case you will have to handle more conditions you can use unload idn if you want your js to execute before leaving the page
Normally I get control of carousels (control you ask, means the state where I can use my arrow keys to slide them) via clicking slick.js carousels.
But I'm trying to do this with javascript code, to implement more flexible interface in my project.
Is this carousel control acquisition can be implemented programmatically? I have tried $('#my-slick-carousel').focus() but it didn't worked.
Any workarounds even not specific to the slick.js are OK, as it seems like it's a problem of delegating keypress events to the carousel jquery objects.
You were so close with your original solution attempt.
Instead of $('#my-slick-carousel').focus(), you should use $('#my-slick-carousel').find('.slick-list').focus(), because the keyboard event handlers are registered on the .slick-list element, instead of the root carousel element.
I would like to remove all tooltips - but only when viewed on mobile devices.
I am using javascript to check for windowsize (on load and on re-zize), which is working fine - but I cant seem to figure out how to turn off the tooltips, using javascript.
Is there a tooltip.stop() - or something else that can turn off the tooltips (and possibly turn back on, on resize?)
The reason for my request is that I have tooltips on some of my buttons, and apparently the tooltip fires on first tap, instead of just triggering the button. (The button should fire a javascript).
Only the second tap fires the button javascript. Which is a little annoying.
I wanted to remove tooltips in Joomla's pagination. I targeted the links which have the class "pagination" and removed all their event handlers with:
jQuery(".pagination a").off() ;
You could doubtless find a selector to meet your needs.
The following worked for me, as the script inserted by Joomla keys off the class name hasTooltip.
$(document).ready(function(){
$(".pagenav").removeClass('hasTooltip') ;
});
I'm using the Polymer project and am stuck trying to scroll to elements on the page using javascript.
I'm trying to call window.scrollTo(x,y) on a page that uses core-scroll-header-panel but just get undefined when trying to do this.
Here is a plunker that shows the problem in action. Hit the CLICK ME link to attempt to scroll to 100,0. You will see that this doesn't happen.
If you comment out the <core-scroll-header-panel> lines then you will see that clicking the same link will scroll you down the page. Here is the relevant plunker.
I know that I can use document.getElementById('some-element').scrollIntoView() but this doesn't help me achieve what I want to achieve, which is animated scrolling down the page to the element. I also know that window.scrollTo() will not be animated, but I can use that call to make my own animated scroll method.
Any ideas around why this is happening, and how I can fix this to get the desired behaviour? jQuery is not an option.
This issue was what Andreas mentioned in his comment.
The scroll isn't bound to the window, but is bound to a component in the shadow dom.
In this particular instance the window.scrollTo call needs to be replaced with this:
document.querySelector('core-scroll-header-panel').scroller.scrollTop = 100;
Here is the relevant plunker.
I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!
Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.
I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!