CSS / JS tabs not respoding on click - javascript

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

Related

Link to Accordion on a different page

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.

jquery page counter, pagination

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.

Jquery remove class issue

I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle
The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.
I am having slight issue in removing a the toggle class with the close button. Below is my code
$('.details-btn').click(function(){
var $panel = $(this).closest('.square').find('.i-panel');
if ($panel.hasClass('inactive')) {
$('.square .i-panel').addClass('inactive');
$panel.removeClass('inactive');
} else {
$panel.addClass('inactive');
}
});
HTML
<div class="item-container small-6 relative">
<div class="square">
<span class="exclusive-tag-3 cap-txt absolute">
<p class="absolute">New</p>
</span>
<img src="http://myjpg">
<div class="item-details">
<ul>
<li class="small-5">
<p>ICON</p>
</li>
<!-- INFO BTN -->
<li class="small-5 details-btn">
<i class="fa fa-info-circle">OPEN</i>
</li>
<!-- INFO BTN ENDS -->
</ul>
</div>
<div class="d-hidden i-panel inactive absolute">
<article class="global-padding">
</article>
<footer class="absolute">
<ul class="global-padding">
<li class="small-5">
<a>
<p class="heading-5">Details</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-envelope-o">SEND</i>
</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
</a>
</li>
</ul>
</footer>
</div>
</div> <!-- SQUARE ENDS HERE -->
</div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->
You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.
Try replacing
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
with
<p class="heading-5 details-btn">
<i class="fa fa-times">close</i>
</p>
Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:
<i class="fa fa-times details-btn">close</i>

How to click on the element using jQuery which generates dynamic ID on the click of the element?

<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.

Find nested children of li

I know it is ugly, but I need to find out how to get the attribute of <a> tag, of each <li> that has a <span> with class jqx-checkbox-check-checked, if the <li> contains another set of <ul><li>. Only direct <span> will be check for the desired class(jqx-checkbox-check-checked)
This is the code sample:
<li>
<span></span>
<div>
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqxtree item">
<b style="color:black"> item1</b>
</span>
<ul class="jqx-tree-dropdown" >
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class="chkbox jqx-checkbox">
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqx-tree-item">
item2
</span>
</li>
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class=""><div>
<div class="jqx-checkbox-default jqx-rc-all" >
<span class="jqx-checkbox-check-checked"></span>
</div></div></div>
<span class="jqx-rc-all jqx-tree-item">
<b style="color:black"> item3</b>
</span>
</li>
</ul>
</li>
</ul>
</li>
I know it is not simple! but if someone can show me the right jquery approach, I will be more then grateful
I dont fully understand your question - but I think you need to have a read of the following jQuery methods :
closest()
next()
find()
Using a combination of those you might be able to get a handle on the object you need
Done it :
$('.jqx-checkbox-check-checked').each(function(){
alert($(this).parent().parent().parent().next().find('a')
.attr('href'));
});
Working example : http://jsfiddle.net/manseuk/CEYXc/
Your HTML is all over the place ...

Categories