Products fade in/appear on scrolling down page - javascript

Does anyone have any idea how to achieve this? On our site we prefer not to have pagination and have all products on one page, however we have seen it done on other sites where as you scroll, the products appear into view.
This is an example of our site in a category with a lot of products: http://goo.gl/OiHIFO
If someone could help/advise or offer a link to something which will achieve this for us i'd appreciate it.

The way you could do it is using similar methods to pagination where you load the first 50 but when you get to almost the bottom it would then make an ajax call and pull the next 50.
Those next 50 would then be appended to the results or faded in using jQuery.
Its better to load the content as you need it rather than loading everything at once but only displaying the actual product when you scroll to it

Related

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

Site Scraping for JavaScript rendered site

I'm trying to get the part numbers of which items go in their respective categories from http://www.dynacorn.com/ListItems.aspx but, for me at least, the catch is that the pages are paginated and therefore I cannot figure out how to move on to the next page. I've been reading about JSoup but am unsure of how to implement this. Can someone show me an example of how I could go from page to page when scraping?
Thanks!

Something better than <body onload="javascript:showHide()">

Guys I was wonder if I am doing something in an inefficient manner. Currently I am doing a
<body onload='javascript: showHide(...etc..)'>. In the JS function I basically hide elements based on class name I gave them. But I have realized when I visit my website, just for just a short moment the elements that the JS showHide() function is intended to hide appear until the body of the page completely loads. Hopefully for my first website, intended to include in my resume, will not cost me that possible job opportunity.However, is there a better way to do what I am doing? I mean, I could just create completely dedicated pages for logged in users that are identical to the pages that non-subscribed users can view except for a few different elements; such as, links to view their account info, shopping cart, a log out link/icon, and a "logged in as: user name" display. But I thought that would be too many web pages. Anyway thanks guys for any help.
Did you think of doing it the other way around? Hide elements first and then show elements based on a class name? This way, the elements will be hidden until the body of the page is loaded.

Fetching product details on mouseover

I want to integrate a function into my website, whereby if a user hovers their mouse on the name of a product, a box appears which will show the details of this product. For this I would preferably like to use either CSS or Javascript, I am not really sure how I would go about doing this though. Can anyone offer me some guidance please? I am currently using the JQuery UI with essentially the same code as the shopping cart code seen here :
http://jqueryui.com/demos/droppable/#shopping-cart
Thnk you very much for the help.
If you want to be fancy and use jquery, here is a list of popup plugins that you can browse.
If the product information isn't too complicated I would suggest using CSS as it is simpler. Also, you probably want to have the data already loaded, so the user doesn't have to wait a round trip to your server every time they mouse over a product. Here is a simple CSS popup tutorial.

How To Display List of Sites One At A Time

I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.

Categories