HTML in description

mctrivia · Jun 16, 2011

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.

https://shapeways.com/shops/propmodule

I also realized just how many D6 I have made. Need to get working on more other numbers

Sol3 · Jun 16, 2011

That's a lot of dice!

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!

mctrivia · Jun 16, 2011

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.

Magic · Jun 17, 2011

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...

Magic · Jun 25, 2011

You can check my own navigation bar.
https://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")

mctrivia · Jun 25, 2011

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
    );

Magic · Jun 27, 2011

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()

mctrivia · Jun 27, 2011

I use: https://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.

Magic · Jun 27, 2011

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)...

mctrivia · Jun 27, 2011

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

Magic · Jun 29, 2011

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: https://www.shapeways.com/shops/themagicshop

mctrivia · Jun 29, 2011

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.

mctrivia · Jul 1, 2011

strange for some reason menu does not work properly for me:

https://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, 'https://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>';
?>

Magic · Jul 2, 2011

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?

mctrivia · Jul 2, 2011

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.

mctrivia · Jul 2, 2011

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.

mctrivia · Jul 2, 2011

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, 'https://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";
?>

Magic · Jul 2, 2011

Excellent. Well done!
I did not know we could use php. this open new possibilities...

mctrivia · Jul 2, 2011

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.

mctrivia · Jul 2, 2011

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.

Log in

Additive Manufacturing

Traditional Manufacturing

Selective Laser Sintering (SLS)

Binder Jetting

Multi Jet Fusion (MJF)

Stereolithography (SLA)

Selective Laser Melting (SLM)

Material Jetting

Wax Casting

About

Resources

My Shapeways

HTML in description

Ready to get started?

Services

Support

Shapeways