[Solved] Jquery switch view modes without refresh

[jamygolden]

@alphakurt You’re saying that you are doing the same thing, but your HTML/PHP doesn’t seem like it. Explain to me exactly what you are trying to do. If you’re trying to refresh a product list, there must be a .php file somewhere which contains that list.

[alphakurt]

I have a product list, displayed here : http://beta.prijsjagers.be/babyfoon~1044.htm#

currently it is displayed in a grid, I would like to have link / button to let a user switch between e grid and a list display..

I have the css for the grid and the css for the list.. but im unable to switch between one and the other

[jamygolden]

Ahh ok, this is actually very simple :)

You have a div:

Add an id to that, like:

Then make the list styling dependent on the id #list

Then all we need to do is toggle that ID on the div when the button is clicked. Am I making sense?

[alphakurt]

im sorry I completely dont understand .

I tried to change the code ..but nothing happens.

I have changed the following ( I didnt use pl box as this is to define the big square in which products are displayed )

" class="linkLarge" title="">




$pLink_Product = $pLink;

?>






























" onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="" title="">

and

" class="linkLarge" title="">




$pLink_Product = $pLink;

?>






























" onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="" title="">

and then changed the JS to:

[jamygolden]

Have a look at this: http://jsfiddle.net/mgNQy/

You can use the same concept.

[alphakurt]

i already looked at this.. but I have no clue how to integrate the DIV classes into the li arguments..

:(

to summarize

I have a div called <div class=”PLBox”>

in this class I have several nested div’s for the grid display :

the same for the list display :

I want to be able to switch these two blocks of nested divs

[jamygolden]

Can’t you do something like this: http://jsfiddle.net/mgNQy/1/ ?
I’m really not understanding what the problem is. Aren’t you able to edit the HTML?

[alphakurt]

see my earlier post.. im not working with a list.. im using nested divs to display the products.. see code I posted

[jamygolden]

Does it make a differenece whether it’s a list or not? Basically all elements are the same thing with different names. Your site crashed my browser twice lol (After opening web-inspector)

Your Row nests start with “ListingRow” and list nests start with “Listinggrid”. So you can do the same thing as in example #2.

[alphakurt]

i tried to do that. but its not doing anything… what example are you referring to?

I guess I need a line by line explanation… :(

thanks already for the time you spend on this

[jamygolden]

Np. Haha ok cool. Let’s make this very simple. A simplified example of your grids and rows is as follows:

(one of the listings is currently hidden via CSS though)
So very very basically, that’s what your page looks like, right?

[alphakurt]

yep this is more or less it.. and one is hidden because you explained this in your first example

[jamygolden]

http://jsfiddle.net/mgNQy/2/

All I have done to that (which is different from the simplified version above) is added “parent-list” on each of those lists.

[jetk001]

I was wondering even though this site is done in flash I am looking for another way preferably with css, java or jquery to create this sort of a menu.. what do you think guys can this be done with css or does it need to be done in flash only? here is the subject site. http://aerostudios.com/

[Author]

Posts