I've got a list of products and what i want to do is to make the price of the product clickable just like the product title linking to the same product URL.
I've created a for loop to try and do this, but the issue i have is each href link for each product is being created per product where i only need the one price with the corresponding href link. How do i correct this?
Note: I don't have access to change the original html which is why i'm trying to make these changes in javascript
var getAllLinks = document.querySelectorAll('.productTitle').forEach(function(el){
var createNewLinks = document.querySelectorAll('.productPrice').forEach(function (elem){
elem.insertAdjacentHTML("afterend", ""+ elem.innerText +"");
})
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
I'm not quite sure about your problem but I think maybe this is what you want.
Please let me know if I got it wrong :)
var getLink = document.querySelectorAll('.productTitle');
var newLink = document.querySelectorAll('.productPrice');
getLink.forEach((link, i) => {
newLink[i].insertAdjacentHTML("afterend", "" + newLink[i].innerText + "");
newLink[i].remove();
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
Why don't you just include the price within the a tag and forget about JavaScript all together?
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1
<span class="productPriceContainer">
<span class="productPrimary">
<span class="productPrice">€ 5,90</span>
</span>
</span>
</a>
</div>
</article>
You'd need to change the inner divs to spans to be semantic HTML, and potentially some CSS changes to get the styling just right, but this seems like a way better solution.
Related
I feel like the solution to this must be obvious but I just cannot figure it out...
I have some very simple vanilla javascript with two tab menus. The issue is that I cannot figure out how to control the two menus independently of each other without creating conflicts. The end goal is to have the two menus initialized and controlled separately from each other.
The codepen is here: https://codepen.io/trevor3999/pen/gOPPoYB
In that codepen, I am selecting elements using shared classes, which clearly is an issue. So I've initialized separates IDs for each tab group, but I just can't figure out how to utilize them...
Any help would be much appreciated – thank you!
HTML
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
class="has-text-primary">Sensors</span>
</h2>
</div>
</div>
<div class="columns">
<div class="column is-offset-1">
<div class="tabs is-medium is-uppercase" id="sensor-tabs">
<ul>
<li class="is-active" data-tab="1">
<a>
<span>EO/IR</span>
</a>
</li>
<li data-tab="2">
<a>
<span>Radar</span>
</a>
</li>
<li data-tab="3">
<a>
<span>Other Sensors</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-10">
<div id="sensor-tab-content" class="tab-content">
<menu class="is-active" data-content="1">
<div class="columns is-multiline">
EO/IR
</div>
</menu>
<menu data-content="2">
<div class="columns is-multiline">
Radar
</div>
</menu>
<menu data-content="3">
<div class="columns is-multiline">
Other
</div>
</menu>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="columns">
<div class="column">
<hr>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
class="has-text-primary">Platforms</span>
</h2>
</div>
</div>
<div class="columns">
<div class="column is-offset-1">
<div class="tabs is-medium is-uppercase" id="platform-tabs">
<ul>
<li class="is-active" data-tab="uas">
<a>
<span>UAS/RPAS</span>
</a>
</li>
<li data-tab="fixed">
<a>
<span>Fixed Wing</span>
</a>
</li>
<li data-tab="rotary">
<a>
<span>Rotary Wing</span>
</a>
</li>
<li data-tab="land">
<a>
<span>Land</span>
</a>
</li>
<li data-tab="naval">
<a>
<span>Naval</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-10">
<div id="platform-tab-content" class="tab-content">
<menu class="is-active" data-content="uas">
<div class="columns is-multiline">
UAS
</div>
</menu>
<menu data-content="fixed">
<div class="columns is-multiline">
Fixed Wing
</div>
</menu>
<menu data-content="rotary">
<div class="columns is-multiline">
Rotary Wing
</div>
</menu>
<menu data-content="land">
<div class="columns is-multiline">
Land
</div>
</menu>
<menu data-content="naval">
<div class="columns is-multiline">
Naval
</div>
</menu>
</div>
</div>
</div>
</div>
</section>
CSS
.tab-content menu {
display: none;
}
.tab-content menu.is-active {
display: block;
}
Javascript
const TABS = [...document.querySelectorAll('.tabs li')];
const CONTENT = [...document.querySelectorAll('.tab-content menu')];
const ACTIVE_CLASS = 'is-active';
function initTabs() {
TABS.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selected = tab.getAttribute('data-tab');
updateActiveTab(tab);
updateActiveContent(selected);
})
})
}
function updateActiveTab(selected) {
TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS);
}
});
selected.classList.add(ACTIVE_CLASS);
}
function updateActiveContent(selected) {
CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS);
}
let data = item.getAttribute('data-content');
if (data === selected) {
item.classList.add(ACTIVE_CLASS);
}
});
}
initTabs();
Here's a lazy solution with only a few changes:
https://codepen.io/watofundefined/pen/KKVVROW
console.log("I don't know what kind of code snippet to put here to make the validation happy, sorry!")
I have multiple sections in which I want to sort the DIVs if contains <span> text in it otherwise. I tried different stackoverflow threads but nothing helps for me so far, I am little near to my target but my code doesn't work I am not sure what I am doing wrong in it, these inner divs needs to be sorted inside each section. but I am not good at JS.
If div contains the span text it bring it to first in each section.
sortUsingNestedText($('#toSort'), "div.customCardData", "span.recenUpdate");
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
console.log("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
Here is my jsFiddle
Firstly note that you have created multiple elements with the same id of toSort. This is invalid as id must be unique within the DOM. If you want to group elements by common behaviour use classes instead.
I want to bring the span ones one first in each section
In this case you don't need sort. Just append() the relevant div to the start of their group:
$('.toSort').each(function() {
var $h2 = $(this).find('h2');
$(this).find('.customCardData:has(span.recenUpdate)').insertAfter($h2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
I am working with AJAX.
I make a GET request that returns a raw HTML string with the contents of a webpage. I am trying to find a way to extract all of the elements in between the opening and closing div tags:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<!-- Trying to extract the children here -->
</div>
I've tried the following regex:
var div_result = result.match('(<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">)[^]*(</div>)').toString();
Which doesn't work properly. Over the div of .main-container, there is a div that contains this div. When I use this div, it returns the <\div> of the parent div, and not its own <\div>.
Is there any way to extract the text between the opening and closing div tags (<div ..> and </div>) which is only the first occurrence?
Edit: Added expected and actual results of the regex
This is what it's supposed to return:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<div class="row">
<!-- <div class="col-sm-12" role="heading"> -->
<div role="heading">
<div class="region region-header">
</div>
</div>
<section>
<a id="main-content"></a>
<div class="region region-content">
<section class="views-element-container block block-views block-views-blockabout-us-changing-images-block-3 clearfix" id="block-views-block-about-us-changing-images-block-3">
<div class="form-group">
<div class="view view-about-us-changing-images view-id-about_us_changing_images view-display-id-block_3 js-view-dom-id-f2624873734f13a6913b256416a10ff6d932a3677c7b77a637cdd2db4a34b6d8">
<div class="view-content">
<div class="about-images views-row">
<div class="views-field views-field-field__about-us-changing-image-2">
<div class="field-content"> <img src="/sites/default/files/2018-07/team_1.jpg" width="2000" height="1000" alt="team" typeof="foaf:Image" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav role="navigation" aria-labelledby="block-aboutusteam-menu" id="block-aboutusteam">
<h2 class="visually-hidden" id="block-aboutusteam-menu">About Us: Team</h2>
<ul class="menu menu--about-us-team nav">
<li class="expanded dropdown active">
OUR TEAM <span class="caret"></span>
<ul class="dropdown-menu">
<li>
ABOUT US
</li>
<li>
CAREERS
</li>
<li>
LOCATIONS
</li>
</ul>
</li>
</ul>
</nav>
<div class="views-element-container form-group">
<div class="view view-about-us view-id-about_us view-display-id-page_3 js-view-dom-id-397ff9a567cc56e3cd5c3a241a47b938891ffac5bf429f45429bea3f12e2f041">
<div class="view-content">
<div class="nav-buttons"></div>
<div class="nav-buttons"><span class="views-field views-field-field-menu-link-1"><span class="field-content nav-buttons">ABOUT US</span></span> <span class="views-field views-field-field-menu-link-2"><span class="field-content nav-buttons">CAREERS</span></span>
<span class="views-field views-field-field-menu-link-3"><span class="field-content nav-buttons">OUR TEAM</span></span> <span class="views-field views-field-field-menu-link-4"><span class="field-content nav-buttons">LOCATIONS</span></span>
</div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
This is what it actually returns:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<div class="row">
<!-- <div class="col-sm-12" role="heading"> -->
<div role="heading">
<div class="region region-header">
</div>
</div>
<section>
<a id="main-content"></a>
<div class="region region-content">
<section class="views-element-container block block-views block-views-blockabout-us-changing-images-block-3 clearfix" id="block-views-block-about-us-changing-images-block-3">
<div class="form-group">
<div class="view view-about-us-changing-images view-id-about_us_changing_images view-display-id-block_3 js-view-dom-id-b47f64080ec9b40e5e3c78370baead058f8da13fd70c4b5e10f54261cac8abef">
<div class="view-content">
<div class="about-images views-row">
<div class="views-field views-field-field__about-us-changing-image-2">
<div class="field-content"> <img src="/sites/default/files/2018-07/team_1.jpg" width="2000" height="1000" alt="team" typeof="foaf:Image" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav role="navigation" aria-labelledby="block-aboutusteam-menu" id="block-aboutusteam">
<h2 class="visually-hidden" id="block-aboutusteam-menu">About Us: Team</h2>
<ul class="menu menu--about-us-team nav">
<li class="expanded dropdown active">
OUR TEAM <span class="caret"></span>
<ul class="dropdown-menu">
<li>
ABOUT US
</li>
<li>
CAREERS
</li>
<li>
LOCATIONS
</li>
</ul>
</li>
</ul>
</nav>
<div class="views-element-container form-group">
<div class="view view-about-us view-id-about_us view-display-id-page_3 js-view-dom-id-2550c3cf05f278ecbed10aa27942784678825c143bb247acf4fff74ae465e5b6">
<div class="view-content">
<div class="nav-buttons"></div>
<div class="nav-buttons"><span class="views-field views-field-field-menu-link-1"><span class="field-content nav-buttons">ABOUT US</span></span> <span class="views-field views-field-field-menu-link-2"><span class="field-content nav-buttons">CAREERS</span></span>
<span class="views-field views-field-field-menu-link-3"><span class="field-content nav-buttons">OUR TEAM</span></span> <span class="views-field views-field-field-menu-link-4"><span class="field-content nav-buttons">LOCATIONS</span></span>
</div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer class="footer container" role="contentinfo">
<div class="region region-footer">
<nav role="navigation" aria-labelledby="block-bootstrap-subtheme-footer-menu" id="block-bootstrap-subtheme-footer">
<h2 class="visually-hidden" id="block-bootstrap-subtheme-footer-menu">Footer menu</h2>
<ul class="menu menu--footer nav">
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
</div>
Regex is probably not the best way to go about this.
The DOMParser is now widely supported in all major browsers, and allows you to turn an HTML string into a dummy DOM element that you can manipulate and perform operations on (same as any other genuine DOM element).
var htmlString = "<div role=\"main\" class=\"main-container js-quickedit-main-content\" style=\"padding:0px;margin:0px;\"><div>First child</div><div>Second child</div><div>Third child</div></div>";
var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");
var parent = doc.querySelector(".main-container");
var children = parent.childNodes;
children.forEach(child => console.log(child));
The new DOMParser().parseFromString() method accepts two arguments and returns a dummy HTML element that you can manipulate directly in javascript without ever creating an actual element in the DOM. The first argument is the string to parse, and the second is the type of text content (it can also parse XML)
I use Node.childNodes to retrieve the child elements
I use element.querySelector() in order to select the parent div that has a class of main-container
I use Array.prototype.forEach() to simply cleanly log out the children that are retrieved
The htmlString variable above is the equivalent of the following:
<div role="main" class="main-container js-quickedit-main-content" style="padding:0px;margin:0px;">
<div>First child</div>
<div>Second child</div>
<div>Third child</div>
</div>
You match returns array of matches where first element is whole string, second element is div open tag, and the third is div closing tag.
You should group content between tags, and take second element from array:
var result = '<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">... </div>';
var div_result = result.match('<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">([^]*)</div>')[1].toString();
alert(div_result);
and of course do not forget to check if match was found
So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.
This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!
I am trying to code something like this one on http://teamgeek.co.za/#who
I already had the code on the gif and div that will show the description on the bottom of each picture selected. The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself.
Here is my script that I used.
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
<script>
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
This is the full code that I used, and I am using the javascript above to get the functions:
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages">
<div id="1" class="mydivhide">
<h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
</div>
<div id="2" class="mydivhide">
<h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
</div>
<div id="3" class="mydivhide">
<h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
</div>
<div id="4" class="mydivhide">
<h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items2">
<div class="item">
<a id="5" class="work page-scroll">
<img class="media" src="img/tryimages/rd.png"/>
<div class="content">
<img class="media" src="img/tryimages/rd.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="6" class="work page-scroll">
<img class="media" src="img/tryimages/soc.png"/>
<div class="content">
<img class="media" src="img/tryimages/soc.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="7" class="work page-scroll">
<img class="media" src="img/tryimages/anj.png"/>
<div class="content">
<img class="media" src="img/tryimages/anj.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="8" class="work page-scroll">
<img class="media" src="img/tryimages/ian.png"/>
<div class="content">
<img class="media" src="img/tryimages/ian.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages2">
<div id="5" class="mydivhide">
<h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
</div>
<div id="6" class="mydivhide">
<h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
</div>
<div id="7" class="mydivhide">
<h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
</div>
<div id="8" class="mydivhide">
<h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
</div>
</div>
</div>
</section>
If you want to go with this code you should maybe use this:
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
</script>
I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-)
However, this isn't a good way to solve your issue. As in the comments already mentioned, it's a lot better to handle it with classes.
Here is a jsfiddle which can easily solve your problem:
JSFiddle
However you might only change the effect, but this is a minor thing.
Below code optimization of toggle for your issue
you have set class as .row-data for each row and the and write below script..
<script>
$(".row-data a").click(function() {
$(".row-data").hide("slow");
$(this).parent().show("slow");
});
</script>
Note: remove your Script...