Is it possible to force opened jQuery Isotope divs to open above all the other ones forcing them down - so even if a box is at the bottom it will jump to the top once clicked on?
At the moment it looks quite random - some jump down a line, some move over to the right, etc. What I am trying to do is once a div is clicked on it jumps up to the top left and takes over the whole line while the other unclicked divs all jump down to the line below.
The jsFiddle link is http://jsfiddle.net/djsbaker/gPuD9/
You can use sorting and updateSortData to move the newly clicked item to the 'top' of the collection. This is the technique used for this demo: http://jsfiddle.net/desandro/S5vAG/2/light/
Related
I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".
When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.
However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?
Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.
(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)
The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.
Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:
The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.
Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.
To be clear, this is not highlighting in the sense of finding an element from the DOM Inspector to the page, or vice versa. It's behavior I haven't seen before, but then I usually use Chrome.
I'm debugging a textarea that won't accept clicks, or allow selection, or basically gain focus in any way. I noticed that clicking on the textarea, in the page, caused several DOM nodes in the Inspector to highlight, and then fade away after a second. None of the nodes that highlighted were the textarea; they were parents of the textarea, including the body, but not necessarily all of the parents in between the textarea and the body. There was also a sibling of one of the parents highlighted, as well.
It's one of those things where Firefox is trying to tell me something, but I don't know what. I feel like the answer to my original problem is probably contained in this highlight, if only I knew what it meant.
In the attached screenshot, you can see the textarea highlighted in blue, being the selected element, and the rather grossly-colored highlights on a few other elements; this was right after I clicked on the textarea (in the page, like I was trying to enter some text in it; not in the inspector)
What does it mean?
When the nodes in the markup view (the thing in your screenshot) highlights, it means that these nodes have gone through mutations. These can be of the following manner:
Attribute value change on the node
Addition/Removal of child nodes
Now, what you are actually looking a way to hover the textbox and get the markup view to select your textbox, right ?
You can do that in two ways:
Hit the shortcut Ctrl + Shift + C. You will see an overlay on the page which follows your mouse. Head over to text box and click it.
Click the "Pick an element from the page" button on top left corner of the developer tools and the same node-selector will appear.
For more and deep information : visit the MDN page : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
I have implemented a slickgrid and activated keyboard navigation.
When the users is scrolling down using the down-arrow key and reaches the last of the currently visible rows, the grid loads a whole new section of rows and places the selection at the top.
My user tests have all included a complaint about this behaviour as they all find the jump jarring.
I would like to implement behaviour, so the grid scrolls just one line at a time, when I press the down arrow while the last visible row is selected.
I was wondering if there might be some setting, I have overlooked, or if anyone has some suggestions for how to approach the task of adding this behaviour.
(the "problem" is the same, when you scroll upwards - only reversed of course)
This is controlled by the doPaging argument in scrollRowIntoView(row, doPaging) (https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L2662). There's no setting to control that behavior, but you could easily add one.
It was initially written this way to make keyboard navigation faster since continuously navigating down doesn't have to do as much work as it would have if we were updating the grid on every 'row down'.
We use Slickgrid and we have a minor issue when changing to the next page. The editor is active/visible. When the grid is loaded and all data is displayed, we click in e.g. the first row in the grid in order to activate the editor.
When we navigate down in the grid, when we press the down-key on the before-last row, like expected the new page loads data. When the data of the new page is displayed, the editor is not active on the first row, but when we press the down-key the editor becomes active/visible again on row 2.
Then when we press the up-key once, the editor is also active/visible on row 1. It's strange that the editor went off upon page-transition. Also when we press the up-key on the first row of the second page while the editor is visible, the previous page loads, but again the editor is no longer visible (on the last row of that page). But when we press the up-key once again the editor appears again on the before last row (without clicking the mouse).
We tried the normal editor instead of the custom editor but this didn't solve it.
What can be the cause of this or in which event/function etc. we should look? Can it be a missing javascript or css include? Viewport or pager or the data loader?
Fortunately the issue has been solved today.
The cause was that we called the SlickGrid function EditActiveCell before the data of the new page was loaded. When this was changed in order that EditActiveCell was called after the loading of the data, the grid behaved like expected.
I code this page, a tab with sliding capability : here
I really like the effect, but when you vien a long tab (let say specification), and we go to a smalll one (download) reclicking on a large one force the user to scroll down again...
Is it possible to jquery something that tell the page to stay scroll down at the max after the tab pressed ?
I'm doing something like this with the jQuery UI tabs, you can modify it for whatever layout:
//Tab panel height matching
$(".ui-tabs-panel").each(function() {
if ($(this).height() + 30 > $(this).parents(".subTabsC").height()) {
$(this).parents(".subTabsC").height($(this).height() + 30);
}
});
I have the whole tab content wrapped in a <div class="subTabsC">. The 30 pixels in my case is to account for the tabs and the border, adjust to whatever you need.
Yes. OnLoad you could iterate through all the tabs, find the tallest and set the container's height to that value and remove whatever's doing the smooth resizing.
It means some of the smaller things might look a little lost, but you'd not be resizing the page (which annoys me too).
couldn't you just add "return false" at the end of your function? this would prevent it from "refreshing" the page when you click the anchor link....I could be wrong...I'm just starting to learn jquery and javascript.