Adobe Community: How do I insert a toggle inside a spry datset row

jtcarrasco Calculating status...

Currently Being Moderated

How do I insert a toggle inside a spry datset row

Feb 20, 2013 2:19 PM

Tags: #spry #xml #dataset #toggle

How do I insert a toggle inside a spry datset row

I'm using a spry dataset to view data off an .xml file for an online store. There's your basic stuff, picture link, headline, price, description, item number etc.

The description set can vary as descriptions do with different items I'd like to only show the first few lines (140 characters or something) of the description upon load and then allow the visitor to toggle open the rest of the description. Is there a way to do that? Here is the code I'm currently using, just your basic dreamweaver insert.

<div spry:region="catalog" class="SpotlightAndStacked">
<div spry:repeat="catalog" class="SpotlightAndStackedRow">
<div class="SpotlightContainer">
<div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title=" {Headline}"><img src="_images/catalog/thumbs/Art/{Thumbnail}"></a></div>
</div>
<div class="StackedContainer">
<div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> {Headline}</div>
<div class="StackedColumn"> {Complete_Description}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong></div>
</div>
<br style="clear:both; line-height: 0px" />
</div>
</div>
my friend gave me this code but doesn't seem to work:

<div spry:region="catalog" class="SpotlightAndStacked">
<div spry:repeat="catalog" class="SpotlightAndStackedRow">
<div class="SpotlightContainer">
<div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title=" {Headline}"><img src="_images/catalog/thumbs/Art/{Thumbnail}"></a></div>
</div>
<div class="StackedContainer">
<a href="#">Show Description</a>
<div class="StackedInner" style="display:none">
<div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> {Headline}</div>
<div class="StackedColumn"> {Complete_Description}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong> </div>
</div>
</div>
<br style="clear:both; line-height: 0px" />
</div>
</div>
jQuery

$(document).ready(function(){

$('.StackedContainer a').on('click',function(event){

event.preventDefault(); // prevent the link from any action

var thisBtn = $(this); // cache
thisBtn.parent().find('.StackedInner').toggle(); // toggle the description

}); // close on click
})

686 Views 10 Replies Latest reply: jtcarrasco, Feb 26, 2013 1:35 PM

Replies

Currently Being Moderated

1. Ben Pleysier,

Feb 20, 2013 4:11 PM in reply to jtcarrasco

Report

You could use a tooltip that shows the full description upon hover.
You could use a master/detail setup where when you click on the item in the left column, the description shows in a window in the right column.

For more personalised assistance, please supply the URL to your site.

|
Mark as:
Currently Being Moderated

2. jtcarrasco,

Feb 20, 2013 4:41 PM in reply to Ben Pleysier

Report

test site

http://hotrattz.com/max/catalog_art.php

|
Mark as:
Currently Being Moderated

3. Ben Pleysier,

Feb 20, 2013 5:35 PM in reply to jtcarrasco

Report

1. comment the spry region out (lines 72 to 87)
2. create a blank line 88 and leave the cursor there
3. in the bindings window, double click the catalog dataset
4. in the resulting pop-up window, choose next and next again
5. choose Insert master/detail layout and click on Set Up...
6. organise the columns to suit and click OK
7. save the document and view in your favourite browser.

You may need to use paging if the list becomes too long, but that is another subject.

If this is not what you want, there is always the option of using a tooltip. Please let me know

|
Mark as:
Currently Being Moderated

4. jtcarrasco,

Feb 21, 2013 1:21 PM in reply to Ben Pleysier

Report

Hi Gramps,

Not really what i'm trying to do I need to present the catalog as is, and just have a more text feature attached to the description of each item.

|
Mark as:
Currently Being Moderated

5. Ben Pleysier,

Feb 21, 2013 4:50 PM in reply to jtcarrasco

Report

Try the following
1. Create a function to truncate the description to 100 characters - adjust if desired
function TruncateDescription(region, lookupFunc) { return (lookupFunc("{Complete_Description}")).substring(0, 100); }

2. Modify the output for description as follows
<div class="StackedColumn"> {function::TruncateDescription} <a href="#">read more..</a></div>

|
Mark as:
Currently Being Moderated

6. jtcarrasco,

Feb 22, 2013 12:34 PM in reply to Ben Pleysier

Report

function TruncateDescription(region, lookupFunc) {

i'm getting this warning;

Dynamically-related files could not be resolved because of an internal server error

i'm using MAMP to test site is that's what's causing the error? Here is the code;

<!DOCTYPE html>
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta charset="UTF-8" />
<title>Max Rambod Inc. | Original Letters & Historical Documents</title>
<link href="_css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Marcellus|Prata' rel='stylesheet' type='text/css'>
<link href="_SpryAssets/SprySpotlightColumn.css" rel="stylesheet" type="text/css">
<script src="_SpryAssets/xpath.js" type="text/javascript"></script>
<script src="_SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<?php
function TruncateDescription(region, lookupFunc) {
return (lookupFunc("{Complete_Description}")).substring(0, 100);
}
?>

</head>

<body>
<div class="container">
<header>
    <h1>Max Rambod Inc.</h1>
    <br>
    <h5>Original Letters & Historical Documents</h5>
</header>
<img src="_images/main/headers/strip.jpg" width="100%" height="100px" alt="Max Rambod" />
<div id="navbar">
    <div id="search">
      <form id="cse-search-box" action="http://google.com/cse">
        <input type="hidden" name="cx" value="018187481825748556698:vij6y0tyqrq" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="15" />
        <input type="submit" name="sa" value="Search" />
      </form>
    </div>
    <ul>
      <li><a href="index.php">Home</a> </li>
      <li><a href="1about.php">About Us</a> </li>
      <li><a href="catalog_art.php">Inventory</a> </li>
      <li><a href="1catalog.php">Free Catalogue</a> </li>
      <li><a href="1faq.php">FAQ</a> </li>
      <li><a href="1contact.php">Contact</a></li>
    </ul>
</div>
<div class="sidebar1">
    <div class="kicker">
      <h3>Categories</h3>
    </div>
    <ul class="nav">
      <li><a href="catalog_art.php">Art</a> </li>
      <li><a href="catalog_aviation.php">Aviation</a> </li>
      <li><a href="catalog_business.php">Business</a> </li>
      <li><a href="catalog_cartoon.php">Cartoons</a> </li>
      <li><a href="catalog_civilwar.php">Civil War</a> </li>
      <li><a href="catalog_hollywood.php">Hollywood</a> </li>
      <li><a href="catalog_judaica.php">Judaica, Civil Rights, Misc.</a> </li>
      <li><a href="catalog_law.php">Law and Outlaws</a> </li>
      <li><a href="catalog_literature.php">Literature</a> </li>
      <li><a href="catalog_music.php">Music</a> </li>
      <li><a href="catalog_presidents.php">Presidents</a> </li>
      <li><a href="catalog_revolutionarywar.php">Revolutionary War</a> </li>
      <li><a href="catalog_royalty.php">Royalty</a> </li>
      <li><a href="catalog_science.php">Science</a> </li>
      <li><a href="catalog_space.php">Space</a> </li>
      <li><a href="catalog_sports.php">Sports</a> </li>
      <li><a href="catalog_wildwest.php">Wild West</a> </li>
      <li><a href="catalog_worldleaders.php">World Leaders</a> </li>
      <li><a href="catalog_worldwar2.php">World War II</a> </li>
    </ul>
    <div class="kicker"> <a href="http://stores.ebay.com/Max-Rambod-Historical-Documents?_rdc=1" target="_blank"> <img src="_images/main/ebaybutton.png" alt="Ebay" /> </a> </div>
    
</div>
<article class="content">
    <div class="pagetitle">
      <h2>Art</h2>
    </div>
    <div spry:region="catalog" class="SpotlightAndStacked">
      <div spry:repeat="catalog" class="SpotlightAndStackedRow">
        <div class="SpotlightContainer">
          <div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title="{Headline}"><img src="_images/catalog/thumbs/Art/th_{Picture_File}"></a></div>
        </div>
        <div class="StackedContainer">
          <div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div>
          <div class="StackedColumn"> <strong>{Headline}</strong></div>
          <div class="StackedColumn"> {Item_Code_Number}</div>
          <div class="StackedColumn"> {function::TruncateDescription} <a href="#">read more..</a></div>
          <div class="StackedColumn"> {Item_Code_Number}</div>
          <div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong></div>
        </div>
        <br style="clear:both; line-height: 0px" />
      </div>
    </div>
</article>

<footer>
    <div id='column1'>
      <h5>Max Rambod Inc.</h5>
      <br>
      <h5>Est. 1991</h5>
    </div>
    <div id='column2'>
      <ul>
        <li><a href="catalog_art.php">Seller Information</a> </li>
        <li><a href="1catalog.php">Terms and Conditions</a> </li>
        <li><a href="1faq.php">FAQ</a> </li>
        <li><a href="1contact.php">Contact</a></li>
      </ul>
    </div>
    <div id='column3'>
      <ul>
        <li><a href="1about.php">About Us</a> </li>
        <li><a href="1about.php">Lifetime Guarantee</a> </li>
        <li><a href="catalog_art.php">Inventory</a> </li>
        <li><a href="1catalog.php">Free Catalogue</a> </li>
      </ul>
    </div>
    <div id='column4'>
      <h3>13371 Mulholland Dr. Suite 425 Woodland Hills, CA 91364</h3>
      <h3>(818) 224-4555</h3>
    </div>
    <div id='footer'>Copyright © 2013 Max Rambod Inc. All Rights Reserved.</div>
</footer>
</div>
</body>

<script type="text/javascript">
var catalog = new Spry.Data.XMLDataSet("Rambod_catalog.xml", "FMPDSORESULT/ROW", {sortOnLoad: "Item_Last_Name", sortOrderOnLoad: "ascending"});
catalog.setColumnType("Item_Code_Number", "number");
function filterCat(dataSet, row, rowNumber)
          {
                    var x = "Art";
                    if (row["Category"] == x)
                              {
                              return row;
                              }
                    else
                              {
                              return null;
                              }
          };
catalog.filter(filterCat);
</script>
</html>

|
Mark as:
Currently Being Moderated

7. Ben Pleysier,

Feb 22, 2013 2:52 PM in reply to jtcarrasco

Report

<?php
function TruncateDescription(region, lookupFunc) {
return (lookupFunc("{Complete_Description}")).substring(0, 100);
}
?>
change to
<script>
function TruncateDescription(region, lookupFunc) {
return (lookupFunc("{Complete_Description}")).substring(0, 100);
}
</script>

|
Mark as:
Currently Being Moderated

8. jtcarrasco,

Feb 22, 2013 4:22 PM in reply to Ben Pleysier

Report

looks right but no functioning so weird

http://hotrattz.com/max/catalog_art.php

nothing expands

<div class="StackedColumn"> {function::TruncateDescription} <a href="#">read more..</a></div>
I tried switching the "#" to {Complete_Description} but that didn't help

So close, thanks gramps this is as close as i've been in a week or so.

|
Mark as:
Currently Being Moderated

9. Ben Pleysier,

Feb 22, 2013 7:01 PM in reply to jtcarrasco

Report

You can use the anchor element to connect to a pop-up window or open a new window, whichever you choose.

Another way is to use the SpryCollapsiblePanel widget by linking to the JS
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
Create a constructor for the group
<script>
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{ contentIsOpen:false} );
</script>
and place the stacked container in the CollapsiblePanelTab
<div spry:region="ds1">
<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
<div spry:repeat="ds1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
    {Item_Last_Name}, {Item_First_Name}<br>
    {Item_number}<br>
    {Retail_Price}<br>
    {Headline}<br>
    {function::TruncateDescription}
    </div>
    <div class="CollapsiblePanelContent">{Complete_Description}</div>
</div>
</div>
<script>
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{ contentIsOpen:false} );
</script>
</div> 
The above shows a rough interpretation of waht I mean. Note that the constructor must be within the Spry Region for it to work.

|
Mark as:
Currently Being Moderated

10. jtcarrasco,

Feb 26, 2013 1:35 PM in reply to Ben Pleysier

Report

really need to keep it in the item box the last option was so close!

|
Mark as: