CODEWITHSUNDEEP
csslayout
Mint
Mint

Reputation: 37

How to dynamically show number of products in a row according to browser size?

enter image description here

In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.

Anyone know what is this technology called? Any idea how this can be done? Thanks in advance.

Upvotes: 1

Views: 432

Answers (3)

Kushal
Kushal

Reputation: 3168

You can also use JQuery to moniter whether browser window is resized, through $(window).resize function. And you'll have to call details of the products shown either using Ajax or with iframe by reloading the page within iframe with more products.

The code to be written inside browser's resize method will be as follows.

 $(window).resize(function() {

      //Your code on resizing the browser.

 });

Upvotes: 0

balexandre
balexandre

Reputation: 75083

That is just CSS based.

An example of what you want to accomplish from a friend website redesign

shrink and wide the browser so you can see the effect

Upvotes: 0

Bazzz
Bazzz

Reputation: 26922

You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.

JSFiddle: http://jsfiddle.net/WLEzw/

Make your browser window bigger and smaller and you will see more and less pears.

Upvotes: 1

Related Questions