-
1. Re: Linking to a Spry Data Set Entry
Ben Pleysier Oct 4, 2010 8:41 AM (in response to zevendesign)It is very difficult to grasp what it is that you want. The best way is for you to supply an online URL so that we can see for ourselves.
-
2. Re: Linking to a Spry Data Set Entry
zevendesign Oct 4, 2010 10:11 AM (in response to Ben Pleysier)Right, here is a URL to the test page. You will see a listing of massages. As you push the buttons, the information is shown on the right. There are three buttons along the top which highlight massage types. I would like for these, when pushed, to pull up the detail information for that massage type (in the lower section of the site). Let me know if that makes sense.
http://www.viidesign.comoj.com/test.html
Thanks.
-
3. Re: Linking to a Spry Data Set Entry
Ben Pleysier Oct 4, 2010 7:26 PM (in response to zevendesign)First off, welcome to our world. Spry is a very easy framework to learn.
The information for your dataset comes from a table in massage_list.html. Because you do not use this table for display purposes, it is best to keep it down to basics, ie. no formatting and other HTML code to be included.
My proposal for massage_list.html
- Leave the BUTTON column as is (maybe rename to MESSAGE TYPE or similar)
- Use the HEADER column for your image source eg. images/pregnancy-massage-ad.png (rename column to reflect content)
- There is no need for MAIN_IMAGE, this only uses more resources
- Leave DESCRIPTION as is
Once you have done that, change your master/detail area to the following
<div class="MasterDetail">
<div spry:region="dsMassages2" class="MasterContainer" id="main_navbar">
<div class="MasterColumn" spry:repeat="dsMassages2" spry:setrow="dsMassages2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{BUTTON}</div>
</div>
<div spry:detailregion="dsMassages2" class="DetailContainer" id="subject_box">
<div class="DetailColumn"><h2>{BUTTON}</h2</div>
<div class="DetailColumn"><img src="{HEADER}" width="587" height="391" alt="{BUTTON}" /></div>
<div class="DetailColumn">{DESCRIPTION}</div>
</div>
<br style="clear:both" />
</div>The above is very similar to what you aleady have. The changes have been highlighted. Note I have used HEADER, but this would be better represented with a change of title as proposed earlier.
For the region above the master/detail use the following markup
<div id="content_box">
<div spry:region="dsMassages2" id="ad_box">
<div spry:repeat="dsMassages2">
<span spry:if="'{BUTTON}'=='SWEDISH MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
<span spry:if="'{BUTTON}'=='NATURAL LIFT FACE MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
<span spry:if="'{BUTTON}'=='PREGNANCY MASSAGE'" spry:setrow="dsMassages2" spry:hover="MainImageHover" spry:select="MasterColumnSelected"><img src="{HEADER}" width="317" height="237" alt="{BUTTON}" /></span>
</div>
</div>I have merely presented the markup, thus styling has not been included in any of this. Styling is best done using CSS, so in this case you will put your image hover effect in the MainImageHover class.
I hope this helps.
-
4. Re: Linking to a Spry Data Set Entry
zevendesign Oct 5, 2010 2:53 AM (in response to Ben Pleysier)Hi and thanks for your answer. I looked at all this and it seems this is setting up a second spry region, referencing the same database. This, I guess, would be one solution although I am not entirely sure how I would retain the hover effect I have it on right now. However, I think (hope) there is something more simple. A better example might be the "CONTACT" in the top left of the banner. I want this to link to the contact form in the spry data set. Is there a way to tell a link to go to a data set with a certain row of info displayed?
Thanks.
-
5. Re: Linking to a Spry Data Set Entry
zevendesign Oct 5, 2010 4:10 AM (in response to zevendesign)What I am hoping for is a simple <a onclick=go to spry:region "dsMassages2" and show panel "CONTACT US">CONTACT<3> but with proper coding...
-
6. Re: Linking to a Spry Data Set Entry
Ben Pleysier Oct 6, 2010 1:51 AM (in response to zevendesign)I looked at all this and it seems this is setting up a second spry region, referencing the same database.
Correct
This, I guess, would be one solution although I am not entirely sure how I would retain the hover effect I have it on right now.
In my previous post I explained how to do that
However, I think (hope) there is something more simple.
Good luck with that
A better example might be the "CONTACT" in the top left of the banner. I want this to link to the contact form in the spry data set.
Personally I would go about this in exactly the same manner as with the boxes but without the images
Is there a way to tell a link to go to a data set with a certain row of info displayed?
Yes, have a look here http://labs.adobe.com/technologies/spry/samples/data_region/DataWithURLParams.html
-
7. Re: Linking to a Spry Data Set Entry
zevendesign Oct 6, 2010 7:23 AM (in response to Ben Pleysier)Thanks and apologies if I am being daft.
The link you sent me to seems to be exactly what I am looking for except that I can't seem to implement it.
I've updated my test site, the link is here:
http://www.viidesign.comoj.com/test.html
I've coded the "CONTACT" button and the Pregnancy Ad button, however both don't work. Could you take a look at the code and see what I am doing wrong? It seems to me that I am following the documentation...
I also seemed to have introduced a new problem--when the page loads, the INTRODUCTION text isn't showing up. It defaults to having nothing selected, which is not very user friendly.
Thanks.
-
8. Re: Linking to a Spry Data Set Entry
Ben Pleysier Oct 6, 2010 8:04 AM (in response to zevendesign)When I type http://www.viidesign.comoj.com/test.html?row=6 into the address bar I get the contact form.
The link should therefore read
<li><a href="<li><a href="test.html?row=6">CONTACT</a></li>
To go to the Pregnancy Message the link should be "test.html?row=3"
To default to the INTRODUCTION add the following
dsMassages2.addObserver({ onPostLoad: function(ds, type) { dsMassages2.setCurrentRow(params.row ? params.row : 0); }});
The additional markup says that if there is no params then set the current row to 0.
In all of this, you will notice that there is a page refresh every time that the link is followed, which doesn't matter if you are OK with this. In my original solution, there is no page refresh, only the content changes.
-
9. Re: Linking to a Spry Data Set Entry
zevendesign Oct 6, 2010 5:19 PM (in response to Ben Pleysier)Thanks a lot! That did it (and I feel stupid now that I didn't notice it myself).
Reloading the page isn't really a problem, although I did try to do it how you said in your first post and ran into a few problems. I'll lay them out here as you probably know the solution for them and it would be good for me to know it in the future:
a) The ad images aren't the same as the main image and thus trying to load them from the html source file (massage_list.html) wasn't working.
b) The ad images have a roll-over effect that I am not sure how to do with CSS styling. I know how to set the background with CSS, but each ad image is different, which is where I run into a problem.
c) The third ad box links to a different page in the site.
d) Lastly, when I changed the HTML to match your post, it broke the structure of the site (although as I'm writing this, I think the problem is that I didn't rewrite the CSS accordingly).
All in all, the last solution you provided did what I originally wanted--so THANKS AGAIN!
This is the first site I've put together so I'm still on the learning curve, but you're help has been awesome.
-
10. Re: Linking to a Spry Data Set Entry
Ben Pleysier Oct 6, 2010 6:45 PM (in response to zevendesign)Thank you for your feedback, this is as important to us as is the solution to a problem for you.
a) The ad images aren't the same as the main image and thus trying to load them from the html source file (massage_list.html) wasn't working.
In the HTML-table you can add an extra column with the source of the ad image
b) The ad images have a roll-over effect that I am not sure how to do with CSS styling. I know how to set the background with CSS, but each ad image is different, which is where I run into a problem.
By assigning a different ID to each image, you can target the roll-over image
c) The third ad box links to a different page in the site.
Using spry:if statements you can filter any exceptions
d) Lastly, when I changed the HTML to match your post, it broke the structure of the site (although as I'm writing this, I think the problem is that I didn't rewrite the CSS accordingly).
You are probably spot-on with your realisation. When you hit the obstacle again just come back here for assistance.
All in all, the last solution you provided did what I originally wanted--so THANKS AGAIN!
This is the most enjoyable part of your post.


