I am having 100 list which can be open one at a time, and each list contains dynamic length of data. If I click on list 1 it expands and all the list go down and when I click on close list 1 it return to it's own state and rest of the list come up. The problem occurs when I open list1 and then scroll down to list2 and try to open it. In this case list - 1 will auto close and list2 open but page position varies if list1 is having high height and list2 is low height. I was trying to scroll on to clicked item by using this code
window.scrollTo(e.screenX,e.screenY);
here is a link demo what i try to achieve Link
https://jsfiddle.net/69z2wepo/280996/
but it's not working well for last element as x and y contain view port distances. if anyone know how to solve this please help, any useful suggestion is appreciated.
Related
This is the Example UI.
So, the results I want:
Accordion (expand/collapse) blue circled sections, and level 1 (##level1) to be the title and closed all the time when we scroll down or click on, it should expand and get active on whatever line we are.
And when we scroll, it should inactive state as usual, but when we come to the 2nd section, the first stay there and 2nd expands auto and that happens to that too.
Also, I want the content to be shown only for the expanded section when we go at the end, there should be previous and next section title and link. which will lead us to that, but the page should stay the same.
This is on the roadmap for implementation as part of the brand new Material for MkDocs Insiders: https://squidfunk.github.io/mkdocs-material/insiders/#prairie-fire
I have a PHP script that gets data from a database and displays it in a 2 column table. I have a hide/show for each of the results, which extends down, pushing any options below it down too when clicked.
However the results in the column on the other-side also move down.
How do I make it so only the column with the clicked hide/show opens and moves down?
Below is the code I am using to show the hide/show; I thought by adding a .closest('td') may help, but all it does is open the corresponding left or right hide/show div!
$(document).ready(function(){
$(".reveal-arrow").click(function(){
$(this).parents('.template-container').find('.reveal-container').slideToggle();
$(this).toggleClass('flip');
});
});
Update: I have made a simplified fiddle of whats happening here: https://jsfiddle.net/r1bf4odx/18/
As you can see if you click the down arrow on BOX1 it 1 opens down, however BOX 2 also moves down. How do I stop Box 2 moving and stay where it is! Thanks again!
Please bear in mind that I am getting many results from a database!
The issue is that you are using a table, and the default alignment for a table is baseline / middle (see here (SO) for more info).
You can add
td { vertical-align: top; }
to fix the moving boxes
Updated fiddle: https://jsfiddle.net/r1bf4odx/21/
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
I am using a div container as a window to slide a list of horizontal li items in and out of view using jquery.
This is what I have so far:
http://jsfiddle.net/TX5fJ/5/
It initializes a list of 8 items and allows you to scroll them left and right within the div window. It also has functions for adding an item to the end of the list and removing an item from the beginning of the list.
What I am trying to do:
1) Add an item to the end of the list (item not visible)
2) Scroll the list to the left to make the item just added visible (first item moves out of view)
3) Remove the item from the head of the list (no longer needed)
The problem is that removing the first item causes the whole list to shift to the left.
If I don't remove the first item it seems to work. (see my test function)
My concerns with that solution is that the ul will have to be wide enough to hold all the potential items. If I don't give it a fixed width it does not work.
So i guess I could make it 99999px wide, and use the current method in the test button.
Anyone have a ideas on a better implementation then the current?
Thanks.
You could simply reset the margin-left property of your list after you have removed the list-item from the head:
function RemoveItem() {
$('#slider-items li').first().remove();
$('#slider-items').css('marginLeft', 0);
}
Updated fiddle.
I'm currently working on a personal website where I have a lot of expandable items on my page. When an item is expanded I want to set the page scroll limit to the height of the expanded item, I don't want the user to scroll above or below the expanded item. I already tried scroll(0, yPosition) if the current scroll position is above or below the item, but that gives a very stuttering result... Does anybody have any suggestions on how to do this?
Thanks in advance!
You could hide all the previous content of your page, when an item is expanded, and when it is supressed, set the content visible again.