Real-time div post filter - wordpress

I am having a hard time finding an answer to this. How can I make a real-time post filter for a wordpress posts displaying div?
Like so
I want the blog to have a div that displays the posts, and the user to scroll for them, but to be a filter sort of search bar on top of it. So it's like a list filter.

Are you comfortable using jQuery? I've done something similar starting with a normal <select> box, then using the select2 jQuery library to transform it. The library has plenty of examples on its documentation page.

Related

Customizing product slider, WooCommerce

Iam somewhat of a newbie when it comes to wordpress. so bear with me.
ive been trying to make a simple slider that will display 3 catagories.
- books
- Boardgames
- office supplies
iam making it for someone who dosnt want a web store but just wanting it to display items in a meaningfull and dynamik way.
what ive tried is installing the WooCommerce plugin to make all my products and then installing the product slider by pickplugins.
I like the way it looks and i want to make two more. but i see no option to choose between different catagories in the slider options, so if i make 2 more sliders it will just display the same items (all of them).
the site is: http://nordborgboghandel.dk/
and the slider i want is something like there is on the frontpage.
anybody fixed a similar problem??
-Thanks!
Yes, I was once stuck into a same situation, in which we had to customize the slider. Basically you will have to play with the CSS and JS of the slider plugin which you have used to create the slider.
You can start of by having a look at the js and the css used by the slider. Refer the documentation of the slider if available, I am sure if they have any documentation you can have it customized easily by modifying some values in it. If not then you will have to check the JS code and try to hack it yourself to fit your needs.

Create Twitter List Widget

I can't code. How can I create a Twitter widget to show tweets from a Twitter list?
I want to use it on my blog. On the left side widget area of a static home page. Ideally I'd like more than just text. I'd like a bubble graphic around each tweet.
Also there's over 4k people on the list so it would be good to show only tweets that have been faved or RTed.
This is hoping for too much right? I'll settle for just a simple widget to start off with. Do you know of plug-ins that do that?
I believe the code for the widget should be just one line.
https://twitter.com/Dev_4iOS/lists/geeks-who-know-their-shit is the URL to the list. I tried creating an RSS feed but didn't figure it out.
Thanks.
Edit: I also want to add a subscribe button for the list.
Twitter offers a few pre-built widgets - the closest to what you want is the List widget. You're pretty limited in customizing its look/feel/functionality - chances are you're not going to get your bubble graphics or filter by stars.

AJAX Horizontal scrolling the page

I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!

Floatbox (lightbox) Gallery Order and Isotope

Although this question is specific to Floatbox (http://floatboxjs.com/demo), this issue would be generic to most image gallery light-boxes.
I need Floatbox to be able to show my image galleries per Isotope's reordering of page elements; e.g. div - thumbs. For what Isotope does please see http://isotope.metafizzy.co/demos/sorting.html .
The problem is that plugins, like Floatbox, get their page order of elements (thumbnails) off of the initial div's on the page. From what I can understand of Isotope, it doesn't actually rewrite the HTML to allow scripts like Floatbox to the read/parse the new order of displayed thumbnails.
I only have a very black box understanding of jQuery so I suppose I am asking if there is a way to rewrite the page such that scripts like Floatbox can then be called to parse them in Isotopes new 'displayed' order.
I have hunted everywhere for a solution, but I cannot even find much in the way of anyone asking this question. That seems odd as this affects everyone who uses a Masonry/Isotope and lightbox combo ~ being able to advance via a lightbox in the newly sorted order instead of the original page order.
For what it's worth, the site with the galleries I am working on is leo labelle dot com.
PS - I posted a similar question to the creator of Floatbox and unfortunately his best solution was to rewrite the pages in each possible order . . . yikes!!!!
Regardless of a solution - A huge thanks for any suggestions!

Wordpress slideshow plugin with scrollbar, autoplay and lightbox

I have been asked to build a portfolio website for a photographer. The main page contains a slideshow of the photographer's best work, I have used an autoplaying NextGEN SmoothGallery with Lytebox. After some customization of the plugin, this works.
However, the client has requested a category selection above the main slideshow and a scrollbar below the image. They also want part of the previous and next images to be visible, not just the image in focus. The image here illustrates what I mean.
I have searched and searched, but cannot find a plugin that would do this. Can anybody help, please?
The trouble is, I doubt there is a plugin around that would do this, and it's really not going to be a case of "here's the code to do that, just drop it in and you're flying".
If it were me, I'd probably write the whole thing myself, because if I'm honest, I've never used the NextGEN SmoothGallery plugin, and wouldn't want to root around all the code when I've got a simple idea myself;
A bit of PHP that outputs the list of categories, and then an unordered list of the X most recent items, one list for each category.
Then I'd use jQuery (and probably the jCarousel plugin) to create the slideshow for a single list, and add click handlers to the category links which simply 'swap in' the correct list into the current carousel.
Finish the whole thing off with some CSS.
Does any of that sound like something you'd be familiar with?

Resources