Forums

thierryeamon

Hi there!

I'm building my own wordpress template and basically what I want is the abbility to switch (back and forth) between two view modes on a category page without a refresh.

My own mockup:



<a href="#" rel="nofollow">show grid</a>
<a href="#" rel="nofollow">show list</a>

$(document).ready(function(){ 

	var viewType = grid or list; (this has to be declared by the links above)

	if (viewType == 'grid') {
		include the grid loop;
	}
        elseif (viewType == 'list') {
		include the list loop;
	}
	else {
		include the list loop;
	}

});

I hope it makes sense and someone can/ is willing to help me out..

Thierry

jamy_za

Hey Thierry,

PHP code is executed once a page is loaded, you're not going to be able to include php loops within javascript.

What you could do is execute both loops within the page. So the one list will be ontop of the other list. You could then wrap both lists in a div, for example:
HTML:

<a href="#" id="switch">Click here to switch between list and grid</a>
<div id="grid">
// grid wordpress loop here
</div>
<div id="list">
// list wordpress loop here
</div>

CSS:
#list{display: none;}
jQuery:

$(document).ready(function(){
	 $('#switch').click(function(){
	 	 $('#grid, #list').toggle();
	 });
});

By clicking on the anchor link, you will be hiding the grid and showing the list. When you click again, you will show the grid and hide the list - Which seems to be what you were looking for.

thierryeamon

ok.. I will definitely try this! what if i want two buttons.... the grid and list links separated?

i found a website that contains the same function I'm looking for at www.aisleone.net

Looking at the source they have used a different technique

gno

jama_za is spot on. That is the smartest way to do it.

Alternatively you could store it in two separate files, and load the content into your div on click on your anchor link. However, that would be less desireable.

The site you linked to refreshes the whole page when you change between the two views. At least here :-)

thierryeamon

I've tried jamy_za's code and is working like a charm.. Still have to implement into a wordpress theme ..

One last question, can I also use two links to toggle between the two? a "grid" link and a "list" link?

jamy_za

Yeah you can, that would be something like this:

<a href="#" id="toggle-grid" class="toggle">Toggle Grid</a>
<a href="#" id="toggle-list" class="toggle">Toggle List</a>
<div id="grid">
// grid wordpress loop here
</div>
<div id="list">
// list wordpress loop here
</div>

jQuery:

$(document).ready(function(){
	$('a.toggle').click(function(){
		$('#' + $(this).attr('id').substring(7)).toggle();
	});
});

jQuery explanation:
If you click an anchor link with the class of toggle, take it's ID, remove the first 7 characters (the first 7 are 'toggle-'). Toggle an ID of this new found value.

It could be more simple if you'd prefer:

$(document).ready(function(){
	$('#toggle-grid').click(function(){
		$('#grid').toggle();
	});
	$('#toggle-list').click(function(){
		$('#list').toggle();
	});
});

thierryeamon

ok that's not entirely what I ment... sure now I can toggle using two links but now I can also see them both, none or one of the two. So if I toggle the list div, I want the grid div to automatically hide (or vice versa).

If I do something like this, both links have the same functionality, that just doesn't make sense ;-)



$(document).ready(function(){
        $('#toggle-grid').click(function(){
                $('#grid').toggle();
                $('#list').toggle();
        });
        $('#toggle-list').click(function(){
                $('#list').toggle();
                $('#grid').toggle();
        });
});

jamy_za

$(document).ready(function(){
        $('#toggle-grid').click(function(){
                $('#grid').show();
                $('#list').hide();
        });
        $('#toggle-list').click(function(){
                $('#list').show();
                $('#grid').hide();
        });
});

thierryeamon

You're a lifesaver!!! Thanks!!!

stefanbar

Not sure why one would build the two loops upfront, its unnecessary bandwidth, the visitor might never switch between the two. The code below will only build the alt loop if required.

grid.php:

<?php
	echo "grid loop";
?>

list.php:


<?php
	echo "list loop";
?>

switcher.js:


$(document).ready(function(){
	$('#toggle-grid').click(function(){
		// hide both loops
		$(".view").hide();
		// check if loop aleady has been generated
		if ($("#grid").html() != "") {
			$("#grid").show();
		} else { // otherwise fetch loop
			$.get("grid.php", function(data) {
				$("#grid").html(data).show();
			});
		}
	});
    $('#toggle-list').click(function(){
		// hide both loops
		$(".view").hide();
		// check if loop aleady has been generated
		if ($("#list").html() != "") {
			$("#list").show();
		} else { // otherwise fetch loop
			$.get("list.php", function(data) {
				$("#list").html(data).show();
			});
		}
	});
});

jamy_za

Would that work if the php contains a wordpress loop though? Wouldn't it have problems as JS is client-side and PHP is server-side?

stefanbar

Yip it would work, the php code would execute on the server side before returning a result back to the js method. The js method will wait until something gets returned.

Been using this for quite sometime now with aspx generic handlers that return full html.

papajohn77

Very helpful post.
Would you possible know some relative module or plugin I could install to my site in order to enjoy this functionality? Thank you for your effort.

alphakurt

*deleted*

alphakurt

hi

im trying to implement the above and I managed to do everything as described (allthough im not at all technical)

im also trying to implement a product list and grid display switch on my site :
http://beta.prijsjagers.be/babyfoon~1044.htm#

the problem i have is that the code is not executing..

here is my current code

<script>                                 
$(document).ready(function(){ 
     $('#switch').click(function(){ 
             $('.Listinggridalt', '.Listinggrid').toggle(); 
     }); 
}); 
</script>          

<div class="DivTh" style="text-align:right; width:20%; float:left; height:25px;">&nbsp;&nbsp;<?=Weergave?></div>
<a href="#" id="switch">Click here to switch between list and grid</a>
                        <div class="Listinggrid">
                                <div class="ListingThumbnail">
                                        <?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
                                </div>
                                <div class="ListingRowRight">
                                        <div style="clear:both;"></div> 
                                 <div>
                                <div class="ListingRowRightLeftgrid">
                                        <a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
                                        <?php $pLink_Product = $pLink; ?>
                                        <br>
                                </div>
                                <div class="ListingRowRightRightgrid">

                                <font class="PLPrice">
                                        <?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
                                        <?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
                                </font>
                                <br><br>
                                <? getUserProductLink($pId, $storeCount, $pLink) ?>
                                <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+'<?=     $pLink?>'+'&t='+'<?=$pTitle?>'(t),'sharer','toolbar=0,status=0,width=20px,height=25px');return false;}</script>
                                <style> html .fb_share_link { display:block; padding:5px 5px 0 5px; height:25px; background:url("<?=SCRIPT_ROOT?>images/<?=$langFolder?>/facebook.png") no-repeat top left; height:25px; width:20px; float:center }</style>
                                <a rel="nofollow" href="http://www.facebook.com/share.php?u='+'<?=$pLink?>&quot; onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="<?="Deel dit product met je vrienden op facebook"?>" title="<?="Deel dit product met je vrienden op facebook"?>"></a>
                        </div>
                </div>
        </div>
</div>
<div class="Listinggridalt">

        <div class="ListingThumbnail">
                <?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
        </div>
        <div class="ListingRowRight">
                <div style="clear:both;"></div> 
         <div>
        <div class="ListingRowRightLeftgrid">
                <a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>

<?php
                $pLink_Product = $pLink;
                ?>
                <br>

        </div>
        <div class="ListingRowRightRightgrid">

                <font class="PLPrice">
                        <?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
                        <?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
                </font>
                <br><br>
                <? getUserProductLink($pId, $storeCount, $pLink) ?>
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+'<?=     $pLink?>'+'&t='+'<?=$pTitle?>'(t),'sharer','toolbar=0,status=0,width=20px,height=25px');return false;}</script>
        <style> html .fb_share_link { display:block; padding:5px 5px 0 5px; height:25px; background:url("<?=SCRIPT_ROOT?>images/<?=$langFolder?>/facebook.png") no-repeat top left; height:25px; width:20px; float:center }</style>
                <a rel="nofollow" href="http://www.facebook.com/share.php?u='+'<?=$pLink?>&quot; onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="<?="Deel dit product met je vrienden op facebook"?>" title="<?="Deel dit product met je vrienden op facebook"?>"></a>

jamy_za

@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

jamy_za

Ahh ok, this is actually very simple :)

You have a div:

<div class="PLBox">

Add an id to that, like:

<div id="list" class="PLBox">

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 )

<div id="list1" class="Listinggrid">
						
						<div class="ListingThumbnail">
							<?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
						</div>
						<div class="ListingRowRight">
							      <div style="clear:both;"></div> 
							<div>
								<div class="ListingRowRightLeftgrid">
									<a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
									
                                    <?php
									$pLink_Product = $pLink;
									?>
									<br>
                                                                                       
								</div>
								<div class="ListingRowRightRightgrid">
									
									<font class="PLPrice">
										<?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
										<?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
									</font>
									<br><br>
									<? getUserProductLink($pId, $storeCount, $pLink) ?>
                                    <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+'<?=	$pLink?>'+'&t='+'<?=$pTitle?>'(t),'sharer','toolbar=0,status=0,width=20px,height=25px');return false;}</script>
								<style> html .fb_share_link { display:block; padding:5px 5px 0 5px; height:25px; background:url("<?=SCRIPT_ROOT?>images/<?=$langFolder?>/facebook.png") no-repeat top left; height:25px; width:20px; float:left }</style>
									<a rel="nofollow" href="http://www.facebook.com/share.php?u='+'<?=$pLink?>&quot; onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="<?="Deel dit product met je vrienden op facebook"?>" title="<?="Deel dit product met je vrienden op facebook"?>"></a>

and

<div  id="list2" class="Listinggridalt">
						
						<div class="ListingThumbnail">
							<?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
						</div>
						<div class="ListingRowRight">
							      <div style="clear:both;"></div> 
							<div>
								<div class="ListingRowRightLeftgrid">
									<a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
									
                                    <?php
									$pLink_Product = $pLink;
									?>
									<br>
                                                                                       
								</div>
								<div class="ListingRowRightRightgrid">
									
									<font class="PLPrice">
										<?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
										<?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
									</font>
									<br><br>
									<? getUserProductLink($pId, $storeCount, $pLink) ?>
                                    <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+'<?=	$pLink?>'+'&t='+'<?=$pTitle?>'(t),'sharer','toolbar=0,status=0,width=20px,height=25px');return false;}</script>
								<style> html .fb_share_link { display:block; padding:5px 5px 0 5px; height:25px; background:url("<?=SCRIPT_ROOT?>images/<?=$langFolder?>/facebook.png") no-repeat top left; height:25px; width:20px; float:left }</style>
									<a rel="nofollow" href="http://www.facebook.com/share.php?u='+'<?=$pLink?>&quot; onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="<?="Deel dit product met je vrienden op facebook"?>" title="<?="Deel dit product met je vrienden op facebook"?>"></a>
                                    

                             
								</div>

and then changed the JS to:

  			   		<script>                                 
$(document).ready(function(){ 
     $('#switch').click(function(){ 
             $('.List1', '.List2').toggle(); 
     }); 
}); 
</script>

jamy_za

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 :


<div class="Listinggrid">
	<div class="ListingThumbnail">
	<div class="ListingRowRight">
		<div class="ListingRowRightLeftgrid">
		<div class="ListingRowRightRightgrid">

the same for the list display :


<div class="ListingRow">
	<div class="ListingHr"></div>
	<div class="ListingCheckbox">
	<div class="ListingThumbnail">
	<div class="ListingRowRight">
		<div class="ListingRowRightLeft">
<div class="ListingRowRightRight">

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

jamy_za

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

jamy_za

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

jamy_za

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

<html>
<head><title>Example</title></head>
<body>
<div class="Listinggrid">
        <div class="thumb"></div>
	<div class="thumb"></div>
	<div class="thumb"></div>
</div> <!-- End of .Listinggrid -->

<div class="ListingRow">
        <div class="thumb"></div>
	<div class="thumb"></div>
	<div class="thumb"></div>
</div> <!-- End of .Listinggrid -->
</body>
</html>

(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

jamy_za

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/

treehouse : what would you like to learn today?

Forums

[Solved] Jquery switch view modes without refresh