Optimize Delivery of Third Party Widgets - TripAdvisor - javascript

I am working on a website that uses the widgets to show reviews and such from the TripAdvisor website. However, according to Google's Page Speed Analytics, they are harming the performance of my website. Specifically, neither the CSS nor JavaScript are minified and the images are not optimized. Build tools such as CSSNano cannot be used in this situation (to my knowledge) since they come from a third-party. Typically, from my experience, when a third-party script is loaded from a CDN or similar, a minified version is available, but I do not believe this is the case in this instance. I looked at Google's Page Speed Module for the server, but I have IIS, and I am not positive it would work anyway (since the scripts are pulled from TripAdvisor rather than hosted on my server).
For reference, the widget renders as follows:
<!-- TripAdvisor sidebar -->
<div class="col-md-3 hidden-sm hidden-xs"><div id="TA_selfserveprop522" class="TA_selfserveprop"><div id="CDSWIDSSP" class="widSSP widSSPnarrow" style="width: 240px;"> <div class="widSSPData"> <div class="widSSPBranding"> <dl> <dt> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"></a> </dt> <dt class="widSSPTagline">Know better. Book better. Go better.</dt> </dl> </div><!--/ cdsBranding--> <div class="widSSPComponent"> <div class="widSSPSummary"> <dl> <a target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink(11900,this);return true;" rel="nofollow"> <dt class="widSSPH18">Hampton Inn & Suites St. Louis/South I-55</dt> </a> </dl> </div><!--/ cdsSummary--> </div><!--/ cdsComponent--> <div class="widSSPComponent widSSPOptional"> <div class="widSSPTrvlRtng"> <dl> <dt class="widSSPH11">TripAdvisor Traveler Rating</dt> <dd> <div class="widSSPOverall"> <span class="ui_bubble_rating bubble_50"></span> <div>Based on <b>1,291</b> traveler reviews</div> </div><!--/ overall --> </dd> </dl> </div> </div><!--/ cdsComponent --> <div class="widSSPWrap widSSPOptional"> <div class="widSSPInformation"> <div class="widSSPWrap"> <div class="widSSPPopIdx widSSPSingle"> <b>TripAdvisor Ranking</b> <span class="widSSPPopIdxData"> <span class="widSSPPopIdxData widSSPPopIdxNumbers"> <sup>#</sup>1 of 2 </span> hotels in Mehlville </span> </div><!--/ popIdx--> </div><!--/ cdsWrap--> </div><!--/ cdsInformation--> </div><!--/ cdsWrap--> <div class="widSSPComponent widSSPOptional"> <dl class="widSSPReviews"> <dt class="widSSPH11">Most Recent Traveler Reviews</dt> <dd class="widSSPOneReview"> <ul class="widSSPBullet"> <li> <span class="widSSPDate">Jun 28, 2017:</span> <span class="widSSPQuote">“Hampton Inn & Suites was GREAT!!!!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“We Are Family!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“A Great Experience in a Time of...”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“St Louis attractions trip”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“Too Pricey, Not So Nicey”</span> </li> </ul><!--/ bullet--> </dd><!--/ hReview--> </dl> </div> <div class="widSSPAll"> <ul class="widSSPReadReview"> <li>Read reviews</li> </ul> <ul class="widSSPWriteReview"> <li>Write a review</li> </ul> </div><!--/ cdsAll--> <div class="widSSPLegal">© 2017 TripAdvisor LLC</div><!--/ cdsLegal--> </div><!--/ cdsData--> </div><!--/ CDSPOP.cdsBx--> <img id="ta_tracking_selfserveprop_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&guid=ON&script=0&data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dselfserveprop"><img id="ta_tracking_selfserveprop_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&v=4.1.0&p0=e%3Dce%26widget_type%3Dselfserveprop&p1=e%3Dexd%26site_type%3Dd&p2=e%3Dvp%26p%3D1845701&p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=522&locationId=1845701&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=false&display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-selfserveprop?border=false&popIdx=true&iswide=false&locationId=1845701&display_version=2&uniq=522&rating=true&lang=en_US&nreviews=5&writereviewlink=true"></script></div>
<div class="col-sm-12 visible-sm visible-xs hidden-lg hidden-md"><div id="TA_cdsratingsonlywide284" class="TA_cdsratingsonlywide"><div id="CDSRATINGWIDGET284" class="cdsROW white shadow border wide " style="width: 1px;"> <div id="CDSROWCONTAINER284" class="cdsROWContainer" style="width: auto;"> <!--[if lte IE 7]> <table border="0" cellspacing="0"> <tr> <td> <div id="CDSROWLOGO284" class="cdsComponent logo"> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a> </div> </td> <td> <div id="CDSROWLOC284" class="cdsComponent cdsLocName"> <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Hampton Inn & Suites St. Louis/South I-55</a> </div> </td> <td> <div id="CDSROWRATING284" class="cdsComponent cdsRating"> <span class="ui_bubble_rating bubble_50"></span> <span> 1,291 Reviews </span> </div> </td> </tr> </table> <![endif]--> <!--[if gte IE 8]><!--> <div id="CDSROWLOGO284" class="cdsComponent logo"> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"></a> </div> <div id="CDSROWLOC284" class="cdsComponent cdsLocName" style="max-width: 1px;"> <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;" rel="nofollow">Hampton Inn & Suites St. Louis/South I-55</a> </div> <div id="CDSROWRATING284" class="cdsComponent cdsRating"> <span class="ui_bubble_rating bubble_50"></span> <span> 1,291 Reviews </span> </div> <!--<![endif]--> </div> </div> <img id="ta_tracking_cdsratingsonlywide_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&guid=ON&script=0&data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dcdsratingsonlywide"><img id="ta_tracking_cdsratingsonlywide_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&v=4.1.0&p0=e%3Dce%26widget_type%3Dcdsratingsonlywide&p1=e%3Dexd%26site_type%3Dd&p2=e%3Dvp%26p%3D1845701&p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlywide&uniq=284&locationId=1845701&lang=en_US&border=true&shadow=true&display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlywide?border=true&shadow=true&locationId=1845701&display_version=2&uniq=284&lang=en_US"></script></div>
</div>
I am starting to think it is simply not possible to optimize the widgets. However, they do seem to take a notable toll on the website, so I would like to see if anyone has relevant experience with these widgets or something similar.
Thanks.

I'm dealing with this issue right now. Removing the widget from the site results in a 60% improvement in site speed. You can't alter their widget code in any meaningful way to improve it, so it's better to periodically screenshot its current rendered view and crop it into a small .png that you place on your site. It's not at all clear whether it provides all that much credibility value to people anyways.

Related

How to make my HTML list with many items have less lines?

So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>

unexpected closing tag angular error

Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()
Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.
Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work

Uncaught ReferenceError: $ is not defined at popup.js:1

I am new to jQuery and see that this question has been asked on several occasion but cannot find the answer within the library.
Why do I continue to get the above error message with such a simple script? All I am trying to do is hide the class 'answer' upon opening of the html page
$(document).ready(function(){
$('#faq-panel > div .answer').hide();
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- <link href="../css/bootstrap.min.css" rel="stylesheet" > -->
<link href="../css/popups.css" rel="stylesheet" >
<script src="../js/popup.js"></script>
</head>
<body>
<header class="page-title">
<a class="return" href="../"><span>Return</span></a>
<h1>Pricing</h1>
<div><h2>SPECIAL LIMITED-TIME OFFER FOR PRESTO BUSINESS SOLUTION PARTNERS</h2></div>
</header>
<div class="container">
<div class="heading">
<p>We are offering big long-term discounts in 2017 to organisations who are serious about embracing change and want to partner with us to install operational excellence </p>
</div>
<form action="/bat/clientsignup.php" method="post">
<fieldset class="contact clearfix">
<label for="mail"></label>
<div class="signup">
<input type="email" id="mail" name="user_email" placeholder="enter your work e-mail" required>
<button type="submit">Sign up today & try PRESTO free-of-charge</button>
</div>
</fieldset>
</form>
<img class="presto-logo" src="../images/vsm.png">
<!-- <div style="opacity: 1;">
<ul class="subscription-type">
<li>Yearly SAVE 18%</li>
<li> | </li>
<li>Two Yearly SAVE 32%</li>
<li> | </li>
<li>Monthly</li>
</ul>-->
<div class="packages" style="opacity: 1;">
<div class="package basic" data-tier="basic">
<div class="summary">
<div class="title">Basic</div>
<div class="price"> <span class="dollar">€</span><span class="currency fw300"></span> <span class="amount">4</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 50 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Assess your current state</span></div>
<div class="description">All the essentials you need to identify where waste opportunities exist and ensure your operational support documentation archive is kept in order</div>
</div>
</div>
<div class="features">
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>E-mail product support with 24-hour turn-around time</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Operational readiness</p></li>
<li><img class="check" src="../images/check.png"><p>Waste identification</p></li>
</ul>
</div>
</div>
</div>
<div class="package standard" data-tier="standard">
<div class="top with_line">Most popular</div>
<div class="summary">
<div class="title">Standard</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">6</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Design target model, assign responsibility & deploy resources</span></div>
<div class="description">Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
</div>
<h4 class="basic-plus">Basic plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>4 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Kanban project management</p></li>
<!-- <li><img class="check" src="../images/check.png"><p>Best practice interactive corporate newsfeed</li> -->
<li><img class="check" src="../images/check.png"><p>IT functional bug & enhancement tracker</p></li>
<li><img class="check" src="../images/check.png"><p>Support documentation historical tracking</li>
<li><img class="check" src="../images/check.png"><p>Opportunity cost/benefits analysis</li>
<li><img class="check" src="../images/check.png"><p>RACI matrix reporting</p></li>
<li><img class="check" src="../images/check.png"><p>Client demand heat map</li>
</ul>
</div>
</div>
<div class="package pro" data-tier="pro">
<div class="top with_line for_banks">Reccomended to banks</div>
<div class="summary">
<div class="title">Pro</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">8</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Cross-train, optimise performance & benchmark results</span></div>
<div class="description">Perform risk & control self assessments, maximise knowledge retention and do away with annual reviews by measuring performance in real time. Use Lean logic to capture cycle times & benchmark progress with robust historical data.</div>
</div>
</div>
<h4 class="standard-plus">Standard plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>10 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Value Stream Mapping with SIPOC UI </p></li>
<li><img class="check" src="../images/check.png"><p>FTE supply / demand workload profile & RACI</p></li>
<li><img class="check" src="../images/check.png"><p>Risk heat map, integrated calendar & reminder scheduling</li>
<li><img class="check" src="../images/check.png"><p>Risk & control self assessment & EASI opportunity analysis</p></li>
<li><img class="check" src="../images/check.png"><p>Process checklist manager</p></li>
<li><img class="check" src="../images/check.png"><p>Process cycle time & benchmarking manager notebook</li>
<li><img class="check" src="../images/check.png"><p>Skills 4-steps to excellence growth manager</li>
</ul>
</div>
</div>
<div class="package enterprise" data-tier="enterprise">
<div class="summary">
<div class="title">Enterprise</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">10</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 150 users</div>
<div class="tier_blurb dh"> <div class="blurb_title"><span>Install sense of urgency, purpose & best practice awareness</span></div>
<div class="description">Eliminate silo-specific knowledge gaps and install a corporate-wide best practice culture together with a constant discipline to accelerate decision making and the autonomous elimination of ‘low hanging fruits’.
</div>
</div>
</div>
<h4 class="pro-plus">Pro plus...</h4>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Interactive corporate newsfeed</li>
<li><img class="check" src="../images/check.png"><p>Talent differentiators analytics for leadership, professional, technical and soft skills</p></li>
<li><img class="check" src="../images/check.png"><p>3-tier risk & compliance impact reporting</li>
<li><img class="check" src="../images/check.png"><p>Client special service cost tracker</p></li>
<li><img class="check" src="../images/check.png"><p>KPI tracking & efficiency assessment streamlining</li>
<li><img class="check" src="../images/check.png"><p>Issue management advanced reporting</li>
<li><img class="check" src="../images/check.png"><p>Go-to-Gemba mobile device SIPOC interaction functionality</p></li>
<li><img class="check" src="../images/check.png"><p>PRESTO sense-of-urgency discipline</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="frequently-asked-questions">
<br>
<div class="container">
<h1>Frequently Asked Questions</h1>
<ul id="faq-panel">
<li>
<div class="question"> How does your pricing work? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We’re a tiered subscription service, and our pricing is based on the number of people on your team as well as the plan that’s best for you. Check out our handy calculator above to get a personalized quote pronto. </div>
</li>
<li>
<div class="question"> Which plan is right for me? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> That’s a good question and there are a number of factors to consider. Reach out to our Customer Success Team-—we’ll be happy to help you figure it out. </div>
</li>
<li>
<div class="question"> Can I pay monthly? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Sure. We offer monthly, yearly, and two-yearly plans. A lot of our customers prefer to go for yearly or two-yearly because they’re the most economical choice—you can save up to 32%. But monthly is totally cool, too. </div>
</li>
<li>
<div class="question"> Can I use this for my whole organisation, or just my team? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Either or both! That’s the beauty of dapulse—we have huge enterprises using it organization-wide as well as one and two-people teams. You’re a small team working inside a huge corporation, you say? That’s good, too. Plenty of our customers use dapulse to improve the way their own team or department operates. </div>
</li>
<li>
<div class="question"> Do you offer discounts? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We’re happy to offer discounted pricing to nonprofits and NGOs. Or if you can beat us in Street Fighter 2. (But we’re realllllly good… just saying.) Contact our Customer Success Team for more info. </div>
</li>
<li>
<div class="question"> Can I change my plan? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Totes. You can upgrade, downgrade, or cancel your plan any time you want. </div>
</li>
<li class="faq">
<div class="question"> What type of product support is available? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> The trial is free, but after that, yeah, you’ll need to subscribe to one of our plans to continue using dapulse. Don’t give us that look ;) We’re committed to building an amazing product that provides real and tangible value to you every day. At 16 cents per user a day, our Basic plan sets you back less than a pencil per person. There’s no greater investment than pulling your team together and finding a great way to get work done, and many of our customers tell us that their experience with dapulse is truly invaluable. Imagine never missing another deadline, totally eliminating angry phone calls from clients, or putting an end to painful email threads—for real. Imagine actually enjoying your everyday life at work. Priceless, no? </div>
</li>
<li>
<div class="question"> Who should be the primary users? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We accept all major credit cards. Some of our developers could probably be bribed with cookies, but you didn’t hear that from us. </div>
</li>
</ul>
</div>
</div>
</body>
</html>
You have to add jQuery library before you use it, try to add the follow reference to the head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Just need to add JQuery
$(document).ready(function() {
$('#faq-panel > div .answer').hide();
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- <link href="../css/bootstrap.min.css" rel="stylesheet" > -->
<link href="../css/popups.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/popup.js"></script>
</head>
<body>
<header class="page-title">
<a class="return" href="../"><span>Return</span></a>
<h1>Pricing</h1>
<div>
<h2>SPECIAL LIMITED-TIME OFFER FOR PRESTO BUSINESS SOLUTION PARTNERS</h2>
</div>
</header>
<div class="container">
<div class="heading">
<p>We are offering big long-term discounts in 2017 to organisations who are serious about embracing change and want to partner with us to install operational excellence</p>
</div>
<form action="/bat/clientsignup.php" method="post">
<fieldset class="contact clearfix">
<label for="mail"></label>
<div class="signup">
<input type="email" id="mail" name="user_email" placeholder="enter your work e-mail" required>
<button type="submit">Sign up today & try PRESTO free-of-charge</button>
</div>
</fieldset>
</form>
<img class="presto-logo" src="../images/vsm.png">
<div class="packages" style="opacity: 1;">
<div class="package basic" data-tier="basic">
<div class="summary">
<div class="title">Basic</div>
<div class="price"> <span class="dollar">€</span><span class="currency fw300"></span> <span class="amount">4</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 50 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Assess your current state</span>
</div>
<div class="description">All the essentials you need to identify where waste opportunities exist and ensure your operational support documentation archive is kept in order</div>
</div>
</div>
<div class="features">
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>E-mail product support with 24-hour turn-around time</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Operational readiness</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Waste identification</p>
</li>
</ul>
</div>
</div>
</div>
<div class="package standard" data-tier="standard">
<div class="top with_line">Most popular</div>
<div class="summary">
<div class="title">Standard</div>
s="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Design target model, assign responsibility & deploy resources</span>
</div>
<div class="description">Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
</div>
<h4 class="basic-plus">Basic plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>4 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Kanban project management</p>
</li>
<!-- <li><img class="check" src="../images/check.png"><p>Best practice interactive corporate newsfeed</li> -->
<li>
<img class="check" src="../images/check.png">
<p>IT functional bug & enhancement tracker</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Support documentation historical tracking</li>
<li>
<img class="check" src="../images/check.png">
<p>Opportunity cost/benefits analysis</li>
<li>
<img class="check" src="../images/check.png">
<p>RACI matrix reporting</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Client demand heat map</li>
</ul>
</div>
</div>
<div class="package pro" data-tier="pro">
<div class="top with_line for_banks">Reccomended to banks</div>
<div class="summary">
<div class="title">Pro</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">8</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Cross-train, optimise performance & benchmark results</span>
</div>
<div class="description">Perform risk & control self assessments, maximise knowledge retention and do away with annual reviews by measuring performance in real time. Use Lean logic to capture cycle times & benchmark progress with robust historical data.</div>
</div>
</div>
<h4 class="standard-plus">Standard plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>10 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Value Stream Mapping with SIPOC UI</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>FTE supply / demand workload profile & RACI</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Risk heat map, integrated calendar & reminder scheduling</li>
<li>
<img class="check" src="../images/check.png">
<p>Risk & control self assessment & EASI opportunity analysis</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Process checklist manager</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Process cycle time & benchmarking manager notebook</li>
<li>
<img class="check" src="../images/check.png">
<p>Skills 4-steps to excellence growth manager</li>
</ul>
</div>
</div>
<div class="package enterprise" data-tier="enterprise">
<div class="summary">
<div class="title">Enterprise</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">10</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 150 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Install sense of urgency, purpose & best practice awareness</span>
</div>
<div class="description">Eliminate silo-specific knowledge gaps and install a corporate-wide best practice culture together with a constant discipline to accelerate decision making and the autonomous elimination of ‘low hanging fruits’.
</div>
</div>
</div>
<h4 class="pro-plus">Pro plus...</h4>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Interactive corporate newsfeed</li>
<li>
<img class="check" src="../images/check.png">
<p>Talent differentiators analytics for leadership, professional, technical and soft skills</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>3-tier risk & compliance impact reporting</li>
<li>
<img class="check" src="../images/check.png">
<p>Client special service cost tracker</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>KPI tracking & efficiency assessment streamlining</li>
<li>
<img class="check" src="../images/check.png">
<p>Issue management advanced reporting</li>
<li>
<img class="check" src="../images/check.png">
<p>Go-to-Gemba mobile device SIPOC interaction functionality</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>PRESTO sense-of-urgency discipline</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="frequently-asked-questions">
<br>
<div class="container">
<h1Frequently Asked Questions</h1>
<ul id="faq-panel">
<li>
<div class="question">How does your pricing work?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We’re a tiered subscription service, and our pricing is based on the number of people on your team as well as the plan that’s best for you. Check out our handy calculator above to get a personalized quote pronto.</div>
</li>
<li>
<div class="question">Which plan is right for me?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">That’s a good question and there are a number of factors to consider. Reach out to our Customer Success Team-—we’ll be happy to help you figure it out.</div>
</li>
<li>
<div class="question">Can I pay monthly?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Sure. We offer monthly, yearly, and two-yearly plans. A lot of our customers prefer to go for yearly or two-yearly because they’re the most economical choice—you can save up to 32%. But monthly is totally cool, too.</div>
</li>
<li>
<div class="question">Can I use this for my whole organisation, or just my team?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Either or both! That’s the beauty of dapulse—we have huge enterprises using it organization-wide as well as one and two-people teams. You’re a small team working inside a huge corporation, you say? That’s good, too. Plenty of our customers use
dapulse to improve the way their own team or department operates.</div>
</li>
<li>
<div class="question">Do you offer discounts?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We’re happy to offer discounted pricing to nonprofits and NGOs. Or if you can beat us in Street Fighter 2. (But we’re realllllly good… just saying.) Contact our Customer Success Team for more info.</div>
</li>
<li>
<div class="question">Can I change my plan?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Totes. You can upgrade, downgrade, or cancel your plan any time you want.</div>
</li>
<li class="faq">
<div class="question">What type of product support is available?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">The trial is free, but after that, yeah, you’ll need to subscribe to one of our plans to continue using dapulse. Don’t give us that look ;) We’re committed to building an amazing product that provides real and tangible value to you every day.
At 16 cents per user a day, our Basic plan sets you back less than a pencil per person. There’s no greater investment than pulling your team together and finding a great way to get work done, and many of our customers tell us that their experience
with dapulse is truly invaluable. Imagine never missing another deadline, totally eliminating angry phone calls from clients, or putting an end to painful email threads—for real. Imagine actually enjoying your everyday life at work. Priceless,
no?
</div>
</li>
<li>
<div class="question">Who should be the primary users?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We accept all major credit cards. Some of our developers could probably be bribed with cookies, but you didn’t hear that from us.</div>
</li>
</ul>
</div>
</div>
</body>
</html>

Custom tabs jumps to the top on click

I have these tabs working with no issues. The only thing is every time I click on each tab the page moves to the top. Is there any way of stopping this?
I have read previous posts and I thought the issue was to do with having <a href="#" so I have removed this. So now it is using data-tab but its still jumping to the top.
$('ul.tabs__list li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs');
$ct.find('ul.tabs__list li.current').removeClass('current');
$ct.find('.tabs__content.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
$(window).trigger('resize');
});
HTML
<div class="tabs tabs--hero">
<div class="container">
<ul class="tabs__list clear">
<li class="tabs__list--item ademi caps align-center current" data-tab="panel-1">
Containment strategy
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-2">
Aseptic Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-3">
Standard Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-4">
Mobile Clean Rooms
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-5">
Spare Parts
</li>
</ul>
</div>
<div class="section background--white">
<div class="container">
<div id="panel-1" class="tabs__content current">
<div class="group">
<div class="col4">
<div class="feature">
<h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2>
<p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p>
View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i>
</div>
</div>
<div class="col8">
<div class="feature__slider">
<ul class="slideshow">
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
<p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative More Details</p>
<p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p>
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="panel-2" class="tabs__content">
Aseptic Systems content
</div>
<div id="panel-3" class="tabs__content">
Standard Systems content
</div>
<div id="panel-4" class="tabs__content">
Mobile Clean Rooms content
</div>
<div id="panel-5" class="tabs__content">
Spare Parts content
</div>
</div>
</div>
</div>
I think no problem in your TAB js code. just add e.preventDefault();.
$('ul.tabs__list li').click(function(e){
e.preventDefault();
//code goes here.
}
add to function argument e and inside function write e.preventDefault();

adding an div in autosuggest

i am implementing the bsn autosuggest
can any one tellme how can i add an div in the result the result will be formed like this
<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
<div class="as_header">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
<ul id="as_ul">
<li>
<a name="1" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
</a>
</li>
<li>
<a name="2" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
</a>
</li>
</ul>
<div class="as_footer">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
</div>
i need to add an diva above the ul as the Category like
<div>Category</div>
i tried
var tmp = _bsn.DOM.createElement("div", {className:"tmp"});
and i need to know how to add values to the div using java script .....
This autocomplete system hasn't been updated since 2007. I think it'd be wise for you to try something that's more up to date. Do you use jQuery? This is what I'd recommend: http://docs.jquery.com/Plugins/autocomplete, it handles all the work for you.
An advantage with using jQuery is that you can utilize Google's CDN: http://css-tricks.com/google-cdn-naming/
There's a very high chance your visitor won't have to download jQuery cause it's already been used on another site.

Categories