Skip navigation
Oby1KnOby
Oby1KnOby Calculating status...
Currently Being Moderated

How to make a sortable images table?

Jun 29, 2012 2:56 AM

Tags: #cs4 #help #image #dreamweaver #images

Hey guys, I wonder if anyone knows how to create a table which will include images instead of numbers, and which somehow can be sorted accordingly to an image length/number. Any ideas how I can do that? 

This is the code I use for table:

 

<td><span style="display: none">7</span><img src="images/7.png" /></td>

 

Here is the table:

table.jpg

So as soon as users cklick on quality, passion etc the table should sort the pictures correctly.

1137 Views   11 Replies   Latest reply: Oby1KnOby, Jul 5, 2012 2:14 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 29, 2012 5:06 AM   in reply to Oby1KnOby
    Report

    Create an XML file, either manually or created from a database. The XML file (untitled.xml) should look like

     

    <?xml version="1.0" encoding="utf-8"?>
<products>
    <product>
        <name>Product 1</name>
        <price>400</price>
        <quality>95</quality>
        <passion>80</passion>
        <level>55</level>
        <satisfaction>85</satisfaction>
        <help>100</help>
    </product>
    <product>
        <name>Product 2</name>
        <price>380</price>
        <quality>70</quality>
        <passion>81</passion>
        <level>45</level>
        <satisfaction>90</satisfaction>
        <help>67</help>
    </product>
    <product>
        <name>Product 3</name>
        <price>560</price>
        <quality>47</quality>
        <passion>67</passion>
        <level>57</level>
        <satisfaction>89</satisfaction>
        <help>99</help>
    </product>
</products>

     

    Then create the markup as per

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div spry:region="ds1">
  <table>
    <tr>
      <th spry:sort="name">Name</th>
      <th spry:sort="price">Price</th>
      <th spry:sort="quality">Quality</th>
      <th spry:sort="passion">Passion</th>
      <th spry:sort="level">Level</th>
      <th spry:sort="satisfaction">Satisfaction</th>
      <th spry:sort="help">Help</th>
    </tr>
    <tr spry:repeat="ds1">
      <td>{name}</td>
      <td>{price}</td>
      <td>{quality}</td>
      <td>{passion}</td>
      <td>{level}</td>
      <td>{satisfaction}</td>
      <td>{help}</td>
    </tr>
  </table>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes/xpath.js"></script>
<script src="http://labs.adobe.com/technologies/spry/includes/SpryData.js"></script>
<script>
var ds1 = new Spry.Data.XMLDataSet("untitled.xml", "products/product");
ds1.setColumnType("price", "number");
ds1.setColumnType("quality", "number");
ds1.setColumnType("passion", "number");
ds1.setColumnType("level", "number");
ds1.setColumnType("satisfaction", "number");
ds1.setColumnType("help", "number");
</script>
</body>
</html>

     

    and test in your favourite browser.

     

    Once you have done that, the next step is to create a bar to represent the numbers. You can do that by changing the width according to the number value using the Spry element selector http://labs.adobe.com/technologies/spry/articles/element_selector/

     

    Gramps

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    2. Oby1KnOby,
    Jun 29, 2012 7:40 AM   in reply to Ben Pleysier
    Report

    Gramps, I did what you said and the table with numbers is sorting properley.

    But I didn't quite understood how to replace the values of cells with praphical images? Where exactly do I need to insert my .png pictures, and what is the code for that?

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jun 29, 2012 7:02 PM   in reply to Oby1KnOby
    Report

    The following works in all browsers with the exception of IE

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
th, td {
    width: 100px;
}
.results_bar {
    background-color: #039;
    color: #039;
    height: 20px;
}
</style>
</head>

<body>
<div spry:region="ds1">
  <table>
    <tr>
      <th spry:sort="name">Name</th>
      <th spry:sort="price">Price</th>
      <th spry:sort="quality">Quality</th>
      <th spry:sort="passion">Passion</th>
      <th spry:sort="level">Level</th>
      <th spry:sort="satisfaction">Satisfaction</th>
      <th spry:sort="help">Help</th>
    </tr>
    <tr spry:repeat="ds1">
      <td>{name}</td>
      <td>{price}</td>
      <td><div class="results_bar" style="width: {quality}px">{quality}</div></td>
      <td><div class="results_bar" style="width: {passion}px">{passion}</div></td>
      <td><div class="results_bar" style="width: {level}px">{level}</div></td>
      <td><div class="results_bar" style="width: {satisfaction}px">{satisfaction}</div></td>
      <td><div class="results_bar" style="width: {help}px">{help}</div></td>
    </tr>
  </table>
<script src="http://labs.adobe.com/technologies/spry/includes/xpath.js"></script>
<script src="http://labs.adobe.com/technologies/spry/includes/SpryData.js"></script>
<script>
var ds1 = new Spry.Data.XMLDataSet("untitled.xml", "products/product");
ds1.setColumnType("price", "number");
ds1.setColumnType("quality", "number");
ds1.setColumnType("passion", "number");
ds1.setColumnType("level", "number");
ds1.setColumnType("satisfaction", "number");
ds1.setColumnType("help", "number");
</script>
</div>
</body>
</html>

     

    Hopefully I can find a solution for IE.

     

    Gramps

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    4. Oby1KnOby,
    Jun 30, 2012 4:51 AM   in reply to Ben Pleysier
    Report

    1. Thanks Gramps! I've replaced "background-color" wigth an image and it workos perfectly. H wever as you mentioned the table doesn't look properley in IE. So hopefully we can figure that out.

     

    2. How can I make my sorting cells text to become visually cickable? Here is an example of what I want to acchive:

    hand.jpg

    So at the moment my mouse looks like I'm about to enter some text, wheras I prefer it to look like a pointing finger.

    How do I do that?

     

    3. And one more thing, why does the style for this table only works when it is actually on the page. Whenever I put it in the styles.css file the whole thing brakes for some reason

    <style>

    th, td {  width: 100px; }

    .results_bar { background-image:url(images/10.png);  color:transparent; height:20px; }

    </style>

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    Jun 30, 2012 6:22 AM   in reply to Oby1KnOby
    Report

    Add a class to the row as in

    <tr class="sortable">

      <th spry:sort="name">Name</th>

      <th spry:sort="price">Price</th>

      <th spry:sort="quality">Quality</th>

      <th spry:sort="passion">Passion</th>

      <th spry:sort="level">Level</th>

      <th spry:sort="satisfaction">Satisfaction</th>

      <th spry:sort="help">Help</th>

    </tr>

    and a litlle styling as per

    .sortable th {

        cursor: pointer;

    }

     

    Gramps

    Still no solution for IE

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    6. Oby1KnOby,
    Jun 30, 2012 12:06 PM   in reply to Ben Pleysier
    Report

    Gramps, thank you for note on cursor:pointer ! Looks good now!

    So any ideas what can I do with IE? This is the only browser that brakes the whole thing down.

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    7. Oby1KnOby,
    Jul 1, 2012 11:03 AM   in reply to Ben Pleysier
    Report

    Is there any palce where I can address this issue?

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    8. Oby1KnOby,
    Jul 2, 2012 11:04 AM   in reply to Ben Pleysier
    Report

    Still no progress

     

    Ie TABLE.jpg

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    9. Oby1KnOby,
    Jul 4, 2012 3:25 AM   in reply to Ben Pleysier
    Report

    Gramp, I have got a reply from IE Developers forum

     

    "Please provide a link to your website or publicly accessible mashup...spry is dynamically adding table rows to the DOM... your source code is useless to us... as far as I know there were fixes for IE9 that corrected dynamic table row addition... ensure you are using IE9 in standards mode... and you are using the latest spry version.

    the cross browser solution is to use the datascr attribute of a table to load an xml file into table rows.

    Probably you have changed IE's securtiy zone settings already in the hope of trying to get things to work... other browsers do not use the IE security zone model... when testing ensure they are set to the default (tools>Internet Options>Security tab, click "Reset all zones to default")"

     

    http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ 76c38a24-9719-4edb-b751-f02042fe62b7

     

    How do I know if I use the latest spry version? Do you think that might be an issue?

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    10. Ben Pleysier,
    Jul 4, 2012 6:08 AM   in reply to Oby1KnOby
    Report

    You are using the latest version of Spry (1.6.1)

     

    The issue is that IE see the Spry value used in CSS as an error, hence it does not process same.

     

    Have a look here http://forums.adobe.com/thread/266960

     

    You might like to PM Kinblas for a solution. I have spent about two days on it already.

     

    Good luck

    Gramps

     

    PS If you find a solution, please report back here so that I can learn.

     
    |
    Mark as:
  • Oby1KnOby
    Currently Being Moderated
    11. Oby1KnOby,
    Jul 5, 2012 2:14 AM   in reply to Ben Pleysier
    Report

    Here is what I got from the IE forum:

     

    "Tools>compatibility view settings... check "Include updated website lists from Microsoft", uncheck "Display all sites in compatibility view",  <- Done that didn't work


    "if your target audience is on a corporate intranet, add the x-ua meta IE=edge to your page to force MSIE browsers to use Standards mode..." <-I have added <meta http-equiv="X-UA-Compatible" content="IE=edge" > after my <head> title didn't work as well, I have also tried using <meta http-equiv="X-UA-Compatible" content="IE=7.5" >


    "I am not sure how you will get your page to display properly in IE7... that issue lies with the spry developers to debug.

    you page displays fine in standards... except for a slight delay while the table is populated... in standards mode, but in IE7 emulation mode (F12>Document Mode) the table data is not rendered...

    To debug your web page.. F12>Script tab, click "Start Debugging"... you can place breakpoints in the spry module to see how it works... examine the document.readState property when the spry module is called." <- Done the rebug didn't work for me

     

    Here is another discussion:

    http://stackoverflow.com/questions/11340657/ie-doesnt-display-spry-tab le-properley

     
    |
    Mark as:
Actions

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