I have a number of tooltips a date pickers used in my modal. How can I detect if the overflow modal has been scrolled so I can either reposition any open floating elements and reposition them according to the modal scroll position?
Thx
window.scroll is not firing!
An example of this is available here: Long modals (bottom of page)
http://jschr.github.io/bootstrap-modal/
OK, I sorted it.
The scroll event doesn't propagate to the document level of the DOM so $(document).on doesn't work.
I got around it with this hack.
This did work.
$(document).on("shown", "#modalcontact", function() {
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function(){
//do stuff
});
});
This didn't work.
$("#modalcontact").modal({
shown: function (){
$(".modal-scrollable").scroll(function(){
//do stuff
});
}
});
This didn't work.
$(document).on("scroll", ".modal-scrollable", function(){
//do stuff
});
You already answered your own question, but I would add that it's working this way as well:
$("#modalcontact").modal().on('loaded.bs.modal', function(){
$(this).parents('.modal-scrollable').scroll(function(){
//Do stuff
});
});
I've struggled to manage to work with shown event, but it was because the content was loaded remotely.
Try
$(document).on('scroll', '.modal-scrollable', function(){
//your code here
});
The scroll event handler can be bound to more than just the window.
This worked for me, whereas the earlier answers didn't for some reason. But I am opening the modal window using code, so that I can dynamically fill it with content before it is shown.
$('#modalcontact').modal('show');
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function () {
$('body').append('Hey hey hey!');
});
Related
$(function closeMenu() {
$('.list-item').removeClass('activeItem');
$('.showSubMenu').removeClass('showSubMenu');
$('input[type=checkbox]').prop('checked', false);
$('#burger').removeClass('change');
});
$('html').on('click', function(e) {
closeMenu();
});
$('.list-item, .showSubMenu, #burger, #menuToggle').click( function(e) {
e.stopPropagation();
});
This JS works and closes responsive menu on outside click in Chrome (desktop and mobile) and Safari (desktop-only), but not Firefox!?? What's wrong? Syntax error? Any wisdom is much appreciated.
See full code in action here:(Working in Chrome and Safari desktop):
http://cardscreative.com/cc2017/test444.html
try this
$(document).on('click','body *',function(){
closeMenu();
});
It looks like the body is only taking up the portion where your search bar is in Mozilla, so if you click anywhere else it doesn't register as having clicked on the body. If you set the body to height: 100% it appears to work.
Looking at the JavaScript for the example site you posted, (http://cardscreative.com/cc2017/test444.js), there's the following code:
$(document.body).on('click', function(e) {
...
}
For Firefox, the document body only takes up the full height of its content, not the full height of the window. So, this function does not get attached to click events which happen outside the content <body>. In your example site, the content body consists of the navigation bar.
This issue can be fixed with the following change:
$(document).on('click', ...
This change will attach the function to all clicks in the document, not just the body.
(Also, your question says $('html').on('click', .... You should update your question to reflect the JavaScript of the site.)
I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.
Cannot make a div element automatically scroll down.
$('#div').scrollTop(1000)
This doesn't work, but if set on click it works:
$('btn').click(function()
{
$('#div').scrollTop(1000);
});
I need it to scroll down without clicking any button. What do I need to change?
Try running it after the document is ready:
$(function() { // short for $(document).ready(function() {
$('#div').scrollTop(1000);
});
Chances are you're running your script before the element exists (check $('#div').length -- if it's 0, you're running it too soon). You need to wait until the DOM is loaded, which wrapping your code in the above will handle.
$(document).ready(function(){
$('#div').scrollTop(1000);
});
$(document).ready(function() {
$('#div').scrollTop(1000);
});
I am wondering a function that will work similar like:
$(document).click(function () {});
but with hover function.
When I tried with :
$(document).hover(function () {});
its not working.Can any body give me some idea about this problem.
i.e.My main aim is when user mouse hover on body or documents any will give an alert message..
thanks.
You want something like this?
$(document).ready(function(){
$('#YourElementId').hover(function(){
alert('mouse hovered');
});
});
Take care of including jQuery in your page. Then, you can do
$('.someclass').on('hover', function(){ alert("something"); });
or
$('.someclass').hover(function(){ alert("something"); });
try to avoid to bind hover to document unless you have to delegate an event so you should do
$(document).on('hover', '.someclass', function() {});
Binding hover to document can provide bad experience to your users, specifically if you are showing alerts, unless, as always, you take care of which element have to show it.
When I try to destroy resizable div, hover function on .ui-resizable-se doesn't work. I think I have to use jquery live(). But I couldn't integrate it clearly.
If you hover .ui-resizable-se or .ui-resizable-e when page load, functions will work, but if you hover again, nothing will be happened. How can I overcome this problem?
$('#resizable').resizable({
aspectRatio:false
});
$('.ui-resizable-se').hover(function(){
keep("resizable");
});
$('.ui-resizable-e').hover(function(){
dontKeep("resizable");
});
Source link: http://jsfiddle.net/nNrgP/
The hovers do not work after the first time because you've called resizable("destroy"); Calling that
Removes the resizable functionality completely. This will return the element back to its pre-init state.
Resizable Destroy
If you want that to still be available, you should either toggle between resizable("disable") and resizable("enable"), or completely re-init the resizable div. Without more knowledge of your goal (or other code), it's tough to tell what the best option is.
You could also just update the options:
function dontKeep(val){
$("#"+val).resizable("option", 'aspectRatio', false);
alert("dont keep");
}
function keep(val){
$("#"+val).resizable("option", 'aspectRatio', true);
alert("keep");
}
Try using event delegation since you might be dealing with dynamic eleemnts
$(document).on('mouseenter mouseleave', '.ui-resizable-e', function(){
dontKeep("resizable");
});
$(document).on('mouseenter mouseleave', '.ui-resizable-se', function(){
keep("resizable");
});
Demo: Fiddle