Shortening Div Code - javascript

I have a project here that looks pretty good and does exactly what I want it to do. The codepen is here. What I need to find out is if these divs that flip:
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')"></span>
</div>
</div>
</div>
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper2">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
</div>
</div>
<div class="flip-container" id="flipcontainer">
<div class="flipper" id="flipper3">
<div class="front" id="front">
<img src="example.jpg"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')"></span>
</div>
</div>
</div>
Can be shortened in any way. It seems bulky and too "brute force method". The solution would preferably be in HTML, but JS would not be a problem. Thanks.


Any lightweight JS template engine will do for your use case. Check out this reference for examples:
https://www.sitepoint.com/overview-javascript-templating-engines/
Basically what you do is declare a template once, and apply Javascript variables through interpolation on a template instance.
Example of what such a template could look like:
<div class="flip-container" id="{{ id }}">
<div class="flipper" id="flipper2">
<div class="front" id="front">
<img src="{{ img }}"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
<div class="back" id="back">
<img src="settings-512.png" class="settings"><br class="spacer" />
<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')"></span>
</div>
</div>
</div>

Related

i need help to put 3 boxes in one line

I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>

Get array of html elements [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have some HTML that has the same section repeated a few times, I am trying to get the array of sections to print out in console.log in the JavaScript bellow.
I cant see where I have gone wrong and I get a console error on click of close of
wrapper.getElementsByClassName is not a function
Can anyone help me get this cosole.log to print the amount of arrays please.
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function () {
var wrapper = document.getElementsByClassName('sectorpage-strengths');
var div = wrapper.getElementsByClassName('container');
var section = [];
for (i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>

wrapper is a collection in your code.
Instead of
var wrapper = document.getElementsByClassName('sectorpage-strengths');
Try
var wrapper = document.getElementById('sectorpage-strengths');
Also your i variable is not defined, So instead of
for (i = 0; i < div.length; i++) { // ...
Try
for (var i = 0; i < div.length; i++) { // ...

When you are using jquery you can use jquery class selector, If you want to use document.getElementsByClass you need to get the element by passing index. Also you will like to push values in the section array ike this
section.push(div[i].find('.sectorpage-strengths-list'));
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function() {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (let i = 0; i < div.length; i++) {
section.push(div[i].find('.sectorpage-strengths-list'));
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">
<div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>

Get correct HTML array number

I have a few HTML elements that are the same, just different text.
On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.
However I get
[HTMLCollection(1)]
printed twice no matter what show less html section I click on.
Is there a reason for this? and how to fix it.
Objective
I want to get the current element array number so I can scroll to the top of the dynamic array number so I can have many HTML elements and the click scroll top event would only scroll to the top of its own section.
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function () {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (var i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
});
};

How to replace string to tag HTML

i Have problem for replace one or more word on my string to tag HTML using jquery
The problem is when i run the code, if i have two word or more with <b> in 1 string, just the first word replace to <b>
Here my Snippet :
$('.ibox-comment').find('.social-comment').find('#comment').each(function() {
var $this = $(this);
var t = $this.text();
$this.html(t.replace('<b>', '<b>').replace('</b>', '</b>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ibox-comment">
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="129">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;Justin Williams&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">4 hours ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 18:52</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="130">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Jim Yarbrough&lt;/b&gt; kesini aja &lt;b&gt;jules ferry&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">4 hours ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 18:59</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
<div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;">
<input type="hidden" name="id" id="id" value="131">
<div class="media-body" style="margin-left: 75px; text-align: left;">
<strong>
<span id="name" class="pull-right">Liam Kelly</span>
</strong>
<label id="status" class="label label-default">Unread</label> <br>
<span id="comment" style="white-space:pre-line">&lt;b&gt;Jim Yarbrough&lt;/b&gt; &lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;sdfsdf sdfsdf&lt;/b&gt;</span>
<br>
<!--<i class="fa fa-thumbs-up"></i> 26 Like this! --->
<em><br>
<small id="date" class="text-muted">7 minutes ago</small>
<small id="datehidden" class="text-muted">October 24, 2017 at 22:23</small>
</em>
</div>
<figure style="margin-right: 0px; margin-left: 10px;" class="pull-right">
<img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src="">
<img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src="">
</figure>
</div>
</div>

A quick solution would be to use parseFromString from DOMParser. Like this:
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
And in your code:
$('.ibox-comment').find('.social-comment').find('#comment').each(function() {
var $this = $(this);
var t = $this.text();
console.log(t);
console.log(htmlDecode(t));
});
See this also. Cheers!

Try this :
$this.html(t.replace(/<b>/g, '<b>').replace(/<b>/g, '</b>'));

fadeIn and fadeOut stops after adding animation to width

I have a menu made of div elements when you mouseenter the menu-item it rotates and fades the next div.container nested elements but when i add an animation to the width of the div.container the fadeIn and fadeOut stops it's just rotates them what going with that can somebody change my code so it will work properly i can't figure it out. http://jsfiddle.net/EcgTa/
here is my code
function rotateZIndex(currentMenuItem) {
var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]),
$contentContainer = $currentContent.closest('.container'),
$contentItems = $('> div', $contentContainer);
$contentItems.not($currentContent)
.css('z-index', function (i, val) { return val - 1 })
.fadeOut();
$currentContent.css('z-index', $contentItems.length).fadeIn();
}
$('.menu-item').mouseenter(function () {
$(this).closest('.container').next('.container').animate({ width: 200 });
}).mouseleave(function () {
$(this).closest('.container').next('.container').stop(false, true);
}).mouseover(function() {
rotateZIndex(this);
});
<div id="container1" class="container"
style="width:220px; position:relative; float:left">
<div class="menu-item menu-1-1">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers & Office
Supplies</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-2">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Interests</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &
Music</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-3">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Entertainment</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Sofware & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-4">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Kids</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Toys & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-5">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Clothing</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Shoes Jewelry &
Apparel</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-6">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Pharmacy</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Health & Beauty</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-7">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Home</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Furniture Outdoors
& Garden</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
</div>
<div id="container2" class="container" style="position:relative; float:left">
<div id="menu-1-1"
style="height:300px; margin-left:2px; position:absolute; background-color:Aqua; z-index:0">
Some Text</div>
<div id="menu-1-2"
style="height:280px; margin-left:2px; position:absolute; background-color:Blue; z-index:1">
Some Text</div>
<div id="menu-1-3"
style="height:260px; margin-left:2px; position:absolute; background-color:Fuchsia; z-index:2">
Some Text</div>
<div id="menu-1-4"
style="height:240px; margin-left:2px; position:absolute; background-color:Gray; z-index:3">
Some Text</div>
<div id="menu-1-5"
style="height:220px; margin-left:2px; position:absolute; background-color:Green; z-index:4">
Some Text</div>
<div id="menu-1-6"
style="height:200px; margin-left:2px; position:absolute; background-color:Lime; z-index:5">
Some Text</div>
<div id="menu-1-7"
style="height:180px; margin-left:2px; position:absolute; background-color:Maroon; z-index:6">
Some Text</div>
</div>
div.menu-item
{
padding-left:41px; padding-right: 25px; cursor:hand
}
div.menu-item-left
{
width:41px; height:44px; float:left; position:relative;right:41px; margin-left:-100%
}
div.menu-item-left .item-corner
{
width:3px; height:44px; float:left;
}
div.menu-item-left .item-corner.selected
{
background:url('images/Menu_Item_Corner.jpg') no-repeat;
}
div.menu-item-left .item-icon
{
float:right;
}
div.menu-item-left .item-icon.selected
{
background:url('images/Menu_Item_Middle.jpg') repeat-x;
}
div.menu-item-left .item-icon img
{
margin-top:3px; margin-bottom:3px; border:1px solid #969ba0
}
div.menu-item-middle
{
width:100%; height:44px; position:relative; float:left
}
div.menu-item-middle.selected
{
background:url(images/Menu_Item_Middle.jpg) repeat-x;
}
div.menu-item-middle a
{
display:block; text-decoration:none; color:#0b83bb
}
div.menu-item-middle span.header
{
display:block; margin-top:6px; margin-left:3px
}
div.menu-item-middle span.description
{
display:block; margin-left:3px
}
div.menu-item-right
{
width:26px; height:44px; float:left; position:relative; margin-right:-26px; background:url(images/Menu_Item_Arrow.jpg) no-repeat;
}
div.menu-item-right.selected
{
background:url('images/Menu_Item_Arrow_Over.jpg') no-repeat;
}

This should fix it:
.container{
overflow: visible !important
}
EDIT: a bit more research turned up this explanation:
Apparently when you animate the width, jquery sets the overlow of the item to hidden. This forces it to stay visible.
Similar to this: JQuery: Children Disappear on Parent Size Animation

Categories