CodingForums.com - View Single Post - Swapping out only a section of home page...

sunfighter · 02-03-2013, 06:53 PM

I am thinking your %%what ever %% fills in a divs for it in the html. If wrong don't know what to say.

Anyway if that is true you just have to control which one is displayed. Here is a way of doing that.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript">
function ControlTabs(segTab){
	document.getElementById('HomeFeaturedProducts').style.display = "none";
	document.getElementById('HomeNewProducts').style.display = "none";
	document.getElementById('HomeSaleProducts').style.display = "none";
	document.getElementById(segTab).style.display = "block";
}
</script>
<style type="text/css">

li{
	list-style: none;
	display:inline;
	float:left;
}
#HomeFeaturedProducts{
	display:block;
}
#HomeNewProducts{
	display:none;
}
#HomeSaleProducts{
	display:none;
}
</style>
</head>

<body>
<div class="blocktwo" style="display:">
<div class="hometabs">
	<button type="button" onclick="ControlTabs('HomeFeaturedProducts');">FEATURED PRODUCTS</button>
	<button type="button" onclick="ControlTabs('HomeSaleProducts');">ON SALE</button>
	<button type="button" onclick="ControlTabs('HomeNewProducts');">NEW PRODUCTS</button>
</div>

<div class="Block FeaturedProducts Moveable Panel"  id="HomeFeaturedProducts">
<h2>Featured Products</h2>

<div class="BlockContent">
<ul class="ProductList">
<li class="Odd">
	<div class="ProductImage QuickView" data-product="32">
	<a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$499.00</div>
	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
	</div>
	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
	</div>
</li>

<li class="Even">
	<div class="ProductImage QuickView" data-product="29">
	<a href="http://www.mixnob.com/waves-redd/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/29/images/116/plugin17__06517.1357605367.220.220.jpg" alt="Waves REDD" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/waves-redd/">Waves REDD</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$249.00</div>
	<span class="Rating Rating4"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating4.gif" alt=""  style="" /></span>
	</div>

	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>


	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=29">Add To Cart</a>
	</div>
</li>

<li class="Odd">
	<div class="ProductImage QuickView" data-product="31">
	<a href="http://www.mixnob.com/waves-mercury-native-bundle/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/31/images/131/mernat_49e0c004d041dff65673b25769a795ef__92907.1358484498.220.220.jpg" alt="Waves Mercury Native Bundle" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/waves-mercury-native-bundle/">Waves Mercury Native Bundle</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$2,799.00</div>
	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
	</div>

	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>


	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=31">Add To Cart</a>
	</div>
</li>

<li class="Even">
	<div class="ProductImage QuickView" data-product="33">
	<a href="http://www.mixnob.com/izotope-stutter-edit/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$499.00</div>
	<span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
	</div>
	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
	</div>
</li>
</ul>
<br class="Clear" />
</div>
</div>

<div class="Block SaleProducts Moveable Panel"  id="HomeSaleProducts">
<h2>Products On Sale</h2>
<div class="BlockContent">
<ul class="ProductList">
<li class="Odd">
	<div class="ProductImage">
	<a href="http://www.mixnob.com/waves-element-synthesis/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/30/images/122/element_body__38211.1357606943.220.220.png" alt="Waves Element Synthesis" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/waves-element-synthesis/">Waves Element Synthesis</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured"><span class="SalePrice">$149.99</span></div>
	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt="" style="" /></span>
	</div>
	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=30">Add To Cart</a>
	</div>
</li>

<li class="Even">
	<div class="ProductImage QuickView" data-product="29">
	<a href="http://www.mixnob.com/waves-redd/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/29/images/116/plugin17__06517.1357605367.220.220.jpg" alt="Waves REDD" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/waves-redd/">Waves REDD</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$249.00</div>
	<span class="Rating Rating4"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating4.gif" alt=""  style="" /></span>
	</div>

	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>


	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=29">Add To Cart</a>
	</div>
</li>

<li class="Odd">
<div class="ProductImage QuickView" data-product="33">
<a href="http://www.mixnob.com/izotope-stutter-edit/">
<img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
</div>
<div class="ProductDetails">
<strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
</div>
<div class="ProductPriceFeatured">
<div class="ProductPriceFeatured">$499.00</div>
<span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
</div>
<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
<div class="ProductActionAdd" style="display:;">
<a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
</div>
</li>

<li class="Odd">
	<div class="ProductImage QuickView" data-product="32">
	<a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
	</div>
	<div class="ProductDetails">
	<strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
	</div>
	<div class="ProductPriceFeatured">
	<div class="ProductPriceFeatured">$499.00</div>
	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
	</div>

	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>


	<div class="ProductActionAdd" style="display:;">
	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
	</div>
</li>

</ul>
</div>
<br class="Clear" />
</div>

<div class="Block NewProducts Moveable Panel" id="HomeNewProducts" style="display:">
<h2>New Products</h2>
<div class="BlockContent">
<ul class="ProductList">
<li class="Odd">
<div class="ProductImage QuickView" data-product="33">
<a href="http://www.mixnob.com/izotope-stutter-edit/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
</div>
<div class="ProductDetails">
<strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
</div>
<div class="ProductPriceFeatured">
<div class="ProductPriceFeatured">$499.00</div>
<span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
</div>
<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
<div class="ProductActionAdd" style="display:;">
<a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
</div>
</li>							<li class="Even">
<div class="ProductImage QuickView" data-product="32">
<a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
</div>
<div class="ProductDetails">
<strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
</div>
<div class="ProductPriceFeatured">
<div class="ProductPriceFeatured">$499.00</div>
<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
</div>
<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
<div class="ProductActionAdd" style="display:;">
<a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
</div>
</li>							<li class="Odd">
<div class="ProductImage QuickView" data-product="31">
<a href="http://www.mixnob.com/waves-mercury-native-bundle/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/31/images/131/mernat_49e0c004d041dff65673b25769a795ef__92907.1358484498.220.220.jpg" alt="Waves Mercury Native Bundle" /></a>
</div>
<div class="ProductDetails">
<strong><a href="http://www.mixnob.com/waves-mercury-native-bundle/">Waves Mercury Native Bundle</a></strong>
</div>
<div class="ProductPriceFeatured">
<div class="ProductPriceFeatured">$2,799.00</div>
<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
</div>
<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
<div class="ProductActionAdd" style="display:;">
<a href="http://mixnob.com/cart.php?action=add&amp;product_id=31">Add To Cart</a>
</div>
</li>							<li class="Even">
<div class="ProductImage QuickView" data-product="30">
<a href="http://www.mixnob.com/waves-element-synthesis/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/30/images/122/element_body__38211.1357606943.220.220.png" alt="Waves Element Synthesis" /></a>
</div>
<div class="ProductDetails">
<strong><a href="http://www.mixnob.com/waves-element-synthesis/">Waves Element Synthesis</a></strong>
</div>
<div class="ProductPriceFeatured">
<div class="ProductPriceFeatured"><span class="SalePrice">$149.99</span></div>
<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
</div>
<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
<div class="ProductActionAdd" style="display:;">
<a href="http://mixnob.com/cart.php?action=add&amp;product_id=30">Add To Cart</a>
</div>
</li>
</ul>
<br class="Clear" />
</div>
<br class="Clear" />
</div>
</div>
</body>
</html>