well i have little knowledge in JavaScript.
My idea is to design a grid look so that whenever user drag some horizontal or vertical object on grid either horizontal or vertical line of gird hovers and he can have idea this is where i have to drop my object.
I have made gird using table specifying border-left,now i have grid of some column and row and for showing horizontal and vertical line i am using border with position absolute.now i am not getting how do i get position when mouse goes on border-left or border-right of table(td) so that i can place my border with that gives a hover effect
Are you searching to give effect to active droppable element, then this can help you
http://jqueryui.com/demos/droppable/#option-activeClass
Related
I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.
All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.
Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:
The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:
Here is a code sandbox and a step by step guide on how to recreate the bug:
Go to the code sandbox
Click on the right hand border of any column
Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:
As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
Drag the column
Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.
How can this bug be solved?
Issue occurs because header text is selectable and dragable by default. Add following style for dragHandle class and th elements. You will not be able to select text in the header but on the bright side issue will be resolved.
thead tr th,.dragHandler {
user-select: none;
}
Take a look at the updated example.
I'm creating an application that has a layout based on the ExtJS5 Portal Demo. I need to have a panel in the Dashboard that will fit vertically, not just horizontally to fill the entire space of the column. At this time this just needs to occur for one of the panels, not all as most will have a fixed height and the user of course has the ability to resize vertically because the Dashboard panel uses anchor layout.
This panel will contain a map and I need to display as much of the map as possible. If the column contains multiple panels and the user drags one to a second column I would like for the map panel to resize and fill any empty vertical space in its column. The inverse is true, if someone drags a panel to the same column as the map panel will need to decrease but still fit to as much vertical space as possible.
I believe using a vbox layout on the panel is what I need but I've tried this on the dashboard panel with no luck. Has anyone else run into this, any suggestions? Thanks
Have a look at the align config on vbox - it might do what you want if you use one of the stretch options.
http://docs-origin.sencha.com/extjs/5.0/apidocs/#!/api/Ext.layout.container.Box-cfg-align
I have a div with fixed width and height, overflow: scroll and position: relative. Inside I have two table elements, first one containing 10 columns, and the second one which is a copy of the first table and has its first 3 columns only. I gave position:absolute to the second table and given that both tables have save styling the second table will overlap the first one. My requirement is when the div is scrolled horizontally, I want the second table which is overlapping the first one to be fixed, i.e, it should not move on horizontal scroll, and on vertical scroll the content of second table should be scrolled properly.
I have created the following fiddle with what I have so far:
JS Fiddle
I don't think that's possible with css. What you are asking is for the left hand table to scroll vertically with it's container div, but not to scroll horizontally.
I'd have a re-think on your requirements here.
You could just put the right hand table inside a div with overflow:scroll, so only that one moves when you scroll horizontally. You'd have the issue then of the two no longer being lined up when you scroll vertically - could you make it high enough so so the whole table displays? Would that work for you?
EDIT:
In your js-fiddle then you've set height:500px; for .container.
If you don't need that, then remove it so things will set their own height and display the whole table. Then you only have the sideways scroll to deal with, and that's doable (e.g. put a wrapper on the right hand table only that has overflow:scroll)
No I'd not use position:fixed here, that sets something relative to the browser window, which is no good for users scrolling up and down.
have a look at this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
that's great to get your head around css positioning.
The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."
I am trying to make a user generated nav bar.
This nav bar because it is dynamically created may have more tabs on it than the width of the nav bar.
That being the case, I would like to make it so that the nav will scroll from left to right.
Currently I use an image mapping technique where I plot coordinates on an image and move divs based on position which calculates speed and direction of movement.
The problem is background images may not have image maps applied to them. The general workaround is to create invisible divs on top that would represent my coordinates, but since my text would be there, and I don't want to mess with a z-index at all, that option is deprecated.
Any ideas how to do this any other way?
Here it is.
http://valums.com/scroll-menu-jquery/