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!
Related
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
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/
I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.
This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.
I have a container div, and numerous elements inside of it (i.e. spans, img, divs, etc).
I would like the container div to scroll naturally if its content becomes too large. However, there is ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large.
Not even sure if this is possible.
Thanks in advance!
PS. No jQuery please! :)
Lets say this "ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large." is div#inner. You can set a max-width or max-height to it and make it overflow:hidden so once it reaches the max size, it will stop growing and hide the overflowing inner content.
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/