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
Related
I am using NM_CUSTOMDRAW to draw tree view items. My items right justify parts of it by using a right margin based on the RECT area reported available. The issue I have is that when the vertical scrollbar appears or disappears, only the item expanded/collapsed and the area under the scrollbar seems to update (invalidated regions). This causes the repaint requests (with the new width) to not update the area correctly.
For example (using text and a single space as example): You could have something with the scrollbar be right justified text ## where ## is the scrollbar then when the scrollbar goes away you end up with right justified text t instead of right justified text
Is there a good way to fix this?
One thought is if I could catch a message when a scrollbar shows up or goes away, I could just invalidate the window to force a redraw. Is there such a message?
Or is there a way to add to the invalidated region without triggering a redraw loop but would update the full items area?
Another thought is I can just use the full window RECT size and use a right margin large enough that wouldn't be under the scroll area but I'd rather not do that.
Thanks!
I have a rectangle in figma and I want to give it a positioning animation from top to bottom on starting the page. (without clicking or hovering) How is it possible?
At the moment, the best way to animate in Figma is using a combination of Smart Animate & After Delay between two frames.
On Run Animation
We're going to create a start & end frame. Then, animate between them.
Create your starting frame with your rectangle in its starting position.
Rename the rectangle layer to something unique. This ensure the layer doesn't get missed with the Smart Animate function if the frame gets any busier with more layers.
Duplicate your frame CMD+D and position your rectangle to its end position (Check that Figma hasn't renamed your rectangle)
Click Prototype in the top right corner of your panel.
Select your starting frame & click the None dropdown & select After Delay
Click the None dropdown and select Navigate To from the list
In the dropdown the appears to the right, select your ending frame from the list
Under Animation, click the dropdown and select Smart Animate
Deselect your frame and ensure that the "Starting Frame" is set to your first frame.
Finally, hit play in the top right and watch the magic!
Hope this helps!
And here's a screenshot of the set up.
Hope this is what you were after!
I am trying to create app. In the form, there is only 3 button in a groupbox. I want to make the groupbox always fit in the screen. The problem is when i minimize the form, there is vertical and horizontal scroll. So i cannot see the whole groupbox border:
I want to make the groupbox to minimize without the scroll and i am able to see all the border just like when in the maximize screen as below:
I have already tried groupbox autosize to true while anchor to top, bottom, right, and left but it is still not working. Any idea how i can achieve this?
As #ib11 said you need to go to Dock and select Fill. In addition, if you want to make your group box not fill the form but grow with it, you'll probably need to change the Anchor to all sides. That's why your previous settings didn't work because anchor doesn't fill the screen, it's just a property to grow with the screen. Fill makes it possible so that you can have a group box or any other control always fill the screen.
See this image for dock:
See this image for anchor:
You need to set the Dock property of the GroupBox to Fill.
Like so:
Can anyone tell me how to use Effect.toggle() to toggle to left and right instead of up and down? Or is there any other effect in Scriptaculous that does this ?
Unfortunately the toggle() method only supports 3 effects appear, slide, and blind - if you want to do left to right I would suggest using the morph() method as you can put any styles in there and they will be changed back and forth
for example
// close the div horizontally
$('firstdiv').morph('width:0px;');
//open the div horizontally
$('firstdiv').morph('width:auto;');
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();
}
});