I have class "selected" it has background color red I want when click in word in the sidebar give the class "selected" to the same company have this name on the right-hand side and at the same time another company that not select be hidden
code: https://codepen.io/El7raq/pen/VwWjjgK
I, mean something like this in the dashboard we select name some me this section only -> https://drive.google.com/drive/folders/1DzLg26BWmMpMhlQ-lS08UK4r74GTiDut?usp=sharing
HTML
<section class="business-partners">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="col-12 business-partners-header">Business Partners</h2>
</div>
</div>
<div class="row">
<!-- Start slider -->
<div class="col-lg-3 col-md-5 col-sm-12">
<div class="slide">
<h4 class="slid-header">| Partners</h4>
<p id="zoom" class="partners partner-selected"><span>Zoom</span></p>
<p id="jabra" class="partners"><span>Jabra</span></p>
<p id="epos" class="partners"><span>EPOS</span></p>
<p id="dten" class="partners"><span>DTEN</span></p>
<p id="ttec" class="partners"><span>TTec</span></p>
</div>
</div>
<!-- End slider -->
<div class="col-lg-8 col-md-7 col-sm-12">
<div id="zoom" class="partners-content selected">
<h2 class="partners-name">Zoom</h2>
<img class="partners-img" src="../images/business-partners/zoom.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows.
</p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and selves. Our culture of delivering happiness stems from this value.
</p>
</div>
<div id="jabra" class="partners-content">
<h2 class="partners-name">Jabra</h2>
<img class="partners-img" src="../images/business-partners/jabra_logo.jpg" alt="zoom" srcset="">
<p class="partners-description">
a global brand with a serious passion for sound. Thanks to our expertise in consumer, professional and medical audio technology, our passion is backed up by unrivaled knowledge of the human ear. We’re in the business of helping you hear what you want to hear – from letting the right sound in, to filtering disruptive noise out – but our products are about so much more than that, packed with intuitive features to make life sound better.
</p>
</div>
<div id="epos" class="partners-content">
<h2 class="partners-name">EPOS</h2>
<img class="partners-img" src="../images/business-partners/EPOS_Logo_-_Black_-_Large.jpg" alt="zoom" srcset="">
<p class="partners-description">
EPOS delivers high-end audio solutions designed for enterprise and gaming. Based on pioneering audio technology, EPOS strives to unleash human potential by perfecting audio experiences and delivering innovative design and performance with all of our audio solutions. <p>
Zoom’s value is to care. We care for our customers, employees, company, community, and selves. Our culture of delivering happiness stems from this value.
</p>
<p>
EPOS headquarters is located in Copenhagen, Denmark, and is a key hub for our business. EPOS builds on more than 115 years of experience in audio innovation. We operate in a global market with offices and partners in more than 60 countries.
</p>
<p>
EPOS Name is derived from Latin and ancient Greek and is used to describe epic stories, speech, and poetry. The name encapsulates our dedication to creating solutions that enable ways of communication through the Power of Audio. </p>
<p>
EPOS is part of the Demant group – a world-leading audio and hearing technology group that offers solutions and services to help people connect and communicate with the world around them. The Demant Group operates in a global market with companies in more than 30 countries, employs more than 16,000 employees, and generates annual revenue of DKK 14.5 billion.
</p>
</div>
<div id="dten" class="partners-content">
<h2 class="partners-name">DTEN</h2>
<img class="partners-img" src="../images/business-partners/DIC_i_Yi_400x400.jpg" alt="zoom" srcset="">
<p class="partners-description">
DTEN builds innovative communications technology creating the ideal environment to communicate and collaborate.
</p>
<p>
DTN develops award-winning collaboration solutions that combine all-in-one cutting- edge features, plug-and-play ease, high quality performance and affordability.
</p>
<p>
DTEN's Zoom certified appliances and integrated service subscriptions revolutionize the way teams around the world connect, communicate and collaborate.
</p>
<p>
Founded in 2015, DTEN is rapidly becoming a recognized international leader for innovation and accessibility in communication.
</p>
<h4>
DTEN D7
Wins 2019 Red Dot Best Of The Best Award
</h4>
<p>
DTEN is a 2019 recipient of the prestigious Red Dot: Best of the Best Award for D7. The Red Dot Award recognizes D7 for innovative product design, including breakthrough technology, inherent functionality and streamlined aesthetics.
</p>
</div>
<div id="ttec" class="partners-content">
<h2 class="partners-name">TTec</h2>
<img class="partners-img" src="../images/business-partners/ttec.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows. </p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
</div>
</div>
</div>
</section>
CSS
.business-partners-body{
position: relative;
}
.business-partners-body .top-svg{
position: absolute;
z-index: -1;
width: 100%;
top: 40px;
}
.business-partners {
margin-top: 100px;
margin-bottom: 100px;
}
.business-partners .business-partners-header {
margin-bottom: 50px;
font-size: 45px;
}
.business-partners .business-partners-header:after {
background-color: #000;
content: "";
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 40px;
}
.business-partners .business-partners-header:after {
left: 0.5em;
margin-right: -50%;
}
/*Partners slider*/
.slide {
border: 2px solid #000;
min-height: 445px;
border-radius: 15px;
}
.slide .slid-header {
padding: 20px;
border-bottom: 2px solid #000;
}
.slide .partners {
padding: 15px 10px 10px 15px;
margin: 0;
font-size: 18px;
}
.slide .partner-selected {
color: var(--primary-color);
}
.slide .partners span:hover {
color: var(--hover-color)
}
/* Partners content*/
.partners-content {
margin-left: 80px;
/* display: none; */
}
.partners-content .partners-name {
margin-bottom: 30px;
}
.partners-content .partners-img{
width: 100%;
height: 300px;
margin-bottom: 50px;
}
.selected {
display:block;
background-color: red;
}
thank's for the help
You can try with below code :
$(document).ready(function(){
$('.partners').click(function(){
$('.partners').removeClass('partner-selected');
$('.partners-content').removeClass('selected');
$(this).addClass('partner-selected');
var side_id = $(this).attr('id');
$('partners-content').hide();
if($('div#' + side_id).hasClass('partners-content')){
$("div#" + side_id).addClass("selected");
$("div#" + side_id).show();
}
});
});
.business-partners-body{
position: relative;
}
.business-partners-body .top-svg{
position: absolute;
z-index: -1;
width: 100%;
top: 40px;
}
.business-partners {
margin-top: 100px;
margin-bottom: 100px;
}
.business-partners .business-partners-header {
margin-bottom: 50px;
font-size: 45px;
}
.business-partners .business-partners-header:after {
background-color: #000;
content: "";
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 40px;
}
.business-partners .business-partners-header:after {
left: 0.5em;
margin-right: -50%;
}
/*Partners slider*/
.slide {
border: 2px solid #000;
min-height: 445px;
border-radius: 15px;
}
.slide .slid-header {
padding: 20px;
border-bottom: 2px solid #000;
}
.slide .partners {
padding: 15px 10px 10px 15px;
margin: 0;
font-size: 18px;
}
.slide .partner-selected {
color: var(--primary-color);
}
.slide .partners span:hover {
color: var(--hover-color)
}
/* Partners content*/
.partners-content {
margin-left: 80px;
/* display: none; */
}
.partners-content .partners-name {
margin-bottom: 30px;
}
.partners-content .partners-img{
width: 100%;
height: 300px;
margin-bottom: 50px;
}
.partners-content{
display:none;
}
.selected {
display:block;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section class="business-partners">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="col-12 business-partners-header">Business Partners</h2>
</div>
</div>
<div class="row">
<!-- Start slider -->
<div class="col-lg-3 col-md-5 col-sm-12">
<div class="slide">
<h4 class="slid-header">| Partners</h4>
<p id="zoom" class="partners partner-selected"><span>Zoom</span></p>
<p id="jabra" class="partners"><span>Jabra</span></p>
<p id="epos" class="partners"><span>EPOS</span></p>
<p id="dten" class="partners"><span>DTEN</span></p>
<p id="ttec" class="partners"><span>TTec</span></p>
</div>
</div>
<!-- End slider -->
<div class="col-lg-8 col-md-7 col-sm-12">
<div id="zoom" class="partners-content selected">
<h2 class="partners-name">Zoom</h2>
<img class="partners-img" src="../images/business-partners/zoom.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows.
</p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
<div id="jabra" class="partners-content">
<h2 class="partners-name">Jabra</h2>
<img class="partners-img" src="../images/business-partners/jabra_logo.jpg" alt="zoom" srcset="">
<p class="partners-description">
a global brand with a serious passion for sound. Thanks to our expertise in consumer, professional and medical audio technology, our passion is backed up by unrivaled knowledge of the human ear. We’re in the business of helping you hear what you want to hear – from letting the right sound in, to filtering disruptive noise out – but our products are about so much more than that, packed with intuitive features to make life sound better.
</p>
</div>
<div id="epos" class="partners-content">
<h2 class="partners-name">EPOS</h2>
<img class="partners-img" src="../images/business-partners/EPOS_Logo_-_Black_-_Large.jpg" alt="zoom" srcset="">
<p class="partners-description">
EPOS delivers high-end audio solutions designed for enterprise and gaming. Based on pioneering audio technology, EPOS strive to unleash human potential by perfecting audio experiences and delivering innovative design and performance with all of our audio solutions. <p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
<p>
EPOS headquarters is located in Copenhagen, Denmark, and is a key hub for our business. EPOS builds on more than 115 years of experience in audio innovation. We operate in a global market with offices and partners in more than 60 countries.
</p>
<p>
EPOS Name is derived from Latin and ancient Greek and is used to describe epic stories, speech and poetry. The name encapsulates our dedication to create solutions that enable ways of communication through the Power of Audio. </p>
<p>
EPOS is part of the Demant group – a world-leading audio and hearing technology group that offers solutions and services to help people connect and communicate with the world around them. The Demant Group operates in a global market with companies in more
than 30 countries, employs more than 16,000 employees and generates an annual revenue of DKK 14.5 billion.
</p>
</div>
<div id="dten" class="partners-content">
<h2 class="partners-name">DTEN</h2>
<img class="partners-img" src="../images/business-partners/DIC_i_Yi_400x400.jpg" alt="zoom" srcset="">
<p class="partners-description">
DTEN builds innovative communications technology creating the ideal environment to communicate and collaborate.
</p>
<p>
DTEN develops award-winning collaboration solutions that combine all-in-one cutting- edge features, plug-and-play ease, high quality performance and affordability.
</p>
<p>
DTEN's Zoom certified appliances and integrated service subscriptions revolutionize the way teams around the world connect, communicate and collaborate.
</p>
<p>
Founded in 2015, DTEN is rapidly becoming a recognized international leader for innovation and accessibility in communication.
</p>
<h4>
DTEN D7
Wins 2019 Red Dot Best Of The Best Award
</h4>
<p>
DTEN is a 2019 recipient of the prestigious Red Dot: Best of the Best Award for D7. The Red Dot Award recognizes D7 for innovative product design, including breakthrough technology, inherent functionality and streamlined aesthetics.
</p>
</div>
<div id="ttec" class="partners-content">
<h2 class="partners-name">TTec</h2>
<img class="partners-img" src="../images/business-partners/ttec.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows. </p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Related
I'm trying to build a simple slider. You click left, the images slide left. You click right, the images slide right.
I have done that. It works great, with one small problem. It is hard to describe the problem so I will give you a fiddle instead. I would print all the code here but it is too much.
$(function () {
$("#oe-slide-left").on('click', function () {
SlideLeft();
});
$("#oe-slide-right").on('click', function () {
SlideRight();
});
});
function SlideLeft() {
var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;
if (countLeft > 3) {
$("#oe-testemonials div.oe-testemonial:visible").first().animate({ width: 'toggle' }, 350);
}
if (countLeft === 4) {
$("#oe-slide-left").hide();
}
if (countRight === 0) {
$("#oe-slide-right").show();
}
}
function SlideRight() {
var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;
if (countRight > 0) {
$("#oe-testemonials div.oe-testemonial:hidden").last().animate({ width: 'toggle' }, 350);
}
if (countRight <= 1) {
$("#oe-slide-right").hide();
}
if (countLeft === 3)
{
$("#oe-slide-left").show();
}
}
.oe-testemonials {
margin-top: 40px;
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
.slider-left-arrow, .slider-right-arrow {
position: absolute;
z-index: 1000;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
&:hover {
background: #efe5e5;
opacity: 0.8;
}
}
.slider-left-arrow {
left: 15px;
}
.slider-right-arrow {
right: 15px;
}
.oe-testemonial {
width: 33%;
display: inline-block;
margin: auto;
white-space: normal;
.image-wrapper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
margin: auto;
img {
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}
}
.description, .name, .title, .location {
width: 90%;
max-width: 300px;
text-align: center;
margin: auto;
}
.description {
border-bottom: 1px solid #999;
padding-bottom: 5px;
margin-bottom: 5px;
color: #413880;
}
.name {
font-family: 'Just Another Hand', cursive;
font-size: 24px;
}
.location {
color: #B3B3B3;
}
}
}
.description{
width: 100px !important;
}
<div id="oe-testemonials" class="oe-testemonials">
<img id="oe-slide-left" src="/Images/left_arrow.png" alt="Click To Slide Left" class="slider-left-arrow">
<img id="oe-slide-right" src="/Images/right_arrow.png" alt="Click To Slide Right" class="slider-right-arrow" style="display: none;">
<div class="oe-testemonial" style="display: inline-block;"><div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div><div class="name"><span>Dr. Erin Hartigan</span></div><div class="title"><span>Assistant Professor of Physical Therapy</span></div><div class="location"><span>University of New England</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div><div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div><div class="name"><span>Dr. Hitesh Gopalan</span></div><div class="title"><span>Editor</span></div><div class="location"><span>orthopaedicprinciples.com</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div><div class="name"><span>Dr. David Gryfe</span></div><div class="title"><span>Chiropractor</span></div><div class="location"><span>Chiropractic Sports Specialist</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div><div class="name"><span>Dr. Aaron Krych</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Mayo Clinic</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div><div class="name"><span>Dr. Jonathan Ronquillo</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Asian Hospital and Medical Center</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div><div class="name"><span>Dr. Frank Smith</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>McMaster University</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div><div class="name"><span>Dr. Marcos Britto da Silva</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Federal University of Rio de Janeiro</span></div></div></div>
Please take a look at this: https://jsfiddle.net/wq96vbd5/
You will notice that when you click on "Click To Slide Left" the slider does slide left but the text gets super long and the animation just looks terrible.
The best and easiest way to do this, is with a plugin, I recommend the slick slider, because it's free, easy to learn and have a big community
To do that you'll need jquery, download the js and the css file from the slick page, and start using
Here is your example with the plugin in jsfiddle
HTML
<div id="oe-testemonials" class="oe-testemonials">
<div id="oe-slide">
<div class="oe-testemonial" style="display: inline-block;">
<div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div>
<div class="name"><span>Dr. Erin Hartigan</span></div>
<div class="title"><span>Assistant Professor of Physical Therapy</span></div>
<div class="location"><span>University of New England</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div>
<div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div>
<div class="name"><span>Dr. Hitesh Gopalan</span></div>
<div class="title"><span>Editor</span></div>
<div class="location"><span>orthopaedicprinciples.com</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div>
<div class="name"><span>Dr. David Gryfe</span></div>
<div class="title"><span>Chiropractor</span></div>
<div class="location"><span>Chiropractic Sports Specialist</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div>
<div class="name"><span>Dr. Aaron Krych</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Mayo Clinic</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div>
<div class="name"><span>Dr. Jonathan Ronquillo</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Asian Hospital and Medical Center</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div>
<div class="name"><span>Dr. Frank Smith</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>McMaster University</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div>
<div class="name"><span>Dr. Marcos Britto da Silva</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Federal University of Rio de Janeiro</span></div>
</div>
</div>
</div>
Javascript
$(document).ready(function(){
$('#oe-slide').slick({
slidesToShow: 3,
prevArrow: "<img id='oe-slide-left' src='/Images/left_arrow.png' alt='Click To Slide Left' class='slider-left-arrow'>",
nextArrow: "<img id='oe-slide-right' src='/Images/right_arrow.png' alt='Click To Slide Right' class='slider-right-arrow' style='display: none'>"
});
});
CSS
The same
I have a set of divs within a container. I want these divs to appear at the top of the div, one by one, using the fade-in and then fade-out effect. At the moment I am using a for loop to try and achieve this, but it is having a strange result. Instead of iterating through the class elements, it is displaying them all at once. I have been trying to figure out the problem, but I just cant seem to find the issue.
var customerComments = $(".customercomment");
for (var i = 0; i < customerComments.length; i++) {
$(customerComments[i]).fadeIn("slow", function() {
$(customerComments[i]).delay(600).fadeOut("slow");
})
}
/*STYLING FOR TESTIMONIALS SECTION */
#customerreviews {
background-color: #5a2a27;
min-height: 300px;
}
.customercomment {
margin-top: 20px auto;
padding: 20px 120px;
text-align: center;
display: none;
}
.customercomment p {
font-size: 30px;
line-height: 45px;
}
.customercomment h4 {
border-top: 1px solid white;
margin: 0 auto;
width: 50%;
padding-top: 20px;
}
.location {
font-size: 20px;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="testimonials">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h1>TESTIMONIALS FROM OUR MEMBERS</h1>
</div>
</div>
<div class="row text-center">
<div class="col-md-12" id="customerreviews">
<div class="customercomment text-center">
<p>"What I find to be the best thing about Elite Fitness Gym, other than the facilities they have to offer, is their overall service and the fact that they do not tie you down to a contract. They make things as easy as possible, inside and outside
the gym, in every way!"</p>
<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am blown away at how cheap the membership is and how much we get back in return. I take full advantage of the MMA classes they offer! I also like the fact that there is more than one class per week, which offers me flexibility - something
I need with my busy schedule."</p>
<h4>Darren Wise<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am really impressed with the amount of equipment Elite Fitness Gym offer. Even during rush hour I rarely find myself waiting around for equipment. They have certainly done a fantastic job there. I like to keep my workouts short but intense,
so its a great benefit for me."</p>
<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I've been around the block with a number of gyms, but what sets Elite Fitness Gym apart from the rest is their ability to always improve on their service and benefits. I dont feel the need to look elsewhere because this gym is always growing
and taking fantastic, ongoing care of its members."</p>
<h4>Jason Hardy<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am a big lover of swimming and the facilities that Elite Fitness Gym offer, not just with resistance workouts, but also with cardio, is what encouraged me to join in the first place. I must say that I am so happy with the decision as they
really do have great facilities here."</p>
<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>
</div>
<div class="customercomment text-center">
<p>"The thing I benefit from most about Elite Fitness Gym is their timings. They are open 24 hours a day so it gives me a chance to drop in and do my workout just before going to work on my nightshifts. I am grateful to be able to attend such a
great gym during those hours of the day."</p>
<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>
</div>
</div>
</div>
</div>
</section>
Thank you for the help!
I tested the following and it fades the divs in one by one. While it does not use the fadeOut function, it still uses the fadeIn function.
$($(".customercomment").get().reverse()).each(function(fadeInDiv) {
$(this).delay(fadeInDiv * 600).fadeIn(1000);
});
Easiest way I can think of is using the promises available in the returned value of the animation functions, and chain them using array#reduce
var customerComments = $(".customercomment");
function doit() {
[].reduce.call(customerComments, function(p, unused, i) {
var $comment = customerComments.eq(i);
return p.then(function() {
return $comment.fadeIn("slow").promise().then(function() {
return $comment.delay(600).fadeOut("slow").promise();
});
});
}, $.when()).then(doit);
}
doit();
/*STYLING FOR TESTIMONIALS SECTION */
#customerreviews {
background-color: #5a2a27;
min-height: 300px;
}
.customercomment {
margin-top: 20px auto;
padding: 20px 120px;
text-align: center;
display: none;
}
.customercomment p {
font-size: 30px;
line-height: 45px;
}
.customercomment h4 {
border-top: 1px solid white;
margin: 0 auto;
width: 50%;
padding-top: 20px;
}
.location {
font-size: 20px;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="testimonials">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h1>TESTIMONIALS FROM OUR MEMBERS</h1>
</div>
</div>
<div class="row text-center">
<div class="col-md-12" id="customerreviews">
<div class="customercomment text-center">
<p>"What I find to be the best thing about Elite Fitness Gym, other than the facilities they have to offer, is their overall service and the fact that they do not tie you down to a contract. They make things as easy as possible, inside and outside
the gym, in every way!"</p>
<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am blown away at how cheap the membership is and how much we get back in return. I take full advantage of the MMA classes they offer! I also like the fact that there is more than one class per week, which offers me flexibility - something
I need with my busy schedule."</p>
<h4>Darren Wise<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am really impressed with the amount of equipment Elite Fitness Gym offer. Even during rush hour I rarely find myself waiting around for equipment. They have certainly done a fantastic job there. I like to keep my workouts short but intense,
so its a great benefit for me."</p>
<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I've been around the block with a number of gyms, but what sets Elite Fitness Gym apart from the rest is their ability to always improve on their service and benefits. I dont feel the need to look elsewhere because this gym is always growing
and taking fantastic, ongoing care of its members."</p>
<h4>Jason Hardy<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"I am a big lover of swimming and the facilities that Elite Fitness Gym offer, not just with resistance workouts, but also with cardio, is what encouraged me to join in the first place. I must say that I am so happy with the decision as they
really do have great facilities here."</p>
<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>
</div>
<div class="customercomment text-center">
<p>"The thing I benefit from most about Elite Fitness Gym is their timings. They are open 24 hours a day so it gives me a chance to drop in and do my workout just before going to work on my nightshifts. I am grateful to be able to attend such a
great gym during those hours of the day."</p>
<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>
</div>
</div>
</div>
</div>
</section>
I wrote a custom swiper with alerts. Its code is in this link.
When I swipe from left to right or right to left, it gives alerts successfully.
Here, I've used only div for swiping action. Code is like this:
<div id="test" class="text-center"></div>
<script>
$(document).ready(function() {
$(".text-center").swiperight(function() {
/*$("#myCarousel").carousel('prev'); */
alert("Swiped to right");
});
$(".text-center").swipeleft(function() {
/*$("#myCarousel").carousel('next'); */
alert("Swiped to left");
});
});
</script>
If I change the id for body like this,
<style type="text/css">
#test{
position: absolute;
background-color: #0067ac;
width:100%;
height:500px;
}
.text-center{
position: relative;
margin-right: 3%;
margin-top: 5%;
}
<body id="test" class="text-center">
<script type="text/javascript">
$(document).ready(function() {
$("#test").swiperight(function() {
/*$("#myCarousel").carousel('prev'); */
alert("Swiped to right");
});
$("#test").swipeleft(function() {
/*$("#myCarousel").carousel('next'); */
alert("Swiped to left");
});
});
</script>
Then swiping works. link is here.
But if I apply it to my code, then it doesn't work for the body tag . My code is:
<div id = "mainDiv" class = "container" style="padding:0px;width:100%;height:100%">
<div id = "header">
<span id = "icons">
<span id = "menu"></span>
<span onclick="goBack()" id = "back"></span>
</span>
<span id = "title">
<span id="junos"> JUNOS </span><span id = "genius">GENIUS</span>
</span>
</div>
<div id ="body" class="container-fluid" style="position:relative;">
<!-- <div id="swiper"> -->
<div id="searchMenu" class="col-xs-4" style="height:400px; overflow-y:auto;padding:0px;display:none;min-width: 250px;background-color:transparent;">
</div>
<p class="text-center" onclick="goBack()" style="padding-top:12px;">Help</p>
<!-- Start -->
<ul class="list=unstyled text-justify" style="margin-right:20px;">
<li> JUNOS GENIUS is a fun way to improve your skills with Juniper Networks Junos operating system and prepare for technical certification. The Application is a virtual flashcard reader that includes decks of multiple choice questions for several Junos-based exams including JNCIA-Junos, JNCIS-ENT, JNCIS-SEC, and JNCIS-SP. You answer multiple-choice questions and get immediate feedback on accuracy of the answer. </li>
<li> Questions may be answered in Study Mode, Timed Test Mode, or Challenge Instructor Mode. </li>
<ul>
<li> In Study Mode, choose the question category that interests you and begin answering questions. The system will not track your score and no achievements are earned for correct answers. </li>
<li> To enter Timed Test Mode, choose any question category and then tap Timed Test. This will simulate a live exam and provide you with 60 minutes to answer 60 questions selected at random from among all categories in the deck. You will see percentage correct score on completion of 60 questions or at the end of 60 minutes (whichever comes first). </li>
<li>
To enter Challenge Instructor Mode, choose a question category then tap Challenge Instructor to challenge the ranks of instructors. Score higher on the category than the instructor to earn a device achievement. Device achievements are specific to question category. Instructors should be challenged, and beaten, repeatedly to earn higher quantities of device achievements for use in your ‘My Network’. Beating instructors becomes progressively more difficult as you work through the ranks.
</li>
</ul>
<li>My Network:
Device achievements (earned by beating instructors in Challenge Instructor Mode) are used to build network views in a handy network drawing tool called My Network. All Juniper Networks devices earned are available for addition to the My Network view. You are also able to add LAN segments, WAN segments, and end user devices including laptops, printers, and servers to the My Network view. And you have the ability to share your My Network diagram through email or social media.</li>
</ul>
<!-- End -->
</div>
</div>
#mainDiv {
background-image: url("../JunosImages/mob/junos_genius_P_960x720_question_blank_phone.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
}
/*custom js*/
$(document).ready(function() {
$("#mainDiv").swiperight(function() {
alert("Swiped to right");
});
$("#mainDiv").swipeleft(function() {
alert("Swiped to left");
});
});
This is the problem with your css.
I just updated the css and it worked fine :
Check out this fiddle plunker Code
Css Updations are here:
<style type="text/css">
#test{
position: absolute;
background-color: #0067ac;
width:100%;
height:500px;
}
.text-center{
position: relative;
margin-right: 3%;
margin-top: 5%;
}
</style>
I have tried this using the page sources but in the page source. The div tag i want is absent.
<div class="city-banner autumn livebox globalEvents">
<div class="cloud-3 content">
<div class="cloud-2">
<div class="cloud-1">
<div class="plane-left">
<div class="plane-right">
<div class="city">
<div class="ship left-course">
<div class="yacht">
<div class="precipitation">
<div class="lightning-1"></div>
<div class="lightning-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
while going through the Developer tools in chrom is was able to find the div i needed and (after i paused in debugger) then i could find the text i needed aswell.
<div class="bubble" style="margin-left: 537px; margin-top: 63px;"><div class="bubble-inner"><div class="bubble-text">barradell12 attacked ChaosViper</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 181px; margin-top: 113px;"><div class="bubble-inner"><div class="bubble-text">Nahid7 attacked FHC</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 1183px; margin-top: 7px;"><div class="bubble-inner"><div class="bubble-text">lol</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 615px; margin-top: 8px; opacity: 0.684062276342339;"><div class="bubble-inner"><div class="bubble-text">barradell12 mugged ChaosViper</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 283px; margin-top: 8px; opacity: 0.561107899969945;"><div class="bubble-inner"><div class="bubble-text">Someone mugged cheesejointsuk</div></div><div class="bubble-tail"></div></div><div class="bubble" style="display:none;"><div class="bubble-inner"><div class="bubble-text">rexxcii attacked black15</div></div><div class="bubble-tail"></div></div><div class="bubble" style="display:none;"><div class="bubble-inner"><div class="bubble-text">Someone hospitalized TheWalrus</div></div><div class="bubble-tail"></div></div></div>
</div>
Now ideally i would like the text like "xxxx attacked xxxx", "xxxxx hospitalized xxxxxx" to be pulled into a text file if possible.
P.s. the bubbles only last for a few seconds then they dissapear and more appear. So id like them all
Looks like you're trying to automate something for Torn?
The best and easiest way is to create some nice userscript with Javascript (maybe in combination with jQuery) and inject it in the page. This can be done with tools like Greasemonkey for firefox and Tampermonkey for chrome.
For the "how" to get it, query the path in a timer.
setTimeout(function(){
//Scan for popup
}, 1000);
On what the correct queries are; only one way to find out.
I have a header that is aligned correctly when I view it offline, as well as online using Safari. When I view it online with chrome it is incorrectly aligned, but if I refresh the page it will then align properly.
Here is the url to the website to observe the issue yourselves: http://viscovisco.com/ (refresh browser to see it fix itself, the issue only seems to happen in chrome).
Also feel free to inspect element. Let me know if you need further information.
Here is the HTML code for the section that seems to be working improperly online:
<div class = "container">
<div id="box1">
<span id="firstname" onmouseover="nameToMatt()" onmouseout="defaultMode()">VISCO</span>
<span id="lastname" onmouseover="nameToLexi()" onmouseout="defaultMode()">VISCO</span>
<br>
<span id="information"></span>
<br>
Design & Programming
</div>
<div id="rightBoxes">
<div id="box2">
<i>Est.</i> 2014.
<br>
Based in SF Bay Area
</div>
<div id="box3">
<div class="letter"> L </div> 510 541 2464
<br>
<div class="letter"> M </div> 510 367 6435
</div>
<div id="box4">
Hallo!
<br>
projects#viscovisco.com
</div>
</div>
</div>
Here is the associated CSS:
.container {
font-family: "Times New Roman", Times, serif;
font-size: 18.66px;
line-height: 22.4px;
min-width:960px;
}
.container > div {
display: inline-block;
}
#box1 {
width: 340px;
}
#rightBoxes {
float: right;
}
#rightBoxes > div {
float: left;
}
#box2 {
margin-right: 45px;
}
#box3 {
margin-right: 81px;
}
Here's a screen shot of both correct and incorrect formatting of the website. On the left is the incorrect format that I only see on the online website in Chrome broswer when I first open the website. On the right is the correct format which Chrome switches to if website is refreshed (this format is also seen offline and on Safari):
(image cuts a bit of the website off, you should be able to see full website and notice the behavior described by clicking the link provided above)