I have a set of accordions on a working page. Linking to the tabs from the same page works. I need to link to them from a different page.
Here is my JS.
<script type="text/javascript">
require(['responsiveTabs'], function() {
$('#Accordion_TabRepeater').responsiveTabs({
collapsible: 'accordion',
startCollapsed: 'accordion',
scrollToAccordion: true,
scrollToAccordionOnLoad: false,
active: 0
});
});
</script>
Accordion menu code:
<div class="row">
<div class="text-col-container"><div id="Accordion_TabRepeater" class="responsiveTabs accordionGeenCircle noCounter">
<ul class="tabMenu">
<li>
<a href="#tab-1-Accordion_TabRepeater" title="Academic Tuition and Fee Rates">
<span class="tab-item-title">Academic Tuition and Fee Rates</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-2-Accordion_TabRepeater" title="Rates for Frederick County High School Students">
<span class="tab-item-title">Rates for Frederick County High School Students</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-3-Accordion_TabRepeater" title="Academic Payment Due Dates - Drop Zone">
<span class="tab-item-title">Academic Payment Due Dates - Drop Zone</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-4-Accordion_TabRepeater" title="Options for Paying Your Academic Tuition">
<span class="tab-item-title">Options for Paying Your Academic Tuition</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-5-Accordion_TabRepeater" title="Work in Frederick County?">
<span class="tab-item-title">Work in Frederick County?</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-6-Accordion_TabRepeater" title="Refund Policy">
<span class="tab-item-title">Refund Policy</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-7-Accordion_TabRepeater" title="Continuing Education & Workforce Development Payment">
<span class="tab-item-title">Continuing Education & Workforce Development Payment</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-8-Accordion_TabRepeater" title="Past Due Balances/Collections">
<span class="tab-item-title">Past Due Balances/Collections</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-9-Accordion_TabRepeater" title="Student Account Forms">
<span class="tab-item-title">Student Account Forms</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-10-Accordion_TabRepeater" title="1098-T FAQ">
<span class="tab-item-title">1098-T FAQ</span>
<span class="ui-icon"></span>
</a>
</li><li>
<a href="#tab-11-Accordion_TabRepeater" title="Financial Awareness Resources">
<span class="tab-item-title">Financial Awareness Resources</span>
<span class="ui-icon"></span>
</a>
</li>
</ul>
Accordion Content (just the first one - to save space here):
<div class="tabPanels">
<div class="tab-panel-counter-increment"></div>
<div id="tab-1-Accordion_TabRepeater">
<h3 class="tab-panel-title">Academic Tuition and Fee Rates</h3>
<div class="tab-panel-content">
<p>To see the most recent tuition & fees, visit https://www.frederick.edu/cost-financial-aid/tuition-fees.aspx </p>
</div>
Here is the page: https://www.frederick.edu/cost-financial-aid/student-accounts.aspx
If you hover over any of the accordions, you can see it's link.
For example, the third accordion link is:
https://www.frederick.edu/cost-financial-aid/student-accounts.aspx#tab-3-Accordion_TabRepeater
You can easily link and open this accordion IF on the same page. I want to be able to link to this accordion from another page.
Related
I am having troubles with a a navigation (structured with tabs) that is not working on this page. but works properly instead on this page using exactly the same way to include it.
On click on "Norway" on top left the navigation opens but is not possible to switch on the tabs "Americas, South Africa" etc.)
This is the phpi'm using to include it:
<div class="outlet__box">
<div class="outlet__box_content">
<?php include '../../menu.php'; ?>
</div>
</div>
The htmlof the navigation is this instead:
<ul class="tabs">
<li class="active">
<span class="h2 tabs__headline trigger-select-tab">Europe
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Americas
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Middle East and Africa
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Asia and Oceanic
<span class="caret visible-xs"></span>
</span>
</li>
</ul>
Is the problem related to js? (I checked the console and i see no errors).
Any tips?
Thanks in advance
Put this code for your navigation, and you're all set...
$('#language-outlet-wrapper .outlet .tabs>li').click(function(index){
var ind = $('#language-outlet-wrapper .outlet .tabs>li').index(this);
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().parent().find('ul.tab_content>li').each(function(index){
if(ind == index){
$(this).addClass('active').siblings().removeClass('active');
}
});
});
I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.
I have a input field where the user can type normally. Just beside the field there is an arrow
on click of that arrow a dropdown will get open that contains list of data.
Now when the user clicks on any of the values in the dropdown list that should get displayed in the input field
This selected value can be edited by the user as it will be treated as a normal input value.
The issue at my end is that when i select the value from dropdown it is coming like this
HTML Code
<input type="text" value="" id="job" placeholder="Job title" class="form-control title" name="job">
<button type="button" class="form-control btn btn-default toggle-dropdown pj-dropdown-menu pj-jobtitle" data-toggle="dropdown" name="job_title" id="job_title">
<input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu line pj-dropdown-menu" role="menu" >
<li class="line" >
<a href="#">
<span class="developer">Frontend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line">
<a href="#">
<span class="developer">Backend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line" >
<a href="#">
<span class="developer">Business Consultant </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
</ul>
Script Code
<script>
$('.dropdown-menu a').on('click', function(){
$('.toggle-dropdown').html($(this).find('span').html() + '<span class="caret"></span>');
})
</script>
Can you please try this script.
<script>
$('.dropdown-menu a').on('click', function(){
$("#job").val($(this).find("span").text());
})
</script>
On click of a tag simply find the inner span's text and assign that as a value in a text box with ID #job.
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.
Basically I have a carousel slider which I am using to display dates so that a user can scroll across (img below)
Everything works as it should but my only struggle now is to disable that left button once a user has scrolled so far.. example below
<div class="dates-bar">
<a class="centralprev prev"> <i class="fa fa-angle-left"> </i>
</a>
<a data-date="24/07/2016" class="centraldateconed" style="margin-left: 140px;"> <span class="date">24/07</span> <span class="month">July</span> <span class="tick"> </span>
</a>
<a data-date="24/07/2016" class="datecon"> <span class="date">31/07</span> <span class="month">July</span> <span class="tick"> </span>
</a>
<a data-date="2/08/2016" class="datecon"> <span class="date">02/08</span> <span class="month">August</span> <span class="tick"> </span>
</a>
<a data-date="03/08/2016" class="datecon"> <span class="date">03/08</span> <span class="month">August</span> <span class="tick"> </span>
</a>
<a data-date="07/08/2016" class="datecon"> <span class="date">07/08</span> <span class="month">August</span> <span class="tick"> </span>
</a>
<a class="centralnext next"> <i class="fa fa-angle-right"> </i>
</a>
</div>
Thanks in advance for your assistance.
This might work:
when you click on .centralprev if the number of visible .datecon elements inside .dates-bar is equal to 1 then .centralprev will be hidden, else it will be shown and so will .centralnext:
$(".centralprev").click(function(){
if($(".dates-bar>.datecon:visible").length===1){
$(".centralprev").hide();
}
else{
$(".centralprev").show();
$(".centralnext").show();
}
})
And vice versa for the other button:
$(".centralnext").click(function(){
if($(".dates-bar>.datecon:visible").length===1){
$(".centralnext").hide()
}
else{
$(".centralnext").show();
$(".centralprev").show();
}
})