Adding elements (div) to Slider vertically (tiling them) - javascript

I'm looking for the some hacky way to add elements to slider vertically.
Here is the live demo on JSFiddle
I would like that next sibling after second will take a place below the first element and so on (tiling). Can't figure out what should I add/change.

Related

align the dropped divs in a container div

Description
I have a container div that has little divs with pictures on them..
what works perfect is when I click any one of them(div) it comes out and do stuff that is assigned to it.
Now I can drag any div I want back into the container but the problem is the div when dropped in the container stays at the place where it is left. I want to align all the divs in the container at the top when ever droped.
e.g when I drag any div back into the container it should be aligned with all other divs in the container.
What have I tried ?
I have tried to give the dropped div
position: inherit with jquery . but that only works if there is 1 div to drag and drop.
Have I searched StackOverflow form answers ??
Yes I have and I found a solution
found solution demo
but it involves the clonning of the divs which in my case is not required.
Can any one help me ??
Would it solve your problem if you add a "remove" line in your solution? E.g. :
$("#droppable").droppable({
drop:function(e,ui){
if($(ui.draggable).parent().attr("id")!=$(this).attr("id")){
var clone = $(ui.draggable).clone();
clone.removeAttr("style");
clone.appendTo($(this));
$(ui.draggable).remove(); // Remove original element
}
},
revert:true
});
Fiddle demo: http://jsfiddle.net/lparcerisa/xu2dm7gj/1/

How to manually scroll inside a scrollable container?

Let's say I have a list with elements
<ul>
<li>elem1</li>
<li>elem2</li>
<li>elem3</li>
<li>elem4</li>
</ul>
The ul have max-height, and vertical scrollbar. So I see only two first elements.
Now, I gonna walk through this elements using keyboard (for example by adding "selected" class for a selected element)
The question is: How to manually scroll down to elem3 using javascript / changing styles?
UPDATE
Solution: Jump to content inside of a scrollable div
You could try code like this :
$('div')[0].scrollTop = 100 // Scroll down by 100px;
Edit: Assuming you have wrapped your ul li content around a div.
JSFiddle here!

How to slide out old div and slide in new div with text content in loop?

How to make two divs so that after clicked button old div is slade out and new div with new content is slide in?
My conception but not aligned inline:
jsfiddle
I found something similar to my conception but for my solution I need infinity loop with dynamically added content: example 1 or example 2
There were a few changes I made to the existing code and CSS, but this should do what you want. I also added a check to the reset button to ensure that the slideOut is not already hidden. Otherwise, the animation will unhide the element and hide it again.
It is better to put things into the jQuery $(document).ready() function to ensure that all of your elements have been loaded before trying to use them.
New Fiddle Link

How to create a div that apears below a table row

Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?
went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example
You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.
That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/
I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for
If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.
You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/
As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.
I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...
You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!

animating div elements left to right and back

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/

Categories

Resources