Skip navigation
raenlonicera
Currently Being Moderated

How to move elements within the master region of a Master/Detail spry data set?

Jan 7, 2013 9:28 AM

Tags: #dreamweaver #spry_data_set #master/detail

Hi there,


I am unsure of how to move the different items within the master region of a master/detail spry dataset. The default style is such that if I include 3 or more elements e.g. Thumb, etc., they are stacked vertically :

ex1.png

How do I move them so that they can be positioned differently? The look I am going for is one where the thumb image is positioned to the left while the other items are stacked alongside it so that the end effect for the master region would look like this:

ex2.png

I greatly appreciate the help! Thanks!

 
Replies
  • Currently Being Moderated
    Jan 8, 2013 6:14 PM   in reply to raenlonicera

    I don't know if you have got your site on-line. If not, please try to do so even if it is just a temporary location.

     

    Then supply a link to the site.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 1:23 AM   in reply to raenlonicera

    This is the complete page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Check :: Fashion+Lifestyle</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    
    <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMasterDetail_final.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    var cal4 = new Spry.Data.HTMLDataSet("calendarList.html", "calendarList", {sortOnLoad: "When", sortOrderOnLoad: "ascending"});
    cal4.setColumnType("Thumb", "html");
    cal4.setColumnType("Picture", "html");
    cal4.setColumnType("When", "date");
    
    
    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    {
        Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    
    function closeAd() {
        document.getElementById('adRollover').style.visibility='hidden';    
    }
    function MM_effectBlind(targetElement, duration, from, to, toggle)
    {
        Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    function MM_effectSlide(targetElement, duration, from, to, toggle)
    {
        Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
    {
        Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
    }
    //-->
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="pageContainer">
        <div id="adBanners">
            <div id="halfBanner"><a href="#" onClick="document.getElementById('adRollover').style.visibility='visible';"><img src="images/banner_half_1.jpg" alt="Half Banner" width="237" height="90" /></a></div>
            
            <div id="leaderboardBanner"><a href="#"><img src="images/banner_leaderboard_1.jpg" width="728" height="90" alt="Leaderboard Banner" /></a></div>
            <div class="clearFloats"></div>
        </div><!--div#adBanners-->
        
        <div id="mainHeader">
            <div id="homepageLink"><a href="index.html"><img src="images/spacer.gif" width="400" height="100" /></a></div>
            <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a href="feature.html">FEATURES</a></li>
                <li><a href="#">FASHION</a></li>
                <li><a href="calendar.html" class="on">CALENDAR</a></li>
                <li><a href="#">VIDEO</a></li>
                <li><a href="blog.html">BLOG</a></li>
            </ul>
        </div><!--div#mainHeader-->
        
        <div class="MasterDetail">
          <div class="DetailContainer" id="event" spry:detailregion="cal4">
            <div class="DetailPicture">{Picture}</div>
            <div class="DetailColumn DetailTitle">{What}</div>
            <div class="DetailColumn"><div class="DetailLabel">WHEN:</div> {When}
            </div>
            <div class="DetailColumn"><div class="DetailLabel">WHERE:</div> {Where}
            </div>
            <div class="DetailColumn">{Details}</div>
          </div>
          <div id="calHeader"><p><img src="images/calendar_hdr.gif" width="492" height="100" /></p></div>
          <div spry:region="cal4" class="MasterContainer" onclick="MM_effectAppearFade(this, 1000, 0, 100, false); MM_effectBlind('event', 1000, '0%', '100%', false);">
            <div class="MasterColumn" spry:repeat="cal4" spry:setrow="cal4" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><div class="MasterColumnPicture">{Thumb}</div>
              <div class="MasterColumnTitle">{What}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHEN:</div> {When}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHERE:</div> {Where}</div>
              <div style="clear:both"></div>
            </div>
          </div>
          <br style="clear:both" />
        </div>
            
    </div><!--div#pageContainer-->
    
    <div id="footer">
        <div class="text">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. &copy; 2008 Adobe All rights reserved. The material on this site may not be reproduced, distributed, transmitted, cached, or otherwise used, except with the prior written permission of Adobe is a trademark owned by Adobe.</div>
    </div><!--div#footer-->
    
    <div id="adRollover" style="visibility: hidden;">
    
    <script language="javascript">
        if (AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
        } else {
            AC_FL_RunContent(
                'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
                'width', '536',
                'height', '479',
                'src', 'watch_ad',
                'quality', 'high',
                'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                'align', 'middle',
                'play', 'true',
                'loop', 'true',
                'scale', 'showall',
                'wmode', 'transparent',
                'devicefont', 'false',
                'id', 'watch_ad',
                'bgcolor', '#ffffff',
                'name', 'watch_ad',
                'menu', 'true',
                'allowFullScreen', 'false',
                'allowScriptAccess','sameDomain',
                'movie', 'watch_ad',
                'salign', ''
                ); //end AC code
        }
    </script>
    <noscript>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="536" height="479" id="watch_ad" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="watch_ad.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="transparent" /><embed src="watch_ad.swf" quality="high" bgcolor="#ffffff" width="536" height="479" name="watch_ad" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </noscript>
    
    </div>
    
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 6:25 AM   in reply to raenlonicera

    Display is controlled by the SpryMasterDetail.css file in the SpryAssets folder.

     

    To reverse the position of the thumbs/text and the large image, change

     

    THIS

     

    .MasterDetail .DetailContainer {

        float: left;

        overflow: auto;

        padding: 0;

        width: 472px;

    }

     

    TO

     

    .MasterDetail .DetailContainer {

        float: right;

        overflow: auto;

        padding: 0;

        width: 472px;

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 11:08 AM   in reply to raenlonicera

     

    Sorry, but I do not grasp your layout objectives as written.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 1:13 PM   in reply to raenlonicera

    From the full page code that I gave above, I have now extracted just the master/detail bit.

       

        <div class="MasterDetail">
          <div class="DetailContainer" id="event" spry:detailregion="cal4">
            <div class="DetailPicture">{Picture}</div>
            <div class="DetailColumn DetailTitle">{What}</div>
            <div class="DetailColumn"><div class="DetailLabel">WHEN:</div> {When}
            </div>
            <div class="DetailColumn"><div class="DetailLabel">WHERE:</div> {Where}
            </div>
            <div class="DetailColumn">{Details}</div>
          </div>
          <div id="calHeader"><p><img src="images/calendar_hdr.gif" width="492" height="100" /></p></div>
          <div spry:region="cal4" class="MasterContainer" onclick="MM_effectAppearFade(this, 1000, 0, 100, false); MM_effectBlind('event', 1000, '0%', '100%', false);">
            <div class="MasterColumn" spry:repeat="cal4" spry:setrow="cal4" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><div class="MasterColumnPicture">{Thumb}</div>
              <div class="MasterColumnTitle">{What}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHEN:</div> {When}</div>
              <div class="MasterColumnText"><div class="DetailLabel">WHERE:</div> {Where}</div>
              <div style="clear:both"></div>
            </div>
          </div>
          <br style="clear:both" />
        </div>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points