HTML in description

Discussion in 'Shapeways Shops' started by mctrivia, Jun 16, 2011.

  1. mctrivia
    mctrivia New Member
    With the invention of the 3d printed bikini I noticed they had HTML in there shop description. Once I realized HTML could be entered in the description I sorted my shop up and look at it now.

    http://shapeways.com/shops/propmodule

    I also realized just how many D6 I have made. Need to get working on more other numbers
     
  2. Sol3
    Sol3 Member
    That's a lot of dice! :D

    Thank you for your description of a Hyper Cube. That's the only time I've heard it explained that way, and I finally get it! :D
     
  3. mctrivia
    mctrivia New Member
    your welcome glad I could help explain it. I have had a fascination with hypercubes for quiet a while. It was a long time from when I designed it to when it could get printed. Only FUD is detailed enough.
     
  4. Magic
    Magic Well-Known Member
    I like the way you have classified your dice.
    I did something similar but only for the tags, not the shop categories... Perhaps I should at least add categories for the number of sides... :thumbsup:

    Concerning the D6, on the one hand there are probably the most used dice in games, but on the other hand they are so commonly used that it is easy to get them from cheaper production processes... So, I don't know. I guess that only the sales can tell you if they are worth spending time to design them or not...
     
  5. Magic
    Magic Well-Known Member
    You can check my own navigation bar.
    http://www.shapeways.com/shops/themagicshop
    Actually it is a menu.
    The style has been copied from Shapeways' one but I have some issue with the margins.
    Fell free to enhance it (just get the code with a View source and search for "Magic")
     
  6. mctrivia
    mctrivia New Member
    Nice don't know why I did not think of that my standard menu like this requires a bit of javascript but as you said can borrow there scripts. This will condense the description section a lot thanks. Now if only the contents could be updated dynamically like the side bar.

    Shapeways can I interest you into adding some sudo html tags would be great if I could enter the following instead of typing the number in. If you restrict the tags to name only and force a strict naming convention like shown below it is pretty easy.

    (<SECTION_COUNT_section name>)

    to

    (5)

    I have not double checked but I am pretty sure the following code will find and replace the code format above. Input $line, output $line, requires function lookupSectionCount($shopSectionName)


    Code:
        $line = preg_replace_callback(
            '|<SECTION_COUNT_(.*)>|',
            create_function(
                // single quotes are essential here,
                // or alternative escape all $ as \$
                '$matches',
                'return lookupSectionCount($matches[0]);'
            ),
            $line
        );
    
     
    Last edited: Jun 25, 2011
  7. Magic
    Magic Well-Known Member
    In attachement you will find the code I used.

    Unfortunately, I could not reuse the style of the main menu (and even less the code) from Shapeways bacause it uses id not class.
    Furthermore, the code has not the same behaviour in a simple html page and in the Shop page, so probably there are some things I missed.

    But I think it would be interesting to have some unifyed style in our page for menus. Menus allow to have a herarchy in the categories (one category than can split in several categories) and is really compact.
    So any help from Shapeways to "standardize" a menu would be appreciate.
    Ideally, to add a menu, I'd like to call some functions like
    Code:
    FirstMenuTitle("Title1", link1);
     MenuItem("Item1", link2);
     MenuItem("Item2", link3);
     MenuItem("Item3", link4)
    MenuTitle("Title2", link5)
     MenuItem("Item1", link6)
     MenuItem("Item2", link7)
    EndMenu()
     

    Attached Files:

  8. mctrivia
    mctrivia New Member
    I use: http://spicebrains.com/multi-level-drop-down-menu/

    cheap and lets you make a multi level menu entirely with HTML. The javascript runs at runtime and replaces any list with class mlddm with a nice menu. Maybe shapeways could get it. I have a spare license if they don't want to spend the $25.
     
  9. Magic
    Magic Well-Known Member
    Yes, this is a very elegant solution, better than what I proposed.
    But, to do something similar (or trying to do something similar), I guess i would need to call an init function at onload time, and I don't know if I am allowed to do so (as far as I know, when you define an onload fuction it overrides all the previous ones)...
     
  10. mctrivia
    mctrivia New Member
    yes. shapeways would need to call the onload function themselves. after that the script will do nothing if the appropriate class is not present or do what it is suppose to if the class is present. The javascripts onload can be called at any time. I call it after every ajax call that modifies my menu content because the menu will not change to match the html when changed via ajax unless you do this
     
  11. Magic
    Magic Well-Known Member
    Here is a new version, with simplified HTML coding for the menu (no more javascript there) and some javascript because although IE9 support hover in li tags (in style definitions), you need to define a DOCTYPE which does not seems to be the case on Shapeways pages.
    The style need probably to be reworked a little bit and there are some strange bugs on Firefox and Chrome (bullets on the lists) and some small inconsistencies in the width of the menu.
    But it works more or less well and is very easier to add to your own page.
    Just include the styles, the scripts (including the onload) and change the first <ul> into <ul id="menu">
    As always, you can check the result in my shop: http://www.shapeways.com/shops/themagicshop

     

    Attached Files:

    Last edited: Jun 29, 2011
  12. mctrivia
    mctrivia New Member
    looks good. assuming my daughter is not born this weekend I will have to write one for my shop this weekend. Maybe I can automate it since it seems shapeways is not responding about adding my little code snipit.
     
  13. mctrivia
    mctrivia New Member
    strange for some reason menu does not work properly for me:

    http://www.shapeways.com/shops/propmodule

    However I did write a program to generate the menu here it is. Feel free to modify for your own uses:

    Code:
    <?php
    function getBracket($str) {
      $start=strpos($str,'[')+1;
      $end=strpos($str,']',$start);
      return substr($str,$start,$end-$start);
    }
      
      //download shop page
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_USERAGENT, 's2s');
      curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
      //curl_setopt($ch, CURLOPT_HEADER, true);
      curl_setopt($ch, CURLOPT_TIMEOUT, 10);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($ch, CURLOPT_URL, 'http://www.shapeways.com/shops/propmodule');
      //curl_setopt($ch, CURLOPT_POST, 1);
      //curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
      $web_data = trim(curl_exec($ch));
      curl_close($ch);
    
      $start=strpos($web_data,'<h2>shop sections</h2>');
      $start=strpos($web_data,'all models',$start);
      
      //shop sections to look for
      $shopsec=array(
    	'Solid Dice'=>0,
    	'Hollow Dice'=>0,
    	'Frame'=>0,
    	'Metal Dice'=>0,
    	'Non Dice'=>0,
    	'Customizable'=>0,
    	'Dice Set[Prime]'=>0,
    	'Dice Set[Grid]'=>0,
    	'Dice Set[Crystal]'=>0,
    	'Dice Set[Dual]'=>0,
    	'Dice Set[Frameless]'=>0,
    	'Dice Set[Points]'=>0,
    	'Specialty[Lottery]'=>0,
    	'Specialty[Shell]'=>0,
    	'Specialty[Loaded]'=>0,
    	'Specialty[Data]'=>0,
    	'Specialty[Math]'=>0,
    	'Specialty[Obfuscation]'=>0,
    	'Specialty[Ring]'=>0,
    	'Specialty[4D]'=>0,
    	'Specialty[Time]'=>0,
      );
      for ($i=0;$i<1000;$i++) {
        $shopsec['Sides['.substr('000' . $i,-3).']']=0;
      }
    
      //get quantity of each shop section
      foreach ($shopsec as $sec=>&$count) {
        $a=strpos($web_data,$sec,$start);
        $a=strpos($web_data,'(',$a)+1;
        $b=strpos($web_data,')',$a);
        $count=substr($web_data,$a,$b-$a);
      }
    
    
      echo '<ul id="menu" >';
    
      //Sides
      echo   '<li><a href="/shops/propmodule?section=Sides">Sides</a>';
      echo     '<ul>';
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,5)=='Sides') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>';
        }
      }
      echo     '</ul>';
      echo   '</li>';
    
      //Build Type
      echo   '<li><a href="/shops/propmodule?section=Build Type">Build Type</a>';
      echo     '<ul>';
    /*
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,10)=='Build Type') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>';
        }
      }
    */
          echo   '<li ><a href="/shops//propmodule?section=Solid Dice">Solid Dice&nbsp;(' . $shopsec['Solid Dice'] . ')</a></li>';
          echo   '<li ><a href="/shops//propmodule?section=Hollow Dice">Hollow Dice&nbsp;(' . $shopsec['Hollow Dice'] . ')</a></li>';
          echo   '<li ><a href="/shops//propmodule?section=Frame">Frame&nbsp;(' . $shopsec['Frame'] . ')</a></li>';
      echo     '</ul>';
      echo   '</li>';
    
    
      //Dice Sets
      echo   '<li><a href="/shops/propmodule?section=Specialty">Dice Set</a>';
      echo     '<ul>';
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,8)=='Dice Set') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>';
        }
      }
      echo     '</ul>';
      echo   '</li>';
    
    
      //Specialty Dice
      echo   '<li><a href="/shops/propmodule?section=Specialty">Specialty</a>';
      echo     '<ul>';
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,9)=='Specialty') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>';
        }
      }
      echo     '</ul>';
      echo   '</li>';
    
    
      //Meterial
      echo   '<li><a href="/shops/propmodule?section=Specialty">Material</a>';
      echo     '<ul>';
    /*
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,8)=='Material') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>';
        }
      }
    */
          echo   '<li ><a href="/shops//propmodule?section=Metal+Dice">Metal Dice&nbsp;(' . $shopsec['Metal Dice'] . ')</a></li>';
      echo     '</ul>';
      echo   '</li>';
    
      //Other
      echo   '<li><a href="/shops/propmodule?section=Non Dice">Non Dice&nbsp;(' . $shopsec['Non Dice'] . ')</a></li>';
      echo   '<li><a href="/shops/propmodule?section=Customizable">Customizable&nbsp;(' . $shopsec['Customizable'] . ')</a></li>';
    
      echo '</ul>';
    ?>
    
     
    Last edited: Jul 1, 2011
  14. Magic
    Magic Well-Known Member
    Great! I will look into this, thanks.

    On your page, the main issue is the width and the height of your menu.

    The total width should not exceed 620 pixels.
    Each menu title is 120 except the last one that is as large as the menu items that are 160
    So in my case I have 5 main titles: 4x120 + 160 = 640 and I am more or less in.
    Try to reduce the 120px (in "li a") to 80px (6x80 +160 = 640).

    For the heigh, my text is higher than the highest of the menu item list, so the menu items do not overlap the images. Try to add text or <br> to prevent the menu to be hidden by the images.

    News from your daughter?
     
  15. mctrivia
    mctrivia New Member
    nope daughter still not here yet.

    As for menu. there must be a way to force the menu to the top so longer menus can be done.
     
  16. mctrivia
    mctrivia New Member
    Figured out why the menu did not work for me. As soon as the curser goes out of the division it stops working even if the menu will show longer. Guess I will have to write something to fill up some space and try to figure out a way to make my sides menu 3 columns instead of 1.
     
  17. mctrivia
    mctrivia New Member
    Here is my new code that generates the entire thing. Has 2 constants at begining to setup the style info. Fixed it so menu will roll over images and long menus can still be selected. Did not figure out how to make long menus shorter and 2 or 3 wide though.

    Code:
    <?php
      define('ITEM_WIDTH',122);	//Max width needed for items to show properly
      define('CAT_COUNT',6);	//Number of main categories
    ?>
    <!-- Magic begin-->
    
    <style type="text/css">
    #menu
    {
    	z-index: 1000;
    }
    
    #menu, #menu ul    
    {
            font-family : Arial,Helvetica,sans-serif;
            font-size : 12px;
            position : absolute; 
            padding : 0; /* no internal margin */
            margin : 0; /* no external margin */
            list-style-type : none; /* delete any list style */
            list-style-image : none;
            line-height : 20px; 
            text-align : left; 
    }
    
    #menu li      
    { 
            padding : 0; /* no internal margin */
            margin : 0; /* no external margin */
            float : left; 
    }
    
    #menu li a /* link in menu title */
    {
            font-weight : bold; 
            display : block; 
            padding : 10; 
            background : #015BBB;         
            text-decoration : none; 
            width : <? echo ceil((620-ITEM_WIDTH)/CAT_COUNT); ?>px; 
            color : #AACCCC; 
            border-left : 1px solid #015BBB; /*no border but need to avoid a shift when actual border appears */
    }
    
    #menu li a:hover  /* if mouse over menu title */
    {
            color : #FFFFFF;
            border-left : 1px solid #FFFFFF;
    }
    
    #menu li ul /* block of menu items */
    { 
            display: none;
            list-style-type : none; /* delete any list style */
            list-style-image : none;
            background : #FFFFFF;         
            color : #6699CC; 
            width: <? echo ITEM_WIDTH; ?>px; 
            padding : 0; /* no internal margin */
            margin : 0; /* no external margin */
            border-left : 1px solid #015BBB; 
            border-right : 1px solid #015BBB; 
            border-bottom : 1px solid #015BBB;
    }
    
    #menu li.over ul /* block of menu items */
    { 
            display: block;
            list-style-type : none; /* delete any list style */
            list-style-image : none
            background : #FFFFFF;         
            color : #6699CC; 
            width: <? echo ITEM_WIDTH; ?>px; 
            padding : 0; /* no internal margin */
            margin : 0; /* no external margin */
            border-left : 1px solid #015BBB; 
            border-right : 1px solid #015BBB; 
            border-bottom : 1px solid #015BBB;
    }
    
    #menu li ul li 
    {
            border-top : 1px solid #F0F1F5; /* separation between items*/
    }
    
    #menu li ul li a /* link in menu item */
    {
            font-weight : normal; 
            display : block; 
            padding-left : 2; 
            padding-top : 2; 
            padding-bottom : 2; 
            padding-right : 2; 
            text-decoration : none; 
            text-align : left; 
            width : <? echo (ITEM_WIDTH-2); ?>px;/* 162-1 -1 (?) */
            color : #6699CC; 
            background : #FFFFFF;         
            border-left : 1px solid #FFFFFF; /*no border but need to avoid a shift when actual border appears */
    }
    
    #menu li ul li a:hover /* if mouse over menu item */
    {
            background : #E1F2FA;        
            color : #6699CC; 
            border-left : 1px solid #E1F2FA; /*no border but need to avoid a shift when actual border appears */
    }
    
    #menu #lastmenu a  
    {
            width : <? echo (ITEM_WIDTH-2); ?>px ;
    }
    </style>
    
    <script type="text/javascript">
    function InitMenu(id)
    {
      var ParentNode = document.getElementById(id);
      var ChildNodesArray = ParentNode.childNodes;
      if (ChildNodesArray == null) return;
      
      for (var i = 0; i < ChildNodesArray.length; i++)
      {
        var ChildNode = ChildNodesArray[i];
        if (ChildNode.nodeName.toLowerCase() == "li")
        {
          ChildNode.onmouseover = function()
          {
            this.className+=" over"; 
          }                                 
          ChildNode.onmouseout = function()
          {
            this.className=this.className.replace(" over", "");
          }                 
        }
      }
      
      changeStyle();
    }
    
    
    onload=function()
    {InitMenu('menu');}
    </script>
    
    
    
    
    <?php
    function getBracket($str) {
      $start=strpos($str,'[')+1;
      $end=strpos($str,']',$start);
      return substr($str,$start,$end-$start);
    }
      
      //download shop page
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_USERAGENT, 's2s');
      curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
      //curl_setopt($ch, CURLOPT_HEADER, true);
      curl_setopt($ch, CURLOPT_TIMEOUT, 10);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($ch, CURLOPT_URL, 'http://www.shapeways.com/shops/propmodule');
      //curl_setopt($ch, CURLOPT_POST, 1);
      //curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
      $web_data = trim(curl_exec($ch));
      curl_close($ch);
    
      $start=strpos($web_data,'<h2>shop sections</h2>');
      $start=strpos($web_data,'all models',$start);
      
      //shop sections to look for
      $shopsec=array(
    	'Solid Dice'=>0,
    	'Hollow Dice'=>0,
    	'Frame'=>0,
    	'Metal Dice'=>0,
    	'Non Dice'=>0,
    	'Customizable'=>0,
    	'Dice Set[Prime]'=>0,
    	'Dice Set[Grid]'=>0,
    	'Dice Set[Crystal]'=>0,
    	'Dice Set[Dual]'=>0,
    	'Dice Set[Frameless]'=>0,
    	'Dice Set[Points]'=>0,
    	'Specialty[Lottery]'=>0,
    	'Specialty[Shell]'=>0,
    	'Specialty[Loaded]'=>0,
    	'Specialty[Data]'=>0,
    	'Specialty[Math]'=>0,
    	'Specialty[Obfuscation]'=>0,
    	'Specialty[Ring]'=>0,
    	'Specialty[4D]'=>0,
    	'Specialty[Time]'=>0,
      );
      for ($i=0;$i<1000;$i++) {
        $shopsec['Sides['.substr('000' . $i,-3).']']=0;
      }
    
      //get quantity of each shop section
      foreach ($shopsec as $sec=>&$count) {
        $a=strpos($web_data,$sec,$start);
        $a=strpos($web_data,'(',$a)+1;
        $b=strpos($web_data,')',$a);
        $count=substr($web_data,$a,$b-$a);
      }
    
    
      echo '<ul id="menu" >';
    
      //Sides
      echo   '<li><a href="/shops/propmodule?section=Sides">Sides</a>'."\n";
      echo     '<ul>'."\n";
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,5)=='Sides') && ($count>0)) {
          echo   '<li ><a href="/shops/propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>'."\n";
        }
      }
      echo     '</ul>'."\n";
      echo   '</li>'."\n";
    
      //Build Type
      echo   '<li><a href="/shops/propmodule?section=Build Type">Build Type</a>'."\n";
      echo     '<ul>'."\n";
    /*
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,10)=='Build Type') && ($count>0)) {
          echo   '<li ><a href="/shops//propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>'."\n";
        }
      }
    */
          echo   '<li ><a href="/shops/propmodule?section=Solid Dice">Solid Dice&nbsp;(' . $shopsec['Solid Dice'] . ')</a></li>'."\n";
          echo   '<li ><a href="/shops/propmodule?section=Hollow Dice">Hollow Dice&nbsp;(' . $shopsec['Hollow Dice'] . ')</a></li>'."\n";
          echo   '<li ><a href="/shops/propmodule?section=Frame">Frame&nbsp;(' . $shopsec['Frame'] . ')</a></li>'."\n";
      echo     '</ul>'."\n";
      echo   '</li>'."\n";
    
    
      //Dice Sets
      echo   '<li><a href="/shops/propmodule?section=Specialty">Dice Set</a>'."\n";
      echo     '<ul>'."\n";
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,8)=='Dice Set') && ($count>0)) {
          echo   '<li ><a href="/shops/propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>'."\n";
        }
      }
      echo     '</ul>'."\n";
      echo   '</li>'."\n";
    
    
      //Specialty Dice
      echo   '<li><a href="/shops/propmodule?section=Specialty">Specialty</a>'."\n";
      echo     '<ul>'."\n";
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,9)=='Specialty') && ($count>0)) {
          echo   '<li ><a href="/shops/propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>'."\n";
        }
      }
      echo     '</ul>'."\n";
      echo   '</li>'."\n";
    
    
      //Meterial
      echo   '<li><a href="/shops/propmodule?section=Specialty">Material</a>'."\n";
      echo     '<ul>'."\n";
    /*
      foreach ($shopsec as $key=>$count) {
        if ((substr($key,0,8)=='Material') && ($count>0)) {
          echo   '<li ><a href="/shops/propmodule?section=' . $key . '">' . getBracket($key) . '&nbsp;(' . $count . ')</a></li>'."\n";
        }
      }
    */
          echo   '<li ><a href="/shops/propmodule?section=Metal+Dice">Metal Dice&nbsp;(' . $shopsec['Metal Dice'] . ')</a></li>'."\n";
      echo     '</ul>'."\n";
      echo   '</li>'."\n";
    
      //Other
      echo   '<li><a href="/shops/propmodule?section=Non Dice">Non Dice&nbsp;(' . $shopsec['Non Dice'] . ')</a></li>'."\n";
      echo   '<li id="lastmenu"><a href="/shops/propmodule?section=Customizable">Customizable&nbsp;(' . $shopsec['Customizable'] . ')</a></li>'."\n";
    
      echo '</ul>'."\n";
    ?>
    
     
  18. Magic
    Magic Well-Known Member
    Excellent. Well done!
    I did not know we could use php. this open new possibilities...
     
  19. mctrivia
    mctrivia New Member
    No you can't use php. I executed this on my own server and cut and paste the source code. Just this way it auto grabs the correct number of dice in each category.
     
    Last edited: Jul 2, 2011
  20. mctrivia
    mctrivia New Member
    I am working on a generic script that will work for everyone. All you will have to execute is

    startmenu(shopname,cat1,cat2,cat3...);

    as long as your shop sections are in the format:

    catname[subcatname]


    if anyone can figure out how to make long menu items rap to 2,3,4 columns would be great then I could write that feature in also.