How do I turn off scrolling inside a <QuillEditor>? - javascript

I have set overflow: hidden on the <QuillEditor> element, its parent div, and the .ql-editor and .ql-container class divs that I found when inspecting the element in Chrome, but nothing seems to work. Infinite content can be added and the box scrolls to fit it all.
In fact, all this does is cutoff my bubble style formatting menu.
As far as I understand, the scrollingContainer option is not related to this?

Related

After first click on delegate selector, it refreshes the page

I am having a serious problem using .delegate in jQuery 1.11
I have a sidebar called ".local-filters" which opens when I click #consult-filter.
After that, the hidden sidebar from the right appears (named .local-filter) (toggles a class called .active) and ".overlay" (100% height and width div) makes a black background with class ".active"
I used this to make that happen. Also, I want to click on .overlay (black background) and toggle the overlay class to make it visual disappear.
$(document).delegate('#consult-filter, .overlay, .cerrar filtros','click',function(){
$(".local-filters").toggleClass('active');
$("body").toggleClass('menu-active');
return false;
});
I read a lot of articles and read something about bubble spreading, but I don't know actually what is happening.
Everything is working correctly, but I don't know why in the second click I made to this element, it automatically refreshes the entire page.
Any ideas?

Sortable appending to wrong target

I have a sortable element whose children are also sortable.
Here's a JSFiddle demonstrating what I've got so far.
In the fiddle or image below, the blue area is #container, white boxes are .child and group of such boxes marked with a black border is .parent.
#container and .parent are sortables.
If an item is dragged and dropped from one .parent to another .parent, I'm simply appending the item (jQuery ui does this automatically). If an item (.child) is dropped into #container I'm wrapping it in a .parent div to mark it as a new parent.
Now, select prod3 by clicking it, drag it to the left of prod5 till placeholder appears to the left of prod5. drag prod3 down as much as possible while still having the placeholder to the left of prod5, then drop it.
If jQuery UI detects it as a drop inside the .parent of prod5, the expected result should look like the following:
If it is detected as a drop in #container the expected result should be as follows:
Now what's happening (evident from logs in console): a receive event is triggered on #container , even though placeholder was inside .parent. I can live with that - but the problem is, even though the receive event was fired on #container, the dragged item prod3 is appended to .parent and no receive event was triggered on .parent!
So due to this strange behavior, since the receive event is triggered on #container, the item is wrapped in a .parent div, but it's then appended to the .parent which contained prod5. Hence I get a .parent div inside a .parent div as shown in picture below, which should not happen.
Does any one have any idea why this is happening? Or can someone suggest a better way for doing this (sortable items inside a sortable container)?
Side note: this is a corner case and you might have to try it few times to reproduce this scenario.
Update:
According to this smaller demo, this seems to be a bug with jquery ui, which i reported here. A temporary workaround is to manually handle the situation inside #container's receive event as in this answer. any better solutions are welcome...
Solution is very easy
You need to add this condition:
if (!ui.item.parent().hasClass('parent')){
ui.item.wrap(parent).before(helper);
}
I found that additional .parent div appearing only when items parent has class .parent .ui-sortable and if it have class just .ui-sortable it fully works. So simply add this condition and all works fine.
FIDDLE
Okay, so it seems the .parent thinks the .child is still inside when it isn't.
A test with bigger borders shows that when the pointer is outside the margin, below the .parent, the expected behaviour is that the parent should collapse and the #container should accept the .child.
This only happens if you drag it down after half width of the .child, and this completely disappears if you drag it left onto the previous .child and go back to the normal position.
This is why the #container receives the drop event -- it's happening in the container!
In my version of your JSFiddle, one can reproduce the bug by moving a .child onto another .child and then downwards, until below the black margin. Notice that the parent (The black box) doesn't shrink even though it the child is outside.
This behaviour is partially fixed with higher versions of JQuery UI.
With JQuery 2.0.2 and JQuery UI 1.10.3, it's completely fixed.
It's very likely that this is a bug.

Fade out element on hover and allow user to select text underneath - possible?

Consider the following HTML:
<div id="mydiv">Big shiny error goes here</div>
Using below CSS, this div sticks to the top right corner, even if the page is scrolled.
#mydiv {
position:fixed;
right:0;
top:0;
background-color: red;
}
Is it possible to have mydiv fade out to, say, 10% of opacity on hover and allow user to use page elements underneath, such as select text and copy to clipboard? The idea is that mydiv should stay visible at all times, but it should NOT block user's actions.
As an added bonus, it would be nice to select mydiv's text, if no elements are found underneath.
EDIT: hover + z-index approach does not seem to work well, see this jsfiddle.
The closest I can think of is to give the content area a z-index of, say, 1. Then, using :hover, give the error div a lower z-index to position it behind the main area. This will allow mouse events on the main content. You can also adjust opacity to fade it out as needed. I believe that IE will allow you to click/drag/whatever on the element if there's nothing else in front of it, but Chrome and Firefox will consider it hidden by the content area even if there's "nothing" actually there.
$(document).ready(function(){
var id = $('#selector')
id.mouseover(function(){
id.fadeOut(800,function(){
id.hide();
});
})
id.mouseout(function(){
id.fadeIn(800,function(){
});
})
});
selector should point the division on top

Flexcroll and innerHTML

I'm trying to get content from a set of hidden (display:none) divs to display on a main "display" div using innerHTML. That part has no problem. However, flexcroll does not seem to load the moment I change the content of the "display" div using innerHTML, even after calling the updateScrollBars method.
Here is the code in question:
function switchdis(IDS) {
caredet = document.getElementById('caredet');
carednew = document.getElementById(IDS).innerHTML;
caredet.innerHTML = carednew;
fleXenv.updateScrollBars();
}
I'm not too sure what is the problem. It seems to me like the function is called (I can scroll using the mousewheel) but the scrollbar is not appearing at all. For the record, my custom scrollbar works fine on other pages. On another page, I used the method of hiding and unhiding divs to change content within the page; the updateScrollBars() method works there when I call it after unhiding a div.
But somehow with innerHTML it doesn't seem to work. Does anyone know why?
I solved this issue.
Realised I was updated the innerHTML of the div with flexcroll applied. If anyone is having similar problems, DO NOT DO THAT. Instead, create another div within the flexcroll master div and change the innerHTML of that div.
Additionally, remember to update your flexcroll scrollbars and optionally shift the scroll position to the top every time the innerHTML of that inner div is changed.

IE8 Rendering Bug: after javascript visibility-toggle, div content stays white

The page here (http://skergeth.net/slidingfooter/) contains a footer that slides up when you click on contact us. It then shows a contact form.
However in IE8 it slides up and the div containing the form stays white until it is hovered by the mouse.
I also tried the approach that the footer-div has overflow:hidden but since there are other elements inside the footer that should overflow (a menu that extends to the top), this is not an option.
I don't think it is a javascript but because I tried to delay the transition and made sure, the setVisible is called before it but with the same result.
I hope I made myself clear.
Thanks for all your answers!
add height:1% for the div which is after the div having the id="footercontent"
and it should work.(note: test it on all browsers)
this is happened when the IE didn't find a value for the height
Try adding a zoom:1 and/or position:relative to #footercontent or any of the elements inside of it. This forces IE to set a hasLayout and fixes lots of css issues.
I had the same issue. Solved it with:
#div-name * {
visibility: visible;
}
The div containing the form seems to load fine, since the "Contact Us" h1 is visible. It's the form specifically that isn't being displayed in IE8.
Try playing with the display properties of the form element.

Categories