KB Article 15980
2019/01/11

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 can I center the title text on every panel dynamically using JavaScript and CSS?

Product: Presto Type: How to

If you have a situation where you have many panels and the title text is left aligned and you want to centre it, it is possible to do that without having to manually edit every screen in the VE (Visual Editor).

The first thing to do is find something that all these title have in common. The easiest way to do that is to open your Presto application in Chrome and open the Chrome Debugger (CTRL SHFT i). Use the the inspector button to locate and examine the tile on a few different panels. You could be looking for something like position, row/column or, as in this example, the text may always be on the second span on the page.

In this case we are going to do a little math - get the width of the entire page content, divide it by 2 and subtract half the length or your title. This will allow us to calculate the starting point and put the title in the middle of the page. Once you know what your titles have in common, you can try something like the following in your Tools>User Resources>custom.js. In this case we are looking for the tite in the second span of each page:

jQuery(document).one('PageComplete', function()
{
    pageWidth = jQ('#ReturnedContent').width();
    elementWidth = jQ('span:nth-child(2)').text().trim().length;
    var position = (pageWidth/2) - (elementWidth / 2 );
    jQ('span:nth-child(3)').css('left', position + 'px');
});

 

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.