I'm trying to hide divs that are not shown on my page. I'm using infinite scroll and can't find a way to select what it is not shown on page.
E.x. Let's say that 8 card views are full shown in a loaded page, when infinite scroll loads 8 more and scroll down to first two you can see 8 in total. (6 from the first 8 group and 2 from the second 8 group. The first two card views should be hidden and the 4 last card views should also be hidden).
I tried using a library called virtual-scroller and didn't work. I then tried something with the scroll location but can't find to understand it.
Related
Trying to implement multiple thumbnail images carousel using flexslider. But not able create page count for the image carousel.
Like suppose if 12 items are there, I want to show 6 at a time which is considered as 1st page and the remaining in 2nd slide. It should show the page count 1 of 2 for 1st 6 images and 2 of 2 for next images. Based the number of images page count has to be implemented.
Attaching the link for reference:
http://flexslider.woothemes.com/thumbnail-slider.html
I am using flexslider for it. I referred the documentation, but not able to figure out the proper solution.
If anyone can come up with the solution it would be helpful.
Regards
I'm creating a single page web app using AngularJs and I am having trouble with showing information as if they were in different panels.
So basically each panel contains text and photos, basic information slides. I am currently showing and hiding these using a left and right arrow.
But when I go from one panel to the next, the next div is scrolled to the bottom of the div.
On the click of the next arrow, I also need the next div to be at the top no matter what.
Any help would be appreciated.
As #ferTo says, you should provide some code for us to comment on. Assuming you are using ui-router (which I have no idea in practise) then you will want to turn off autoscroll
<div ui-view autoscroll="false"></div>
Scenario
We have a website with a bunch of divs in them. divs aren't all the same size, but can only be 1 of 3 sizes. divs can be hidden and displayed by the click of a filter button. This hiding and showing is done with the MixItUp jQuery plugin. When all blocks are displayed, it looks like this:
Complication
There are two pages of these blocks. Pages can only be browsed if there is no filter selected. Let's say I select 'Filter 1', the filter 1 blocks show, and the rest hide, but now the blocks look like this (page 2 blocks in blue):
What I need
I need to have the blocks sort better. Like it's got to run down one side if needed, else as square as possible. In this case, the best solution would be to have it run down like so:
Is this at all possible with javascript/jquery/css? I also need to mention that this is a wordpress site built with a custom bootstrap 3 theme. So all this code is custom. I've tried CSS float to no luck. Any assistance with this would be appreciated.
My problem is, I got an horizontal slider with years inside so its like a timeline, the years are fetched by a query, at this moment, the user has to scroll by the years and then click one specific year and the information on the website will filter.
Is there a way to detect the year that is in the center of that horizontal slide? Maybe with a hidden area at the center?
maybe you should observe the scroll event of the slider element. you have to measure after each scroll process which element is inside of the visible slider area (I suppose others are hidden by overflow: scroll from the CSS, right?)...
you should use a small delay so that the function only triggers when the scrolling was really stopped and not constantly
as it is better to show that with actually working code... checkout my jsfiddle. It is at least working in Chrome but I suppose it will work in other browsers too... when you scroll through the year list and you stop for 50ms this list item that is visible in the visible area of the slider div is logged into with console.log into the JS console... hope that helps you =)
EDIT: had a small CSS error... fixed and URL updated
I am trying to create iPhone style folders in HTML using CSS with very little JavaScript if possible. You can find the screenshot here. http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/ Screenshot on that page shows 4 folders, System, Apps, Toolbox, and Dev. Clicking on Apps shows a slide out menu with apps. Is the same achievable with many folders? For example, say I have 10 divs floated left so that 4 fit in a row, giving me total of 3 rows. If a user clicks on the 2nd div, another div slides out pushes the 2nd and 3rd row down, creating a total of 4 rows?
Here is some code, I was playing with: http://jsfiddle.net/uAtak/.
Yes, it is doable. Unlike the example you referred, I would toggle between display :none and :block with animation when user clicks an icon. It will automatically push the other icons.
You mean like this?
http://jsfiddle.net/uAtak/5/
Only clicking on div 'One' works for this example, but as you can see it's pretty easy to extend.