KB Article 15994
2019/01/28

Close
X
Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Documentation
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

How to create Presto main page similar to our Harmonics demo site

Product: Presto Type: How to

A few customers were asking how they could change their main page in Presto so that it would look similar to one on our demo site:

 

Below is the JavaScript code that will turn menulinks on any screen into buttons, while preserving menulinks functionality.
Using this code as example, you can change buttons' color, size, and position.

jQuery(document).on('PageComplete', function()
{
  // Set initial values
  // Initial vertical position, number of pixels from the top
  var nStrPosTop = 75;
  // Initial horizontal position, number of pixels from the left
  var nStrPosLeft = 0;
  // Vertical separation between buttons in pixels
  var nVertSpacing = 5;
  // Horizontal separation between buttons in pixels
  var nHorzSpacing = 5;
  // Button's height in pixels
  var nButtonHeight = 55;
  // Button's width in pixels
  var nButtonWidth = 325;

  var nCurrentRow = 0;
  var nCurrentCol = 0;
  var nInd = 0;
	
    // List of color's names
    var sColors = ["OrangeRed", "BlueViolet", "MediumSpringGreen",  
    "Coral", "DeepPink", "Gold", "DodgerBlue", "LimeGreen", 
    "FireBrick", "Magenta", "MediumBlue", "Blue", "LawnGreen"]; 

    // Go through each menulink found on a given screen, get its label and option, 
    // create a button with obtained information, and hide initial menulink
    jQuery('.menulink_label').each(function()
    {
      // Get menulink's text
      var label = jQuery(this).text().trim();
      jQuery(this).hide();
      // Get menulink's option
      var option = parseInt(jQuery(this).prev('span').text());
      jQuery(this).prev('span').hide();
      // Create button 
      if (label.length > 0)
      {
        Presto.Insert
        ({
          object: 'button',
          id: 'button-' + option,
          css:{
	"background-color": sColors[nInd++],
	"font-family": "Baloo Thambi",
	"font-size": "17px",
	"height": nButtonHeight,
	"width": nButtonWidth,					
	"font-weight": "normal",
	"color": "#f2f2f2",
	"position": "absolute",
	"white-space": "normal",
	"top": nStrPosTop + (nButtonHeight + nHorzSpacing)*Math.floor(nCurrentRow),
	"left": nStrPosLeft + (nButtonWidth + nVertSpacing)*nCurrentCol
          },
          onclick: "jQuery('#f0').val(" + option + "); SendRequest('EN');",
	width: nButtonWidth,
	height: nButtonHeight				
        });
        jQuery('#button-' + option).val(label);
      }
      nCurrentRow+=0.5;
      nCurrentCol = 1 - nCurrentCol;
  });
});

 After running the above code the main page will look like this:

 

 

Keywords: javascript, java script, menulinks, big buttons menu, custom menu, demo site, harmonics

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Comments:
Please enable JavaScript in order to rate this page.