Is there a way to disable the shadow in Ace Editor when the user's cursor goes past the edge of the view? It also appears when the horizontal scroller is scrolled to the right edge and there is not enough room.
disable it with css
.ace_scroller.ace_scroll-left {
box-shadow: initial!important;
}
Related
I'm using those:
body{ -ms-overflow-style: none;} /* for ie hiding scroll bar */
body::-webkit-scrollbar{display:none;} /* chrome hiding scroll bar*/
body{overflow:-moz-scrollbars-none;}/* hides the scroll bar for Firefox */
to hide the default browser scrollbars, it is all fancy & dandy for chromie & IE ( yay ! ),
although in Firefox I'm loosing the ability to scroll with mouse scroll, what is weird is beside that I can scroll, but only with Up/Down arrows or pageUp/pageDown keys.
Is there something that I can do to re-enable scrolling with mouse wheel in Firefox?
In the post that I've found all of those neat lines of code the author said that we need to implement this as well for Firefox:
$(function() {
jQuery.scrollSpeed(100, 800);
}); // for page scrolling
But it does not work for me, or maybe I'm doing sth wrong.
Thx for stopping by o/
I have this aside element which is has a position:fixed; property. Inside it, i have another div.inner which will hold elements which might be many and therefore might exceed the window.height();
Now, i need to solve this problem based on mouse scroll event on the div.inner element. I need to move the inner div top or down based on mouse scroll up or down events.
Please have a look at this website which demonstrates exactly what i need on the left were they have the logo and menus. Try moving your mouse up or down on that element and see.
Here is my attempt which didn't go so well.
Im not gonna write the entire code, but the concept from the page is:
pageHeigth = 200px
menuHeight = 250px
menuOverflow = menuHeight - pageHeight (50px)
Mouse positioned at the top: Menu CSS = "top:0px"
Mouse positioned at the bottom: Menu CSS = "top:-50px" (negative menuOverflow)
And of course interpolate the postion between top/bottom depending on mouse position. And also, using the terminology "mouse scroll" in your question makes it ambigous to understand, i believe "mouse move" is a better wording. "Scroll" makes me think about mousewheel or the page scrolling
I have tried to change the default arrow in drop down.
By adding this in css,
background-image:url("downArrow.jpg") no-repeat scroll right center transparent;
but the default arrow of drop down is not get replace in firefox, but in chrome its coming correctly.
How to fix this in firefox. Thanks in advance.
<SELECT> elements are not rendered by HTML, they're rendered by the browser/OS and styling them is quite limited. You cannot replace the arrow. All you can do is place an element on top of it and use script to fire the click as if it were part of the real drop-down.
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});
I want the node expand button (the +/- one) to highlight only when the mouse is over the button itself but not when it is over the node text. By default, the button is highlighted in both cases. Is there a simple way to achieve this?
I'm using YUI 2.7.0.
You can do that in a lot of ways, but I think it is more easy to edit CSS
.ygtvcell .ygtvtph
{
background-color:url(http://yui.yahooapis.com/2.7.0/build/treeview/assets/skins/sam/treeview-sprite.gif) no-repeat scroll 0 -6400px !important;
}